@font-face{font-family:'Stack Sans Headline';src:url('/assets/fonts/stack-sans-headline-variable.ttf') format('truetype');font-style:normal;font-weight:200 700;font-display:swap}
@font-face{font-family:'Stack Sans Text';src:url('/assets/fonts/stack-sans-text-variable.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Medeo Sans';src:url('/assets/fonts/medeo-sans-variable.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Medeo Mono';src:url('/assets/fonts/medeo-mono-variable.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* Helvetica Now Display for body and UI; display headings retain Stack Sans Notch. */
@font-face{font-family:'Helvetica Now Display';src:url('/assets/fonts/helvetica-now-display-local-light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:'Helvetica Now Display';src:url('/assets/fonts/helvetica-now-display-local-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Helvetica Now Display';src:url('/assets/fonts/helvetica-now-display-local-medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Helvetica Now Display';src:url('/assets/fonts/helvetica-now-display-local-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
/* Helvetica Now Display returns for body and UI; Stack Sans Notch keeps the display roles. */




html body:is(.home-page,.about-page,.case-page){
 --font-heading:'Helvetica Now Display',Helvetica,Arial,sans-serif;
 --font-copy:'Helvetica Now Display',Helvetica,Arial,sans-serif;
 --control-radius:8px;--media-radius:8px;--control-height:56px;
 font-family:var(--font-copy);font-synthesis:none;
}
html body:is(.home-page,.about-page,.case-page) :is(h1,h2,h3,p,li,dt,dd,figcaption,a,button,span){font-family:var(--font-copy)!important}
body.home-page #content .hero.gallery-intro .hero-layout>h1,
body.about-page #content .about-page-title h1,
body.case-page #content .case-heading h1{
 font-size:128px!important;line-height:120px!important;font-weight:800!important;
 letter-spacing:0!important;text-transform:uppercase;
}
body.home-page #content .home-section-heading>h2,
body.about-page #content .about-section-title,
body.case-page #content .section-heading h2,
body.case-page #content .case-result-group>h2,
body.case-page .project-details .details-section>h3{
 font-size:32px!important;line-height:36.8px!important;font-weight:500!important;
 letter-spacing:0!important;text-transform:uppercase;
}
body.home-page #content .home-section-description,
body.case-page #content .chapter-description{
 font-size:32px!important;line-height:36.8px!important;font-weight:500!important;letter-spacing:0!important;
}
body.home-page #content .project .project-copy h3{font-weight:600!important}
body :is(.action-button,.fill-control:not(.gallery-cursor),.back-top){border-radius:8px!important}
body :is(.project-media,.project-link,.image-zoom){border-radius:8px}

/* About: dark introduction, then uninterrupted white content. */
.about-intro-surface{
 position:relative;background:#000;color:#fff;--fg:#fff;--muted:#6e6e73;
}
.about-intro-surface::before{content:'';position:absolute;inset:-64px 0 auto;height:64px;background:#000;pointer-events:none}
body.about-page .about-page-title{padding-block:24px 64px}
body.about-page .about-hero{padding-block:0 96px}
body.about-page .about-hero .about-overview{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 16px;align-items:start}
body.about-page .about-overview>.about-description{grid-column:1/span 2;grid-row:1;margin:0;max-width:none}
body.about-page .about-overview>.about-bio{grid-column:1/span 2;grid-row:2;margin:0;padding:0;container-type:normal}
body.about-page .about-overview>.about-portrait{grid-column:4;grid-row:1/span 2;width:100%;margin:0;align-self:start;justify-self:stretch}
body.about-page #content .about-intro-surface .about-description p{color:#fff;font-size:32px!important;line-height:36.8px!important;letter-spacing:0!important}
body.about-page #content .about-intro-surface .about-location{color:#6e6e73!important;margin:0}
body.about-page .about-intro-surface .about-resume{margin-top:24px}
body.about-page .about-intro-surface .action-button{background:#fff!important;color:#000!important}

body.about-page .about-expertise{padding-top:96px}
body.about-page .about-download{margin:0;padding-block:64px}
body.about-page .about-download+.site-footer,body.about-page .site-footer{margin-top:0}

/* Header switches surfaces at the end of the dark introduction; name always inverts. */
body.about-page>.inverting-signature{
 position:fixed;z-index:31;left:16px;top:21px;color:#fff;
 font-size:16px!important;line-height:22px!important;font-weight:500;letter-spacing:0!important;mix-blend-mode:difference;
}
body.about-page.about-intro-active{--sticky-tint:0,0,0;--preview-keyline:rgba(255,255,255,.096)}
body.about-page.about-intro-active .site-header .header-row .main-nav a{background:#1a1a1a;color:#fff!important}
body.about-page.about-intro-active>.back-top{background:#1a1a1a;color:#fff}

/* Experience matches Recognition: year / company / career path spanning two columns. */
body.about-page #content .about-experience .experience-row{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
 padding-block:24px;align-items:start;
}
body.about-page #content .experience-row>.experience-date{grid-column:1;grid-row:1;padding:0;margin:4px 0 0;font-size:16px!important;line-height:24px!important}
body.about-page #content .experience-row>.experience-company{
 grid-column:2;grid-row:1;display:flex;align-items:center;gap:12px;min-width:0;padding:0;
}
body.about-page #content .experience-company .company-logo{position:static;display:block;flex:none;width:28px;height:28px;align-self:center;transform:none;margin:0}
body.about-page #content .experience-company .company-heading{
 display:block;min-width:0;margin:0;padding:0;color:#1a1a1a;
 font-size:24px!important;line-height:31.2px!important;font-weight:500!important;letter-spacing:0!important;
}
body.about-page #content .experience-row>.experience-role{
 grid-column:3/span 2;grid-row:1;margin:0;color:#6e6e73!important;
 font-size:24px!important;line-height:31.2px!important;font-weight:500!important;letter-spacing:0!important;
}

/* Case metadata reverses the Home caption hierarchy. */
body.case-page #content .case-facts dt,
body.case-page .project-details .details-meta dt,
body.case-page .project-details .details-team dt{
 color:#6e6e73!important;font-size:16px!important;line-height:24px!important;font-weight:500!important;letter-spacing:0!important;
}
body.case-page #content .case-facts dd,
body.case-page .project-details .details-meta dd,
body.case-page .project-details .details-team dd{
 color:#1a1a1a!important;font-size:16px!important;line-height:24px!important;font-weight:600!important;letter-spacing:0!important;
}
body.case-page #content .case-figure figcaption{color:#6e6e73!important;font-size:16px!important;line-height:24px!important}
body.case-page #content .result-card{padding:24px;gap:32px;min-height:320px;border-radius:8px}
body.case-page #content .result-card .result-value{
 font-size:64px!important;line-height:64px!important;font-weight:800!important;letter-spacing:0!important;
}
body.case-page #content .result-copy h3{
 font-size:24px!important;line-height:28.8px!important;font-weight:600!important;letter-spacing:0!important;
}
body.case-page #content .result-description{color:#6e6e73!important;font-size:16px!important;line-height:24px!important;margin-top:16px}

/* Project Details shares the same title, intro, section and body roles. */
body.case-page .project-details .details-grid>h2{
 font-size:64px!important;line-height:64px!important;font-weight:800!important;letter-spacing:0!important;text-transform:uppercase;
}
body.case-page .project-details .details-intro p{font-size:32px!important;line-height:36.8px!important;color:#1a1a1a;letter-spacing:0!important}
body.case-page .project-details .details-section :is(p,li){font-size:24px!important;line-height:31.2px!important;color:#6e6e73;letter-spacing:0!important}
body.case-page .project-details .details-section{margin-top:48px}
body.case-page .project-details .details-section h3{margin-bottom:24px}
body.case-page .project-details .details-grid{row-gap:48px;padding-block:32px 64px}
body.case-page .project-details .details-meta{top:var(--details-toolbar-height,96px)}

/* Both floating controls share height, baseline, inset, type size and radius. */
html body>.back-top{
 width:56px;height:56px;right:16px;bottom:16px;padding:0;
 font-size:16px!important;line-height:24px!important;
}
body.case-page .details-trigger.action-button{height:56px!important;right:84px!important;font-size:16px!important;line-height:24px!important}
body .footer-main-links .contact-heading{gap:0}
body .footer-main-links .contact-heading>span[aria-hidden]{margin-left:0}

@media(max-width:1100px){
 body.home-page #content .hero.gallery-intro .hero-layout>h1,
 body.about-page #content .about-page-title h1,
 body.case-page #content .case-heading h1{font-size:96px!important;line-height:84px!important}
 body.about-page .about-overview>.about-description,body.about-page .about-overview>.about-bio{grid-column:1/span 3}
}
@media(max-width:767px){
 body.home-page #content .hero.gallery-intro .hero-layout>h1,
 body.about-page #content .about-page-title h1,
 body.case-page #content .case-heading h1{font-size:48px!important;line-height:44px!important;overflow-wrap:normal}
 body.home-page #content .home-section-heading>h2,
 body.home-page #content .home-section-description,
 body.about-page #content .about-section-title,
 body.case-page #content .section-heading h2,
 body.case-page #content .chapter-description,
 body.case-page #content .case-result-group>h2,
 body.case-page .project-details .details-section>h3{font-size:32px!important;line-height:36.8px!important}
 body.about-page .about-page-title{padding-block:24px 48px}
 body.about-page .about-hero{padding-bottom:64px}
 body.about-page .about-hero .about-overview{grid-template-columns:minmax(0,1fr);row-gap:32px}
 body.about-page .about-overview>.about-description{grid-column:1;grid-row:1}
 body.about-page .about-overview>.about-bio{grid-column:1;grid-row:2}
 body.about-page .about-overview>.about-portrait{grid-column:1;grid-row:3}
 body.about-page #content .about-intro-surface .about-description p{font-size:24px!important;line-height:31.2px!important}
 body.about-page .about-expertise{padding-top:64px}
 body.about-page #content .about-experience .experience-row{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:24px}
 body.about-page #content .experience-row>:is(.experience-date,.experience-company,.experience-role){grid-column:1;grid-row:auto}
 body.about-page .about-download{padding-block:48px}
 body.case-page .project-details .details-grid>h2{font-size:48px!important;line-height:44px!important}
 body.case-page .project-details .details-intro p{font-size:24px!important;line-height:31.2px!important}
 body.case-page .project-details .details-section :is(p,li){font-size:24px!important;line-height:31.2px!important}
}
html body:is(.home-page,.about-page,.case-page)>.back-top{width:56px!important;height:56px!important;bottom:16px!important}
/* Match award names exactly; override the earlier 32px company-title experiment. */
body.about-page #content .experience-row>.experience-company .company-heading{
 font-size:24px!important;line-height:31.2px!important;font-weight:500!important;letter-spacing:0!important;
}
body.case-page #project-details .details-copy .details-intro p{font-size:32px!important;line-height:36.8px!important}
@media(max-width:767px){body.case-page #project-details .details-copy .details-intro p{font-size:24px!important;line-height:31.2px!important}}
/* The large heading role uses the real Medium face. */
body.home-page #content .hero.gallery-intro .hero-layout>h1,
body.about-page #content .about-page-title h1,
body.case-page #content .case-heading h1,
body.case-page .project-details .details-grid>h2{font-weight:600!important}
body.about-page .about-download{margin-block:0;margin-inline:var(--gutter)}

/* About location occupies the previously empty third column. */
body.about-page .about-overview>.about-location{grid-column:3;grid-row:1;margin:0;align-self:start}
@media(max-width:767px){
 body.about-page .about-overview>.about-location{grid-column:1;grid-row:2}
 body.about-page .about-overview>.about-bio{grid-row:3}
 body.about-page .about-overview>.about-portrait{grid-row:4}
}
body.about-page .about-intro-surface .about-bio .about-resume{margin-top:0}
/* Slightly denser small and medium roles: Regular becomes Medium. */
html body:is(.home-page,.about-page,.case-page) :is(p,li,dt,dd,figcaption,a,button){font-weight:600!important}
body:is(.home-page,.about-page,.case-page) #content :is(p,li,dt,dd,figcaption){font-weight:600!important}
body.home-page #content .project .project-description,
body.home-page #content .home-section-description,
body.home-page #content .home-section-heading>h2,
body.about-page #content .about-section-title,
body.about-page #content .experience-row>.experience-company .company-heading,
body.about-page #content .experience-row>.experience-role,
body.about-page #content .award-row h3,
body.case-page #content .section-heading h2,
body.case-page #content .case-result-group>h2,
body.case-page .project-details .details-section>h3,
body.case-page #content .case-facts dt,
body.case-page .project-details .details-meta dt,
body.case-page .project-details .details-team dt,
body.case-page #content .result-description{font-weight:600!important}
body .inverting-signature,
body .footer-bottom>span,
body.case-page .tags>span,
body.case-page .gallery :is(.gallery-project,.gallery-count),
body.case-page .details-toolbar{font-weight:600!important}
/* Emphasized captions and fact values move from Medium to the real Bold face. */
body.home-page #content .project .project-copy h3,
body.home-page #content .project .project-copy h3 a,
body.about-page #content .about-expertise article>h2,
body.case-page #content .case-facts dd,
body.case-page .project-details .details-meta dd,
body.case-page .project-details .details-team dd,
body.case-page #content .result-copy h3{font-weight:800!important}

/* Current About composition: left portrait, right two-column biography, CV at title level. */
body.about-page .about-page-title{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 16px;align-items:start;
}
body.about-page #content .about-page-title h1{grid-column:1/-1;grid-row:1;margin:0;max-width:none}
body.about-page .about-page-title>.about-resume{grid-column:4;grid-row:1;justify-self:end;margin:0;align-self:start}
body.about-page #content .about-page-title>.about-location{grid-column:1;grid-row:2;color:#6e6e73!important;margin:0}
body.about-page .about-overview>.about-description{grid-column:3/span 2;grid-row:1}
body.about-page .about-overview>.about-portrait{grid-column:1;grid-row:1;width:100%;margin:0}
@media(max-width:767px){
 body.about-page .about-page-title{grid-template-columns:minmax(0,1fr);row-gap:24px}
 body.about-page #content .about-page-title h1{grid-column:1;grid-row:1}
 body.about-page #content .about-page-title>.about-location{grid-column:1;grid-row:2}
 body.about-page .about-page-title>.about-resume{grid-column:1;grid-row:3;justify-self:start}
 body.about-page .about-overview>.about-portrait{grid-column:1;grid-row:1}
 body.about-page .about-overview>.about-description{grid-column:1;grid-row:2}
}

/* Large descriptions share the original Regular role; display headings stay Medium. */
body.home-page #content .home-section-description,
body.about-page #content .about-intro-surface .about-description p,
body.case-page #content .overview-copy :is(p,li),
body.case-page #content .chapter-description,
body.case-page #project-details .details-copy .details-intro p{
 font-size:32px!important;line-height:36.8px!important;font-weight:500!important;
}
@media(max-width:767px){
 body.about-page #content .about-intro-surface .about-description p,
 body.case-page #content .overview-copy :is(p,li),
 body.case-page #project-details .details-copy .details-intro p{font-size:24px!important;line-height:31.2px!important}
}

/* Navigation pills and the top arrow use the same magnetic movement as primary controls. */
@media(hover:hover) and (pointer:fine){
 body .site-header .header-row .main-nav a,body>a.back-top{
  transition:translate .25s var(--ease),color .32s cubic-bezier(.22,.61,.36,1),opacity .32s ease;
 }
}
@media(prefers-reduced-motion:reduce){
 body .site-header .header-row .main-nav a,body>a.back-top{transition:none}
}

/* Expertise is a four-column type table; original visual blocks are retained hidden. */
body.about-page #content .about-expertise{display:block}
body.about-page #content .about-expertise>.about-section-title{margin-bottom:48px}
body.about-page #content .about-expertise .expertise-visual{display:none!important}
body.about-page #content .about-expertise>article{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:24px;
 align-items:start;padding-block:48px;margin:0;border:0;border-top:1px solid var(--line);
}
body.about-page #content .about-expertise>article:last-child{border-bottom:1px solid var(--line)}
body.about-page #content .about-expertise article>h2{
 grid-column:1/span 3;grid-row:1;order:0;margin:0;padding:0;max-width:none;
 font-size:128px!important;line-height:110px!important;font-weight:600!important;
 letter-spacing:0!important;text-transform:uppercase;overflow-wrap:normal;
}
body.about-page #content .about-expertise article>p{
 grid-column:4;grid-row:1;order:1;align-self:start;margin:0;padding:0;max-width:none;
 font-size:32px!important;line-height:36.8px!important;font-weight:500!important;letter-spacing:0!important;
 color:#6e6e73!important;white-space:normal;overflow:visible;
}
@media(max-width:1100px){
 body.about-page #content .about-expertise article>h2{font-size:96px!important;line-height:84px!important}
}
@media(max-width:767px){
 body.about-page #content .about-expertise>article{grid-template-columns:minmax(0,1fr);row-gap:24px;padding-block:32px}
 body.about-page #content .about-expertise article>h2{grid-column:1;grid-row:1;font-size:48px!important;line-height:44px!important}
 body.about-page #content .about-expertise article>p{grid-column:1;grid-row:2}
}
/* Do not offer a journey upwards while already at the start of the page. */
body:not(.header-scrolled)>.back-top{opacity:0!important;visibility:hidden;pointer-events:none}
body.header-scrolled>.back-top{opacity:1;visibility:visible;pointer-events:auto}

/* Expertise settles into equal title/copy halves, keeping the table dividers. */
body.about-page #content .about-expertise article>h2{
 grid-column:1/span 2;font-size:64px!important;line-height:64px!important;
}
body.about-page #content .about-expertise article>p{grid-column:3/span 2}
@media(max-width:767px){
 body.about-page #content .about-expertise article>h2{grid-column:1;font-size:48px!important;line-height:44px!important}
 body.about-page #content .about-expertise article>p{grid-column:1}
}

/* Portrait faces the title; location and CV stack in the first column below it. */
body.about-page .about-page-title>.about-portrait{
 grid-column:4;grid-row:1/span 3;align-self:start;justify-self:stretch;
 position:relative;width:100%;max-width:none;margin:0;
}
body.about-page .about-page-title>.about-resume{grid-column:1;grid-row:3;justify-self:start;margin:0}
@media(max-width:767px){
 body.about-page .about-page-title>.about-portrait{grid-column:1;grid-row:4;width:100%}
 body.about-page .about-overview>.about-description{grid-row:1}
}

/* Contact copy shares the biography's baseline, size and primary white ink. */
body.about-page .about-page-title>.about-portrait{grid-row:1}
body.about-page .about-overview>.about-contact{grid-column:1/span 2;grid-row:1;min-width:0;align-self:start}
body.about-page #content .about-intro-surface .about-contact>.about-location{
 margin:0;color:#fff!important;font-size:32px!important;line-height:36.8px!important;
 font-weight:500!important;letter-spacing:0!important;
}
body.about-page .about-contact>.about-resume{margin-top:24px}
@media(max-width:767px){
 body.about-page .about-page-title>.about-portrait{grid-row:2}
 body.about-page .about-overview>.about-contact{grid-column:1;grid-row:1}
 body.about-page .about-overview>.about-description{grid-row:2}
 body.about-page #content .about-intro-surface .about-contact>.about-location{font-size:24px!important;line-height:31.2px!important}
}

/* Expertise heading belongs to the dark intro and aligns with the biography's bottom. */
body.about-page #content .about-overview>.about-section-title{
 grid-column:1/span 2;grid-row:1;align-self:end;margin:0;padding:0;
}
body.about-page #content .about-expertise{padding-top:0}
body.about-page #content .about-expertise>article:first-of-type{border-top:0}
body.about-page #content .about-expertise article>p{
 font-size:24px!important;line-height:31.2px!important;font-weight:600!important;color:#6e6e73!important;
}
/* Footer links use all four columns; Telegram remains a noninteractive placeholder. */
body .site-footer .footer-main-links{grid-template-columns:repeat(4,minmax(0,1fr))}
body .site-footer .footer-main-links>.contact-heading{font-weight:600!important}
body .site-footer .footer-unavailable{cursor:default}
/* The top arrow is attached to the footer, with constant bottom/side insets. */
body .site-footer{padding-bottom:16px}
body .site-footer .footer-bottom{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;min-height:56px}
body .site-footer .footer-bottom>.back-top{
 position:static;inset:auto;display:inline-flex;align-items:center;justify-content:center;
 flex:none;width:56px;height:56px;padding:0;margin:0 0 0 auto;
 border:0;border-radius:8px;background:#f3f3f3;color:var(--fg);
 font-size:16px!important;line-height:24px!important;font-weight:600!important;
 text-align:center;letter-spacing:0!important;opacity:1;visibility:visible;pointer-events:auto;
 transition:translate .25s var(--ease),color .32s cubic-bezier(.22,.61,.36,1);
}
body.home-page .site-footer .footer-bottom>.back-top{background:#1a1a1a}
body .site-footer .footer-bottom>.back-top:is(:hover,:focus-visible){opacity:.4}
body.case-page .details-trigger.action-button{right:16px!important}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-section-title{grid-column:1;grid-row:3}
 body .site-footer .footer-main-links{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){body .site-footer .footer-bottom>.back-top{transition:none}}

/* Preview labels use the same Medium step as other compact interface text. */
body .hover-tooltip,
body .site-cursor.is-view,
body .site-cursor.is-view>span{font-weight:600!important}

/* About: portrait under the title at left; biography and contact at right. */
body.about-page #content .about-hero .about-overview{row-gap:32px}
body.about-page #content .about-overview>.about-portrait{
 grid-column:1;grid-row:1/span 2;position:relative;width:100%;max-width:none;
 justify-self:start;align-self:start;margin:0;
}
body.about-page #content .about-overview>.about-description{grid-column:3/span 2;grid-row:1}
body.about-page #content .about-overview>.about-contact{grid-column:3/span 2;grid-row:2;align-self:start}
body.about-page #content .about-expertise{padding-top:64px}
body.about-page #content .about-expertise>.about-section-title{color:#1a1a1a!important;margin:0 0 48px;padding:0}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-portrait{grid-column:1;grid-row:1;width:100%}
 body.about-page #content .about-overview>.about-description{grid-column:1;grid-row:2}
 body.about-page #content .about-overview>.about-contact{grid-column:1;grid-row:3}
 body.about-page #content .about-expertise{padding-top:48px}
 body.about-page #content .about-expertise>.about-section-title{margin-bottom:24px}
}

/* Compact contact column sits between portrait and biography. */
body.about-page #content .about-overview>.about-contact{
 grid-column:2;grid-row:1;align-self:start;min-width:0;
}
body.about-page #content .about-intro-surface .about-contact>.about-location{
 font-size:24px!important;line-height:31.2px!important;font-weight:500!important;
}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-contact{grid-column:1;grid-row:2}
 body.about-page #content .about-overview>.about-description{grid-column:1;grid-row:3}
}

