/* Fonts: Cormorant Garamond and Manrope, SIL Open Font License 1.1 — see /assets/fonts/OFL.txt */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400-italic.a3b976adc9.woff2") format("woff2")}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400.49fa4230ae.woff2") format("woff2")}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/manrope-400.0c113740b3.woff2") format("woff2")}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/manrope-500.ea82dde3f4.woff2") format("woff2")}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/manrope-600.593989d72f.woff2") format("woff2")}
:root{--bg:#11110f;--panel:#1c1b18;--paper:#eee9df;--ink:#f0ece3;--muted:#aaa69d;--copper:#d6a57b;--line:rgba(240,236,227,.19);--dark:#24231f;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--gutter:64px;--s1:24px;--s2:48px;--s3:80px;--s4:120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:6px}
button:disabled{cursor:default}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:400}
h1,h2{font-family:var(--serif);line-height:.99;letter-spacing:-.025em}
h1{font-size:104px}
h2{font-size:72px}
h3{line-height:1.28}
/* Line breaking: even heading lines, no lone last word in text; .nw keeps hyphenated words whole (see deploy/render.mjs). */
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
p,li,dd,figcaption{text-wrap:pretty}
.nw{white-space:nowrap}
em{font-weight:400;color:var(--copper)}
.wrap{width:100%;max-width:1600px;padding:0 var(--gutter);margin:auto}
/* Vertical rhythm: block spacing comes from the --s1…--s4 scale (redefined for tablet and phone). */
.section{padding-top:var(--s4);padding-bottom:var(--s4)}
.eyebrow{font-size:12px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);font-weight:600}
/* One eyebrow style everywhere: section paragraph rules (".page-intro p", ".statement p"…) must not restyle it. */
#app .eyebrow{font-size:12px;line-height:1.5;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:var(--copper);margin-bottom:20px}
#app .statement .eyebrow,#app .brief-box .eyebrow{color:#79573c}
.muted{color:var(--muted)}
.small{font-size:14px}
.body-large{font-size:21px;line-height:1.65}
.max-copy{max-width:620px}
.rule{border-top:1px solid var(--line)}
.split-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:var(--s2)}
.split-heading p{max-width:375px;color:var(--muted)}
.split-heading .eyebrow{margin-bottom:15px}
.button{min-height:52px;padding:14px 24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:14px;font-weight:500;border-radius:2px;transition:background .18s,color .18s,border-color .18s}
.button.primary{background:var(--copper);border-color:var(--copper);color:#191611}
.button:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.button.primary:hover{background:#ebbf98;border-color:#ebbf98}
.text-link{display:inline-block;padding:8px 0;border-bottom:1px solid currentColor;font-size:14px;line-height:1.4}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.chip{display:inline-block;padding:5px 10px;border:1px solid var(--line);font-size:12px;line-height:1.5;letter-spacing:.03em}
.skip-link{position:absolute;left:20px;top:-70px;background:var(--ink);color:var(--bg);padding:12px 20px;z-index:100}
.skip-link:focus{top:12px}
/* Header bar sticks to the top; app.js hides it while scrolling down and shows it on scroll up. */
.header-bar{position:sticky;top:0;z-index:30;background:var(--bg);transition:transform .3s ease}
.header-bar.is-hidden{transform:translateY(-100%)}
.site-header{height:104px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;justify-content:space-between;gap:38px;border-bottom:1px solid var(--line);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.monogram{font-family:var(--serif);font-size:42px;line-height:1;letter-spacing:-.08em}
.brand-copy{font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.desktop-nav{display:flex;gap:25px;align-items:center;justify-content:flex-end;margin-left:0;min-width:0}
.desktop-nav a{font-size:13px;color:var(--muted);padding:12px 0;position:relative;white-space:nowrap}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--ink)}
.desktop-nav a[aria-current=page]:after{content:'';height:1px;background:var(--copper);position:absolute;left:0;right:0;bottom:5px}
.header-contact{font-size:13px;border-bottom:1px solid var(--copper);padding:10px 0;color:var(--copper);white-space:nowrap}
.menu-toggle{display:none;background:none;color:var(--ink);border:0;font-size:14px;padding:12px 0 12px 18px}
.menu-toggle span{display:inline-block;margin-left:12px;font-size:19px}
.mobile-menu{display:none}
.breadcrumbs{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px;padding-top:33px}
.breadcrumbs a:hover{color:var(--copper)}
.page-intro{padding-top:var(--s2);padding-bottom:var(--s2)}
.page-intro .eyebrow{margin-bottom:20px}
.page-intro p{max-width:580px;margin-top:25px;color:var(--muted);font-size:19px}
.page-intro .split-heading{margin:0}
.page-intro .index-no{font-family:var(--serif);font-size:128px;line-height:1;color:#423d34}
.home-hero{padding-top:var(--s2);display:grid;grid-template-columns:1.18fr 1fr;gap:72px;align-items:center}
.hero-copy{padding:20px 0}
.hero-copy h1{font-size:148px;line-height:.85;letter-spacing:-.04em;margin:29px 0 35px}
.hero-copy h1 span{display:block}
.hero-copy h1 span+span{margin-left:64px;color:var(--copper);font-style:italic}
.hero-role{font-size:15px;letter-spacing:.015em;margin-bottom:15px;color:var(--ink)}
.hero-desc{font-size:18px;color:var(--muted);max-width:440px}
.hero-copy .actions{margin-top:28px}
.hero-portrait{position:relative;padding:0 18px 18px 0}
.hero-portrait:after{content:'';position:absolute;left:18px;top:18px;right:0;bottom:0;border:1px solid var(--copper);z-index:-1;opacity:.5}
.hero-portrait img{width:100%;height:560px;object-fit:cover;object-position:center 42%}
.portrait-note{position:absolute;left:25px;right:43px;bottom:39px;display:flex;align-items:center;justify-content:space-between;color:white;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-top:45px;background:linear-gradient(transparent,rgba(0,0,0,.35));text-shadow:0 1px 8px #000;pointer-events:none}
.hero-bottom{margin-top:var(--s2);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-bottom b{font-weight:500;color:var(--copper)}
.selected-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:25px}
.project-card{min-width:0;display:block}
.project-image{overflow:hidden;background:var(--panel);position:relative}
.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.project-card:hover .project-image img:not(.fill){transform:scale(1.025)}
.project-image .fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.45);transform:scale(1.15)}
.project-image .fill+img{position:relative}
.selected-grid .project-image{height:425px}
.selected-grid .project-card:nth-child(2) .project-image{height:425px}
.project-caption{display:flex;gap:15px;justify-content:space-between;align-items:flex-start;padding-top:20px}
.project-caption h3{font-family:var(--serif);font-size:35px}
.project-caption p{font-size:12px;color:var(--muted);margin-top:8px}
.project-caption .caption-index{font-size:12px;color:var(--copper);padding-top:8px}
.play{position:absolute;bottom:20px;left:20px;width:46px;height:46px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(18,18,16,.28);backdrop-filter:blur(7px)}
.play svg{width:14px;height:14px;margin-left:2px}
.project-count{font-family:var(--serif);font-size:20px;color:var(--copper);vertical-align:top;display:inline-block;margin-left:10px;margin-top:6px}
.center-action{text-align:center;margin-top:43px}
.filmstrip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:36px}
.filmstrip .project-image{height:230px}
.filmstrip h3{font-size:27px}
.statement{background:var(--paper);color:var(--dark)}
.statement em{color:#906748}
.statement-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:85px;align-items:start}
.statement .eyebrow{color:#79573c}
.statement h2{font-size:73px}
.statement p{font-size:19px;color:#615c52;margin:25px 0}
.statement .text-link{color:#3a3027}
.piglette-preview{position:relative}
.piglette-preview img{width:100%;height:350px;object-fit:cover;background:#fff}
.piglette-preview .mini-label{margin-top:15px;font-size:12px;letter-spacing:.1em;color:#4e463e;text-transform:uppercase}
.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;padding-top:var(--s2)}
.direction{border-top:1px solid var(--line);padding-top:26px}
.direction .num{color:var(--copper);font-size:12px;letter-spacing:.12em}
.direction h3{font-family:var(--serif);font-size:36px;margin:17px 0 12px}
.direction p{font-size:15px;color:var(--muted)}
.direction a{margin-top:15px}
.media-row{display:grid;grid-template-columns:160px 1fr 150px;gap:40px;align-items:start;border-top:1px solid var(--line);padding:28px 0}
.media-row:last-child{border-bottom:1px solid var(--line)}
.media-source{font-size:13px;color:var(--copper);letter-spacing:.025em}
.media-row h3{font-family:var(--serif);font-size:31px}
.media-row p{font-size:14px;color:var(--muted);margin-top:12px;max-width:62ch}
.media-row time{display:block;color:var(--muted);font-size:12px;margin-top:8px}
.media-row .text-link{justify-self:end}
.filter-bar{display:flex;align-items:center;gap:12px;padding:8px 0 28px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:36px}
.filter{background:transparent;border:1px solid var(--line);border-radius:2px;padding:11px 18px;color:var(--muted);font-size:13px;min-height:45px}
.filter:hover{color:var(--ink);border-color:var(--muted)}
.filter[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.results-count{font-size:12px;color:var(--muted);margin-left:auto}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 27px}
.work-grid .project-image{height:310px}
.work-grid .project-image.vertical img{object-fit:contain}
.work-grid .project-caption h3{font-size:29px;line-height:1.12}
.work-grid .project-caption p{font-size:12px}
.work-grid .card-description{font-size:14px;color:var(--muted);line-height:1.7;margin-top:13px}
.work-grid .project-card[hidden]{display:none}
.works-bottom{margin-top:var(--s3);margin-bottom:10px;border-top:1px solid var(--line);padding-top:35px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.works-bottom p{max-width:630px;color:var(--muted);font-size:18px}
.case-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;padding-bottom:var(--s2)}
.case-intro .eyebrow{margin-bottom:20px}
.case-intro h1{font-size:104px}
.case-intro p{font-size:19px;color:var(--muted);max-width:450px;padding-bottom:7px}
.case-intro.long h1{font-size:72px;line-height:1.02}
.case-stage{position:relative;background:#050505;display:flex;align-items:center;justify-content:center;min-height:540px}
.case-stage .player{position:relative;width:min(100%,1209px);aspect-ratio:16/9;background:#050505}
.case-stage.vertical .player{width:360px;height:640px;aspect-ratio:auto}
.case-stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-stage iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* Play button of the host that will open (Rutube or YouTube), covering the whole poster. */
.play-button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0;border:0;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.22));cursor:pointer}
.play-button svg{display:block;transition:transform .2s ease}
.play-button .bg{transition:fill .2s ease,fill-opacity .2s ease}
.play-button .rt .bg{fill:#00a1e7}
.play-button .yt{display:none}
.play-button .yt .bg{fill:#f00;fill-opacity:.9}
.player[data-provider=youtube] .play-button .yt{display:block}
.player[data-provider=youtube] .play-button .rt{display:none}
.play-button:hover svg,.play-button:focus-visible svg{transform:scale(1.08)}
.play-button:hover .rt .bg,.play-button:focus-visible .rt .bg{fill:#2bb5f2}
.play-button:hover .yt .bg,.play-button:focus-visible .yt .bg{fill-opacity:1}
.play-button:focus-visible{outline:2px solid var(--copper);outline-offset:-6px}
.player.is-playing .play-button{display:none}
.case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-bottom:1px solid var(--line);padding:29px 0}
.case-meta dt{color:var(--muted);font-size:12px;letter-spacing:.06em;margin-bottom:8px}
.case-meta dd{margin:0;font-size:15px}
.case-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;margin:var(--s3) 0}
.case-story h2{font-size:59px;max-width:420px}
.case-story p{font-size:19px;color:var(--muted);max-width:660px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.related-grid .project-image{height:290px}
.related-grid h3{font-size:32px}
.next-case{border-top:1px solid var(--line);padding-top:32px;margin-bottom:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.next-case h2{font-size:48px}
.after-grid{display:none}
.about-opening{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center;padding-top:var(--s2);padding-bottom:var(--s3)}
.about-photo img{width:100%;height:620px;object-fit:cover}
.about-photo figcaption{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:15px;color:var(--muted)}
.about-copy h1{font-size:104px;margin:23px 0 27px}
.about-copy p{font-size:19px;color:var(--muted);margin-bottom:19px;max-width:585px}
.about-copy .signature{font-family:var(--serif);font-size:36px;font-style:italic;color:var(--copper);margin-top:26px}
.about-values{padding-top:var(--s3);padding-bottom:var(--s3)}
.about-values .body-large{max-width:1000px;font-size:32px;line-height:1.5;font-family:var(--serif);color:var(--ink)}
.timeline{margin-top:var(--s2)}
.timeline-row{display:grid;grid-template-columns:170px 1fr 1fr;gap:45px;border-top:1px solid var(--line);padding:31px 0}
.timeline-row:last-child{border-bottom:1px solid var(--line)}
.timeline-year{font-family:var(--serif);color:var(--copper);font-size:51px;line-height:1}
.timeline-row h3{font-family:var(--serif);font-size:31px}
.timeline-row p{font-size:14px;color:var(--muted)}
.source-note{margin-top:23px;color:var(--muted);font-size:12px}
.source-note a{text-decoration:underline;text-underline-offset:3px}
.about-cta{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.about-cta h2{font-size:59px}
.about-cta p{font-size:18px;color:var(--muted);margin-bottom:25px}
.piglette-title{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:var(--s2) 0}
.piglette-title h1{font-size:150px;letter-spacing:-.04em}
.piglette-title p{max-width:450px;font-size:19px;color:var(--muted)}
.piglette-stage{position:relative}
.piglette-stage img{width:100%;height:440px;object-fit:contain;background:#fff}
.piglette-stage figcaption{margin-top:15px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.piglette-summary{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;margin-top:var(--s2);margin-bottom:var(--s3)}
.piglette-summary h2{font-size:61px}
.piglette-summary p{font-size:19px;color:var(--muted);margin-bottom:22px}
.brand-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;gap:35px}
.brand-facts b{display:block;font-family:var(--serif);font-size:49px;color:var(--copper);line-height:1;margin-bottom:14px;font-weight:400}
.brand-facts span{font-size:13px;color:var(--muted)}
.brand-project{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.brand-project.reverse .brand-project-img{order:2}
.brand-project-img{background:#fff}
.brand-project-img img{width:100%;height:490px;object-fit:cover}
.brand-project h2{font-size:65px;margin:18px 0 24px}
.brand-project p{font-size:17px;color:var(--muted);margin-bottom:23px}
.brand-project .fact{font-family:var(--serif);font-size:65px;color:var(--copper);margin-bottom:0;line-height:1}
.charity-band{background:#28271f;padding:65px 72px;display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;margin-top:var(--s3)}
.section+.charity-band{margin-top:0}
.charity-band h2{font-size:59px;margin-top:20px}
.charity-band p{font-size:18px;color:#c7c2b6;margin-bottom:22px}
.press-feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;background:var(--panel);padding:40px;margin:0 0 var(--s2);align-items:center}
.press-feature img{width:100%;height:365px;object-fit:cover}
.press-feature h2{font-size:58px;margin:16px 0 18px}
.press-feature p{font-size:16px;color:var(--muted);margin-bottom:20px}
.press-contact{display:flex;justify-content:space-between;align-items:center;gap:50px;padding:var(--s2) 0 0}
.press-contact h2{font-size:55px}
.press-contact p{font-size:17px;color:var(--muted);max-width:500px;margin:20px 0}
.bio-panel{border:1px solid var(--line);padding:36px;margin-top:var(--s2);display:grid;grid-template-columns:1fr 2fr;gap:40px}
.bio-panel h3{font-family:var(--serif);font-size:34px}
.bio-panel p{color:var(--muted);font-size:16px;max-width:64ch}
.bio-panel .button{margin-top:20px}
.collab-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center;padding:var(--s2) 0 var(--s3)}
.collab-hero h1{font-size:113px;margin:25px 0}
.collab-hero p{font-size:18px;color:var(--muted);max-width:575px;margin-bottom:30px}
.collab-hero img{height:485px;width:100%;object-fit:cover;object-position:65% 50%}
.service-list{border-top:1px solid var(--line)}
.service-item{display:grid;grid-template-columns:65px 1fr 1fr;gap:35px;border-bottom:1px solid var(--line);padding:35px 0}
.service-item .num{color:var(--copper);font-size:13px;padding-top:8px}
.service-item h3{font-family:var(--serif);font-size:38px}
.service-item p{font-size:15px;color:var(--muted)}
.service-item .text-link{font-size:13px;margin-top:12px}
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:var(--s2)}
.process-grid article{padding-top:24px;border-top:1px solid var(--line)}
.process-grid .step{font-family:var(--serif);color:var(--copper);font-size:43px}
.process-grid h3{font-size:20px;margin:15px 0 12px}
.process-grid p{font-size:15px;color:var(--muted)}
.brief-box{background:var(--paper);color:var(--dark);padding:54px 60px;display:grid;grid-template-columns:1fr 1fr;gap:70px}
.brief-box h2{font-size:63px}
.brief-box p{color:#625e54;font-size:17px;margin:20px 0}
.brief-box .eyebrow{color:#79573c}
.brief-box ul{padding-left:21px;font-size:17px;color:#504a42;margin:0}
.brief-box li{margin-bottom:11px}
.brief-box .button{background:#23211d;color:#fff;border-color:#23211d;margin-top:20px}
.brief-box .button:hover{background:#5a4030}
.contact-main{padding-top:var(--s3);padding-bottom:var(--s3);display:grid;grid-template-columns:1.28fr .72fr;gap:95px;align-items:start}
.contact-main h1{font-size:119px;margin:24px 0 31px}
.contact-main .contact-intro{font-size:20px;color:var(--muted);max-width:575px;margin-bottom:39px}
.contact-portrait{margin-top:28px;position:relative}
.contact-portrait img{width:100%;height:456px;object-fit:cover}
.contact-portrait figcaption{font-family:var(--serif);font-size:31px;line-height:1.1;font-style:italic;color:var(--copper);margin-top:17px}
.contact-channel{padding:23px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}
.contact-channel:last-child{border-bottom:1px solid var(--line)}
.contact-channel span{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.contact-channel .contact-address{font-family:var(--serif);font-size:36px;line-height:1.3;overflow-wrap:anywhere}
.contact-channel .text-link{font-size:12px;flex:none}
.copy-button{display:inline-block;background:transparent;border:0;border-bottom:1px solid currentColor;color:var(--ink);font-size:12px;line-height:1.4;padding:8px 0;white-space:nowrap}
.contact-prompt{border-top:1px solid var(--line);padding-top:var(--s2);padding-bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:75px}
.contact-prompt h2{font-size:50px}
.contact-prompt p{font-size:17px;color:var(--muted);margin-bottom:24px}
.contact-topics{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}
.topic{border:1px solid var(--line);font-size:12px;color:var(--muted);padding:7px 12px}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;padding:15px 25px;background:var(--copper);color:#171410;z-index:99;font-size:14px;box-shadow:0 4px 25px #0005}
.toast[hidden]{display:none}
.site-footer{margin-top:var(--s3);border-top:1px solid var(--line)}
main>.section:last-child,main>.wrap:last-child>.section:last-child{padding-bottom:var(--s3)}
main:has(>.section:last-child,>.wrap:last-child>.section:last-child)+.site-footer{margin-top:0}
.footer-top{padding:var(--s3) 0 var(--s2);display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.footer-top h2{font-size:82px;line-height:.97}
.footer-top h2 em{display:block}
.footer-top p{font-size:14px;color:var(--muted);margin-bottom:22px;max-width:325px}
.footer-bottom{border-top:1px solid var(--line);padding:25px 0 30px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px;color:var(--muted)}
.footer-bottom .footer-links{display:flex;gap:24px}
.footer-bottom a:hover{color:var(--copper)}
.footer-simple .footer-top{display:none}
.not-found{min-height:65vh;padding:100px var(--gutter)}
.not-found p{margin:25px 0}
.site-header{display:block}
.site-header .brand{position:absolute;left:0;top:30px}
.desktop-nav{position:absolute;right:172px;top:29px;width:520px;margin:0;display:flex;justify-content:space-between;gap:0}
.header-contact{position:absolute;right:0;top:29px}
@media(min-width:1600px) {
  :root{--gutter:80px}
}
@media(max-width:1180px) {
  :root{--gutter:40px}
  .desktop-nav{gap:16px}
  .desktop-nav a,.header-contact{font-size:12px}
  .brand-copy{display:none}
  .home-hero{gap:42px}
  .hero-copy h1{font-size:122px}
  .hero-copy h1 span+span{margin-left:25px}
  .hero-portrait img{height:505px}
  .statement-grid{gap:50px}
  .about-opening{gap:55px}
  .contact-main{gap:55px}
  .contact-main h1{font-size:100px}
  .contact-channel .contact-address{font-size:31px}
  .collab-hero{gap:45px}
  .collab-hero h1{font-size:94px}
  .selected-grid .project-image{height:355px}
  .work-grid .project-image{height:275px}
  .case-intro h1{font-size:90px}
  .case-intro.long h1{font-size:62px}
  .case-story{gap:55px}
  .brand-project{gap:45px}
  .brand-project-img img{height:400px}
}
@media(max-width:900px) {
  :root{--gutter:28px;--s2:40px;--s3:64px;--s4:80px}
  .desktop-nav,.header-contact{display:none}
  .menu-toggle{display:block}
  .brand-copy{display:block}
  .site-header{height:84px;grid-template-columns:1fr auto}
  .site-header .brand{top:21px}
  .menu-toggle{position:absolute;right:0;top:14px;width:auto;min-width:85px;margin:0}
  .mobile-menu{position:fixed;inset:84px 0 0;background:var(--bg);z-index:19;overflow:auto;padding:38px var(--gutter)}
  .mobile-menu.open{display:block}
  .mobile-menu a{display:block;font-family:var(--serif);font-size:40px;line-height:1.5;border-bottom:1px solid var(--line);padding:4px 0}
  .mobile-menu .menu-contacts{margin-top:35px}
  .mobile-menu .menu-contacts a{font-family:var(--sans);font-size:15px;border:0}
  .mobile-menu .eyebrow{margin-bottom:24px}
  .home-hero{gap:35px}
  .hero-copy h1{font-size:95px}
  .hero-role{font-size:13px}
  .hero-desc{font-size:16px}
  .hero-portrait img{height:475px}
  .hero-copy .button{padding:12px 16px;font-size:12px}
  h2{font-size:58px}
  .statement-grid{gap:35px}
  .statement h2{font-size:58px}
  .statement p{font-size:17px}
  .piglette-preview img{height:300px}
  .selected-grid .project-image,.selected-grid .project-card:nth-child(2) .project-image{height:310px}
  .directions{gap:25px}
  .direction h3{font-size:30px}
  .work-grid{grid-template-columns:1fr 1fr}
  .work-grid .project-image{height:310px}
  .about-opening{gap:40px}
  .about-copy h1{font-size:82px}
  .about-copy p{font-size:16px}
  .about-photo img{height:550px}
  .timeline-row{grid-template-columns:120px 1fr;gap:30px}
  .timeline-row p{grid-column:2}
  .timeline-row h3{align-self:center}
  .piglette-title h1{font-size:116px}
  .piglette-title p{max-width:330px;font-size:16px}
  .piglette-summary{gap:45px}
  .piglette-summary h2{font-size:50px}
  .piglette-summary p{font-size:17px}
  .brand-project h2{font-size:52px}
  .charity-band{padding:45px;gap:45px}
  .charity-band h2{font-size:48px}
  .press-feature{gap:35px;padding:28px}
  .press-feature h2{font-size:48px}
  .press-feature img{height:360px}
  .case-intro{gap:40px}
  .case-intro h1{font-size:79px}
  .case-intro.long h1{font-size:52px}
  .case-intro p{font-size:16px}
  .case-stage{min-height:0}
  .case-story{gap:40px}
  .case-story h2{font-size:47px}
  .case-story p{font-size:17px}
  .collab-hero h1{font-size:79px}
  .collab-hero p{font-size:16px}
  .collab-hero img{height:455px}
  .service-item{grid-template-columns:38px 1fr 1fr;gap:25px}
  .service-item h3{font-size:32px}
  .brief-box{padding:40px;gap:45px}
  .brief-box h2{font-size:53px}
  .contact-main{gap:35px}
  .contact-main h1{font-size:80px}
  .contact-main .contact-intro{font-size:17px}
  .contact-channel{gap:12px;flex-wrap:wrap}
  .contact-channel .contact-address{font-size:29px}
  .contact-portrait img{height:415px}
  .footer-top h2{font-size:67px}
}
@media(max-width:620px) {
  :root{--gutter:22px;--s1:16px;--s2:32px;--s3:48px;--s4:64px}
  body{font-size:16px;line-height:1.65}
  .site-header{height:78px}
  .site-header .brand{top:20px}
  .menu-toggle{top:12px}
  .monogram{font-size:38px}
  .brand-copy{font-size:11px}
  .brand{gap:10px}
  .mobile-menu{top:78px;padding-top:30px}
  .mobile-menu a{font-size:41px}
  .menu-toggle{font-size:13px}
  #app .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:16px}
  .button{min-height:49px;padding:12px 19px;font-size:13px}
  .actions{gap:12px}
  h1{font-size:68px}
  h2{font-size:49px}
  .body-large{font-size:18px}
  .small{font-size:13px}
  .split-heading{display:block;margin-bottom:var(--s2)}
  .split-heading p{font-size:15px;margin-top:18px}
  .split-heading .text-link{margin-top:20px}
  .breadcrumbs{font-size:11px;padding-top:25px;gap:7px}
  .page-intro{padding-top:var(--s2);padding-bottom:var(--s2)}
  .page-intro h1{font-size:69px}
  .page-intro p{font-size:16px;margin-top:18px}
  .page-intro .index-no{display:none}
  .home-hero{padding-top:24px;display:flex;flex-direction:column;gap:0;align-items:stretch}
  /* Phone: name and role, then the photo, then the description and buttons. */
  .hero-copy{display:contents}
  .hero-copy .eyebrow{display:none}
  .hero-copy h1{font-size:clamp(74px,24vw,96px);line-height:.88;margin:0 0 27px}
  .hero-copy h1 span+span{font-size:.86em;margin-left:20px}
  .hero-role{font-size:12px;margin-bottom:30px;line-height:1.7}
  .hero-desc{font-size:16px;line-height:1.65;max-width:320px;order:2;margin-top:28px}
  .hero-copy .actions{margin-top:24px;flex-wrap:nowrap;gap:11px;order:2}
  .hero-copy .button{font-size:12px;padding:12px 16px;min-height:48px}
  .hero-portrait{padding-right:12px;padding-bottom:12px;width:100%;max-width:none;order:1}
  .hero-portrait:after{left:12px;top:12px}
  .hero-portrait img{height:410px;width:100%;object-position:center 37%}
  .portrait-note{left:18px;right:30px;bottom:27px;font-size:11px}
  .hero-bottom{margin-top:var(--s2);padding:20px 0;gap:22px;align-items:flex-start;line-height:1.7;font-size:11px;letter-spacing:.09em}
  .hero-bottom span{max-width:58%}
  .hero-bottom b{text-align:right;font-size:11px;max-width:38%}
  .selected-grid{grid-template-columns:1fr;gap:31px}
  .selected-grid .project-image,.selected-grid .project-card:nth-child(2) .project-image{height:230px}
  .project-caption{padding-top:15px}
  .project-caption h3{font-size:31px}
  .project-caption p{font-size:12px;margin-top:6px}
  .project-caption .caption-index{font-size:12px}
  .play{left:14px;bottom:14px;width:40px;height:40px}
  .center-action{margin-top:33px}
  /* Phone: the three smaller works scroll sideways instead of stacking. */
  .filmstrip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:31px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 4px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .filmstrip::-webkit-scrollbar{display:none}
  .filmstrip .project-card{flex:0 0 82%;scroll-snap-align:start}
  .filmstrip .project-image{height:220px}
  .filmstrip h3{font-size:27px}
  .top-link{display:none}
  .after-grid{display:block;margin-top:var(--s2)}
  .statement-grid{grid-template-columns:1fr;gap:32px}
  .statement h2{font-size:56px}
  .statement p{font-size:16px;margin:21px 0}
  .piglette-preview img{height:235px;object-fit:cover}
  .piglette-preview .mini-label{font-size:11px}
  .directions{grid-template-columns:1fr;gap:28px;padding-top:10px}
  .direction{padding-top:23px}
  .direction h3{font-size:33px;margin:10px 0 12px}
  .direction p{font-size:15px}
  .media-row{grid-template-columns:1fr;gap:14px;padding:27px 0}
  .media-source{font-size:12px}
  .media-row time{display:inline-block;margin-left:13px;margin-top:0}
  .media-row h3{font-size:29px}
  .media-row p{font-size:14px}
  .media-row .text-link{justify-self:start;margin-top:0;font-size:13px}
  .filter-bar{gap:8px;padding:0 0 23px;margin-bottom:28px}
  .filter{font-size:11px;padding:10px 12px;min-height:43px}
  .results-count{width:100%;margin:8px 0 0;font-size:11px}
  .work-grid{grid-template-columns:1fr;gap:34px}
  .work-grid .project-image{height:265px}
  .work-grid .project-image.vertical{height:330px}
  .work-grid .project-caption h3{font-size:33px}
  .work-grid .project-caption p{font-size:12px}
  .work-grid .card-description{font-size:14px;margin-top:12px}
  .works-bottom{display:block;margin-top:var(--s3);padding-top:28px}
  .works-bottom p{font-size:16px;margin-bottom:22px}
  .case-intro{display:block;padding-bottom:var(--s2)}
  .case-intro h1{font-size:min(73px,19vw)}
  .case-intro.long h1{font-size:min(54px,14vw)}
  .case-intro p{font-size:16px;margin-top:22px}
  .case-intro .eyebrow{margin-bottom:20px}
  .case-stage{margin:0 calc(-1 * var(--gutter));min-height:0}
  .case-stage.vertical .player{width:304px;height:540px}
  .case-meta{grid-template-columns:1fr;gap:21px;padding:27px 0}
  .case-meta>div{display:grid;grid-template-columns:100px 1fr;gap:13px}
  .case-meta dt{font-size:11px;margin:2px 0}
  .case-meta dd{font-size:14px}
  .case-story{grid-template-columns:1fr;gap:25px;margin:var(--s3) 0}
  .case-story h2{font-size:49px}
  .case-story p{font-size:17px}
  .related-grid{grid-template-columns:1fr;gap:30px}
  .related-grid .project-image{height:225px}
  .related-grid h3{font-size:31px}
  .next-case{display:block;margin-bottom:28px}
  .next-case h2{font-size:43px}
  .next-case .text-link{margin-top:18px}
  .about-opening{display:flex;flex-direction:column-reverse;gap:35px;padding-top:var(--s2);padding-bottom:var(--s3);align-items:stretch}
  .about-copy h1{font-size:75px;margin:23px 0 22px}
  .about-copy p{font-size:16px;margin-bottom:17px}
  .about-copy .signature{font-size:31px;margin-top:23px}
  .about-photo img{height:428px;object-position:center 42%}
  .about-photo figcaption{font-size:11px}
  .about-values{padding:var(--s3) 0}
  .about-values .body-large{font-size:29px;line-height:1.37}
  .timeline{margin-top:var(--s2)}
  .timeline-row{display:block;padding:27px 0}
  .timeline-year{display:block;font-size:38px;margin-bottom:12px}
  .timeline-row h3{font-size:28px}
  .timeline-row p{font-size:14px;margin-top:10px}
  .source-note{font-size:11px;line-height:1.7}
  .about-cta{grid-template-columns:1fr;gap:25px}
  .about-cta h2{font-size:48px}
  .about-cta p{font-size:16px}
  .piglette-title{display:block;padding:var(--s2) 0}
  .piglette-title h1{font-size:103px;margin-bottom:22px}
  .piglette-title p{font-size:16px;max-width:100%}
  .piglette-stage{margin:0 calc(-1 * var(--gutter))}
  .piglette-stage img{height:245px;object-fit:cover}
  .piglette-stage figcaption{padding:0 var(--gutter);font-size:11px}
  .piglette-summary{grid-template-columns:1fr;gap:24px;margin-top:var(--s2);margin-bottom:var(--s3)}
  .piglette-summary h2{font-size:48px}
  .piglette-summary p{font-size:16px}
  .brand-facts{grid-template-columns:1fr;gap:24px;padding:28px 0}
  .brand-facts>div{display:grid;grid-template-columns:88px 1fr;gap:22px;align-items:center}
  .brand-facts b{font-size:40px;margin:0}
  .brand-facts span{font-size:13px}
  .brand-project{grid-template-columns:1fr;gap:32px}
  .brand-project.reverse .brand-project-img{order:0}
  .brand-project-img img{height:340px}
  .brand-project h2{font-size:51px;margin:16px 0 21px}
  .brand-project p{font-size:16px;margin-bottom:21px}
  .brand-project .fact{font-size:55px}
  .charity-band{padding:32px 24px;grid-template-columns:1fr;gap:26px;margin-top:var(--s3)}
  .charity-band h2{font-size:49px;margin-top:17px}
  .charity-band p{font-size:16px}
  .press-feature{grid-template-columns:1fr;gap:27px;padding:22px;margin-bottom:var(--s2)}
  .press-feature img{height:250px}
  .press-feature h2{font-size:48px}
  .press-feature p{font-size:15px}
  .press-contact{display:block;padding:var(--s2) 0 0}
  .press-contact h2{font-size:47px}
  .press-contact p{font-size:16px}
  .bio-panel{grid-template-columns:1fr;padding:25px;gap:20px;margin-top:var(--s2)}
  .bio-panel h3{font-size:30px}
  .bio-panel p{font-size:14px}
  .collab-hero{grid-template-columns:1fr;gap:32px;padding:var(--s2) 0 var(--s3)}
  .collab-hero h1{font-size:72px;line-height:.95;margin:23px 0}
  .collab-hero p{font-size:16px;margin-bottom:25px}
  .collab-hero img{height:285px}
  .service-item{grid-template-columns:35px 1fr;gap:15px;padding:28px 0}
  .service-item h3{font-size:32px}
  .service-item .service-desc{grid-column:2}
  .service-item p{font-size:15px}
  .service-item .num{font-size:12px}
  .process-grid{grid-template-columns:1fr;gap:27px;margin-top:var(--s2)}
  .process-grid article{padding-top:20px}
  .process-grid h3{margin:10px 0 12px}
  .process-grid .step{font-size:38px}
  .process-grid p{font-size:15px}
  .brief-box{padding:31px 25px;grid-template-columns:1fr;gap:15px}
  .brief-box h2{font-size:51px}
  .brief-box p,.brief-box ul{font-size:16px}
  .brief-box li{margin-bottom:10px}
  .contact-main{grid-template-columns:1fr;gap:26px;padding:var(--s2) 0 var(--s3)}
  .contact-main h1{font-size:78px;line-height:.91;margin:24px 0}
  .contact-main .contact-intro{font-size:16px;margin-bottom:28px}
  .contact-channel{padding:23px 0;flex-wrap:wrap}
  .contact-channel .contact-address{font-size:31px}
  .contact-channel span{font-size:11px;margin-bottom:7px}
  .contact-channel .text-link,.copy-button{font-size:12px}
  .contact-portrait{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:23px;margin-top:10px}
  .contact-portrait img{width:130px;height:162px}
  .contact-portrait figcaption{font-size:29px;line-height:1.1;margin:0}
  .contact-prompt{grid-template-columns:1fr;gap:25px;padding-top:var(--s2);padding-bottom:0}
  .contact-prompt h2{font-size:46px}
  .contact-prompt p{font-size:16px}
  .contact-topics{margin-top:15px;gap:8px}
  .topic{font-size:11px;padding:6px 9px}
  .footer-top{padding:var(--s3) 0 var(--s2);display:block}
  .footer-top h2{font-size:63px}
  .footer-top>div+div{margin-top:28px}
  .footer-top p{font-size:14px;max-width:295px;margin-bottom:19px}
  .footer-bottom{padding:23px 0 27px;font-size:12px;display:block}
  .footer-bottom>span{display:block;margin-bottom:6px}
  .footer-bottom .footer-links{margin-top:14px;gap:23px;font-size:13px}
  .toast{font-size:13px;max-width:calc(100vw - 30px);width:max-content}
  .not-found{padding:60px 22px}
  .not-found h1{font-size:70px}
}
@media(max-width:620px) {
  .filter-bar{display:block;font-size:0}
  .filter{display:inline-block;vertical-align:top;width:32%;margin:0 2% 0 0;font-size:11px;padding:10px 3px;min-height:43px;line-height:20px}
  .filter:nth-of-type(3){margin-right:0}
  .results-count{display:block;width:100%;font-size:11px;margin-top:16px}
}
/* Work page with a vertical video: player on the left, details next to it. */
@media(min-width:901px) {
  .case-body.vertical{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s3);align-items:start;margin-bottom:var(--s3)}
  .case-body.vertical .case-stage{grid-row:1/3;min-height:0;background:none}
  .case-body.vertical .case-meta{grid-template-columns:1fr;gap:16px;padding:0 0 var(--s1)}
  .case-body.vertical .case-meta>div{display:grid;grid-template-columns:180px 1fr;gap:20px}
  .case-body.vertical .case-meta dt{margin:2px 0 0}
  .case-body.vertical .case-story{grid-template-columns:1fr;gap:20px;margin:var(--s2) 0 0}
}
/* Touch screens: 44px tap area around small links without changing how they look. */
@media(pointer:coarse) {
  .text-link,.footer-links a,.menu-contacts a,.breadcrumbs a,.copy-button,.source-note a,.contact-address{position:relative}
  .text-link::after,.footer-links a::after,.menu-contacts a::after,.breadcrumbs a::after,.copy-button::after,.source-note a::after,.contact-address::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  .site-header .brand::after{content:"";position:absolute;inset:-6px}
}
@media(prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
@media print {
  html{scroll-behavior:auto}
  body{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .site-header{position:relative}
  .header-bar{position:static}
  .project-card,.section,.media-row{break-inside:avoid}
}