/* Figma desktop updates and approved 390px mobile layouts, 11 November 2026. */
/* These are the licensed ITC / Neue Haas files, not similarly named system fonts. */
@font-face{font-family:"ITC Garamond Book";src:url(fonts/garamond-book.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ITC Garamond Light";src:url(fonts/garamond-light.ttf) format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Roman";src:url(fonts/haas-roman.otf) format('opentype');font-weight:400;font-style:normal;font-display:swap}
.home-main h1,.home-main h2,.gallery-info h2{font-family:"ITC Garamond Book",Georgia,serif;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased}
.gallery-copy,.project-summary{font-family:"Neue Haas Roman",Arial,sans-serif;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased}
.gallery-copy strong{font-weight:400}
.workshop-cta{border-radius:0}
.workshop{overflow:visible}
.workshop-art{position:absolute;inset:0;overflow:hidden;z-index:-1}
.workshop-art::after{content:"";position:absolute;inset:0;background:#0004;z-index:1}
.workshop::after{display:none}
.workshop-photo{height:165.54%;z-index:0}
.workshop-spray{z-index:2;pointer-events:none}
.workshop-spray-left{position:absolute;z-index:2;pointer-events:none;left:0;top:-102px;width:177px;height:251px;overflow:hidden}
.workshop-spray-left img{position:absolute;width:128.81%;max-width:none;height:106.02%;left:-19.21%;top:-6%;object-fit:fill}
.workshop-content{position:relative;z-index:3}
.social-outline{position:absolute;z-index:-1;inset:-.5px -1px -.5px -.5px;max-width:none;width:calc(100% + 2px);height:76px;opacity:0;pointer-events:none}
.social-bar:is(:hover,:focus-within) .social-outline{opacity:1}
.social-bar a:focus-visible,.social-bar button:focus-visible{outline-offset:3px}
.person-contact-email .person-contact-icon img{width:18px;height:13px}
.person-contact-phone .person-contact-icon img{width:13px;height:16px}
.person-contact-value{font-family:TBWA,Arial,sans-serif;font-weight:500;font-size:10px}
.contact-art{width:min(161.2434vw,2438px);height:min(50.79365vw,768px);min-width:0;min-height:0}
.contact-label{font-weight:700}
.contact-address{font-size:19px;line-height:30px;font-style:normal}
.contact-general{font:300 32px/39px "ITC Garamond Light",Georgia,serif}
.contact-general a{text-decoration:underline;text-underline-offset:3px}
.contact-person{font-size:19px;line-height:28px}
.contact-person-name{font-weight:700}
.menu-toggle,.mobile-menu,.gallery-mobile-header,.gallery-story,.media-more{display:none}
.gallery-close-paint{display:none}
.gallery{overscroll-behavior:contain}
.gallery-info{overscroll-behavior:contain}

@media(max-width:700px){
  :root{--header:76px;--gutter:24px}
  .site-header{height:76px;display:flex;align-items:center;padding:0 24px;background:#000}
  .site-header .brand,.mobile-menu .brand,.gallery-mobile-header .brand{width:139px;height:19px;transform:none}
  .site-header .brand-letters,.mobile-menu .brand-letters,.gallery-mobile-header .brand-letters{left:5.555px;top:0;width:133.445px;height:18.793px}
  .site-header .brand-slash,.mobile-menu .brand-slash,.gallery-mobile-header .brand-slash{left:0;top:.4px;width:3.389px;height:14.238px}
  .site-header:has(.menu-toggle:not([hidden])) .desktop-navigation{display:none}
  .site-header:not(:has(.menu-toggle:not([hidden]))){height:auto;min-height:76px;display:block;padding-top:20px;padding-bottom:14px}
  .site-header:not(:has(.menu-toggle:not([hidden]))) .desktop-navigation{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;justify-content:space-between;margin-top:14px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;padding:12px 10px;width:44px;height:48px;margin-right:-4px;color:var(--yellow)}
  .menu-toggle span{height:2px;width:24px;background:currentColor;display:block;flex:none}
  .mobile-menu[open]{display:flex;flex-direction:column;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;overflow:auto;background:var(--paper);overscroll-behavior:contain}
  .mobile-menu-header{height:76px;flex:0 0 76px;background:#000;color:var(--yellow);padding:0 24px;display:flex;align-items:center;justify-content:space-between}
  .mobile-menu-close{background:transparent;color:var(--yellow);width:44px;height:48px;font:700 24px/30px TBWA;padding:0;margin-right:-10px}
  .mobile-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:96px 40px 32px;flex:1}
  .mobile-menu nav>a{font:300 48px/1.2 "ITC Garamond Light",Georgia,serif;text-decoration:none}
  .mobile-menu nav>a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  .mobile-menu .languages{font:500 18px/26px TBWA;margin:26px 0 0;gap:5px;color:#000}
  .mobile-menu .languages a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  .mobile-menu .languages [aria-current]{font-weight:700;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:6px}
  .mobile-menu-social{background:#000;color:var(--yellow);padding:28px 36px 28px;flex:none;min-height:157px}
  .mobile-menu-social .social-links{gap:24px}
  .mobile-menu-social .social-links a{padding:7px;width:44px;height:44px}
  .mobile-menu-social .social-links img{width:30px;height:30px}
  .mobile-menu-social .newsletter-open{font:500 16px/20px TBWA;margin-top:8px;padding:10px 0}
  .social-bar{transform:none;width:min(360px,100vw);height:52px;padding-left:24px;gap:22px;font-size:12px}
  .social-background{width:100%;height:52px}
  .social-outline{height:53px}
  .social-links{gap:7px;align-items:center}
  .social-bar .social-links a{width:30px;height:44px;display:grid;place-items:center}
  .social-bar .social-links img{width:24px;height:24px}
  .social-bar .newsletter-open{min-height:44px;padding:4px 0;font-size:12px}
  .social-bar--icons-only{width:190px}
  .social-bar--icons-only .social-background{width:100%}
  .site-footer,.site-footer:has(.privacy-links){height:auto;min-height:0;margin-top:0!important;padding:112px 24px 78px;background:#000;font-size:12px;line-height:20px}
  .site-footer::before{top:0}
  .footer-tagline{display:none}
  .footer-trio{top:34px;width:160px;height:51px;left:calc(50% - 80px)}
  .site-footer p{font-size:12px;line-height:20px;overflow-wrap:anywhere}
  .site-footer strong{font-size:14px}
  .site-footer small,.site-footer:has(.privacy-links) small{position:static;display:block;font-size:12px;margin-top:18px}
  .site-footer .privacy-links{margin-top:16px;gap:20px;font-size:14px}
  .people-backdrop,.people-spray{display:none}
  .people h1,.projects h1{font-size:56px;line-height:59px;margin-bottom:28px}
  .people,.projects{padding-top:32px}
  .project-name{font-size:28px;line-height:32px}
  .person-contact-value{font-size:13px}
  .person-contacts{opacity:1}
  .person-contact-icon{pointer-events:auto;width:36px;height:36px}
  .person-contact{height:36px;min-width:36px}
  .person-contact-value{height:36px;line-height:36px}
  .person-contacts{--contact-reserve:88px}
  .person-contacts.contacts-2{--contact-reserve:44px}
  .media{min-height:0;padding-bottom:60px}
  .media-more:not([hidden]){display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 24px;background:#000;color:#fff;margin-top:24px;font:500 15px/22px TBWA}
  .media-more:is(:hover,:focus-visible){color:var(--yellow)}
  .workshop{min-height:0;padding:65px 24px 70px}
  .workshop-spray-left{width:100px;height:142px;top:-56px}
  .workshop-spray{width:45%;opacity:.8}
  .workshop h2{font-size:43px;line-height:46px}
  .workshop-cta{max-width:100%;padding:12px 24px}
  .contact-main{min-height:0}
  .contact-art{top:0;width:100%;height:260px}
  .contact-art>img{position:static;width:100%;height:100%;object-fit:cover;max-width:100%}
  .contact{padding:118px 24px 80px}
  .contact h1{font:300 60px/63px "ITC Garamond Light",Georgia,serif}
  .contact-layout{margin-top:59px;padding-top:0;border-top:0;display:flex;flex-direction:column;gap:0}
  .contact-label{font:500 13px/19px TBWA;padding:0;margin-bottom:20px}
  .contact-address{font:400 18px/26px Haas,Arial,sans-serif}
  .contact-general{font:300 25px/36px "ITC Garamond Light",Georgia,serif;margin-top:22px}
  .contact-person{font:400 17px/25px Haas,Arial,sans-serif;margin-top:26px}
  .contact-person-name{font-size:18px}
  .newsletter{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:360px){
  .social-bar{padding-left:15px;gap:12px}
  .social-links{gap:4px}
  .mobile-menu nav{padding-left:24px;padding-right:24px}
  .mobile-menu nav>a{font-size:44px}
  .gallery-story .gallery-info{padding-left:24px;padding-right:24px}
  .gallery-story .gallery-info h2{font-size:var(--story-title-size,52px);line-height:1.05}
}
@media(prefers-reduced-motion:reduce){.gallery-story{scroll-behavior:auto}}

/* Mobile gallery geometry is selected by the document class below, not orientation. */

.person-contact-value{white-space:nowrap;-webkit-user-select:text;user-select:text}

@media(max-width:360px){
  .gallery-story .gallery-info{padding-left:24px;padding-right:24px}
  .gallery-story .gallery-info h2{font-size:var(--story-title-size,52px);line-height:1.05}
}

/* Mobile full-page story: only this view scrolls; background page is removed from layout. */
html.mobile-gallery-document,body.mobile-gallery-document{background:#222;overscroll-behavior-y:none}
body.mobile-gallery-document>:not(.gallery){display:none!important}
body.mobile-gallery-document .gallery[open]{display:block}
body.mobile-gallery-document .gallery-close-slot{position:sticky;top:76px;height:0;z-index:7}
body.mobile-gallery-document .gallery-backdrop{display:none}
body.mobile-gallery-document .gallery{position:relative;inset:auto;width:100%;height:auto;min-height:100svh;margin:0;max-width:none;max-height:none;background:#222;overflow:visible}
body.mobile-gallery-document .gallery::backdrop{background:#222}
body.mobile-gallery-document .gallery-mobile-header .brand{width:139px;height:19px;transform:none}
body.mobile-gallery-document .gallery-mobile-header .brand-letters{left:5.555px;top:0;width:133.445px;height:18.793px}
body.mobile-gallery-document .gallery-mobile-header .brand-slash{left:0;top:.4px;width:3.389px;height:14.238px}
body.mobile-gallery-document .gallery-mobile-header{position:sticky;top:0;left:auto;right:auto;height:76px;display:flex;align-items:center;padding:0 24px;background:#000;z-index:6}
body.mobile-gallery-document .gallery>.gallery-stage,body.mobile-gallery-document .gallery>.gallery-feedback,body.mobile-gallery-document .gallery>.paint-arrow{display:none}
body.mobile-gallery-document .gallery-story{display:block;position:relative;inset:auto;overflow:visible;background:#222;min-height:calc(100svh - 76px)}
body.mobile-gallery-document .gallery-story-intro{position:relative;isolation:isolate;background:#222}
body.mobile-gallery-document .gallery-story-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:brightness(.25)}
body.mobile-gallery-document .gallery-story .gallery-info{position:relative;display:flex;inset:auto;padding:90px 29px 36px;overflow:visible;text-align:left;gap:19px}
body.mobile-gallery-document .gallery-story .gallery-info>:first-child,body.mobile-gallery-document .gallery-story .gallery-info>:last-child{margin:0}
body.mobile-gallery-document .gallery-story .gallery-client{font:500 13px/19px TBWA}
body.mobile-gallery-document .gallery-story .gallery-info h2{font-size:var(--story-title-size,60px);line-height:1.05;margin:0;overflow-wrap:anywhere}
body.mobile-gallery-document .gallery-story .gallery-copy{font-size:18px;line-height:27px}
body.mobile-gallery-document .gallery-story .gallery-copy p+p{margin-top:25px}
body.mobile-gallery-document .gallery-story .gallery-details{font:500 13px/20px TBWA;margin:0;overflow-wrap:anywhere}
body.mobile-gallery-document .gallery-story-item{position:relative;width:100%;margin-inline:auto;background:transparent}
body.mobile-gallery-document .gallery-story-item>img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(var(--mobile-gallery-height,100svh) - 76px);margin-inline:auto}
body.mobile-gallery-document .gallery-story-item.is-loading:has(img),body.mobile-gallery-document .gallery-story-item.has-error:has(img){min-height:160px}
body.mobile-gallery-document .gallery-story-item.is-loading::after{content:'';position:absolute;left:calc(50% - 18px);top:calc(50% - 18px);width:36px;height:36px;border:3px solid #fecc0040;border-top-color:var(--yellow);border-radius:50%;animation:gallery-spin .8s linear infinite;pointer-events:none}
body.mobile-gallery-document .gallery-story-item:has(video){width:min(100%,calc((var(--mobile-gallery-height,100svh) - 76px) * var(--story-ratio,1.77777778)));aspect-ratio:var(--story-ratio,16/9);background:#000}
body.mobile-gallery-document .gallery-story-item>video{display:block;width:100%;height:100%;object-fit:contain}
body.mobile-gallery-document .gallery-story .gallery-video-play{width:64px}
body.mobile-gallery-document .gallery-story .story-error{padding:20px;color:#fff;background:#222;font:400 16px/24px Haas}
body.mobile-gallery-document .gallery-close{position:absolute;z-index:7;top:18px;right:18px;width:44px;height:44px;font-size:40px;background:transparent}
body.mobile-gallery-document .gallery-close>span{display:none}
body.mobile-gallery-document .gallery-close-paint{display:block;width:27px;height:23px;object-fit:contain}
body.mobile-gallery-document .gallery-close:focus-visible{outline-offset:2px}
@media(max-width:360px){body.mobile-gallery-document .gallery-story .gallery-info{padding-inline:24px}}

/* DESIGN-REFINE1: approved body sizes and consistent footer metadata. */
.intro-columns p,.mission-body p,.workshop-content p,.gallery-copy,.project-summary{font-size:22px;line-height:34px}
.site-footer .privacy-links{font-size:inherit;line-height:inherit}
@media(max-width:700px){
  .intro-columns p,.mission-body p,.workshop-content p,.gallery-copy,.project-summary{font-size:18px;line-height:27px}
}

/* Hover does not pause either row. JS owns only the draggable logo animation. */
.clients:hover .logo-track{animation-play-state:running}
.clients .logo-viewport[data-logo-draggable]{cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.clients .logo-viewport[data-logo-draggable] .logo-track{animation:none!important}
.clients .logo-viewport[data-logo-draggable] img{-webkit-user-drag:none}
.clients .logo-viewport.is-dragging{cursor:grabbing}
.clients .logo-viewport:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}