/* CV action aligns with the case-page opening action at the title's right edge. */
body.about-page #content .about-page-title>.about-resume{
 grid-column:4;grid-row:1;align-self:start;justify-self:end;margin:0;
}
@media(max-width:767px){
 body.about-page #content .about-page-title>.about-resume{
  grid-column:1;grid-row:2;justify-self:start;margin:0;
 }
}

/* Biography starts at the left edge; portrait occupies the rightmost column. */
body.about-page #content .about-overview>.about-description{
 grid-column:1/span 2;grid-row:1;text-align:left;
}
body.about-page #content .about-overview>.about-description p{text-align:left}
body.about-page #content .about-overview>.about-portrait{
 grid-column:4;grid-row:1;justify-self:start;align-self:start;width:100%;margin:0;
}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-description{grid-column:1;grid-row:1}
 body.about-page #content .about-overview>.about-portrait{grid-column:1;grid-row:2;width:100%}
}

/* Portrait faces the title; CV starts the lower left and biography starts column three. */
body.about-page #content .about-page-title>.about-portrait{
 grid-column:4;grid-row:1;align-self:start;justify-self:end;
 position:relative;width:100%;max-width:none;margin:0;
}
body.about-page #content .about-overview>.about-resume{
 grid-column:1/span 2;grid-row:1;align-self:start;justify-self:start;margin:0;
}
body.about-page #content .about-overview>.about-description{
 grid-column:3/span 2;grid-row:1;text-align:left;
}
@media(max-width:767px){
 body.about-page #content .about-page-title>.about-portrait{grid-column:1;grid-row:2;width:100%}
 body.about-page #content .about-overview>.about-resume{grid-column:1;grid-row:1}
 body.about-page #content .about-overview>.about-description{grid-column:1;grid-row:2}
}

/* Biography spans the middle two columns; CV occupies the fourth. */
body.about-page #content .about-overview>.about-description{
 grid-column:2/span 2;grid-row:1;text-align:left;
}
body.about-page #content .about-overview>.about-resume{
 grid-column:4;grid-row:1;align-self:start;justify-self:end;margin:0;
}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-description{grid-column:1;grid-row:1}
 body.about-page #content .about-overview>.about-resume{grid-column:1;grid-row:2;justify-self:start}
}

/* CV returns to the first column; biography stays in columns two and three. */
body.about-page #content .about-overview>.about-resume{
 grid-column:1;grid-row:1;justify-self:start;
}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-resume{grid-column:1;grid-row:2}
}

/* Location anchors the top of column one; CV aligns with the biography's bottom. */
body.about-page #content .about-overview>.about-location{
 grid-column:1;grid-row:1;align-self:start;justify-self:start;margin:0;
 color:#fff!important;font-size:24px!important;line-height:31.2px!important;
 font-weight:500!important;letter-spacing:0!important;text-align:left;
}
body.about-page #content .about-overview>.about-resume{
 grid-column:1;grid-row:1;align-self:end;justify-self:start;margin:96px 0 0;
}
@media(max-width:767px){
 body.about-page #content .about-overview>.about-location{grid-column:1;grid-row:1}
 body.about-page #content .about-overview>.about-description{grid-column:1;grid-row:2}
 body.about-page #content .about-overview>.about-resume{grid-column:1;grid-row:3;align-self:start;margin:0}
}

/* Footer arrow matches the navigation pills while retaining its bottom/right inset. */
body .site-footer .footer-bottom{align-items:flex-end}
body .site-footer .footer-bottom>.back-top{
 width:auto;height:auto;min-height:36px;min-width:36px;padding:8px 14px;
 font-family:var(--font-copy);font-size:16px!important;line-height:24px!important;
 font-weight:600!important;border-radius:8px;
}
@media(max-width:767px){
 body .site-footer .footer-bottom>.back-top{padding-inline:10px;font-size:14px!important}
}




/* Display face from the supplied reference, scoped exclusively to H1. */
@font-face{
 font-family:'Stack Sans Notch';src:url('/assets/fonts/stack-sans-notch-variable.ttf') format('truetype');
 font-style:normal;font-weight:200 700;font-display:swap;
}
html body:is(.home-page,.about-page,.case-page) #content h1,
html body:is(.home-page,.about-page,.case-page) #content h1 *{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-weight:500!important;letter-spacing:.02em!important;
}
body.home-page #content .hero.gallery-intro .hero-layout>h1,
body.about-page #content .about-page-title h1,
body.case-page #content .case-heading h1{
 font-size:120px!important;line-height:128px!important;font-weight:500!important;letter-spacing:.02em!important;
}
@media(max-width:1100px){
 body.home-page #content .hero.gallery-intro .hero-layout>h1,
 body.about-page #content .about-page-title h1,
 body.case-page #content .case-heading h1{font-size:88px!important;line-height:96px!important}
}
@media(max-width:767px){
 body.home-page #content .hero.gallery-intro .hero-layout>h1,
 body.about-page #content .about-page-title h1,
 body.case-page #content .case-heading h1{font-size:44px!important;line-height:48px!important}
}

/* Section display roles and footer destinations share the new Light face across all pages. */
html body:is(.home-page,.about-page,.case-page) #content :is(.home-section-heading>h2,.about-section-title,.about-expertise article>h2,.section-heading h2,.case-result-group>h2,.project-details .details-grid>h2,.project-details .details-section>h3),
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading,
html body:is(.home-page,.about-page,.case-page) #content :is(.home-section-heading>h2,.about-section-title,.about-expertise article>h2,.section-heading h2,.case-result-group>h2,.project-details .details-grid>h2,.project-details .details-section>h3) *,
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading *{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-weight:500!important;
}

/* Icon-only top control stays square at every breakpoint. */
body .site-footer .footer-bottom>.back-top{
 width:40px;height:40px;min-width:40px;min-height:40px;padding:0;aspect-ratio:1;
}

/* Home category titles match the Expertise titles on About. */
body.home-page #content .home-section-heading>h2{
 font-size:64px!important;line-height:64px!important;
}
@media(max-width:767px){
 body.home-page #content .home-section-heading>h2{
  font-size:48px!important;line-height:44px!important;
 }
}

/* Selection reverses text and surface on both page themes. */
::selection{background:#1a1a1a;color:#fff;text-shadow:none}
body.home-page ::selection,
body.about-page .about-intro-surface ::selection,
.gallery ::selection{background:#fff;color:#000;text-shadow:none}

/* The large section-heading role takes one smaller step across Home and About. */
body.home-page #content .home-section-heading>h2,
body.about-page #content .about-expertise article>h2{
 font-size:56px!important;line-height:56px!important;
}
@media(max-width:767px){
 body.home-page #content .home-section-heading>h2,
 body.about-page #content .about-expertise article>h2{
  font-size:40px!important;line-height:44px!important;
 }
}

/* Illustrated expertise rows: artwork / two-column title / compact description. */
body.about-page #content .about-expertise>article>.expertise-visual{
 display:block!important;grid-column:1;grid-row:1;align-self:start;
 width:100%;min-width:0;margin:0;
}
body.about-page #content .about-expertise>article>h2{
 grid-column:2/span 2;grid-row:1;min-width:0;
}
body.about-page #content .about-expertise>article>p{
 grid-column:4;grid-row:1;min-width:0;
}
@media(max-width:767px){
 body.about-page #content .about-expertise>article>.expertise-visual{grid-column:1;grid-row:1}
 body.about-page #content .about-expertise>article>h2{grid-column:1;grid-row:2}
 body.about-page #content .about-expertise>article>p{grid-column:1;grid-row:3}
}

/* Four parallel expertise cards: heading, illustration, description. */
body.about-page #content .about-expertise{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 16px;align-items:start;
}
body.about-page #content .about-expertise>.about-section-title{
 grid-column:1/-1;margin:0;
}
body.about-page #content .about-expertise>article{
 display:flex;flex-direction:column;gap:24px;min-width:0;margin:0;padding:0;border:0;
}
body.about-page #content .about-expertise>article:last-child{border:0}
body.about-page #content .about-expertise>article>h2{
 order:0;width:100%;margin:0;min-height:168px;
}
body.about-page #content .about-expertise>article>.expertise-visual{
 order:1;display:block!important;width:100%;margin:0;
}
body.about-page #content .about-expertise>article>p{order:2;width:100%;margin:0}
@media(max-width:1100px){
 body.about-page #content .about-expertise{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
 body.about-page #content .about-expertise{grid-template-columns:minmax(0,1fr);row-gap:48px}
 body.about-page #content .about-expertise>article>h2{min-height:0}
}

/* Copy leads into each illustration. */
body.about-page #content .about-expertise>article>h2{order:0}
body.about-page #content .about-expertise>article>p{order:1}
body.about-page #content .about-expertise>article>.expertise-visual{order:2}

/* Shared rows align heading bottoms and image tops without empty title boxes. */
body.about-page #content .about-expertise{row-gap:12px}
body.about-page #content .about-expertise>.about-section-title{margin-bottom:36px}
body.about-page #content .about-expertise>article{
 display:grid;grid-row:span 3;grid-template-columns:minmax(0,1fr);
 grid-template-rows:subgrid;row-gap:12px;align-items:start;
}
body.about-page #content .about-expertise>article>h2{
 grid-column:1;grid-row:1;min-height:0;align-self:end;margin:0;
}
body.about-page #content .about-expertise>article>p{
 grid-column:1;grid-row:2;align-self:start;margin:0 0 36px;
}
body.about-page #content .about-expertise>article>.expertise-visual{
 grid-column:1;grid-row:3;align-self:start;margin:0;
}
@media(max-width:1100px){
 body.about-page #content .about-expertise>article>.expertise-visual{margin-bottom:36px}
}

/* Refine the expertise card rhythm. */
body.about-page #content .about-expertise{row-gap:20px}
body.about-page #content .about-expertise>.about-section-title{margin-bottom:28px}
body.about-page #content .about-expertise>article{row-gap:20px}
body.about-page #content .about-expertise>article>h2{font-size:48px!important;line-height:52px!important}
body.about-page #content .about-expertise>article>p{margin-bottom:12px}
@media(max-width:767px){
 body.about-page #content .about-expertise>article>h2{font-size:40px!important;line-height:44px!important}
}

/* One authoritative H1 scale for Home, About and all active case pages. */
html body:is(.home-page,.about-page,.case-page){--h1-size:120px;--h1-leading:128px}
html body.home-page #content .hero.gallery-intro .hero-layout>h1,
html body.about-page #content .about-page-title h1,
html body.case-page #content .case-heading h1{
 font-size:var(--h1-size)!important;line-height:var(--h1-leading)!important;
}
@media(max-width:1100px){
 html body:is(.home-page,.about-page,.case-page){--h1-size:88px;--h1-leading:96px}
}
@media(max-width:767px){
 html body:is(.home-page,.about-page,.case-page){--h1-size:44px;--h1-leading:48px}
}

/* Display hierarchy: ExtraLight H1, Light large H2, Regular compact section labels. */
html body:is(.home-page,.about-page,.case-page) #content h1,
html body:is(.home-page,.about-page,.case-page) #content h1 *{font-weight:500!important}
html body.home-page #content .hero.gallery-intro .hero-layout>h1,
html body.about-page #content .about-page-title h1,
html body.case-page #content .case-heading h1{font-weight:500!important}
html body:is(.home-page,.about-page,.case-page) #content :is(.about-section-title,.section-heading h2,.case-result-group>h2,.project-details .details-section>h3),
html body:is(.home-page,.about-page,.case-page) #content :is(.about-section-title,.section-heading h2,.case-result-group>h2,.project-details .details-section>h3) *{font-weight:500!important}

/* Expertise hover index: full-width rows and one centered column of cycling work. */
body.about-page #content .about-expertise{display:block}
body.about-page #content .about-expertise>.about-section-title{margin-bottom:24px}
body.about-page #content .about-expertise>article{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto;
 gap:24px 16px;padding-block:28px;margin:0;border:0;border-top:1px solid var(--line);
 position:relative;outline-offset:6px;
}
body.about-page #content .about-expertise>article:last-child{border-bottom:1px solid var(--line)}
body.about-page #content .about-expertise>article>h2{
 grid-column:1/span 2;grid-row:1;align-self:start;min-height:0;margin:0;
}
body.about-page #content .about-expertise>article>p{
 grid-column:3/span 2;grid-row:1;margin:0;align-self:start;
}
body.about-page #content .about-expertise>article>.expertise-visual{display:none!important}
.expertise-hover-preview{
 position:fixed;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%);
 width:calc((100vw - 80px)/4);aspect-ratio:16/9;pointer-events:none;
 overflow:hidden;border-radius:8px;background:#171717;
 box-shadow:0 16px 48px rgba(0,0,0,.18);
}
.expertise-hover-preview[hidden]{display:none}
.expertise-hover-preview>img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:767px){
 body.about-page #content .about-expertise>article{grid-template-columns:minmax(0,1fr);padding-block:24px}
 body.about-page #content .about-expertise>article>h2{grid-column:1;grid-row:1}
 body.about-page #content .about-expertise>article>p{grid-column:1;grid-row:2}
}
.expertise-hover-preview.is-inline{
 position:relative;left:auto;top:auto;transform:none;width:100%;
 grid-column:1/-1;grid-row:3;order:3;z-index:1;box-shadow:none;
}

/* Hover previews follow the pointer, retaining a sharp one-column frame. */
.expertise-hover-preview:not(.is-inline){left:0;top:0;transform:translate3d(-200vw,-200vh,0);will-change:transform}
body.about-page #content .about-expertise>article+article{
 border-top:1px solid rgba(26,26,26,.18)!important;
}

/* The cycling expertise preview replaces the decorative cursor dot. */
body:has(.expertise-hover-preview:not([hidden]):not(.is-inline)) .site-cursor{
 opacity:0!important;
}

/* The full expertise row highlights its heading together with the work preview. */
body.about-page #content .about-expertise>[data-expertise-preview]>h2{
 transition:color .3s cubic-bezier(.22,.61,.36,1);
}
body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>h2{
 color:#6e6e73!important;
}
@media(hover:hover) and (pointer:fine){
 body.about-page #content .about-expertise>[data-expertise-preview]:hover>h2{opacity:.4!important}
}
@media(prefers-reduced-motion:reduce){
 body.about-page #content .about-expertise>[data-expertise-preview]>h2{transition:none}
}

/* A small horizontal response reinforces the active expertise row. */
body.about-page #content .about-expertise>[data-expertise-preview]>h2{
 translate:0 0;
 transition:color .3s cubic-bezier(.22,.61,.36,1),translate .3s cubic-bezier(.22,.61,.36,1);
}
body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>h2{translate:40px 0}
@media(hover:hover) and (pointer:fine){
 body.about-page #content .about-expertise>[data-expertise-preview]:hover>h2{translate:40px 0}
}
@media(prefers-reduced-motion:reduce){
 body.about-page #content .about-expertise>[data-expertise-preview]>h2{transition:none;translate:none!important}
}

/* While a desktop work preview is visible, it replaces both cursor layers. */
@media(hover:hover) and (pointer:fine){
 body:has(.expertise-hover-preview:not([hidden]):not(.is-inline)),
 body:has(.expertise-hover-preview:not([hidden]):not(.is-inline)) *{
  cursor:none!important;
 }
}

/* About alternates white introduction / black expertise / white experience. */
body.about-page .about-intro-surface{
 background:#fff;color:#1a1a1a;--fg:#1a1a1a;--muted:#6e6e73;
}
body.about-page .about-intro-surface::before{background:#fff}
body.about-page #content .about-intro-surface .about-description p,
body.about-page #content .about-intro-surface .about-location{color:#1a1a1a!important}
body.about-page #content .about-intro-surface .about-resume{
 background:#1a1a1a!important;color:#fff!important;--control-surface:#1a1a1a;--button-ink:#fff;
}

body.about-page #content .about-expertise{
 position:relative;isolation:isolate;background:#000;color:#fff;
 --fg:#fff;--muted:#6e6e73;--line:rgba(255,255,255,.2);
 padding-bottom:64px;border:0;
}
body.about-page #content .about-expertise::before{
 content:'';position:absolute;inset:0 calc(-1 * var(--gutter));z-index:-1;
 background:#000;pointer-events:none;
}
body.about-page #content .about-expertise>.about-section-title{color:#fff!important}
body.about-page #content .about-expertise>article>p{color:#6e6e73!important}
body.about-page #content .about-expertise>article:first-of-type{border-top:0!important}
body.about-page #content .about-expertise>article+article{border-top:1px solid rgba(255,255,255,.2)!important}
body.about-page #content .about-expertise>article:last-child{border-bottom:0!important}
body.about-page #content .about-expertise ::selection{background:#fff;color:#000}
body.about-page #content .about-intro-surface ::selection{background:#1a1a1a;color:#fff}
@media(hover:hover) and (pointer:fine){
 body.about-page #content .about-expertise>[data-expertise-preview]:hover>h2{opacity:.4!important}
}
body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>h2{opacity:.4!important}
@media(max-width:767px){body.about-page #content .about-expertise{padding-bottom:48px}}

/* One larger step for the prominent section-heading roles. */
body.home-page #content .home-section-heading>h2{font-size:64px!important;line-height:68px!important}
body.about-page #content .about-expertise>article>h2{font-size:56px!important;line-height:60px!important}
@media(max-width:767px){
 body.home-page #content .home-section-heading>h2,
 body.about-page #content .about-expertise>article>h2{font-size:44px!important;line-height:48px!important}
}

/* Give footer links more space below the dividing rule. */
body:is(.home-page,.about-page,.case-page) .site-footer{padding-top:40px}

/* Preview frames use a softer radius independently of button geometry. */
html body:is(.home-page,.about-page,.case-page){--media-radius:12px}
html body:is(.home-page,.about-page,.case-page) #content :is(.project-media,.project-link,.image-zoom),
body.about-page .expertise-hover-preview{border-radius:12px!important}

/* One prominent H2 role across Home, Expertise, case sections and Project Details. */
html body.home-page #content .home-section-heading>h2,
html body.about-page #content .about-expertise>article>h2,
html body.case-page #content .section-heading h2,
html body.case-page #content .case-result-group>h2,
html body.case-page .project-details .details-grid>h2{
 font-size:64px!important;line-height:68px!important;
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-weight:500!important;letter-spacing:0!important;
}
@media(max-width:767px){
 html body.home-page #content .home-section-heading>h2,
 html body.about-page #content .about-expertise>article>h2,
 html body.case-page #content .section-heading h2,
 html body.case-page #content .case-result-group>h2,
 html body.case-page .project-details .details-grid>h2{
  font-size:44px!important;line-height:48px!important;
 }
}

html body:is(.home-page,.about-page,.case-page) #content :is(.home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,.case-result-group>h2,.project-details .details-grid>h2) *{
 font-family:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;
}

/* Large Regular descriptions use a more open reading rhythm across all templates. */
body.home-page #content .home-section-description,
body.about-page #content .about-intro-surface .about-description p,
body.case-page #content .overview-copy :is(p,li),
body.case-page #content .chapter-description,
body.case-page #project-details .details-copy .details-intro p{line-height:1.25!important}
@media(max-width:767px){
 body.about-page #content .about-intro-surface .about-description p,
 body.case-page #content .overview-copy :is(p,li),
 body.case-page #project-details .details-copy .details-intro p{line-height:1.3!important}
}

/* Secondary reading copy uses Regular, one step lighter than Medium. */
body.about-page #content .experience-row>.experience-role,
body.about-page #content .about-expertise>article>p,
body.about-page #content .award-row>p:not(.award-year),
body.case-page #project-details .details-section :is(p,li){font-weight:500!important}

/* Case reading system: 24px facts/body, 32px introductions, shared 64px display sections. */
body.case-page #content .case-facts dt,
body.case-page #project-details :is(.details-meta,.details-team) dt{
 font-size:24px!important;line-height:32px!important;font-weight:500!important;
 color:#6e6e73!important;letter-spacing:0!important;
}
body.case-page #content .case-facts dd,
body.case-page #project-details :is(.details-meta,.details-team) dd{
 font-size:24px!important;line-height:32px!important;font-weight:600!important;
 color:#1a1a1a!important;letter-spacing:0!important;margin:8px 0 0;
}
body.case-page #content .case-facts dl>div+div,
body.case-page #project-details .details-meta dl>div+div{margin-top:32px}
body.case-page #content .case-subtitle{margin-block:32px 64px;row-gap:24px}
body.case-page #content .case-subtitle>p{
 font-size:24px!important;line-height:32px!important;font-weight:500!important;
}
body.case-page #content .case-overview{padding-block:96px;row-gap:48px}
body.case-page #content .overview-copy .intro{margin:0 0 32px}
body.case-page #content .overview-copy .overview-details p+p{margin-top:32px}
body.case-page #content .case-chapter{padding-top:96px}
body.case-page #content .section-heading{margin-bottom:64px;row-gap:32px}
body.case-page #content .case-results{margin-top:96px}
body.case-page #content .case-result-group>h2{margin-bottom:48px}
body.case-page #content .case-result-group+.case-result-group{margin-top:96px}
body.case-page #content .result-description{
 font-size:24px!important;line-height:32px!important;font-weight:500!important;
}
/* The details overlay has the same paragraph rhythm and clear section labels. */
body.case-page #project-details .details-grid{padding-block:64px 96px;row-gap:64px}
body.case-page #project-details .details-meta{padding-inline-end:16px}
body.case-page #project-details .details-copy{padding-inline-end:0}
body.case-page #project-details .details-intro p+p{margin-top:32px}
body.case-page #project-details .details-section{margin-top:64px}
body.case-page #project-details .details-section>h3{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:32px!important;line-height:40px!important;font-weight:500!important;
 letter-spacing:0!important;margin-bottom:32px;
}
body.case-page #project-details .details-section :is(p,li){
 font-size:24px!important;line-height:32px!important;font-weight:500!important;
}
body.case-page #project-details .details-section p+p{margin-top:24px}
body.case-page #project-details .details-team{gap:32px 16px}
@media(max-width:767px){
 body.case-page #content .case-subtitle{margin-block:24px 48px}
 body.case-page #content .case-overview{padding-block:64px;row-gap:48px}
 body.case-page #content .case-chapter{padding-top:64px}
 body.case-page #content .section-heading{margin-bottom:40px;row-gap:24px}
 body.case-page #content .case-results{margin-top:64px}
 body.case-page #content .case-result-group>h2{margin-bottom:32px}
 body.case-page #content .case-result-group+.case-result-group{margin-top:64px}
 body.case-page #project-details .details-grid{padding-block:40px 64px;row-gap:48px}
 body.case-page #project-details .details-section{margin-top:48px}
 body.case-page #project-details .details-meta{padding-inline-end:0}
}

/* Gallery captions are temporarily disabled; their source text remains intact. */
body.case-page #content figcaption{display:none!important}
body.case-page #content .case-gallery>.case-figure,
body.case-page #content .case-gallery>.case-figure:has(>figcaption:not(:empty)){
 margin-bottom:0;gap:0;
}

/* Every case section heading uses all four layout columns. */
html body.case-page #content .section-heading{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
html body.case-page #content .section-heading h2,
html body.case-page #content .case-chapter>h2{
 grid-column:1/-1;grid-row:1;width:100%;max-width:none;min-width:0;padding-inline-end:0;
}
html body.case-page #content .section-heading>.section-open{grid-column:4;grid-row:2;justify-self:end}
@media(max-width:767px){
 html body.case-page #content .section-heading{grid-template-columns:minmax(0,1fr)}
 html body.case-page #content .section-heading>.section-open{grid-column:1;grid-row:2;justify-self:start}
}

/* A lead video outside the gallery follows the same gap as all uncaptioned rows. */
body.case-page #content .case-chapter>.case-film:has(+.case-gallery){
 margin:0 0 var(--grid-gap,16px);padding:0;
}
/* No sticky edge or progress stripe before the first actual scroll. */
html body.case-page:not(.header-scrolled)>.header-backdrop{
 opacity:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
html body.case-page:not(.header-scrolled)>.header-progress{opacity:0!important}
html body.case-page:not(.header-scrolled)>.site-header,
html body.case-page:not(.header-scrolled)>.site-header :is(.header-row,.chapter-nav){
 border:0!important;box-shadow:none!important;
}

/* Footer destinations share the section-heading scale. */
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{
 font-size:64px!important;line-height:68px!important;
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-weight:500!important;letter-spacing:0!important;
}
@media(max-width:1100px) and (min-width:768px){
 body .site-footer .footer-main-links{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
}
@media(max-width:767px){
 html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{
  font-size:44px!important;line-height:48px!important;
 }
}

/* The controller occupies real inline space between FOR and GAMES. */
body.home-page #content .hero-layout h1 .hero-inline-gamepad{
 display:inline-block;position:relative;width:1.1em;height:1em;
 vertical-align:-.14em;margin-inline:.04em;overflow:hidden;
}
body.home-page #content .hero-layout h1 .hero-inline-gamepad>img{
 position:absolute;left:50%;top:50%;width:1.45em;height:1.45em;max-width:none;
 object-fit:contain;transform:translate(-50%,-50%);pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
 body.home-page #content .hero-layout h1.text-motion .hero-inline-gamepad{
  opacity:0;filter:blur(8px);
  transition:opacity .85s ease,filter 1.1s ease;
  transition-delay:calc(var(--reveal-delay,0ms) + 140ms);
 }
 body.home-page #content .hero-layout h1.text-motion.is-visible .hero-inline-gamepad{opacity:1;filter:none}
}

/* Transparent gamepad is contained in the inline slot, never cropped. */
body.home-page #content .hero-layout h1 .hero-inline-gamepad{
 width:1.15em;height:1.05em;vertical-align:-.18em;overflow:visible;
}
body.home-page #content .hero-layout h1 .hero-inline-gamepad>img{
 position:static;inset:auto;width:100%;height:100%;max-width:100%;
 object-fit:contain;transform:none;
}

/* Matched, restrained icon slots remain part of the text flow during swapping. */
body.home-page #content .hero-layout h1 .hero-inline-icon{
 display:inline-block;position:relative;width:1em;height:.9em;
 vertical-align:-.14em;margin-inline:.04em;overflow:visible;
}
body.home-page #content .hero-layout h1 .hero-inline-icon>img{
 position:static;inset:auto;width:100%;height:100%;max-width:100%;
 object-fit:contain;transform:none;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
 body.home-page #content .hero-layout h1.text-motion .hero-inline-icon{
  opacity:0;filter:blur(8px);transition:opacity .85s ease,filter 1.1s ease;
  transition-delay:calc(var(--reveal-delay,0ms) + 140ms);
 }
 body.home-page #content .hero-layout h1.text-motion.is-visible .hero-inline-icon{opacity:1;filter:none}
}

/* Tighten the natural text-space plus icon margins by roughly one third. */
body.home-page #content .hero-layout h1 .hero-inline-icon{margin-inline:-.05em}

/* Enlarge artwork without widening its reserved inline slot or text gaps. */
body.home-page #content .hero-layout h1 .hero-inline-icon>img{
 transform:scale(1.25);transform-origin:center;
}

/* About uses its own white icon assets; Home retains the original dark set. */
body.about-page #content #about-title .about-inline-icon{
 display:inline-block;position:relative;width:1em;height:.9em;
 vertical-align:-.14em;margin-inline:-.05em;overflow:visible;
}
body.about-page #content #about-title .about-inline-icon>img{
 position:static;inset:auto;width:100%;height:100%;max-width:100%;
 object-fit:contain;transform:scale(1.25);transform-origin:center;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
 body.about-page #content #about-title.text-motion .about-inline-icon{
  opacity:0;filter:blur(8px);transition:opacity .85s ease,filter 1.1s ease;
  transition-delay:calc(var(--reveal-delay,0ms) + 140ms);
 }
 body.about-page #content #about-title.text-motion.is-visible .about-inline-icon{opacity:1;filter:none}
}

/* Gamepad artwork gets a crisp dark contour, including when cycled into another slot. */
body.home-page #content .hero-layout h1 .hero-inline-icon>img[src*="gamepad"],
body.about-page #content #about-title .about-inline-icon>img[src*="gamepad"]{
 image-rendering:pixelated;
 filter:drop-shadow(1px 0 0 #111) drop-shadow(-1px 0 0 #111) drop-shadow(0 1px 0 #111) drop-shadow(0 -1px 0 #111);
}

/* Category illustrations retain their original pixel version throughout the reveal. */
body.about-page .expertise-hover-preview{aspect-ratio:1;background:#ededed}
body.about-page .expertise-hover-preview>.project-media{
 position:relative;width:100%;height:100%;aspect-ratio:1;min-height:0;
 background:#ededed;border-radius:inherit;overflow:hidden;
}
body.about-page .expertise-hover-preview>.project-media>img{
 position:absolute;inset:0;width:100%;height:100%;max-width:100%;
 object-fit:contain;transform:none;display:block;
}
body.about-page .expertise-hover-preview .pixel-enter-canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
 body.about-page #content .about-expertise>[data-expertise-preview]:hover>p{color:#fff!important}
}
body.about-page #content .about-expertise>[data-expertise-preview]>p{transition:color .3s cubic-bezier(.22,.61,.36,1)}
body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>p{color:#fff!important}
@media(prefers-reduced-motion:reduce){
 body.about-page #content .about-expertise>[data-expertise-preview]>p{transition:none}
}

/* Bring section introductions closer to the following previews. */
body.home-page #content .home-section-heading{margin-bottom:64px}
body.case-page #content .section-heading{margin-bottom:48px}
@media(max-width:767px){
 body.home-page #content .home-section-heading{margin-bottom:48px}
 body.case-page #content .section-heading{margin-bottom:32px}
}

/* Project Details uses the standard primary-action palette, without blending. */
body.case-page .details-trigger.action-button{
 background:#1a1a1a!important;color:#fff!important;mix-blend-mode:normal!important;
 --control-surface:#1a1a1a;--button-ink:#fff;--control-hover:#ededed;
}
body.case-page .details-trigger.action-button .control-label{color:inherit!important;mix-blend-mode:normal!important}
body.case-page .details-trigger.action-button.fill-control::before{background:#ededed!important}
body.case-page .details-trigger.action-button:is(:hover,:focus-visible){background:#ededed!important;color:#1a1a1a!important}

/* Section display headings and footer links take one lighter weight step. */
html body.home-page #content .home-section-heading>h2,
html body.about-page #content .about-expertise>article>h2,
html body.case-page #content .section-heading h2,
html body.case-page #content .case-chapter>h2,
html body.case-page #content .case-result-group>h2,
html body.case-page .project-details .details-grid>h2,
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{font-weight:500!important}
html body.about-page #content .about-section-title{font-weight:500!important}
html body:is(.home-page,.about-page,.case-page) #content :is(.home-section-heading>h2,.about-expertise>article>h2,.about-section-title,.section-heading h2,.case-chapter>h2,.case-result-group>h2,.project-details .details-grid>h2) *,
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading *{font-weight:inherit!important}

/* Authoritative display weights override the older shared type-role selector. */
html body:is(.home-page,.about-page,.case-page) #content :is(.home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,.case-chapter>h2,.case-result-group>h2,.project-details .details-grid>h2){
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;font-weight:500!important;
}
html body.case-page #content #impact-heading,
html body.case-page #content #impact-heading *{font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;font-weight:500!important}
html body.about-page #content :is(.about-expertise,.about-experience,.about-recognition)>h2.about-section-title{font-weight:500!important}

/* Words reveal from blur; inline illustrations build from coarse pixels instead. */
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon){
 opacity:1!important;filter:none!important;transition:none!important;
}
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon)>.pixel-enter-canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
 transform:scale(1.25);transform-origin:center;image-rendering:pixelated;
}
@media(prefers-reduced-motion:no-preference){
 html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):not(.icon-entered)>img{visibility:hidden!important}
}

/* One 12px radius for every button and button-like navigation control. */
html body:is(.home-page,.about-page,.case-page){--control-radius:12px}
html body:is(.home-page,.about-page,.case-page) :is(button,[role="button"],.action-button,.explore,.back-top,.fill-control),
html body:is(.home-page,.about-page,.case-page) .site-header .header-row .main-nav>a,
html body:is(.home-page,.about-page,.case-page) .site-footer .footer-bottom>.back-top{
 border-radius:12px!important;
}

/* Expertise headings share the supporting copy's idle/active palette. */
body.about-page #content .about-expertise>[data-expertise-preview]>h2{color:#6e6e73!important}
body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>h2{color:#fff!important}
@media(hover:hover) and (pointer:fine){
 body.about-page #content .about-expertise>[data-expertise-preview]:hover>h2{color:#fff!important}
}

/* Match the viewport-to-title space with the title-to-first-category space. */
body.home-page{--home-title-space:96px;padding-top:0}
body.home-page #content{padding-top:max(0px,calc(var(--home-title-space) - var(--main-header-height,64px)));margin-top:0;display:flow-root}
body.home-page #content>.hero.gallery-intro{
 margin-top:0;margin-bottom:var(--home-title-space);padding-block:0;
}
body.home-page #content>.hero.gallery-intro>.hero-layout{padding-block:0}
body.home-page #content>#work{margin-top:0;padding-top:0}
@media(max-width:767px){body.home-page{--home-title-space:72px}}

/* Wider outer gutters frame a tighter column rhythm across the portfolio. */
html body:is(.home-page,.about-page,.case-page){
 --gutter:72px;--content-inset:var(--gutter);--grid-gap:20px;
}
@media(max-width:1100px){
 html body:is(.home-page,.about-page,.case-page){--gutter:54px;--grid-gap:20px}
}
@media(max-width:767px){
 html body:is(.home-page,.about-page,.case-page){--gutter:36px;--grid-gap:20px}
}
html body:is(.home-page,.about-page,.case-page) .shell{
 width:calc(100% - 2 * var(--gutter));max-width:none;margin-inline:var(--gutter);
}
html body:is(.home-page,.about-page,.case-page) .site-header .header-row{padding-inline:var(--gutter)}
html body:is(.home-page,.about-page)>.inverting-signature{left:var(--gutter)}
html body.home-page #content>.hero.gallery-intro{width:calc(100% - 2 * var(--gutter));margin-inline:var(--gutter)}
html body.home-page #content :is(.project-grid,.home-section-heading){column-gap:var(--grid-gap)}
html body.about-page #content :is(.about-page-title,.about-overview,.about-expertise,.about-expertise>article,.experience-row,.award-row,.about-background){column-gap:var(--grid-gap)}
html body.case-page :is(.case-overview,.section-heading,.case-gallery,.details-grid,.details-team){column-gap:var(--grid-gap)}
html body.case-page #content .case-gallery{row-gap:var(--grid-gap)}
html body:is(.home-page,.about-page,.case-page) .site-footer .footer-main-links{column-gap:var(--grid-gap)}
html body.case-page .details-trigger.action-button{right:var(--gutter)!important}
body.about-page>.expertise-hover-preview{width:calc((100vw - 2 * var(--gutter) - 3 * var(--grid-gap)) / 4)}

/* Balance the visible artwork, preserving every inline slot's dimensions. */
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon){--inline-art-scale:1.25}
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):has(>img[src*="mouse"]){--inline-art-scale:1.35}
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):has(>img[src*="keyboard"]){--inline-art-scale:1.45}
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):has(>img[src*="vr"]){--inline-art-scale:1.35}
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon)>:is(img,.pixel-enter-canvas){
 transform:scale(var(--inline-art-scale));transform-origin:center;
}

/* CV occupies the former location label at the top of the first column. */
body.about-page #content .about-overview>.about-resume{
 grid-column:1;grid-row:1;align-self:start;justify-self:start;margin:0;
}

/* About keeps its transparent header fixed and visible while scrolling. */
body.about-page{padding-top:var(--main-header-height,64px)}
html body.about-page>.header-backdrop{display:none!important}
html body.about-page>.site-header{
 position:fixed;inset:0 0 auto;width:100%;height:var(--main-header-height,64px);
 background:transparent!important;border:0!important;box-shadow:none!important;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 overflow:hidden;transform:translateY(0);transition:transform .35s var(--ease);
}
html body.about-page>.site-header::before,html body.about-page>.site-header::after{display:none!important}
html body.about-page>.inverting-signature{transform:translateY(0);transition:transform .35s var(--ease)}
@media(prefers-reduced-motion:reduce){html body.about-page>:is(.site-header,.inverting-signature){transition:none}}

/* Give primary actions more room around their labels. */
html body:is(.home-page,.about-page,.case-page) .action-button{padding-inline:28px}

/* Case titles start at the same viewport position as the Home title. */
body.case-page{--page-title-top:96px}
body.case-page #content{margin-top:0;padding-top:0}
body.case-page #content>.case-hero{
 margin-top:0;padding-top:max(0px,calc(var(--page-title-top) - var(--main-header-height,64px)));
}
@media(max-width:767px){body.case-page{--page-title-top:72px}}

/* Move the About title and its aligned portrait together to the shared start. */
body.about-page{--page-title-top:96px}
body.about-page #content{margin-top:0;padding-top:0}
body.about-page #content .about-page-title{
 margin-top:0;padding-top:max(0px,calc(var(--page-title-top) - var(--main-header-height,64px)));
}
@media(max-width:767px){body.about-page{--page-title-top:72px}}

/* About's title-to-biography/CV gap matches Home's title-to-first-section gap. */
body.about-page #content .about-page-title{padding-bottom:var(--page-title-top,96px)}

/* Project titles and descriptions share Medium weight. */
html body.home-page #content .project :is(.project-copy,.project-copy h3,.project-copy h3 a,.project-description){font-weight:600!important}

/* A little more air between Home previews and their captions. */
body.home-page #content .project{gap:16px}

/* Shared small caption role for project cards, figures, and gallery overlays. */
html body:is(.home-page,.about-page,.case-page){--type-card-title:16px;--type-small:16px}
html body:is(.home-page,.about-page,.case-page) :is(
 .project-caption .project-copy,.project-caption .project-copy h3,.project-caption .project-copy h3 a,
 .project-caption .project-description,figcaption,.gallery .gallery-caption,
 .gallery .gallery-caption p,.gallery .gallery-project,.gallery .gallery-count
){
 font-family:var(--font-copy)!important;font-size:16px!important;
 line-height:24px!important;font-weight:600!important;letter-spacing:0!important;
}
html body:is(.home-page,.about-page,.case-page) figcaption{margin-top:16px}
html body:is(.home-page,.about-page,.case-page) .gallery .gallery-caption{padding-top:16px}

/* More horizontal breathing room inside tags. */
html body:is(.home-page,.about-page,.case-page) .tags>span{padding-inline:24px!important}

/* Both Download CV actions use the same deeper gray hover. */
html body.about-page #content .action-button[download]:is(:hover,:focus-visible){background:#d9d9d9!important;color:#1a1a1a!important}
html body.about-page #content .action-button[download].fill-control::before{background:#d9d9d9!important}
html body.about-page #content .action-button[download]:is(:hover,:focus-visible) .control-label{color:inherit!important}

/* Larger previous/next links with twice their original divider padding. */
html body.case-page #content .case-navigation{
 padding-block:48px;align-items:center;column-gap:var(--grid-gap);margin-bottom:0;
}
html body.case-page #content .case-navigation a,
html body.case-page #content .case-navigation a *{
 font-family:var(--font-copy)!important;font-size:24px!important;line-height:32px!important;
 font-weight:600!important;letter-spacing:0!important;
}
/* Square Impact cards with the shared 12px artwork radius. */
html body.case-page #content .case-results .result-card{
 flex:0 0 max(320px,calc((100% - 3 * var(--grid-gap)) / 4));
 aspect-ratio:1;min-height:0!important;height:auto;padding:48px 32px 32px;
 gap:16px;border-radius:12px;box-shadow:none;
}
html body.case-page #content .result-card .result-value,
html body.case-page #content .result-card .result-value .impact-counter-number{
 font-family:var(--font-copy)!important;font-size:64px!important;line-height:70px!important;
 font-weight:500!important;letter-spacing:-.02em!important;
}
html body.case-page #content .result-card .result-copy h3{
 font-family:var(--font-copy)!important;font-size:24px!important;line-height:31.2px!important;
 font-weight:600!important;letter-spacing:0!important;
}
html body.case-page #content .result-card .result-description,
html body#top.about-page #content .quick-facts-card .result-description{
 margin-top:12px;font-size:22px!important;line-height:30px!important;
 font-weight:500!important;letter-spacing:0!important;color:#6e6e73!important;
}
@media(min-width:768px) and (max-width:1100px){
 html body.case-page #content .case-results .result-card{flex-basis:max(320px,calc((100% - var(--grid-gap)) / 2))}
}
@media(max-width:767px){
 html body.case-page #content .case-results .result-card{flex-basis:max(288px,100%);padding:40px 24px 24px}
}
/* Leave a dedicated middle lane for the parked control on small screens. */
@media(max-width:767px){
 html body.case-page #content .case-navigation{flex-direction:column;align-items:stretch;row-gap:96px}
 html body.case-page #content .case-navigation a:first-child{align-self:flex-start}
 html body.case-page #content .case-navigation a:last-child{align-self:flex-end}
}

/* Case signatures invert independently from the normal header navigation pills. */
body.case-page>.inverting-signature{
 position:fixed;z-index:31;left:var(--gutter);top:21px;color:#fff;
 font-family:var(--font-copy);font-size:16px!important;line-height:22px!important;
 letter-spacing:0!important;mix-blend-mode:difference;
 transform:translateY(0);transition:transform .35s var(--ease);
}
body.case-page>.site-header .brand{visibility:hidden}
body.case-page.case-nav-active:not(.show-main-nav)>.inverting-signature{transform:translateY(calc(-1 * var(--main-header-height,64px)))}
html body:is(.home-page,.about-page,.case-page)>.inverting-signature,
html body:is(.home-page,.about-page,.case-page) .site-header :is(.signature,.main-nav>a){font-weight:600!important}
@media(prefers-reduced-motion:reduce){body.case-page>.inverting-signature{transition:none}}

/* Ending links occupy their text width, rather than stretching across half the grid. */
html body.case-page #content .case-navigation>a{width:max-content;max-width:100%;justify-self:start}
html body.case-page #content .case-navigation>a:last-child{justify-self:end}
@media(max-width:767px){html body.case-page #content .case-navigation{display:flex}}


/* Shared large descriptions: 30/38 Regular, preserving compact mobile introductions. */
html body.home-page #content .home-section-description,
html body.about-page #content .about-intro-surface .about-description p,
html body.case-page #content .overview-copy :is(p,li),
html body.case-page #content .chapter-description,
html body.case-page #project-details .details-copy .details-intro p{
 font-size:30px!important;line-height:38px!important;font-weight:500!important;
}
@media(max-width:767px){
 html body.about-page #content .about-intro-surface .about-description p,
 html body.case-page #content .overview-copy :is(p,li),
 html body.case-page #project-details .details-copy .details-intro p{
  font-size:24px!important;line-height:31.2px!important;
 }
}


/* More breathing room after the black expertise surface than before Recognition. */
html body.about-page #content .about-experience{
 padding-top:calc(var(--section-space) + 16px);
}

/* Slightly smaller shared H2 display role, including matching footer links. */
html body.home-page #content .home-section-heading>h2,
html body.about-page #content .about-expertise>article>h2,
html body.case-page #content .section-heading h2,
html body.case-page #content .case-chapter>h2,
html body.case-page #content .case-result-group>h2,
html body.case-page .project-details .details-grid>h2,
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{
 font-size:62px!important;line-height:66px!important;
}
@media(max-width:767px){
 html body.home-page #content .home-section-heading>h2,
 html body.about-page #content .about-expertise>article>h2,
 html body.case-page #content .section-heading h2,
 html body.case-page #content .case-chapter>h2,
 html body.case-page #content .case-result-group>h2,
 html body.case-page .project-details .details-grid>h2,
 html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{
  font-size:42px!important;line-height:46px!important;
 }
}


/* Compact controls share the active segment's 8px radius; large actions stay 12px. */
html body:is(.home-page,.about-page,.case-page) :is(button,[role="button"]):not(.action-button),
html body:is(.home-page,.about-page,.case-page) .site-header .header-row .main-nav>a,
html body:is(.home-page,.about-page,.case-page) .site-footer .footer-bottom>.back-top,
html body:is(.home-page,.about-page,.case-page) :is(.back-top,.gallery-prev,.gallery-next,.lightbox-close),
html body>.bottom-section-nav .bottom-section-rail>a{
 border-radius:8px!important;
}


/* Animated arrows retain the exact type size of their footer destination. */
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading .footer-arrow,
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading .footer-arrow-glyph{
 font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;
 letter-spacing:inherit!important;
}


/* The shared 12px visual-card radius includes Impacts and gallery media. */
html body:is(.home-page,.about-page,.case-page){--media-radius:12px}
html body:is(.home-page,.about-page,.case-page) #content :is(.project-media,.project-link,.image-zoom,.about-portrait,.home-reel,.result-card),
html body:is(.home-page,.about-page,.case-page) :is(.gallery-media,.gallery-image,.gallery-outgoing,.transition-cover),
html body.about-page .expertise-hover-preview{
 border-radius:12px!important;
}
html body:is(.home-page,.about-page,.case-page) #content :is(.project-media,.about-portrait,.home-reel),
html body:is(.home-page,.about-page,.case-page) .gallery-media{
 overflow:hidden;
}


/* Light controls fill dark; dark controls fill light, with matching label contrast. */
html body:is(.home-page,.about-page,.case-page) :where(.action-button,.back-top,.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle,.site-header .header-row .main-nav>a){
 --hover-base:#f3f3f3;--hover-fill:#1a1a1a;--hover-ink:#fff;
}
html body:is(.about-page,.case-page) .action-button,
html body.home-page :is(.site-header .header-row .main-nav>a,.back-top),
html body.about-page.about-intro-active .site-header .header-row .main-nav>a,
html body:is(.home-page,.about-page,.case-page) .gallery :is(.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle){
 --hover-base:#1a1a1a;--hover-fill:#f3f3f3;--hover-ink:#1a1a1a;
}
html body.home-page .action-button{--hover-base:#fff}
html body:is(.home-page,.about-page,.case-page) :is(.action-button,.back-top,.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle,.site-header .header-row .main-nav>a).fill-control::before,
html body.about-page #content .action-button[download].fill-control::before{
 background:var(--hover-fill)!important;
}
html body:is(.home-page,.about-page,.case-page) :is(.action-button,.back-top,.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle,.site-header .header-row .main-nav>a):is(:hover,:focus-visible),
html body.about-page #content .action-button[download]:is(:hover,:focus-visible){
 background:var(--hover-base)!important;color:var(--hover-ink)!important;opacity:1;
}
html body:is(.home-page,.about-page,.case-page) :is(.action-button,.back-top,.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle,.site-header .header-row .main-nav>a):is(:hover,:focus-visible) .control-label{
 color:var(--hover-ink)!important;mix-blend-mode:normal!important;
}


/* A centered H1-scale statement between special projects and websites. */
html body.home-page #content>.home-experience-statement{
 padding-block:var(--home-title-space);margin-block:0;
}
html body.home-page #content .home-experience-message,
html body.home-page #content .home-experience-message *{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:var(--h1-size)!important;line-height:var(--h1-leading)!important;
 font-weight:500!important;letter-spacing:.02em!important;
 text-align:center;text-transform:uppercase;color:var(--fg);
}
html body.home-page #content .home-experience-message{margin:0;max-width:none}
html body.home-page #content>.home-experience-statement+#website-work{
 padding-top:0;margin-top:0;
}


/* Keep the statement's upper and lower whitespace equal, including the section gap. */
html body.home-page #content>#special-projects{margin-bottom:0}
html body.home-page #content>.home-experience-statement{
 padding-block:calc(var(--home-title-space) + 72px);
}
@media(max-width:767px){
 html body.home-page #content>.home-experience-statement{
  padding-block:calc(var(--home-title-space) + 48px);
 }
}


/* Give the three-line experience message a little more leading. */
html body.home-page #content .home-experience-message,
html body.home-page #content .home-experience-message *{
 line-height:calc(var(--h1-leading) + 8px)!important;
}
@media(max-width:767px){
 html body.home-page #content .home-experience-message,
 html body.home-page #content .home-experience-message *{
  line-height:calc(var(--h1-leading) + 4px)!important;
 }
}


/* Dark header pills keep the same visible gray surface as Home's bottom rail. */
html body.home-page .site-header .header-row .main-nav>a,
html body.about-page.about-intro-active .site-header .header-row .main-nav>a{
 --control-surface:#1a1a1a;--button-ink:#fff;--hover-base:#1a1a1a;
 --hover-fill:#f3f3f3;--hover-ink:#1a1a1a;
 background:#1a1a1a!important;
}
html body.home-page .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible),
html body.about-page.about-intro-active .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible){
 color:#fff!important;
}
html body.home-page .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible) .control-label,
html body.about-page.about-intro-active .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible) .control-label{
 color:#fff!important;
}


/* The promo uses the same inline slots and artwork scale as the opening title. */
html body.home-page #content .home-experience-message .hero-inline-icon{
 display:inline-block;position:relative;width:1em;height:.9em;
 vertical-align:-.14em;margin-inline:-.05em;overflow:visible;
}
html body.home-page #content .home-experience-message .hero-inline-icon>img{
 position:static;inset:auto;width:100%;height:100%;max-width:100%;
 object-fit:contain;pointer-events:none;
}


/* Overscan the square fill; only the button's rounded edge clips the surface. */
html body:is(.home-page,.about-page,.case-page) .fill-control:not(.gallery-cursor){
 overflow:hidden;isolation:isolate;
}
html body:is(.home-page,.about-page,.case-page) .fill-control:not(.gallery-cursor)::before{
 inset:-3px!important;border-radius:0!important;
 clip-path:circle(0px at calc(var(--fill-x,50%) + 3px) calc(var(--fill-y,50%) + 3px));
}
html body:is(.home-page,.about-page,.case-page) .fill-control:not(.gallery-cursor).pointer-hover:hover::before,
html body:is(.home-page,.about-page,.case-page) .fill-control:not(.gallery-cursor):focus-visible::before{
 clip-path:circle(calc(var(--fill-radius,150%) + 8px) at calc(var(--fill-x,50%) + 3px) calc(var(--fill-y,50%) + 3px));
}


/* Home parks its section switcher in the same divider band as case endings. */
html body.home-page #content>#creative-work{margin-bottom:0}
html body.home-page #content>.home-navigation-stop{
 height:128px;margin-block:48px 0;padding:0;
 border-block:1px solid var(--line);box-sizing:border-box;
}
html body.home-page:has(.home-navigation-stop) .site-footer{
 margin-top:0;border-top:0;
}
@media(max-width:767px){
 html body.home-page #content>.home-navigation-stop{height:256px}
}


/* Media flights have one animation owner; old layout transforms cannot cancel them. */
@media(prefers-reduced-motion:no-preference){
 html.motion-pending body.home-page #work>.project-grid>.project:nth-child(-n+3){
  opacity:0;translate:0 100px;
 }
 html body:is(.home-page,.about-page,.case-page) #content .media-reveal.reveal-ready{
  opacity:0;translate:0 100px;transform:none!important;filter:none;
  animation:none!important;transition:none!important;
 }
 html body:is(.home-page,.about-page,.case-page) #content .media-reveal.reveal-ready.is-visible{
  opacity:1;translate:0 0;
 }
}
@media(prefers-reduced-motion:reduce){
 html body:is(.home-page,.about-page,.case-page) #content .media-reveal{
  opacity:1;translate:none!important;transform:none!important;
  animation:none!important;transition:none!important;
 }
}


/* In case galleries only the opening cover travels; subsequent work simply fades in. */
@media(prefers-reduced-motion:no-preference){
 html body.case-page #content .case-gallery>.case-figure.media-reveal.reveal-ready{
  translate:0 0;
 }
}


/* Secondary reading copy and table dates share the 22/30 role. */
html body.about-page #content .about-expertise>article>p,
html body.about-page #content .experience-row>.experience-role,
html body.about-page #content .experience-row>.experience-date,
html body.about-page #content .experience-row>.experience-company .company-heading,
html body.about-page #content .award-row>p,
html body.about-page #content .award-row>h3,
html body.case-page #content .case-facts :is(dt,dd),
html body.case-page #content .case-subtitle>p,
html body.case-page #project-details :is(.details-meta,.details-team) :is(dt,dd),
html body.case-page #project-details .details-section :is(p,li){
 font-size:22px!important;line-height:30px!important;letter-spacing:0!important;
}
html body.about-page #content .award-row>h3{
 font-weight:600!important;
}


/* Table years use the same Regular weight as career roles. */
html body.about-page #content .experience-row>.experience-date,
html body.about-page #content .award-row>.award-year{
 font-weight:500!important;
}


/* Expertise descriptions occupy column three, leaving the fourth column open. */
html body.about-page #content .about-expertise>[data-expertise-preview]>p{
 min-width:0;max-width:100%;translate:0 0;
 transition:translate .8s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.22,.61,.36,1);
}
@media(min-width:768px){
 html body.about-page #content .about-expertise>[data-expertise-preview]>p{
  grid-column:3/span 1;grid-row:1;
 }
 html body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>p{
  translate:50% 0;
 }
}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
 html body.about-page #content .about-expertise>[data-expertise-preview]:hover>p{
  translate:50% 0;
 }
}
@media(prefers-reduced-motion:reduce){
 html body.about-page #content .about-expertise>[data-expertise-preview]>p{
  transition:none;translate:none!important;
 }
}


/* Softer row motion, with a 1.5x larger heading response. */
html body.about-page #content .about-expertise>[data-expertise-preview]>h2{
 transition:color .3s cubic-bezier(.22,.61,.36,1),translate .8s cubic-bezier(.4,0,.2,1);
}
html body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>h2{
 translate:60px 0;
}
@media(hover:hover) and (pointer:fine){
 html body.about-page #content .about-expertise>[data-expertise-preview]:hover>h2{
  translate:60px 0;
 }
}
@media(prefers-reduced-motion:reduce){
 html body.about-page #content .about-expertise>[data-expertise-preview]>h2{
  transition:none;translate:none!important;
 }
}


/* One opaque gray surface for the Home rail and compact dark controls. */
html body:is(.home-page,.about-page,.case-page){--dark-control-surface:#242424}
html body.home-page>.bottom-section-nav{--segment-surface:var(--dark-control-surface)}
html body#top.home-page .site-header .header-row .main-nav>a,
html body#top.about-page.about-intro-active .site-header .header-row .main-nav>a,
html body#top.home-page .site-footer .footer-bottom>.back-top{
 background:var(--dark-control-surface)!important;
 --control-surface:var(--dark-control-surface);--hover-base:var(--dark-control-surface);
 --button-ink:#fff;--hover-fill:#f3f3f3;--hover-ink:#1a1a1a;
 opacity:1!important;filter:none;mix-blend-mode:normal;
 box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
html body#top.home-page .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible),
html body#top.about-page.about-intro-active .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible),
html body#top.home-page .site-footer .footer-bottom>.back-top:not(:hover):not(:focus-visible){color:#fff!important}


/* Match the black section's lower content inset to its upper title inset. */
html body.about-page #content .about-expertise{
 padding-block:96px;
}
html body.about-page #content .about-expertise>article:last-of-type{
 padding-bottom:0;
}
@media(max-width:767px){
 html body.about-page #content .about-expertise{padding-block:64px}
}


/* Decorative row indicators travel between the viewport edges and content columns. */
html body.about-page #content .about-expertise>[data-expertise-preview]>.expertise-direction-track{
 position:absolute;inset:0 calc(-1 * var(--gutter));overflow:hidden;
 pointer-events:none;user-select:none;
}
html body.about-page #content .expertise-direction-track>.expertise-direction{
 position:absolute;top:28px;display:grid;place-items:center;
 width:40px;height:40px;border-radius:8px;
 background:var(--dark-control-surface);color:#fff;
 font-family:var(--font-copy)!important;font-size:16px!important;
 font-weight:600!important;line-height:24px!important;
 transition:translate .8s cubic-bezier(.4,0,.2,1);
}
html body.about-page #content .expertise-direction-left{
 left:var(--gutter);translate:calc(-100% - var(--gutter) - 8px) 0;
}
html body.about-page #content .expertise-direction-right{
 right:var(--gutter);translate:0 0;
}
html body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible .expertise-direction-left{translate:0 0}
html body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible .expertise-direction-right{translate:calc(100% + var(--gutter) + 8px) 0}
@media(hover:hover) and (pointer:fine){
 html body.about-page #content .about-expertise>[data-expertise-preview]:hover .expertise-direction-left{translate:0 0}
 html body.about-page #content .about-expertise>[data-expertise-preview]:hover .expertise-direction-right{translate:calc(100% + var(--gutter) + 8px) 0}
}
@media(max-width:767px){
 html body.about-page #content .expertise-direction-track>.expertise-direction{top:24px}
 html body.about-page #content .about-expertise>[data-expertise-preview]>h2{padding-right:56px}
}
@media(prefers-reduced-motion:reduce){
 html body.about-page #content .expertise-direction-track>.expertise-direction{transition:none}
}


/* Bare display arrows match the first line of each expertise heading. */
html body.about-page #content .expertise-direction-track>.expertise-direction{
 width:1em;height:66px;padding:0;border:0;border-radius:0;
 background:none;color:inherit;
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:62px!important;font-weight:500!important;line-height:66px!important;
 letter-spacing:0!important;
}
html body.about-page #content .about-expertise>[data-expertise-preview]:focus-visible>h2{translate:60px 0}
@media(hover:hover) and (pointer:fine){
 html body.about-page #content .about-expertise>[data-expertise-preview]:hover>h2{translate:60px 0}
}
@media(max-width:767px){
 html body.about-page #content .expertise-direction-track>.expertise-direction{
  font-size:42px!important;line-height:46px!important;height:46px;
 }
}


/* Company and award names are quiet external links, with their existing table type. */
html body.about-page #content :is(.experience-company,.award-row,.about-contact-links) .organization-link{
 font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;
 line-height:inherit!important;letter-spacing:inherit!important;
 color:inherit;text-decoration:none;
 transition:color .32s cubic-bezier(.22,.61,.36,1);
}
html body.about-page #content :is(.experience-company,.award-row,.about-contact-links) .organization-link:is(:hover,:focus-visible){
 color:var(--link-hover,#767676)!important;
}
@media(prefers-reduced-motion:reduce){
 html body.about-page #content .organization-link{transition:none}
}


/* An external-link arrow appears after a word space without shifting the table. */
html body.about-page #content .organization-link>.organization-link-arrow{
 display:inline-block;white-space:nowrap;opacity:0;
 font:inherit!important;color:inherit!important;
 transition:opacity .25s ease;
}
html body.about-page #content .organization-link:is(:hover,:focus-visible)>.organization-link-arrow{
 opacity:1;
}
@media(prefers-reduced-motion:reduce){
 html body.about-page #content .organization-link>.organization-link-arrow{transition:none}
}


/* Case pages never pan sideways; the Impacts rail remains its own scroll area. */
html:has(body:is(.home-page,.case-page,.about-page)){overflow-x:clip}
html body:is(.home-page,.case-page,.about-page){overflow-x:clip}
html body.case-page #content{min-width:0;max-width:100%}
html body.case-page #content .case-results{
 min-width:0;max-width:calc(100% - 2 * var(--gutter));
}
html body.case-page #content :is(.case-result-group,.case-results-rail){
 min-width:0;width:100%;max-width:100%;contain:inline-size;
}
html body.case-page #content .case-results-rail{
 overflow-x:auto;overscroll-behavior-x:contain;
}


/* About's edge-to-edge surfaces and outgoing indicators cannot widen the page. */
html body.about-page #content{min-width:0;max-width:100%}
html body.about-page #content :is(.about-page-title,.about-overview,.about-expertise,.about-experience,.about-recognition){
 min-width:0;max-width:calc(100% - 2 * var(--gutter));
}
html body.about-page #content .about-overview{max-width:100%}


/* Home shares the same horizontal viewport boundary as About and cases. */
html body.home-page #content{min-width:0;max-width:100%}
html body.home-page #content :is(.project-grid,.home-section-heading){min-width:0;max-width:100%}


/* A little more equal breathing room above and below Home's opening H1. */
html body.home-page{--home-first-screen-space:112px}
html body.home-page #content{
 padding-top:max(0px,calc(var(--home-first-screen-space) - var(--main-header-height,64px)));
}
html body.home-page #content>.hero.gallery-intro{
 margin-bottom:var(--home-first-screen-space);
}
@media(max-width:767px){
 html body.home-page{--home-first-screen-space:80px}
}


/* Mirror both phone variants, including their pixel-entry canvas. */
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):has(>img[src*="phone-pixel"])>:is(img,.pixel-enter-canvas){
 transform:scale(var(--inline-art-scale,1.25)) scaleX(-1)!important;
}


/* A record-like pixel follows the active row's category preview. */
html body.about-page #content .about-expertise>[data-expertise-preview]::after{
 content:'';position:absolute;left:0;top:38px;
 width:8px;height:8px;border:0;border-radius:0;background:#fff;
 opacity:0;pointer-events:none;
}
html body.about-page #content .about-expertise>[data-expertise-preview].is-expertise-active::after{
 animation:expertise-record-pixel .8s ease-in-out infinite;
}
@keyframes expertise-record-pixel{
 0%,100%{opacity:0}30%,60%{opacity:1}
}
@media(max-width:767px){
 html body.about-page #content .about-expertise>[data-expertise-preview]::after{top:32px}
}
@media(prefers-reduced-motion:reduce){
 html body.about-page #content .about-expertise>[data-expertise-preview]::after{animation:none!important}
 html body.about-page #content .about-expertise>[data-expertise-preview].is-expertise-active::after{opacity:1}
}


/* Project Details inherits the current display, introduction and secondary-copy roles. */
html body.case-page #project-details .details-grid>#details-title,
html body.case-page #project-details .details-grid>#details-title *{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:62px!important;line-height:66px!important;
 font-weight:500!important;letter-spacing:.02em!important;text-transform:uppercase;
}
html body.case-page #project-details .details-grid>#details-title{
 grid-column:2/-1;margin:0;min-width:0;overflow-wrap:anywhere;
}
html body.case-page #project-details :is(.details-toolbar-grid,.details-meta,.details-team),
html body.case-page #project-details :is(.details-toolbar-grid,.details-meta,.details-team) :is(span,dt,dd){
 font-family:var(--font-copy)!important;font-size:22px!important;line-height:30px!important;
 letter-spacing:0!important;
}
html body.case-page #project-details .details-toolbar-grid{font-weight:600!important}
html body.case-page #project-details :is(.details-meta,.details-team) dt{
 font-weight:500!important;color:#6e6e73!important;
}
html body.case-page #project-details :is(.details-meta,.details-team) dd{
 font-weight:600!important;color:#1a1a1a!important;margin-top:8px;
}
html body.case-page #project-details .details-section>h3{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:32px!important;line-height:36.8px!important;font-weight:500!important;
 letter-spacing:0!important;text-transform:uppercase;
}
@media(max-width:650px){
 html body.case-page #project-details .details-grid>#details-title{grid-column:1/-1}
}

/* Gallery title / screen caption / close form a balanced top row. */
html body:is(.home-page,.about-page,.case-page) .gallery .gallery-toolbar{
 display:grid;grid-template-columns:minmax(56px,1fr) minmax(0,2fr) minmax(56px,1fr);
 align-items:center;gap:16px;min-width:0;
}
html body:is(.home-page,.about-page,.case-page) .gallery .gallery-project{
 grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;
}
html body:is(.home-page,.about-page,.case-page) .gallery .gallery-screen-title{
 grid-column:2;min-width:0;max-width:100%;margin:0;padding:0;
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:24px!important;
 font-weight:600!important;letter-spacing:0!important;text-align:center;color:#fff;
 overflow-wrap:anywhere;
}
html body:is(.home-page,.about-page,.case-page) .gallery .gallery-toolbar>.lightbox-close{
 grid-column:3;justify-self:end;
}
html body:is(.home-page,.about-page,.case-page) .gallery .gallery-caption{justify-content:flex-end}

/* All compact gallery controls share 8px corners and a light, regular-weight glyph. */
html body:is(.home-page,.about-page,.case-page) .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next,.lightbox-close){
 border-radius:8px!important;
}
html body:is(.home-page,.about-page,.case-page) :is(.gallery,.project-details) .lightbox-close svg{
 display:block;width:23px;height:23px;stroke-width:2;
}


/* Case-ending destinations use the standard 16px Medium link role. */
html body.case-page #content .case-navigation a,
html body.case-page #content .case-navigation a *{
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:24px!important;
 font-weight:600!important;letter-spacing:0!important;
}


/* A compact H2 title and shorter inset beneath the Project Details toolbar. */
html body.case-page #project-details .details-grid{padding-top:24px;row-gap:40px}
@media(max-width:767px){
 html body.case-page #project-details .details-grid{padding-top:16px;row-gap:32px}
 html body.case-page #project-details .details-grid>#details-title,
 html body.case-page #project-details .details-grid>#details-title *{
  font-size:42px!important;line-height:46px!important;
 }
}

/* The page and full-screen gallery share a 3px progress line. */
html body>.header-progress,
html body .gallery .gallery-progress,
html body .read-progress{height:3px}


/* Case subtitles use the same dark Medium role as metadata values. */
html body.case-page #content .case-subtitle>p,
html body.case-page #content .case-subtitle>p *{
 font-weight:600!important;color:#1a1a1a!important;
}


/* A tighter case title/subtitle pair, with explicit tag insets at every breakpoint. */
html body.case-page #content .case-subtitle{margin-top:24px}
html body.case-page #content .case-subtitle .tags>span{
 padding-inline:24px!important;
}


/* Extra leading only for the display titles that contain hardware icons. */
html body:is(.home-page,.about-page){--h1-leading:136px}
@media(max-width:1100px){
 html body:is(.home-page,.about-page){--h1-leading:104px}
}
@media(max-width:767px){
 html body:is(.home-page,.about-page){--h1-leading:52px}
}
html body.home-page #content .home-experience-message,
html body.home-page #content .home-experience-message *{
 line-height:var(--h1-leading)!important;
}

/* CV cursor artwork is passive and uses the same visual scale as the H1 icons. */
.cv-cursor-preview{position:fixed;left:0;top:0;width:calc(var(--h1-size,120px)*1.32);height:calc(var(--h1-size,120px)*1.32);z-index:100000;pointer-events:none;isolation:isolate;transition:translate 90ms ease-out}
.cv-cursor-preview[hidden]{display:none}
.cv-cursor-preview canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
body.cv-cursor-active .site-cursor{opacity:0!important;visibility:hidden!important}
@media(prefers-reduced-motion:reduce){.cv-cursor-preview{transition:none}}

/* Wide-screen H1 scale: fluid between desktop art-direction checkpoints. */
@media(min-width:1600px){
 html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(120px,calc(8vw - 8px),136px);--h1-leading:calc(var(--h1-size)*1.0666667)}
 html body:is(.home-page,.about-page){--h1-leading:calc(var(--h1-size)*1.1333333)}
}
@media(min-width:1800px){
 html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(136px,calc(4vw + 64px),152px)}
}
@media(min-width:2200px){
 html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(152px,calc(6.6666667vw + 5.333333px),176px)}
}
@media(min-width:2560px){
 html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(176px,calc(5vw + 48px),240px)}
}

/* Tighter, consistent first-screen whitespace across the portfolio. */
html body:is(.home-page,.about-page,.case-page){--page-title-top:88px;--home-first-screen-space:88px;--home-title-space:88px}
html body.about-page #content .about-page-title{padding-bottom:var(--page-title-top)}
html body.case-page #content .case-subtitle{margin-bottom:40px}
html body.about-page #content .about-page-title>h1{align-self:start;margin-top:0;padding-top:0}
html body.about-page #content .about-page-title>.about-portrait{align-self:start;margin-top:0;top:0}
@media(min-width:768px){
 html body.about-page #content .about-page-title>h1,
 html body.about-page #content .about-page-title>.about-portrait{grid-row:1}
}
@media(max-width:767px){
 html body:is(.home-page,.about-page,.case-page){--page-title-top:64px;--home-first-screen-space:64px;--home-title-space:64px}
 html body.case-page #content .case-subtitle{margin-bottom:32px}
}

/* The central statement keeps its own generous, symmetric breathing room. */
html body.home-page #content>.home-experience-statement{padding-block:208px}
@media(max-width:767px){
 html body.home-page #content>.home-experience-statement{padding-block:104px}
}

/* Expertise descriptions use the large reading role without extra weight. */
html body.about-page #content .about-expertise>article>p,
html body.about-page #content .about-expertise>article>p *{
 font-size:30px!important;line-height:38px!important;font-weight:500!important;
}
@media(max-width:767px){
 html body.about-page #content .about-expertise>article>p,
 html body.about-page #content .about-expertise>article>p *{
  font-size:24px!important;line-height:31.2px!important;
 }
}

/* Align the photograph with the actual cap top, not the H1 line box. */
@media(min-width:768px){
 html body.about-page #content .about-page-title>.about-portrait{
  margin-top:var(--about-title-ink-offset,calc((var(--h1-leading) - var(--h1-size))/2 + var(--h1-size)*.13));
 }
}

/* CV actions share the same light-gray hover as all dark controls. */
html body.about-page #content .action-button[download]{
 --hover-fill:#f3f3f3;--hover-ink:#1a1a1a;
}

/* The closing CV action needs a compact, balanced pause before the footer. */
html body.about-page #content .about-download{margin-block:0;padding-block:32px}
@media(max-width:767px){
 html body.about-page #content .about-download{padding-block:24px}
}

/* Project Details owns the only scroll area while its modal is open. */
html:has(body.case-page #project-details[open]){overflow:hidden!important}
html body.case-page #project-details{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html body.case-page #project-details .details-meta{max-height:none;overflow:visible;overscroll-behavior:auto}

/* The final H1-style invitation follows the navigation docking band. */
html body.home-page #content>.home-closing-statement{margin-block:0;padding-block:160px;text-align:left}
html body.home-page #content .home-closing-title,
html body.home-page #content .home-closing-title *{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:var(--h1-size)!important;line-height:var(--h1-leading)!important;
 font-weight:500!important;letter-spacing:.02em!important;text-transform:uppercase;
 color:var(--fg);text-align:left;
}
html body.home-page #content .home-closing-title{margin:0;max-width:100%;overflow-wrap:normal}
@media(max-width:767px){
 html body.home-page #content>.home-closing-statement{padding-block:112px}
}

/* The closing statement precedes the footer navigation band. */
html body.home-page #content>.home-closing-statement+.home-navigation-stop{margin-top:0}

/* Section actions share the title row instead of creating an empty second row. */
html body.case-page #content .section-heading:has(>.section-open){
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 column-gap:var(--grid-gap);row-gap:0;align-items:start;margin-bottom:32px;
}
html body.case-page #content .section-heading:has(>.section-open)>h2{
 grid-column:1/span 3;grid-row:1;margin:0;min-width:0;
}
html body.case-page #content .section-heading>.section-open{
 grid-column:4;grid-row:1;align-self:start;justify-self:end;margin-top:0;
}
@media(max-width:767px){
 html body.case-page #content .section-heading:has(>.section-open){
  grid-template-columns:minmax(0,1fr);row-gap:20px;margin-bottom:24px;
 }
 html body.case-page #content .section-heading:has(>.section-open)>h2{grid-column:1;grid-row:1}
 html body.case-page #content .section-heading>.section-open{grid-column:1;grid-row:2;justify-self:start}
}

/* Home has one final divider, without a reserved navigation docking row. */
html body.home-page .site-footer{margin-top:0;border-top:1px solid var(--line)}

/* Work thumbnails echo the hardware scale in the closing display title. */
html body.home-page #content .home-closing-title .closing-work-preview{
 display:inline-block;position:relative;width:1.25em;height:.8em;
 margin-inline:-.03em;vertical-align:-.1em;overflow:hidden;border-radius:12px;
 background:#242424;isolation:isolate;
}
html body.home-page #content .closing-work-preview>img{
 display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;
}
html body.home-page #content .closing-changing-word{display:inline-block;position:relative;vertical-align:baseline}
html body.home-page #content .closing-word-text{display:inline-block}
html body.home-page #content .closing-word-pixels{
 position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;
}
html body.home-page #content .closing-word-pixels[hidden]{display:none}

/* Larger artwork spills out of the original slots beneath the lettering. */
html body.home-page #content .home-closing-title{position:relative;isolation:isolate}
html body.home-page #content .home-closing-title .closing-work-preview{
 overflow:visible;isolation:auto;z-index:-1;background:transparent;
}
html body.home-page #content .closing-work-preview>img{
 position:absolute;left:-60%;top:-60%;width:220%;height:220%;
 max-width:none;object-fit:contain;border-radius:12px;
}

/* Slightly translucent closing previews keep the lettering dominant. */
html body.home-page #content .closing-work-preview>img{opacity:.9}

/* Only the right-hand work preview returns to the original inline scale. */
html body.home-page #content .closing-work-preview.closing-work-preview-right>img{
 left:0;top:0;width:100%;height:100%;opacity:1;
}

/* Hairline inner highlights on dark controls, without an exterior shadow. */
html body:is(.home-page,.about-page,.case-page){
 --dark-control-edge:inset 0 .5px 0 rgba(255,255,255,.16),inset 0 -.5px 0 rgba(255,255,255,.1);
}
html body:is(.about-page,.case-page) .action-button,
html body.home-page .site-header .header-row .main-nav>a,
html body.about-page.about-intro-active .site-header .header-row .main-nav>a,
html body.home-page .site-footer .footer-bottom>.back-top,
html body.home-page>.bottom-section-nav,
html body:is(.home-page,.about-page,.case-page) .gallery :is(.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle),
html body.case-page>.bottom-section-nav .bottom-section-rail::before{
 box-shadow:var(--dark-control-edge)!important;
}

/* Round the actual image bounds rather than a letterboxed cover rectangle. */
html body.home-page #content .closing-work-preview>img{
 left:50%;top:50%;width:185%;height:auto;max-height:none;
 transform:translate(-50%,-50%);object-fit:contain;
 border-radius:12px;overflow:hidden;
}
html body.home-page #content .closing-work-preview.closing-work-preview-right>img{
 left:50%;top:50%;width:100%;height:auto;
}

/* A wrapped final line starts with its preview, keeping the word beside it. */
html body.home-page #content .home-closing-title .closing-ending{display:inline-block;white-space:nowrap}
html body.home-page #content>.home-closing-statement{padding-bottom:96px}
@media(max-width:767px){
 html body.home-page #content>.home-closing-statement{padding-bottom:64px}
}

/* A quiet, non-interactive client reel in the first quarter of a new row. */
html body.home-page #content #work>.project-grid>.project.clients-collaborations{
 grid-column:1;grid-row:auto;cursor:default;
}
html body.home-page #content :is(.clients-collaborations,.awards-recognition) .clients-logo-media{
 aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#f5f5f7;cursor:default;
}
html body.home-page #content :is(.clients-collaborations,.awards-recognition) .clients-logo-media>img,
html body.home-page #content :is(.clients-collaborations,.awards-recognition) .clients-logo-media:hover>img{
 width:100%;height:100%;object-fit:contain;transform:none!important;scale:1!important;filter:none!important;
}
html body.home-page #content :is(.clients-collaborations,.awards-recognition) .project-copy h3{
 color:#fff!important;font-weight:800!important;font-size:16px!important;line-height:24px!important;
}
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:1/span 3;grid-row:3}
}

/* Client logos resolve from coarse pixels using the shared media effect. */
html body.home-page #content .clients-logo-media{position:relative}
html body.home-page #content .clients-logo-media>.pixel-enter-canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;
 pointer-events:none;image-rendering:pixelated;transform:none;
}
@media(prefers-reduced-motion:no-preference){
 html body.home-page #content .clients-logo-media:not(.clients-logo-ready)>img{visibility:hidden}
}

/* Awards finish the creative section as a square, quarter-width reel. */
html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{grid-column:1;grid-row:auto;cursor:default}
html body.home-page #content .awards-recognition .clients-logo-media{aspect-ratio:1}
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{grid-column:1/span 3;grid-row:3}
}

/* On scroll, only the Home navigation surfaces become translucent glass. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body#top.home-page.header-scrolled .site-header .header-row .main-nav>a{
  background:rgba(36,36,36,.72)!important;--hover-base:rgba(36,36,36,.72);
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
 }
 html body.home-page.header-scrolled>.bottom-section-nav{
  --segment-surface:rgba(36,36,36,.72);background:rgba(36,36,36,.72);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
 }
}

/* Let each header pill sample the page beyond the header's transition layer. */
html body.home-page>.site-header{
 view-transition-name:none!important;will-change:auto;isolation:auto;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 html body#top.home-page.header-scrolled .site-header .header-row .main-nav>a{
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
  background-color:rgba(36,36,36,.72)!important;
 }
}

/* The square awards reel occupies half of its editorial column. */
html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{
 width:50%;min-width:0;justify-self:start;
}

/* Independent pill backdrops sample content exactly like the bottom navigator. */
html body.home-page>.header-glass-pill{
 position:fixed;z-index:29;pointer-events:none;background:rgba(36,36,36,.72);
 backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
}
html body.home-page>.header-glass-pill[hidden],
html body.home-page.page-leaving>.header-glass-pill{display:none}
html body#top.home-page.header-pill-glass-ready .site-header .header-row .main-nav>a{
 background:transparent!important;--hover-base:transparent;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* A compact awards sign-off at the right edge, closer to the final invitation. */
html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{
 justify-self:end;grid-column:1;
}
html body.home-page #content>.home-closing-statement{padding-top:8px}
@media(min-width:651px) and (max-width:1100px){
 html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{grid-column:2}
}
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{grid-column:10/span 3;grid-row:3}
}
@media(max-width:767px){
 html body.home-page #content>.home-closing-statement{padding-top:8px}
}

/* The narrower tablet composition needs more space before the closing title. */
@media(min-width:768px) and (max-width:1100px){
 html body.home-page #content>.home-closing-statement{padding-top:48px}
}

/* A square award tile matches the height of a full-column 16:9 preview. */
html body.home-page #content #creative-work>.project-grid>.project.awards-recognition{width:56.25%}

/* Align the first closing baseline with the Awards image bottom on desktop. */
@media(min-width:1101px){
 html body.home-page #content>.home-closing-statement{margin-top:calc(-1 * var(--closing-awards-overlap,0px))}
}

/* Footer destinations step down to the compact display-heading role. */
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{
 font-size:32px!important;line-height:36.8px!important;font-weight:500!important;
}
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading :is(.footer-arrow,.footer-arrow-glyph){
 font-size:inherit!important;font-weight:inherit!important;
}

/* Footer destinations are uppercase; Awards is a real route to Recognition. */
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading{text-transform:uppercase}
html body.home-page #content .awards-recognition .awards-link{
 display:block;width:100%;aspect-ratio:1;cursor:pointer!important;border-radius:12px;
}
html body.home-page #content .awards-recognition .awards-link .clients-logo-media{cursor:pointer}

/* One word-space separates each footer destination from its animated arrow. */
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading>.footer-arrow{margin-inline-start:.25em}

/* Expertise indicators use the large dark control surface, retaining their travel. */
html body.about-page #content .expertise-direction-track>.expertise-direction{
 width:56px;height:56px;padding:0;border:0;border-radius:12px;
 background:var(--dark-control-surface,#242424);color:#fff;
 box-shadow:var(--dark-control-edge);
 font-family:'Helvetica Now Display',Helvetica,Arial,sans-serif!important;
 font-size:24px!important;font-weight:600!important;line-height:24px!important;
}
html body.about-page #content .expertise-direction-glyph{display:block;transform:rotate(-90deg)}

/* Flat controls again; preview keylines retain 80% of their original opacity. */
html body:is(.home-page,.about-page,.case-page){--dark-control-edge:none}
html body.home-page{--preview-keyline:rgba(255,255,255,.0768)}

/* Case headers move one-to-one with scrolling, including the signature. */
html body#top.case-page>.site-header,
html body#top.case-page>.inverting-signature{
 transform:translateY(calc(-1 * var(--direction-header-offset,0px)))!important;
 transition:none!important;
}

/* Restore the original white keyline only for nearly black case-image edges. */
html body.case-page #content .project-media.is-dark-preview::after{
 content:'';position:absolute;inset:0;z-index:4;
 border:1px solid rgba(255,255,255,.096);border-radius:inherit;pointer-events:none;
}

/* Holiday Ops fills the right half; To the Stars opens the following row. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-holiday-ops-art-direction"]{grid-column:7/span 6;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-to-the-stars-art-direction"]{grid-column:1/span 3;grid-row:2}
}

/* Swap the two large right-hand creative cases. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:7/span 6;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-holiday-ops-art-direction"]{grid-column:7/span 6;grid-row:2}
}

/* Match the red heart's visible silhouette to the hardware icon scale. */
html body:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):has(>img[src*="heart-pixel"]){--inline-art-scale:1.15425}

/* Restore Holiday Ops above TANK IT in the right-hand creative column. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-holiday-ops-art-direction"]{grid-column:7/span 6;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:7/span 6;grid-row:2}
}

/* Compact creative cases: Holiday Ops and TANK IT share the right-hand row. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-holiday-ops-art-direction"]{grid-column:7/span 3;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:10/span 3;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-to-the-stars-art-direction"]{grid-column:1/span 3;grid-row:2}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-festival-art-direction"]{grid-column:4/span 3;grid-row:2}
}

/* TANK IT returns as a large case beneath Holiday Ops. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:7/span 6;grid-row:2}
}

/* The client reel pairs with editorial copy in the next layout column. */
html body.home-page #content #work>.project-grid>.clients-collaborations-copy{
 min-width:0;align-self:start;cursor:default;
}
html body.home-page #content .clients-collaborations-copy>h3{
 margin:0 0 16px;font-family:var(--font-copy)!important;
 font-size:30px!important;line-height:38px!important;font-weight:500!important;
 letter-spacing:0!important;color:#fff;text-transform:none;
}
html body.home-page #content .clients-collaborations-copy>p{
 margin:0;font-family:var(--font-copy)!important;font-size:16px!important;
 line-height:24px!important;font-weight:600!important;letter-spacing:0!important;color:var(--muted,#999);
}
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:4/span 3;grid-row:3}
}
@media(min-width:651px) and (max-width:1100px){
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:2}
}
@media(max-width:650px){
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:1;margin-top:-16px}
 html body.home-page #content .clients-collaborations-copy>h3{font-size:24px!important;line-height:31.2px!important}
}

/* Compact display leading, retaining the restored H1 font size. */
html body:is(.home-page,.about-page){--h1-leading:132px}
@media(max-width:1100px){html body:is(.home-page,.about-page){--h1-leading:100px}}
@media(max-width:767px){html body:is(.home-page,.about-page){--h1-leading:50px}}
@media(min-width:1600px){html body:is(.home-page,.about-page){--h1-leading:calc(var(--h1-size) * 1.1)}}

/* Shared section H2 steps down by two pixels. */
html body.home-page #content .home-section-heading>h2,
html body.about-page #content .about-expertise>article>h2,
html body.case-page #content .section-heading h2,
html body.case-page #content .case-chapter>h2,
html body.case-page #content .case-result-group>h2,
html body.case-page #project-details .details-grid>#details-title,
html body.case-page #project-details .details-grid>#details-title *{
 font-size:60px!important;line-height:64px!important;
}
@media(max-width:767px){
 html body.home-page #content .home-section-heading>h2,
 html body.about-page #content .about-expertise>article>h2,
 html body.case-page #content .section-heading h2,
 html body.case-page #content .case-chapter>h2,
 html body.case-page #content .case-result-group>h2,
 html body.case-page #project-details .details-grid>#details-title,
 html body.case-page #project-details .details-grid>#details-title *{
  font-size:40px!important;line-height:44px!important;
 }
}

/* Client introduction first; the logo reel occupies the second column. */
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:1/span 3;grid-row:3}
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:4/span 3;grid-row:3}
}
@media(min-width:651px) and (max-width:1100px){
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:1}
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:2}
}
@media(max-width:650px){
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{margin-top:0}
}

/* A quiet client credit alongside the rotating brand artwork. */
html body.home-page #content .clients-collaborations-copy>h3{
 margin:0;font-family:var(--font-copy)!important;
 font-size:16px!important;line-height:24px!important;font-weight:600!important;
 letter-spacing:0!important;color:#fff;text-transform:none;
}

/* Brand credit uses the large introduction copy role. */
html body.home-page #content .clients-collaborations-copy>h3{
 font-size:30px!important;line-height:38px!important;font-weight:500!important;
}
@media(max-width:767px){
 html body.home-page #content .clients-collaborations-copy>h3{font-size:24px!important;line-height:31.2px!important}
}

/* Project L.3.3.T. opens the work section at full layout width. */
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project[data-project="l33t"]{grid-column:1/-1;grid-row:1}
 html body.home-page #content #work>.project-grid>.project[data-project="exverse"]{grid-column:1/span 6;grid-row:2}
 html body.home-page #content #work>.project-grid>.project[data-project="fear"]{grid-column:7/span 3;grid-row:2}
 html body.home-page #content #work>.project-grid>.project[data-project="mini"]{grid-column:7/span 3;grid-row:3}
 html body.home-page #content #work>.project-grid>.project[data-project="wot"]{grid-column:10/span 3;grid-row:3}
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:1/span 3;grid-row:4}
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:4/span 3;grid-row:4}
}

/* Two equally large opening cases: Exverse left, Project L.3.3.T. right. */
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project[data-project="exverse"]{grid-column:1/span 6;grid-row:1}
 html body.home-page #content #work>.project-grid>.project[data-project="l33t"]{grid-column:7/span 6;grid-row:1}
}

/* Large Holiday Ops; large TANK IT below left, two compact cases on its right. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-holiday-ops-art-direction"]{grid-column:7/span 6;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:1/span 6;grid-row:2}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-to-the-stars-art-direction"]{grid-column:7/span 3;grid-row:2}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-festival-art-direction"]{grid-column:10/span 3;grid-row:2}
}

/* Restore compact Project L.3.3.T.; TANK IT right with two compact cases left. */
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project[data-project="exverse"]{grid-column:1/span 6;grid-row:1}
 html body.home-page #content #work>.project-grid>.project[data-project="l33t"]{grid-column:7/span 3;grid-row:1}
 html body.home-page #content #work>.project-grid>.project[data-project="fear"]{grid-column:10/span 3;grid-row:1}
 html body.home-page #content #work>.project-grid>.project[data-project="mini"]{grid-column:7/span 3;grid-row:2}
 html body.home-page #content #work>.project-grid>.project[data-project="wot"]{grid-column:10/span 3;grid-row:2}
 html body.home-page #content #work>.project-grid>.clients-collaborations-copy{grid-column:1/span 3;grid-row:3}
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:4/span 3;grid-row:3}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:7/span 6;grid-row:2}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-to-the-stars-art-direction"]{grid-column:1/span 3;grid-row:2}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-festival-art-direction"]{grid-column:4/span 3;grid-row:2}
}

/* Swap the two compact game-interface cards. */
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project[data-project="wot"]{grid-column:7/span 3;grid-row:2}
 html body.home-page #content #work>.project-grid>.project[data-project="mini"]{grid-column:10/span 3;grid-row:2}
}

/* Swap the two large right-hand creative previews. */
@media(min-width:1101px){
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-tank-it"]{grid-column:7/span 6;grid-row:1}
 html body.home-page #content #creative-work>.project-grid>.project[data-project="creative-holiday-ops-art-direction"]{grid-column:7/span 6;grid-row:2}
}

/* Home opening title sits a little higher, with more air before the first section. */
html body.home-page #content{padding-top:max(0px,calc(72px - var(--main-header-height,64px)))}
html body.home-page #content>.hero.gallery-intro{margin-bottom:112px}
@media(max-width:767px){
 html body.home-page #content{padding-top:max(0px,calc(64px - var(--main-header-height,64px)))}
 html body.home-page #content>.hero.gallery-intro{margin-bottom:80px}
}

/* Closing invitation: a work preview first, a shared H1 icon in the final slot. */
html body.home-page #content .home-closing-title .closing-inline-icon{
 display:inline-block;position:relative;width:1em;height:.9em;
 vertical-align:-.14em;margin-inline:-.05em;overflow:visible;
}
html body.home-page #content .home-closing-title .closing-inline-icon>img{
 display:block;position:static;inset:auto;width:100%;height:100%;max-width:100%;
 object-fit:contain;pointer-events:none;
}

/* WoT Blitz takes the large website position; Nexus becomes the compact card. */
@media(min-width:1101px){
 html body.home-page #content #website-work>.project-grid>.project[data-project="nintendo"]{grid-column:7/span 6;grid-row:2}
 html body.home-page #content #website-work>.project-grid>.project[data-project="nexus"]{grid-column:10/span 3;grid-row:1}
}

/* Shatterline becomes the large website case; WoT Blitz takes its compact place. */
@media(min-width:1101px){
 html body.home-page #content #website-work>.project-grid>.project[data-project="shatterline"]{grid-column:7/span 6;grid-row:2}
 html body.home-page #content #website-work>.project-grid>.project[data-project="nintendo"]{grid-column:7/span 3;grid-row:1}
}

/* Every opening H1 follows Home's current top offset and type leading. */
html body:is(.home-page,.about-page,.case-page){--page-title-top:72px;--h1-leading:132px}
html body.about-page #content .about-page-title,
html body.case-page #content .case-heading{
 margin-top:0;padding-top:max(0px,calc(var(--page-title-top) - var(--main-header-height,64px)));
}
@media(max-width:1100px){
 html body:is(.home-page,.about-page,.case-page){--h1-leading:100px}
}
@media(max-width:767px){
 html body:is(.home-page,.about-page,.case-page){--page-title-top:64px;--h1-leading:50px}
}
@media(min-width:1600px){
 html body:is(.home-page,.about-page,.case-page){--h1-leading:calc(var(--h1-size) * 1.1)}
}

/* Swap the two compact website previews, retaining their size. */
@media(min-width:1101px){
 html body.home-page #content #website-work>.project-grid>.project[data-project="nexus"]{grid-column:7/span 3;grid-row:1}
 html body.home-page #content #website-work>.project-grid>.project[data-project="nintendo"]{grid-column:10/span 3;grid-row:1}
}

/* The same pixel-word effect now appears in the first and middle H1 blocks. */
html body.home-page #content .display-changing-word{display:inline-block;position:relative;vertical-align:baseline;white-space:nowrap}

/* About shares the same pixel-word renderer and transparent canvas as Home. */
html body.about-page #content .display-changing-word{display:inline-block;position:relative;vertical-align:baseline;white-space:nowrap}
html body.about-page #content .display-changing-word>.closing-word-text{display:inline-block}
html body.about-page #content .display-changing-word>.closing-word-pixels{
 position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;
}
html body.about-page #content .display-changing-word>.closing-word-pixels[hidden]{display:none}



/* Shared 12px artwork radius. Controls keep their existing radii. */
html body:is(.home-page,.about-page,.case-page){--media-radius:12px}
html body:is(.home-page,.about-page,.case-page) #content :is(
 .project-media,.project-link,.image-zoom,.case-cover,.case-cover-figure,
 .about-portrait,.home-reel,.closing-work-preview,.result-card
),
html body:is(.home-page,.about-page,.case-page) #content :is(.project-media,.closing-work-preview)>:is(img,video,iframe,canvas),
html body:is(.home-page,.about-page,.case-page) :is(.gallery-media,.gallery-image,.gallery-outgoing,.transition-cover),
html body.about-page>.expertise-hover-preview{
 border-radius:12px!important;
}
html body:is(.home-page,.about-page,.case-page) #content .project-media::after{border-radius:inherit!important}

/* A square portrait follows the logo tile's height, with standard case captions. */
html body.home-page #content #work>.project-grid>.project.home-portrait-card{
 width:min(100%,var(--client-portrait-size,100%));min-width:0;align-self:start;justify-self:start;
}
html body.home-page #content .home-portrait-card .home-client-portrait{margin:0;width:100%}
html body.home-page #content .home-portrait-card .portrait-media{width:100%;aspect-ratio:1}
html body.home-page #content .home-portrait-card .portrait-media>img{width:100%;height:100%;object-fit:cover}
html body.home-page #content .home-portrait-card .project-caption{display:block}
html body.home-page #content .home-portrait-card .project-copy h3{color:#fff}
html body.home-page #content .home-portrait-card .project-description{margin-top:4px;color:var(--muted,#999)}
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project.home-portrait-card{grid-column:7/span 3;grid-row:3}
}
@media(max-width:1100px){
 html body.home-page #content #work>.project-grid>.project.home-portrait-card{grid-column:1}
}

/* Portrait first, brands second; both captions sit above their media. */
html body.home-page #content #work>.project-grid>.project:is(.home-portrait-card,.clients-collaborations){display:flex;flex-direction:column;gap:16px;align-items:stretch}
html body.home-page #content :is(.home-portrait-card,.clients-collaborations)>.support-card-heading{order:0;min-height:var(--support-caption-height,0px)}
html body.home-page #content .home-portrait-card>.home-client-portrait,
html body.home-page #content .clients-collaborations>.clients-logo-media,
html body.home-page #content .clients-collaborations>.media-scroll{order:1}
html body.home-page #content :is(.home-portrait-card,.clients-collaborations) .project-caption{display:block}
html body.home-page #content .clients-collaborations .project-copy h3{font-weight:600!important}
html body.home-page #content .home-portrait-card .portrait-media{position:relative;overflow:hidden}
html body.home-page #content .home-portrait-card .portrait-media>.pixel-enter-canvas{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;transform:none;transition:none;image-rendering:pixelated;
}
@media(min-width:1101px){
 html body.home-page #content #work>.project-grid>.project.home-portrait-card{grid-column:1/span 3;grid-row:3}
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:4/span 3;grid-row:3}
}
@media(min-width:651px) and (max-width:1100px){
 html body.home-page #content #work>.project-grid>.project.home-portrait-card{grid-column:1}
 html body.home-page #content #work>.project-grid>.project.clients-collaborations{grid-column:2}
}
@media(max-width:650px){
 html body.home-page #content :is(.home-portrait-card,.clients-collaborations)>.support-card-heading{min-height:0}
}

/* Both support-card captions return below their previews. */
html body.home-page #content :is(.home-portrait-card,.clients-collaborations)>.support-card-heading{order:1;min-height:0}
html body.home-page #content .home-portrait-card>.home-client-portrait,
html body.home-page #content .clients-collaborations>.clients-logo-media,
html body.home-page #content .clients-collaborations>.media-scroll{order:0}

/* Compact leading for the small muted descriptions below Home previews. */
html body.home-page #content .project-caption .project-description{line-height:22px!important}

/* Portrait image and caption share the About destination and preview tooltip. */
html body.home-page #content .home-portrait-card>.home-portrait-link{display:block;order:0;width:100%}
html body.home-page #content .home-portrait-card .home-portrait-description{display:block;text-decoration:none;transition:color .3s ease}
html body.home-page #content .home-portrait-card .home-portrait-description:is(:hover,:focus-visible){color:#fff!important}



/* The Home portrait swaps through pixels without the generic preview zoom. */
html body.home-page #content .home-portrait-card .portrait-media,
html body.home-page #content .home-portrait-card .portrait-media>:is(img,.pixel-enter-canvas){
 transform:none!important;scale:1!important;
}

/* Festival website opens a new compact row below the large Shatterline case. */
@media(min-width:1101px){
 html body.home-page #content #website-work>.project-grid>.project[data-project="tank-festival-website"]{grid-column:1/span 3;grid-row:3}
}

@media(min-width:651px) and (max-width:1100px){
 html body.home-page #content #website-work>.project-grid>.project[data-project="tank-festival-website"]{grid-column:1;grid-row:auto}
}

/* Case introductions occupy three layout columns; tags sit on the next row. */
html body.case-page #content .case-subtitle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--grid-gap)}
html body.case-page #content .case-subtitle>p{grid-column:1/span 3;grid-row:1;max-width:none!important;width:auto;min-width:0}
html body.case-page #content .case-subtitle>.tags{grid-column:1/-1;grid-row:2;justify-self:start;max-width:100%}
@media(max-width:767px){
 html body.case-page #content .case-subtitle{grid-template-columns:minmax(0,1fr)}
 html body.case-page #content .case-subtitle>p{grid-column:1/-1}
}
/* A difference-blended white page-progress line inverts against the content below it. */
html body.case-page>.header-progress{background:#fff!important;mix-blend-mode:difference;isolation:auto}

/* Blend only the invitation lettering, keeping previews and hardware in their original colours. */
html body #content .home-closing-title{background:#000}
html body:is(.about-page,.case-page) #content .light-closing-statement .home-closing-title{background:#fff}
html body #content .home-closing-title :is(.closing-static-text,.closing-changing-word){
 color:#fff!important;mix-blend-mode:difference;
}
html body #content .home-closing-title .closing-changing-word :is(.closing-word-text,.closing-word-pixels){color:#fff!important}

/* Closing work previews stay fully opaque in both themes. */
html body #content .home-closing-title .closing-work-preview>img{opacity:1!important}

/* Festival website is the second chapter, with half-width media throughout. */
html body.case-page #website.case-chapter .case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
html body.case-page #website.case-chapter .case-figure{grid-column:auto;min-width:0}
html body.case-page #website .festival-website-copy{max-width:75%;margin-block:32px 48px}
@media(max-width:767px){
 html body.case-page #website.case-chapter .case-gallery{grid-template-columns:minmax(0,1fr)}
 html body.case-page #website .festival-website-copy{max-width:100%}
}

/* A noninteractive opening-header role, aligned to the third layout column.
   Absolute positioning lets it leave naturally with the page scroll. */
html body:is(.home-page,.case-page)>.header-role-label{
 position:absolute;z-index:30;top:21px;left:calc(50% + var(--grid-gap)/2);
 margin:0;max-width:calc(50% - var(--gutter) - var(--grid-gap)/2 - 320px);
 font-family:var(--font-copy);font-size:16px;line-height:22px;font-weight:600;
 letter-spacing:0;color:#fff;mix-blend-mode:normal;pointer-events:none;
}
html body.case-page>.header-role-label{color:#1a1a1a}
@media(max-width:1100px){html body:is(.home-page,.case-page)>.header-role-label{display:none}}

/* The role shares the signature's backdrop inversion and case header travel. */
html body:is(.home-page,.case-page)>.header-role-label{
 position:fixed;z-index:31;color:#fff!important;mix-blend-mode:difference;
}
html body#top.case-page>.header-role-label{
 transform:translateY(calc(-1 * var(--direction-header-offset,0px)))!important;
 transition:none!important;
}

/* Header role starts at the second quarter of the four-column layout. */
html body:is(.home-page,.case-page)>.header-role-label{
 left:calc(var(--gutter) + (100% - 2 * var(--gutter) + var(--grid-gap)) / 4);
 max-width:calc(75% - var(--gutter) / 2 - var(--grid-gap) / 4 - 320px);
}

/* The closing title overlaps the Awards row geometrically, but must not paint over its card or caption. */
html body.home-page #content>#creative-work{position:relative;z-index:2}
html body.home-page #content>.home-closing-statement{position:relative;z-index:1}
html body.home-page #content #creative-work .awards-recognition{position:relative;z-index:1}

/* Independent glass surfaces keep header blur identical on light and dark pages. */
html body:is(.about-page,.case-page)>.header-glass-pill{
 position:fixed;z-index:29;pointer-events:none;background:rgba(243,243,243,.72);
 backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
}
html body>.header-glass-pill[hidden],html body.page-leaving>.header-glass-pill{display:none}
html body#top:is(.about-page,.case-page).header-pill-glass-ready .site-header .header-row .main-nav>a{
 background:transparent!important;--hover-base:transparent;
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Natural-height opening, with a compact work cue below the title. */
.home-scroll-cue{display:none}
@media(min-width:1101px){
 html body.home-page .home-scroll-cue{
  display:flex;align-items:center;gap:12px;position:absolute;
  left:0;right:auto;bottom:-52px;z-index:2;color:#fff;
  font-family:var(--font-copy);font-size:16px;line-height:22px;font-weight:600;
 }
 html body.home-page .home-scroll-cue .scroll-mouse{display:block;width:18px;height:27px;flex:none}
 .home-scroll-cue .scroll-mouse-wheel{animation:scroll-mouse-wheel 1.6s ease-in-out infinite}
}
@keyframes scroll-mouse-wheel{
 0%{transform:translateY(0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(8px);opacity:0}
}
@media(prefers-reduced-motion:reduce){.home-scroll-cue .scroll-mouse-wheel{animation:none;opacity:1}}


/* More breathing room between the final card caption and the next category. */
html body.home-page #content>:is(#special-projects,#creative-work){padding-top:72px}
html body.home-page #content>.home-experience-statement{padding-block:144px}
@media(max-width:767px){
 html body.home-page #content>:is(#special-projects,#creative-work){padding-top:56px}
 html body.home-page #content>.home-experience-statement{padding-block:104px}
}



/* Slightly more space above opening H1s, without changing the gaps below them. */
html body:is(.home-page,.about-page,.case-page){--opening-h1-top:88px}
html body.home-page #content,
html body.about-page #content .about-page-title,
html body.case-page #content>.case-hero{
 padding-top:max(0px,calc(var(--opening-h1-top) - var(--main-header-height,64px)));
}
@media(max-width:767px){html body:is(.home-page,.about-page,.case-page){--opening-h1-top:72px}}

/* Align the image centre with the first row's actual capital-letter centre. */
html body #content .home-closing-title .closing-work-preview{vertical-align:var(--closing-preview-align,-.04em)!important}

/* Instant visibility changes only; header navigation remains available. */
html body.home-page.profile-row-visible>:is(.inverting-signature,.header-role-label){
 visibility:hidden!important;pointer-events:none!important;transition:none!important;
}

/* Lighter prose only: controls and primary labels retain their current faces. */
html body.home-page #content :is(.home-section-description,.hero-copy),
html body.home-page #content :is(.home-section-description,.hero-copy) *,
html body.about-page #content .about-description,
html body.about-page #content .about-description *,
html body.about-page #content .about-expertise>article>p,
html body.about-page #content .about-expertise>article>p *,
html body.case-page #content .overview-copy :is(p,li),
html body.case-page #content .overview-copy :is(p,li) *,
html body.case-page #content .chapter-description,
html body.case-page #content .chapter-description *,
html body.case-page #project-details .details-intro,
html body.case-page #project-details .details-intro *{font-weight:500!important}
html body.home-page #content .project .project-description,
html body.home-page #content .project .project-description *{font-weight:500!important}

/* Large Home descriptions and the About biography use Book; other prose stays unchanged. */
html body.home-page #content :is(.home-section-description,.hero-copy),
html body.home-page #content :is(.home-section-description,.hero-copy) *,
html body.about-page #content .about-description,
html body.about-page #content .about-description *{font-weight:500!important}

/* Expertise adopts the former grey experience role; experience greys step down to Light. */
html body.about-page #content .about-expertise>article>p,
html body.about-page #content .about-expertise>article>p *{
 font-size:22px!important;line-height:30px!important;font-weight:500!important;
}
html body.about-page #content .experience-row>:is(.experience-role,.experience-date),
html body.about-page #content .experience-row>:is(.experience-role,.experience-date) *{
 font-weight:500!important;
}

/* Large descriptions step down slightly; each role keeps its selected weight. */
html body.home-page #content .home-section-description,
html body.home-page #content .home-section-description *,
html body.about-page #content .about-description p,
html body.about-page #content .about-description p *,
html body.case-page #content .overview-copy :is(p,li),
html body.case-page #content .overview-copy :is(p,li) *,
html body.case-page #content .chapter-description,
html body.case-page #content .chapter-description *,
html body.case-page #project-details .details-copy .details-intro p,
html body.case-page #project-details .details-copy .details-intro p *{
 font-size:28px!important;line-height:36px!important;
}
@media(max-width:767px){
 html body.home-page #content .home-section-description,
 html body.home-page #content .home-section-description *,
 html body.about-page #content .about-description p,
 html body.about-page #content .about-description p *,
 html body.case-page #content .overview-copy :is(p,li),
 html body.case-page #content .overview-copy :is(p,li) *,
 html body.case-page #content .chapter-description,
 html body.case-page #content .chapter-description *,
 html body.case-page #project-details .details-copy .details-intro p,
 html body.case-page #project-details .details-copy .details-intro p *{
  font-size:22px!important;line-height:29px!important;
 }
}

/* Section H2 headings gain a small, consistent size step across templates. */
html body.home-page #content .home-section-heading>h2,
html body.about-page #content .about-expertise>article>h2,
html body.case-page #content .section-heading h2,
html body.case-page #content .case-chapter>h2,
html body.case-page #content .case-result-group>h2,
html body.case-page #project-details .details-grid>#details-title,
html body.case-page #project-details .details-grid>#details-title *{
 font-size:58px!important;line-height:62px!important;
}
@media(max-width:767px){
 html body.home-page #content .home-section-heading>h2,
 html body.about-page #content .about-expertise>article>h2,
 html body.case-page #content .section-heading h2,
 html body.case-page #content .case-chapter>h2,
 html body.case-page #content .case-result-group>h2,
 html body.case-page #project-details .details-grid>#details-title,
 html body.case-page #project-details .details-grid>#details-title *{
  font-size:39px!important;line-height:43px!important;
 }
}

/* Home descriptions occupy one and a half columns from the third column. */
@media(min-width:768px){
 html body.home-page #content .home-section-heading>.home-section-description{
  width:100%;max-width:none;justify-self:stretch;
 }
}

/* Expertise supporting descriptions use Medium, keeping their existing grey and scale. */
html body.about-page #content .about-expertise>article>p,
html body.about-page #content .about-expertise>article>p *{font-weight:600!important}

/* A slightly smaller pointer-following expertise illustration. */
html body.about-page>.expertise-hover-preview:not(.is-inline){width:calc((100vw - 2 * var(--gutter) - 3 * var(--grid-gap)) * .9 / 4)}


/* H1 returns to 120px with its responsive proportions and current display weight. */
html body:is(.home-page,.about-page,.case-page){--h1-size:120px;--h1-leading:132px}
@media(max-width:1100px){html body:is(.home-page,.about-page,.case-page){--h1-size:88px;--h1-leading:100px}}
@media(max-width:767px){html body:is(.home-page,.about-page,.case-page){--h1-size:44px;--h1-leading:50px}}
@media(min-width:1600px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(120px,calc(8vw - 8px),136px);--h1-leading:calc(var(--h1-size)*1.1)}}
@media(min-width:1800px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(136px,calc(4vw + 64px),152px)}}
@media(min-width:2200px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(152px,calc(6.666667vw + 5.333333px),176px)}}
@media(min-width:2560px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(176px,calc(5vw + 48px),240px)}}

/* Compact display labels and footer links gain the same one-step increase. */
html body.about-page #content :is(.about-expertise,.about-experience,.about-recognition)>h2.about-section-title,
html body.about-page #content :is(.about-expertise,.about-experience,.about-recognition)>h2.about-section-title *{
 font-weight:500!important;
}
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading,
html body:is(.home-page,.about-page,.case-page) #contact .footer-main-links>.contact-heading *{font-weight:500!important}
html body.case-page .project-details .details-section>h3,
html body.case-page .project-details .details-section>h3 *{font-weight:600!important}
/* Impact numerals adopt the H1 display face and scale, fitting long values to their card. */
html body.case-page #content .result-card .result-value,
html body.case-page #content .result-card .result-value .impact-counter-number,
html body#top.about-page #content .quick-facts-card .result-value{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:var(--impact-h1-size,var(--h1-size))!important;
 line-height:1.1!important;font-weight:500!important;letter-spacing:.02em!important;
}

/* Shared small UI and caption text, keeping control geometry intact. */
html body:is(.home-page,.about-page,.case-page){--type-card-title:14px;--type-small:14px;--type-button:14px}
html body#top:is(.home-page,.about-page,.case-page) :is(
 .inverting-signature,.header-role-label,.site-header .main-nav>a,.site-header .main-nav>a .control-label,
 .tags>span,.tags>span *,
 .project-caption .project-copy,.project-caption .project-copy h3,.project-caption .project-copy h3 *,
 .project-caption .project-description,.project-caption .project-description *,figcaption,
 .gallery .gallery-caption,.gallery .gallery-caption p,.gallery .gallery-project,.gallery .gallery-count,
 .footer-bottom>span,.hover-tooltip
){font-size:14px!important}
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a *{font-size:14px!important}
html body#top.home-page #content .project-caption .project-description{line-height:20px!important}
html body#top.case-page #content .case-navigation a,
html body#top.case-page #content .case-navigation a *{font-size:14px!important}

/* Compact header buttons and their animated labels use the 14px utility role. */
html body#top:is(.home-page,.about-page,.case-page) :is(.site-header .header-row .main-nav>a),
html body#top:is(.home-page,.about-page,.case-page) :is(.site-header .header-row .main-nav>a) *{
 font-size:14px!important;line-height:20px!important;
}

/* Large actions retain a 16px label; compact navigation stays 14px. */
html body#top:is(.home-page,.about-page,.case-page) .action-button,
html body#top:is(.home-page,.about-page,.case-page) .action-button *{
 font-size:16px!important;line-height:22px!important;
}

/* Home work captions regain the 16px reading scale with lighter faces. */
html body#top.home-page #content .project:not(.awards-recognition) .project-caption,
html body#top.home-page #content .project:not(.awards-recognition) .project-caption *{
 font-size:16px!important;line-height:22px!important;
}
html body#top.home-page #content .project:not(.awards-recognition) .project-caption :is(.project-copy,h3),
html body#top.home-page #content .project:not(.awards-recognition) .project-caption :is(.project-copy,h3) *{font-weight:500!important}
html body#top.home-page #content .project:not(.awards-recognition) .project-caption .project-description,
html body#top.home-page #content .project:not(.awards-recognition) .project-caption .project-description *{font-family:'Helvetica Now Display',monospace!important;font-size:14px!important;font-weight:500!important}
/* The floating name and role are quieter than the navigation buttons. */
html body#top:is(.home-page,.about-page,.case-page)>:is(.inverting-signature,.header-role-label),
html body#top:is(.home-page,.about-page,.case-page)>:is(.inverting-signature,.header-role-label) *{font-weight:500!important}
/* Explicit 16px CV labels also cover both About placements. */
html body#top.about-page #content .action-button[download],
html body#top.about-page #content .action-button[download] *{font-size:16px!important;line-height:22px!important}

/* Tags use Regular instead of Medium, without changing their geometry. */
html body#top:is(.home-page,.about-page,.case-page) .tags>span,
html body#top:is(.home-page,.about-page,.case-page) .tags>span *{font-weight:500!important}

/* Header identity and compact controls use the original 16px utility scale. */
html body#top:is(.home-page,.about-page,.case-page) :is(.site-header .header-row .main-nav>a,.inverting-signature,.header-role-label),
html body#top:is(.home-page,.about-page,.case-page) :is(.site-header .header-row .main-nav>a,.inverting-signature,.header-role-label) *,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a *{
 font-size:16px!important;line-height:22px!important;
}

/* All button labels use Helvetica Now Display Light, with their current type sizes. */
html body#top:is(.home-page,.about-page,.case-page) :is(.action-button,.site-header .header-row .main-nav>a),
html body#top:is(.home-page,.about-page,.case-page) :is(.action-button,.site-header .header-row .main-nav>a) *,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a *{
 font-weight:500!important;
}

/* Both About CV actions share the standard large control scale. */
html body#top.about-page #content .action-button[download]{
 height:56px!important;min-height:56px!important;padding-inline:28px!important;border-radius:12px!important;
 max-width:100%;font-size:16px!important;line-height:22px!important;
}
html body#top.about-page #content .action-button[download] *{font-size:16px!important;line-height:22px!important}

/* Preview artwork has clean edges on every surface, including nearly-black media. */
html body#top #content .project-media::after,
html body#top .gallery .gallery-media::after,
html body#top>.expertise-hover-preview .project-media::after{
 content:none!important;border:0!important;box-shadow:none!important;
}
html body#top :is(.project-media,.portrait-media,.gallery-media,.gallery-image,.gallery-outgoing,.transition-cover,.gallery-thumb){
 border:0!important;box-shadow:none!important;
}

/* Large display headings return to Light; compact headings/footer retain Regular. */
html body:is(.home-page,.about-page,.case-page) #content h1,
html body:is(.home-page,.about-page,.case-page) #content h1 *,
html body.home-page #content .hero.gallery-intro .hero-layout>h1,
html body.about-page #content .about-page-title h1,
html body.case-page #content .case-heading h1,
html body.home-page #content .home-experience-message,
html body.home-page #content .home-experience-message *,
html body.home-page #content .home-closing-title,
html body.home-page #content .home-closing-title *,
html body.home-page #content .home-section-heading>h2,
html body.home-page #content .home-section-heading>h2 *,
html body.about-page #content .about-expertise>article>h2,
html body.about-page #content .about-expertise>article>h2 *,
html body.case-page #content .section-heading h2,
html body.case-page #content .section-heading h2 *,
html body.case-page #content .case-chapter>h2,
html body.case-page #content .case-chapter>h2 *,
html body.case-page #content .case-result-group>h2,
html body.case-page #content .case-result-group>h2 *,
html body.case-page #content #impact-heading,
html body.case-page #content #impact-heading *,
html body.case-page #project-details .details-grid>#details-title,
html body.case-page #project-details .details-grid>#details-title *{font-weight:400!important}
html body.case-page #content .result-card .result-value,
html body.case-page #content .result-card .result-value .impact-counter-number{font-weight:400!important}

/* The PDF badge's dominant red becomes the CV button's animated hover fill. */
html body#top.about-page #content .action-button[download]{
 --hover-fill:#e60714;--hover-ink:#fff;--hover-base:#1a1a1a;
}
html body#top.about-page #content .action-button[download].fill-control::before{background:#e60714!important}
html body#top.about-page #content .action-button[download]:is(:hover,:focus-visible),
html body#top.about-page #content .action-button[download]:is(:hover,:focus-visible) .control-label{color:#fff!important}

/* Generous, symmetric space around the middle Home statement. */
html body.home-page #content>.home-experience-statement{padding-block:240px;margin-block:0}
@media(max-width:767px){html body.home-page #content>.home-experience-statement{padding-block:184px}}

/* One display family and Light face across all page templates; Suisse UI roles are independent. */
html body#top :is(#content,#project-details) :is(
 h1,h2,.home-experience-message,.home-closing-title,
 .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
 .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title,
 .about-section-title,.details-section>h3
),
html body#top :is(#content,#project-details) :is(
 h1,h2,.home-experience-message,.home-closing-title,
 .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
 .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title,
 .about-section-title,.details-section>h3
) *{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-weight:var(--display-heading-weight,300)!important;font-style:normal;letter-spacing:.02em!important;text-transform:uppercase!important;
}
html body#top :is(#content,#project-details) :is(
 .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
 .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title
){font-size:58px!important;line-height:62px!important}
html body#top :is(#content,#project-details) :is(.about-section-title,.details-section>h3){font-size:32px!important;line-height:36.8px!important}
html body#top #contact .footer-main-links>.contact-heading,
html body#top #contact .footer-main-links>.contact-heading *{font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;font-weight:400!important}
html body#top.about-page #content .expertise-direction{font-weight:400!important}
@media(max-width:767px){
 html body#top :is(#content,#project-details) :is(
  .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
  .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title
 ){font-size:39px!important;line-height:43px!important}
}

/* Case facts and right-column prose share one reading role, including both colours. */
html body.case-page{--case-reading-size:28px;--case-reading-leading:36px;--case-reading-weight:400}
html body#top.case-page #content .case-facts :is(dt,dd),
html body#top.case-page #content .case-facts :is(dt,dd) *,
html body#top.case-page #content .overview-copy :is(p,li),
html body#top.case-page #content .overview-copy :is(p,li) *{
 font-family:var(--font-copy)!important;
 font-size:var(--case-reading-size)!important;line-height:var(--case-reading-leading)!important;
 font-weight:var(--case-reading-weight)!important;letter-spacing:0!important;
}
@media(max-width:767px){html body.case-page{--case-reading-size:22px;--case-reading-leading:29px}}

/* A small shared H1 increase throughout the responsive scale. */
html body:is(.home-page,.about-page,.case-page){--h1-size:122.72px;--h1-leading:134.992px}
@media(max-width:1100px){html body:is(.home-page,.about-page,.case-page){--h1-size:89.99432px;--h1-leading:102.26632px}}
@media(max-width:767px){html body:is(.home-page,.about-page,.case-page){--h1-size:44.99768px;--h1-leading:51.13368px}}
@media(min-width:1600px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(122.72px,calc(8.181334vw - 8.181334px),139.08232px);--h1-leading:calc(var(--h1-size)*1.1)}}
@media(min-width:1800px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(139.08232px,calc(4.090666vw + 65.450666px),155.44568px)}}
@media(min-width:2200px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(155.44568px,calc(6.817778vw + 5.454222px),179.98968px)}}
@media(min-width:2560px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(179.98968px,calc(5.113334vw + 49.088px),245.44px)}}

/* Lighter secondary ink on white surfaces; dark surfaces keep their own palette. */
html body#top.about-page,
html body#top.case-page:not([data-case-theme="dark"]){
 --light-secondary-ink:#8a8a8a;--muted:var(--light-secondary-ink);
 --description-color:var(--light-secondary-ink);--text-tertiary:var(--light-secondary-ink);
 --link-hover:var(--light-secondary-ink);
}
html body#top.about-page .about-intro-surface,
html body#top.case-page:not([data-case-theme="dark"]) .project-details{--muted:#6e6e73}
html body#top.about-page #content .experience-row>:is(.experience-date,.experience-role),
html body#top.about-page #content .award-row>p,
html body#top.about-page .site-footer .footer-bottom>span,
html body#top.case-page:not([data-case-theme="dark"]) #content .case-facts dt,
html body#top.case-page:not([data-case-theme="dark"]) #content .case-figure figcaption,
html body#top.case-page:not([data-case-theme="dark"]) #content .result-card .result-description,
html body#top.about-page #content .quick-facts-card .result-description,
html body#top.case-page:not([data-case-theme="dark"]) #project-details :is(.details-meta,.details-team) dt,
html body#top.case-page:not([data-case-theme="dark"]) #project-details :is(.details-meta,.details-team) .details-role,
html body#top.case-page:not([data-case-theme="dark"]) .site-footer .footer-bottom>span,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span{color:#6e6e73!important}

/* The subtitle immediately under each case H1 uses Regular. */
html body#top.case-page #content .case-subtitle>p,
html body#top.case-page #content .case-subtitle>p *{font-weight:500!important}

/* Tags use primary dark ink on light surfaces. */
html body#top.about-page .tags>span,
html body#top.about-page .tags>span *,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span *{color:#1a1a1a!important}

/* Case H1 subtitles match the large reading copy scale. */
html body#top.case-page #content .case-subtitle>p,
html body#top.case-page #content .case-subtitle>p *{
 font-size:var(--case-reading-size,28px)!important;line-height:var(--case-reading-leading,36px)!important;
}
/* Tag labels use the 16px utility size on every page and theme. */
html body#top:is(.home-page,.about-page,.case-page) .tags>span,
html body#top:is(.home-page,.about-page,.case-page) .tags>span *{font-size:16px!important}

/* Impact numerals share the H2 display style; the rest of the card is unchanged. */
html body.case-page #content .result-card .result-value,
html body.case-page #content .result-card .result-value .impact-counter-number,
html body#top.about-page #content .quick-facts-card .result-value{
 font-family:'Stack Sans Notch',Helvetica,Arial,sans-serif!important;
 font-size:58px!important;line-height:62px!important;font-weight:400!important;letter-spacing:.02em!important;
}
@media(max-width:767px){
 html body.case-page #content .result-card .result-value,
 html body.case-page #content .result-card .result-value .impact-counter-number,
 html body#top.about-page #content .quick-facts-card .result-value{font-size:39px!important;line-height:43px!important}
}

/* The supplied light-page canvas is #F5F5F7; dark sections keep their own surfaces. */
html:has(body.about-page),
html:has(body.case-page:not([data-case-theme="dark"])){background:#f5f5f7}
html body#top.about-page,
html body#top.case-page:not([data-case-theme="dark"]){--bg:#f5f5f7;background:var(--bg)}
html body#top.about-page .about-intro-surface,
html body#top.about-page .about-intro-surface::before,
html body#top.about-page #content>.light-closing-statement,
html body#top.about-page #content .light-closing-statement .home-closing-title,
html body#top.case-page:not([data-case-theme="dark"]) #content>.light-closing-statement,
html body#top.case-page:not([data-case-theme="dark"]) #content .light-closing-statement .home-closing-title{background:#f5f5f7}
html body#top.case-page:not([data-case-theme="dark"]) .project-details{--bg:#f5f5f7;background:var(--bg)}
html body#top.about-page>.header-backdrop,
html body#top.case-page:not([data-case-theme="dark"])>.header-backdrop{background:#f5f5f7}

/* White component surfaces stand apart from the new pale-grey page canvas. */
html body#top.about-page,
html body#top.case-page:not([data-case-theme="dark"]){--secondary-surface:#fff;--control-surface:#fff}
html body#top.about-page .project-details,
html body#top.case-page:not([data-case-theme="dark"]) .project-details{--secondary-surface:#fff;--control-surface:#fff}
html body#top.about-page .tags>span,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span,
html body#top.case-page:not([data-case-theme="dark"]) #content .result-card{background:#fff!important}
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"])) :is(
 .site-header .header-row .main-nav>a,.site-footer .footer-bottom>.back-top,.project-details .details-close
){
 background:#fff!important;--control-surface:#fff;--hover-base:#fff;--hover-fill:#1a1a1a;--hover-ink:#fff;
}
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"])) :is(
 .site-header .header-row .main-nav>a,.site-footer .footer-bottom>.back-top,.project-details .details-close
):not(:hover):not(:focus-visible),
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"])) .site-header .header-row .main-nav>a:not(:hover):not(:focus-visible) .control-label{color:#1a1a1a!important}
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"])).header-pill-glass-ready .site-header .header-row .main-nav>a{
 background:transparent!important;--hover-base:transparent;
}
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"]))>.header-glass-pill{background:rgba(255,255,255,.72)}
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"])) .action-button:not([download]){--hover-fill:#fff}
html body#top:is(.about-page,.case-page:not([data-case-theme="dark"])) .action-button:not([download]).fill-control::before{background:#fff!important}

/* Every icon swap is hidden until its coarse pixel frame is ready. */
html body #content :is(.hero-inline-icon,.about-inline-icon).icon-swapping>img{visibility:hidden!important}

/* The first H1's legacy image rules must not differ from its pixel overlay.
   Both layers share the same box, optical scale and phone orientation. */
html body#top:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon){--inline-art-flip:1}
html body#top:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon):has(>img[src*="phone-pixel"]){--inline-art-flip:-1}
html body#top:is(.home-page,.about-page) #content :is(.hero-inline-icon,.about-inline-icon)>:is(img,.pixel-enter-canvas){
 position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;
 max-width:none!important;max-height:none!important;margin:0;object-fit:contain;
 transform:scale(var(--inline-art-scale,1.25)) scaleX(var(--inline-art-flip,1))!important;
 transform-origin:50% 50%!important;transition:none!important;
}

/* Match the oversized closing preview's real image bounds throughout its pixel reveal. */
html body#top #content .home-closing-title .closing-work-preview>.pixel-enter-canvas{
 position:absolute;left:50%;top:50%;width:185%!important;height:auto!important;
 max-width:none;max-height:none;transform:translate(-50%,-50%);transform-origin:center;
 display:block;border-radius:12px!important;z-index:1;pointer-events:none;image-rendering:pixelated;
}

/* H1 display roles step down to ExtraLight; H2/H3 remain Light. */
html body#top :is(#content,#project-details) h1,
html body#top :is(#content,#project-details) h1 *,
html body#top.home-page #content .home-experience-message,
html body#top.home-page #content .home-experience-message *,
html body#top #content .home-closing-title,
html body#top #content .home-closing-title *{--display-heading-weight:200;font-weight:300!important}

/* Three deliberate copy lines on desktop, natural wrapping on smaller screens. */
.desktop-copy-break{display:none}
@media(min-width:1101px){.desktop-copy-break{display:initial}}

/* Previous/next case links share the button label typography. */
html body#top.case-page #content .case-navigation a,
html body#top.case-page #content .case-navigation a *{
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:22px!important;
 font-weight:500!important;letter-spacing:0!important;
}

/* Internal-page footers include the dynamic invitation and contacts on one black surface. */
html body#top:is(.case-page,.about-page) #content .case-navigation{border-bottom:0!important}
html body#top:is(.case-page,.about-page) #content>.home-closing-statement{
 width:100%;margin-inline:0;padding-inline:var(--gutter);
 background:#000!important;color:#fff!important;
 --bg:#000;--fg:#fff;--muted:#6e6e73;--line:rgba(255,255,255,.2);
}
html body#top:is(.case-page,.about-page) #content .home-closing-statement .home-closing-title{
 background:#000!important;color:#fff!important;
}
html body#top:is(.case-page,.about-page)>.site-footer{
 width:100%;margin-inline:0;margin-top:0;padding-inline:var(--gutter);
 background:#000!important;color:#fff;--bg:#000;--fg:#fff;--muted:#6e6e73;
 --line:rgba(255,255,255,.2);--link-hover:#999;border-top-color:var(--line);
}
html body#top:is(.case-page,.about-page) #contact .footer-main-links>.contact-heading{color:#fff!important}
html body#top:is(.case-page,.about-page) #contact .footer-main-links>.contact-heading *{color:inherit!important}
html body#top:is(.case-page,.about-page) #contact .footer-main-links>.contact-heading:is(:hover,:focus-visible){opacity:.4!important}
html body#top:is(.case-page,.about-page) #contact .footer-bottom>span{color:#6e6e73!important}
html body#top:is(.case-page,.about-page) #contact .footer-bottom>.back-top{
 background:#242424!important;color:#fff!important;
 --control-surface:#242424;--hover-base:#242424;--hover-fill:#fff;--hover-ink:#1a1a1a;
}
html body#top:is(.case-page,.about-page) #contact .footer-bottom>.back-top:not(:hover):not(:focus-visible){color:#fff!important}
html body#top:is(.case-page,.about-page) #contact .footer-bottom>.back-top:is(:hover,:focus-visible){color:#1a1a1a!important}
/* A shorter gap between social destinations and the footer utility row everywhere. */
html body#top .site-footer .footer-main-links{padding-bottom:32px}
@media(max-width:767px){html body#top .site-footer .footer-main-links{padding-bottom:24px}}

/* Availability belongs to the opening Home header and scrolls away with the page. */
html body#top.home-page>.header-availability{
 position:absolute;top:21px;left:calc(50% + var(--grid-gap) / 2);z-index:31;
 display:inline-flex;align-items:center;gap:12px;pointer-events:none;
 font-family:var(--font-copy)!important;font-size:16px;line-height:22px;font-weight:500;
 letter-spacing:0;color:#fff;white-space:nowrap;
}
.header-availability-pixel{
 display:block;flex:none;width:8px;height:8px;background:currentColor;
 border:0;border-radius:0;animation:expertise-record-pixel .8s ease-in-out infinite;
}
@media(max-width:1100px){html body#top.home-page>.header-availability{display:none}}
@media(prefers-reduced-motion:reduce){.header-availability-pixel{animation:none;opacity:1}}

/* About's light CV row meets the black footer directly. */
html body#top.about-page #content .about-download{border-bottom:0!important}

/* Tags use the same label size as controls on every case. */
html body#top.case-page #content .tags>span,
html body#top.case-page #content .tags>span *{font-size:16px!important;line-height:22px!important}
/* Case destinations are full-size action buttons, with their arrows retained. */
html body#top.case-page #content .case-navigation>.case-navigation-button{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:56px;height:56px;padding:0 28px;border-radius:12px!important;
 text-decoration:none;white-space:nowrap;
}
html body#top.case-page #content .case-navigation>.case-navigation-button .control-label{display:inline-flex;align-items:center;gap:8px}
html body#top.case-page #content .case-navigation>.case-navigation-button *{color:inherit!important}

html body#top.case-page:not([data-case-theme="dark"]) #content .case-navigation>.case-navigation-button{
 background:#fff!important;color:#1a1a1a!important;
 --hover-base:#fff;--hover-fill:#1a1a1a;--hover-ink:#fff;
}
html body#top.case-page:not([data-case-theme="dark"]) #content .case-navigation>.case-navigation-button.fill-control::before{background:#1a1a1a!important}
html body#top.case-page:not([data-case-theme="dark"]) #content .case-navigation>.case-navigation-button:is(:hover,:focus-visible){color:#fff!important}

/* The section switcher shares the large action's 56px outer height. */
html body#top>.bottom-section-nav{box-sizing:border-box;height:56px;min-height:56px;padding:8px;border:0}
html body#top>.bottom-section-nav>.bottom-section-rail{height:40px;min-height:40px}
html body#top>.bottom-section-nav .bottom-section-rail>a{box-sizing:border-box;height:40px;min-height:40px;padding-block:0}

/* Content section titles and introductory copy occupy three of four columns. */
@media(min-width:768px){
 html body#top.case-page #content .section-heading h2{grid-column:1/span 3;width:100%;max-width:100%;padding-right:0}
 html body#top.case-page #content :is(.case-chapter>h2,.case-result-group>h2,.chapter-description){width:calc(75% - var(--grid-gap) / 4);max-width:none}
}
@media(max-width:767px){
 html body#top.case-page #content :is(.section-heading h2,.case-chapter>h2,.case-result-group>h2,.chapter-description){grid-column:1/-1;width:100%;max-width:100%}
}

/* The ending row carries a static case name instead of the floating switcher. */
html body#top.case-page #content .case-navigation{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);align-items:center;
}
html body#top.case-page #content .case-navigation-title{
 grid-column:2;text-align:center;min-width:0;
 font-family:var(--font-copy);font-size:16px;line-height:22px;font-weight:500;color:var(--fg);
}
html body#top.case-page #content .case-navigation>.case-navigation-button:first-child{grid-column:1;grid-row:1}
html body#top.case-page #content .case-navigation>.case-navigation-button:last-child{grid-column:3;grid-row:1}
@media(max-width:767px){
 html body#top.case-page #content .case-navigation{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:24px}
 html body#top.case-page #content .case-navigation-title{grid-column:1/-1;grid-row:1}
 html body#top.case-page #content .case-navigation>.case-navigation-button:first-child{grid-column:1;grid-row:2}
 html body#top.case-page #content .case-navigation>.case-navigation-button:last-child{grid-column:2;grid-row:2}
}

/* Static case names match the introductory subtitle reading role. */
html body#top.case-page #content .case-navigation-title{
 margin:0;font-family:var(--font-copy)!important;
 font-size:var(--case-reading-size)!important;line-height:var(--case-reading-leading)!important;
 font-weight:var(--case-reading-weight)!important;letter-spacing:0!important;text-transform:none;
}

/* Slightly tighter gap below the first Home title only. */
html body#top.home-page #content>.hero.gallery-intro{margin-bottom:96px}
@media(max-width:767px){html body#top.home-page #content>.hero.gallery-intro{margin-bottom:68px}}

/* Case section headers pair two left title columns with two right copy columns. */
html body#top.case-page #content .section-heading{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start;
}
html body#top.case-page #content .section-heading>h2{
 grid-column:1/span 2;grid-row:1;width:100%;max-width:100%;padding:0;
}
html body#top.case-page #content .section-heading>:is(.chapter-description,.festival-website-copy){
 grid-column:3/span 2;grid-row:1;width:100%;max-width:none;margin:0;padding:0;
}
html body#top.case-page #content :is(.case-chapter>h2,.case-result-group>h2){width:calc(50% - var(--grid-gap) / 2);max-width:none}
/* A metadata label and value follow the normal text leading, with no extra gap. */
html body#top.case-page #content .case-facts :is(dt,dd){margin:0!important;padding-block:0!important}
html body#top.case-page #content .case-facts dl>div{row-gap:0}
@media(max-width:767px){
 html body#top.case-page #content .section-heading{grid-template-columns:minmax(0,1fr);row-gap:24px}
 html body#top.case-page #content .section-heading>h2{grid-column:1;grid-row:1}
 html body#top.case-page #content .section-heading>:is(.chapter-description,.festival-website-copy){grid-column:1;grid-row:2}
 html body#top.case-page #content .section-heading>.section-open{grid-column:1;grid-row:3}
 html body#top.case-page #content :is(.case-chapter>h2,.case-result-group>h2){width:100%}
}

/* Tighten only the primary display levels, while preserving the H3 utility rhythm. */
html body#top :is(#content,#project-details) :is(
 h1,.home-experience-message,.home-closing-title,
 .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
 .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title
),
html body#top :is(#content,#project-details) :is(
 h1,.home-experience-message,.home-closing-title,
 .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
 .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title
) *{letter-spacing:var(--display-tracking,.01em)!important}

/* Slightly more air in every H1, including promotional statements. */
html body#top :is(#content,#project-details) :is(h1,.home-experience-message,.home-closing-title),
html body#top :is(#content,#project-details) :is(h1,.home-experience-message,.home-closing-title) *{--display-tracking:.025em;letter-spacing:.025em!important}

/* Icon-first preview hints retain their former plaque size and copy scale. */
html body#top .site-cursor>.cursor-tooltip-label.has-icon{
 display:flex;align-items:center;justify-content:flex-start;gap:4px;
 box-sizing:border-box;padding-left:16px;padding-right:18px;text-align:left;
}
html body#top .site-cursor .cursor-tooltip-icon{
 display:block;flex:none;font-family:inherit;font-size:var(--tooltip-icon-size)!important;
 font-weight:inherit;font-style:normal;line-height:1;color:inherit;
}
html body#top .site-cursor .cursor-tooltip-copy{display:block;flex:none;font:inherit;color:inherit;text-align:left}

/* Gallery arrows match the side-navigation square and glyph, preserving behavior. */
html body#top .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next){
 width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;
 padding:0!important;border-radius:12px!important;
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:22px!important;font-weight:500!important;
}
html body#top .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next) .control-label{
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:22px!important;font-weight:500!important;
}
@media(max-width:650px){
 html body#top .gallery .gallery-prev{left:calc(50% - 62px)}
 html body#top .gallery .gallery-next{left:calc(50% + 6px);right:auto}
}

/* All gallery controls use the same compact-button radius. */
html body#top .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next,.lightbox-close,.video-play-toggle){border-radius:8px!important}

/* Case introductions read as continuous prose, without half-column rules. */
html body#top.case-page #content .overview-copy :is(p,ul,ol,li,.overview-details){border:0!important;box-shadow:none!important}
html body#top.case-page #content .overview-copy :is(ul,ol){list-style:none;margin:0;padding:0}
html body#top.case-page #content .overview-copy li{padding:0!important}
html body#top.case-page #content .overview-copy p{margin:0}
html body#top.case-page #content .overview-copy p+p,
html body#top.case-page #content .overview-copy li+li{margin-top:24px}
html body#top.case-page #content .overview-copy .intro{margin:0 0 24px}
html body#top.case-page #content .overview-copy .overview-details{padding:0;margin-top:0}

/* Tooltip copy shares the 16px Regular button label; decorative glyphs retain their style. */
html body#top:is(.home-page,.about-page,.case-page) .hover-tooltip,
html body#top .site-cursor>.cursor-tooltip-label,
html body#top .site-cursor .cursor-tooltip-copy{
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:22px!important;
 font-weight:500!important;font-style:normal;letter-spacing:0!important;
}
html body#top .site-cursor .cursor-tooltip-icon{
 font-size:calc(clamp(14px,calc(var(--layout-unit) * .9),24px) + 2px)!important;
 font-weight:600!important;line-height:1;
}

/* Tooltip plaques inherit the compact-control corner radius. */
html body#top .hover-tooltip,
html body#top .site-cursor.is-view{border-radius:8px!important}

/* Section indices occupy the right edge of logical column two. */
html body#top.home-page #content .home-section-heading{position:relative}
html body#top.home-page #content .home-section-heading>.home-section-number{
 position:absolute;top:var(--section-index-ink-offset,0px);right:calc(50% + var(--grid-gap) / 2);margin:0;padding:0;
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:22px!important;
 font-weight:500!important;letter-spacing:0!important;color:var(--fg);text-align:right;
}
@media(max-width:767px){
 html body#top.home-page #content .home-section-heading>.home-section-number{right:0}
}

/* Home header joins the same reading-order entrance as the page content. */
html.motion-pending body#top.home-page>.header-role-label,
html.motion-pending body#top.home-page>.inverting-signature,
html.motion-pending body#top.home-page .site-header .main-nav>a{opacity:0!important}
html body#top.home-page .site-header .main-nav>a.header-entry-plaque{
 opacity:0;filter:blur(9px);
 transition:opacity 600ms ease,filter 800ms ease;
 transition-delay:var(--reveal-delay,0ms);
}
html body#top.home-page .site-header .main-nav>a.header-entry-plaque.is-visible{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){
 html body#top.home-page .site-header .main-nav>a.header-entry-plaque{opacity:1;filter:none;transition:none}
}

/* Desktop large reading copy and metadata share the 29px role. */
@media(min-width:768px){
 html body.case-page{--case-reading-size:29px}
 html body#top.home-page #content .home-section-description,
 html body#top.about-page #content .about-intro-surface .about-description p,
 html body#top.case-page #content .overview-copy :is(p,li),
 html body#top.case-page #content .chapter-description,
 html body#top.case-page #content .case-facts :is(dt,dd),
 html body#top.case-page #content .case-subtitle>p,
 html body#top.case-page #project-details .details-copy .details-intro p,
 html body#top.case-page #project-details :is(.details-meta,.details-team) :is(dt,dd){font-size:29px!important}
 html body#top.home-page #content .home-section-description *,
 html body#top.about-page #content .about-intro-surface .about-description p *,
 html body#top.case-page #content .overview-copy :is(p,li) *,
 html body#top.case-page #content .chapter-description *,
 html body#top.case-page #content .case-facts :is(dt,dd) *,
 html body#top.case-page #content .case-subtitle>p *,
 html body#top.case-page #project-details .details-copy .details-intro p *,
 html body#top.case-page #project-details :is(.details-meta,.details-team) :is(dt,dd) *{font-size:inherit!important}
}

/* Home section indices use the signature display family at the existing utility size. */
html body#top.home-page #content .home-section-heading>.home-section-number,
html body#top.home-page #content .home-section-heading>.home-section-number *{
 font-family:'Medeo Mono',monospace!important;color:#fff!important;
 font-size:16px!important;font-weight:500!important;
}

/* Large reading typography follows Locomotive's viewport-dependent 1.2 leading. */
html body:is(.home-page,.about-page,.case-page){--large-copy-size:26px;--large-copy-leading:31.2px}
@media(min-width:1600px){html body:is(.home-page,.about-page,.case-page){--large-copy-size:29.466667px;--large-copy-leading:35.36px}}
@media(min-width:2000px){html body:is(.home-page,.about-page,.case-page){--large-copy-size:32.933333px;--large-copy-leading:39.52px}}
@media(min-width:2400px){html body:is(.home-page,.about-page,.case-page){--large-copy-size:36.4px;--large-copy-leading:43.68px}}
@media(min-width:700px) and (max-width:1024px){html body:is(.home-page,.about-page,.case-page){--large-copy-size:24px;--large-copy-leading:28.8px}}
@media(max-width:699px){html body:is(.home-page,.about-page,.case-page){--large-copy-size:18px;--large-copy-leading:21.6px}}
html body.case-page{--case-reading-size:var(--large-copy-size);--case-reading-leading:var(--large-copy-leading)}
html body#top.home-page #content .home-section-description,
html body#top.about-page #content .about-intro-surface .about-description p,
html body#top.case-page #content .overview-copy :is(p,li),
html body#top.case-page #content .chapter-description,
html body#top.case-page #content .case-facts :is(dt,dd),
html body#top.case-page #content .case-subtitle>p,
html body#top.case-page #project-details .details-copy .details-intro p,
html body#top.case-page #project-details :is(.details-meta,.details-team) :is(dt,dd){
 font-family:'Helvetica Now Display',Helvetica,Arial,sans-serif!important;
 font-size:var(--large-copy-size)!important;line-height:var(--large-copy-leading)!important;
 font-weight:500!important;letter-spacing:0!important;
}
html body#top.home-page #content .home-section-description *,
html body#top.about-page #content .about-intro-surface .about-description p *,
html body#top.case-page #content .overview-copy :is(p,li) *,
html body#top.case-page #content .chapter-description *,
html body#top.case-page #content .case-facts :is(dt,dd) *,
html body#top.case-page #content .case-subtitle>p *,
html body#top.case-page #project-details .details-copy .details-intro p *,
html body#top.case-page #project-details :is(.details-meta,.details-team) :is(dt,dd) *{font-size:inherit!important;line-height:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important}

/* Helvetica control and link labels move from Regular to the real Medium face. */
html body#top :is(button,[role="button"],.action-button,.back-top,.bottom-section-rail>a,.main-nav>a,.inverting-signature,.header-role-label),
html body#top :is(button,[role="button"],.action-button,.back-top,.bottom-section-rail>a,.main-nav>a,.inverting-signature,.header-role-label) *,
html body#top a:not(.contact-heading):not(.project-link):not(.image-zoom),
html body#top a:not(.contact-heading):not(.project-link):not(.image-zoom) :is(.control-label,.link-roll-label,.link-roll-word,.link-roll-char,.motion-word){font-weight:600!important}
html body#top.case-page #content .case-navigation>.case-navigation-button,
html body#top.case-page #content .case-navigation>.case-navigation-button *{font-weight:600!important}
html body#top.case-side-nav-ready.case-page #content .case-navigation>.case-navigation-button .case-nav-arrow{font-weight:600!important}
html body#top .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next,.lightbox-close),
html body#top .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next,.lightbox-close) .control-label{font-weight:600!important}
/* Override the earlier explicit utility-weight rules, including their nested labels. */
html body#top:is(.home-page,.about-page,.case-page) :is(.action-button,.site-header .header-row .main-nav>a,.inverting-signature,.header-role-label),
html body#top:is(.home-page,.about-page,.case-page) :is(.action-button,.site-header .header-row .main-nav>a,.inverting-signature,.header-role-label) *,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a,
html body#top:is(.home-page,.about-page,.case-page) .bottom-section-nav .bottom-section-rail>a *,
html body#top.home-page #content .project:not(.awards-recognition) .project-caption .project-copy h3,
html body#top.home-page #content .project:not(.awards-recognition) .project-caption .project-copy h3 *{font-weight:600!important}

/* Tooltip copy and tags share the Medium utility weight. */
html body#top:is(.home-page,.about-page,.case-page) .hover-tooltip,
html body#top .site-cursor>.cursor-tooltip-label,
html body#top .site-cursor .cursor-tooltip-copy,
html body#top:is(.home-page,.about-page,.case-page) .tags>span,
html body#top:is(.home-page,.about-page,.case-page) .tags>span *{font-weight:600!important}

/* Light-theme tags use the shared charcoal tone instead of primary black. */
html body#top.about-page .tags>span,
html body#top.about-page .tags>span *,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span *{color:#242424!important}

/* Project Details floats as a centered three-column panel with one internal scroller. */
html body#top.case-page #project-details{
 position:fixed;inset:0;margin:auto;padding:0;border:0;
 width:calc((100% - 2 * var(--gutter)) * .75 - var(--grid-gap) / 4);
 height:calc(100dvh - 2 * var(--gutter));
 max-width:calc(100% - 2 * var(--gutter));max-height:calc(100dvh - 2 * var(--gutter));
 border-radius:24px!important;overflow-x:hidden;overflow-y:auto;
 overscroll-behavior:contain;scrollbar-gutter:stable;isolation:isolate;
}
html body#top.case-page #project-details::backdrop{
 background:rgba(0,0,0,.35);
 backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
}
html body#top.case-page #project-details .details-grid,
html body#top.case-page #project-details .details-toolbar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html body#top.case-page #project-details .details-grid>#details-title{grid-column:2/span 2}
html body#top.case-page #project-details .details-grid>.details-meta{grid-column:1;grid-row:2;max-height:none;overflow:visible}
html body#top.case-page #project-details .details-grid>.details-copy{grid-column:2/span 2;grid-row:2}
html body#top.case-page #project-details .details-toolbar{border-radius:0;padding-block:16px}
html body#top.case-page #project-details .details-toolbar-grid{padding-right:64px}
html body#top.case-page #project-details .details-sticky-title{grid-column:2/span 2;max-width:100%}
html body#top.case-page #project-details .details-toolbar>.details-close{position:absolute;top:16px;right:var(--gutter)}
@media(max-width:1100px){
 html body#top.case-page #project-details .details-grid{grid-template-columns:minmax(0,1fr)}
 html body#top.case-page #project-details .details-grid>:is(#details-title,.details-meta,.details-copy){grid-column:1;grid-row:auto}
 html body#top.case-page #project-details .details-meta{position:static;padding-bottom:0}
 html body#top.case-page #project-details .details-meta dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px var(--grid-gap)}
 html body#top.case-page #project-details .details-meta dl>div+div{margin-top:0}
}
@media(max-width:767px){
 html body#top.case-page #project-details{width:calc(100% - 2 * var(--gutter))}
 html body#top.case-page #project-details>.details-grid,
 html body#top.case-page #project-details .details-toolbar-grid{margin-inline:20px;width:calc(100% - 40px)}
 html body#top.case-page #project-details .details-toolbar>.details-close{right:20px}
}

/* Secondary charcoal text for tags on light surfaces. */
html body#top.about-page .tags>span,
html body#top.about-page .tags>span *,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span,
html body#top.case-page:not([data-case-theme="dark"]) .tags>span *{color:#6e6e73!important}

/* The details scroll thumb sits inside the rounded panel, clear of both corners. */
html body#top.case-page #project-details{scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:var(--fg) transparent}
@supports selector(::-webkit-scrollbar){
 html body#top.case-page #project-details{scrollbar-width:auto;scrollbar-color:auto}
 html body#top.case-page #project-details::-webkit-scrollbar{width:11px;background:transparent}
 html body#top.case-page #project-details::-webkit-scrollbar-track{margin-block:24px;background:transparent}
 html body#top.case-page #project-details::-webkit-scrollbar-thumb{
  background:var(--fg);background-clip:padding-box;border-inline:4px solid transparent;border-radius:0;min-height:24px;
 }
 html body#top.case-page #project-details::-webkit-scrollbar-button{display:none;width:0;height:0}
 html body#top.case-page #project-details::-webkit-scrollbar-corner{background:transparent}
}
html body#top.case-page #project-details .details-meta,
html body#top.case-page #project-details .details-meta :is(dt,dd),
html body#top.case-page #project-details .details-meta :is(dt,dd) *{
 font-size:22px!important;line-height:30px!important;font-weight:500!important;letter-spacing:0!important;
}
html body#top.case-page #project-details .details-meta :is(dt,dd){margin:0;padding:0}

/* Only Team shares the compact metadata column's reading style. */
html body#top.case-page #project-details .details-team :is(dt,dd),
html body#top.case-page #project-details .details-team :is(dt,dd) *{
 font-size:22px!important;line-height:30px!important;font-weight:500!important;letter-spacing:0!important;
}
html body#top.case-page #project-details .details-team :is(dt,dd){margin:0;padding:0}

/* Gallery controls use the site's small 40px button size; glyphs stay unchanged. */
html body#top .gallery :is(.gallery-cursor,.gallery-prev,.gallery-next,.lightbox-close){
 width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
 padding:0!important;border-radius:8px!important;
}
@media(max-width:650px){
 html body#top .gallery .gallery-prev{left:calc(50% - 46px)}
 html body#top .gallery .gallery-next{left:calc(50% + 6px);right:auto}
}

/* Gallery project and screenshot titles share the Regular utility style. */
html body#top .gallery :is(.gallery-project,.gallery-screen-title),
html body#top .gallery :is(.gallery-project,.gallery-screen-title) *{
 font-family:var(--font-copy)!important;font-size:16px!important;line-height:24px!important;
 font-weight:500!important;letter-spacing:0!important;
}

/* Project Details close control matches the small gallery control and equal edge insets. */
html body#top.case-page #project-details .details-toolbar>.details-close{
 top:16px;right:16px;width:40px!important;height:40px!important;
 min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:8px!important;
}

/* Close glyphs share the arrows' 18px Medium utility style. */
html body#top :is(.gallery,.project-details) .lightbox-close .close-icon{
 display:block;font-family:var(--font-copy)!important;font-size:16px!important;
 line-height:22px!important;font-weight:600!important;letter-spacing:0!important;
}

/* A larger diagonal cross keeps long, clean arms inside the small square. */
html body#top :is(.gallery,.project-details) .lightbox-close .close-icon{
 font-family:'Helvetica Now Display','Helvetica Neue',Arial,sans-serif!important;
 font-size:16px!important;line-height:22px!important;font-weight:500!important;
}

/* Details prose occupies 1.5 columns of the panel's three-column grid. */
@media(min-width:1101px){
 html body#top.case-page #project-details .details-grid>.details-copy{
  width:calc(87.5% - var(--grid-gap) / 8);max-width:none;justify-self:start;
 }
}
/* Measure the close inset from the panel edge, including the scrollbar lane. */
html body#top.case-page #project-details .details-toolbar>.details-close{
 right:calc(16px - var(--details-scrollbar-width,0px));
}

/* Details: the glass backing leads the quick upward panel entrance. */
html body#top.case-page #project-details[open]{
 animation:details-panel-arrive 460ms cubic-bezier(.22,1,.36,1) 50ms both;
}
html body#top.case-page #project-details[open]::backdrop{
 animation:details-glass-arrive 180ms ease-out both;
}
html body#top.case-page #project-details.is-closing{
 animation:details-panel-depart 160ms cubic-bezier(.4,0,1,1) both;pointer-events:none;
}
html body#top.case-page #project-details.is-closing::backdrop{
 animation:details-glass-depart 120ms ease-in 100ms both;
}
@keyframes details-panel-arrive{
 from{opacity:0;transform:translateY(96px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes details-panel-depart{
 from{opacity:1;transform:translateY(0)}
 to{opacity:0;transform:translateY(48px)}
}
@keyframes details-glass-arrive{
 from{background:rgba(0,0,0,0);backdrop-filter:blur(0) saturate(100%);-webkit-backdrop-filter:blur(0) saturate(100%)}
 to{background:rgba(0,0,0,.35);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
}
@keyframes details-glass-depart{
 from{background:rgba(0,0,0,.35);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
 to{background:rgba(0,0,0,0);backdrop-filter:blur(0) saturate(100%);-webkit-backdrop-filter:blur(0) saturate(100%)}
}
@media(prefers-reduced-motion:reduce){
 html body#top.case-page #project-details[open],
 html body#top.case-page #project-details.is-closing,
 html body#top.case-page #project-details[open]::backdrop{animation:none!important}
}

/* Header glass controls use a stable complete hover surface over moving media. */
html body#top:is(.home-page,.about-page,.case-page).header-pill-glass-ready .site-header .header-row .main-nav>a:is(:hover,:focus-visible){
 background:var(--hover-fill)!important;color:var(--hover-ink)!important;
 transition:background-color 160ms ease,color 160ms ease;
}
html body#top:is(.home-page,.about-page,.case-page).header-pill-glass-ready .site-header .header-row .main-nav>a::before{display:none!important}

/* Header pills never participate in radial fill, in any scroll or theme state. */
html body#top .site-header .header-row .main-nav>a.header-solid-hover::before{content:none!important;display:none!important;animation:none!important;transition:none!important}
html body#top .site-header .header-row .main-nav>a.header-solid-hover:is(:hover,:focus-visible){background:var(--hover-fill)!important;color:var(--hover-ink)!important}

/* Project Details retains three layout columns, with no decorative cursor ball. */
html body#top.case-page #project-details{
 width:calc((100% - 2 * var(--gutter)) * .75 - var(--grid-gap) / 4);
}
html:has(#project-details[open]) .site-cursor{display:none!important}
@media(max-width:767px){html body#top.case-page #project-details{width:calc(100% - 2 * var(--gutter))}}

/* Button labels are always complete, never abbreviated with ellipses. */
html body#top :is(button,.action-button,.main-nav>a,.bottom-section-rail>a),
html body#top :is(button,.action-button,.main-nav>a,.bottom-section-rail>a) :is(.control-label,.case-nav-text){text-overflow:clip!important}
html body#top.case-side-nav-ready #content .case-navigation.case-side-nav-parked>.case-navigation-button{
 height:56px!important;min-height:56px;padding-block:0!important;
}
html body#top.case-side-nav-ready #content .case-navigation.case-side-nav-parked .case-nav-text{
 white-space:nowrap!important;overflow:visible;overflow-wrap:normal;max-width:none;
}
html body#top.case-side-nav-ready #content .case-navigation.case-side-nav-parked .control-label{overflow:visible;min-height:22px}
/* Disabled cases stay in source but never occupy a public preview slot. */
html body#top.home-page #content [data-project][hidden]{display:none!important}

/* Case facts use the compact Project Details metadata size, preserving theme colors. */
html body#top.case-page #content .case-facts :is(dt,dd),
html body#top.case-page #content .case-facts :is(dt,dd) *{
 font-size:22px!important;line-height:30px!important;
}

/* Button copy is horizontal, including long Back-to-category labels. */
html body#top :is(button,.action-button,.main-nav>a,.back-top),
html body#top :is(button,.action-button,.main-nav>a,.back-top) .control-label{white-space:nowrap!important}

/* Section numbers wait for the paired description instead of painting before motion setup. */
html.motion-pending body#top.home-page #content .home-section-number:not(.text-motion){visibility:hidden}

/* Case metadata returns to the same large reading role as the overview copy beside it. */
html body#top.case-page #content .case-facts :is(dt,dd),
html body#top.case-page #content .case-facts :is(dt,dd) *{
 font-size:var(--large-copy-size)!important;line-height:var(--large-copy-leading)!important;
}



/* Keep section headings slightly more compact without changing the rest of the display scale. */
html body#top :is(#content,#project-details) :is(
 .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
 .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title
){font-size:54px!important;line-height:58px!important}
@media(max-width:767px){
 html body#top :is(#content,#project-details) :is(
  .home-section-heading>h2,.about-expertise>article>h2,.section-heading h2,
  .case-chapter>h2,.case-result-group>h2,.details-grid>#details-title
 ){font-size:37px!important;line-height:41px!important}
}

/* Project Details always uses the same white panel, independent of the case surface. */
html body#top.case-page .project-details{
 --bg:#fff;--fg:#1a1a1a;--muted:#6e6e73;--button-ink:#1a1a1a;
 --control-surface:#f2f2f2;--control-hover:#1a1a1a;
 background:#fff!important;color:#1a1a1a!important;color-scheme:light;
}
html body#top.case-page .project-details :is(
 .details-toolbar,.details-copy,.details-intro,.details-intro p,.details-copy p,.details-copy li,
 .details-meta dd,.details-team dd,.details-grid>#details-title,.details-section>h3
){color:#1a1a1a!important}
html body#top.case-page .project-details :is(.details-meta dt,.details-team dt,.details-role){color:#6e6e73!important}
html body#top.case-page .project-details .details-close{
 background:#f2f2f2!important;color:#1a1a1a!important;
 --control-surface:#f2f2f2;--button-ink:#1a1a1a;--hover-base:#f2f2f2;--hover-fill:#1a1a1a;--hover-ink:#fff;
}
html body#top.case-page .project-details .details-close.fill-control::before{background:#1a1a1a!important}
html body#top.case-page .project-details .details-close:is(:hover,:focus-visible),
html body#top.case-page .project-details .details-close:is(:hover,:focus-visible) .control-label{color:#fff!important}

/* H1: slightly smaller letters and more breathing room at every responsive step. */
html body:is(.home-page,.about-page,.case-page){--h1-size:130.94224px;--h1-leading:152.9459360px}
@media(max-width:1100px){html body:is(.home-page,.about-page,.case-page){--h1-size:96.0239394px;--h1-leading:115.8677406px}}
@media(max-width:767px){html body:is(.home-page,.about-page,.case-page){--h1-size:48.0125246px;--h1-leading:57.9344594px}}
@media(min-width:1600px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(130.94224px,calc(8.7294834vw - 8.73px),148.4008354px);--h1-leading:calc(var(--h1-size)*1.1680412371)}}
@media(min-width:1800px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(148.4008354px,calc(4.3647406vw + 69.8358606px),165.8605406px)}}
@media(min-width:2200px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(165.8605406px,calc(7.2745691vw + 5.8196549px),192.0489886px)}}
@media(min-width:2560px){html body:is(.home-page,.about-page,.case-page){--h1-size:clamp(192.0489886px,calc(5.4559274vw + 52.376896px),261.88448px)}}

/* Keep the panel label anchored at the left from the first frame onward. */
html body#top.case-page #project-details .details-toolbar-grid>span:first-child{
 grid-column:1;grid-row:1;opacity:1!important;filter:none;max-width:none;
}
html body#top.case-page #project-details .details-sticky-title{display:none!important}
html body#top.case-page #project-details .details-grid{padding-top:16px;row-gap:32px}

html body#top.case-page #content .case-heading{align-items:flex-start}
html body#top.case-page #content .case-heading>.case-open{
 align-self:flex-start;margin-top:var(--case-title-ink-offset,0px);
}

/* Hover illustrations share the charcoal surface of the Expertise arrow controls. */
html body#top.about-page .expertise-hover-preview,
html body#top.about-page .expertise-hover-preview>.project-media{background:#242424!important}
/* Hidden gallery sources must never become a second visible flex item. */
html body#top.case-page .case-auto-frame-secondary[hidden]{display:none!important}
/* Both swapping frames keep square corners on every clipping and reveal layer. */
html body#top.case-page #content .case-auto-frames,
html body#top.case-page #content .case-auto-frames :is(.image-zoom,.project-media,.media-scroll,img,canvas){border-radius:0!important}
html body#top.case-page .case-auto-frames{min-width:0;overflow:hidden}
html body#top.case-page .case-auto-frames>.image-zoom{display:block;width:100%;overflow:hidden;flex:none}
html body#top.case-page .case-auto-frames .project-media{position:relative;aspect-ratio:16/9;height:auto;overflow:hidden}
html body#top.case-page .case-auto-frames .media-scroll{translate:none!important}