/* The 1920px Illustrator artboard is the desktop coordinate system.
   Every desktop dimension shares --u; tablet/mobile reflow rather than stretching cards. */
:root{--u:calc(var(--layout-width, 100vw) / 1920);--bg:#232424;--panel:#323333;--line:#656968;--gutter:calc(48 * var(--u));--gap:calc(34 * var(--u));--side:calc(348 * var(--u));--radius:calc(20 * var(--u))}
.layout{max-width:none;width:100%;margin:0;padding:calc(10 * var(--u)) var(--gutter) 0;grid-template-columns:minmax(0,1fr) var(--side)}
.logo{width:calc(238 * var(--u));max-width:100%}.logo img,.footer-logo img{aspect-ratio:238.223/32.562;object-fit:contain}
.page-header{grid-template-columns:390fr 496fr 490fr;gap:var(--gap);padding-top:calc(38 * var(--u));min-height:calc(304 * var(--u));align-content:start}
.page-header h1{font-size:calc(26.2 * var(--u));line-height:1.2}.page-header p{font-size:calc(23 * var(--u));line-height:1.36;width:auto;max-width:none;padding-right:calc(60 * var(--u))}
.sidebar{position:fixed;inset:calc(10 * var(--u)) var(--gutter) calc(10 * var(--u)) auto;width:var(--side);height:auto;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;isolation:isolate}
.sidebar::-webkit-scrollbar{display:none}.kaiju-head{margin:0}
.side-nav{top:0;font-size:calc(27.4 * var(--u));gap:calc(10 * var(--u));padding:calc(12 * var(--u)) 0}
.side-nav a,.side-nav button{border:2px solid transparent;border-radius:calc(12 * var(--u));min-height:calc(78 * var(--u));padding:calc(16 * var(--u)) 0;display:grid;place-items:center}
.side-nav [aria-current]{color:var(--ink);background:var(--bg);border-color:var(--panel)}
.side-nav a:hover,.side-nav button:hover{background:var(--red);color:#fff;border-color:transparent}
.scroll-note{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));font-size:calc(20 * var(--u));line-height:1.3;margin:calc(16 * var(--u)) 0 calc(30 * var(--u));min-height:calc(40 * var(--u))}
.scroll-note svg{width:calc(40 * var(--u));height:calc(40 * var(--u));flex:0 0 auto}.scroll-note span{display:inline;background:none;border-radius:0;color:inherit;width:auto;height:auto;margin:0;font-size:inherit}
.side-card{margin-bottom:calc(12 * var(--u))}.side-card .card-hover{justify-content:flex-end;padding:calc(20 * var(--u)) calc(16 * var(--u))}.side-card .card-hover strong{font-size:calc(34 * var(--u));line-height:1.08;overflow-wrap:normal}
.all-link{font-size:calc(20 * var(--u));padding:calc(12 * var(--u));margin-top:calc(18 * var(--u))}
section{margin-top:calc(105 * var(--u))}.section-heading{gap:var(--gap);margin-bottom:calc(64 * var(--u))}.section-heading h2{font-size:calc(30.7 * var(--u))}.section-heading p{font-size:calc(25 * var(--u));line-height:1.36;max-width:none}
.services-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}.service-buttons{gap:calc(18 * var(--u));grid-template-rows:repeat(4,1fr)}
.service-buttons button{font-size:calc(63.6 * var(--u));line-height:1.1;padding:0 calc(12 * var(--u));min-height:calc(125.75 * var(--u));border-radius:calc(14 * var(--u));white-space:nowrap}
.service-art{display:flex;flex-direction:column;min-width:0;min-height:0}
.service-art .service-media{height:0;flex:1;width:100%;min-height:0;aspect-ratio:auto;object-fit:contain}
.service-art p{font-size:calc(23.4 * var(--u));line-height:1.36;margin:calc(12 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));padding:calc(26 * var(--u)) calc(38 * var(--u));min-height:calc(122 * var(--u));border-radius:calc(14 * var(--u))}
.about-home{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:calc(632 * var(--u))}.portrait-photo{position:relative;aspect-ratio:auto;min-height:0}.portrait-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-summary{gap:calc(33 * var(--u));min-width:0}.about-summary>div{flex:1;padding:calc(78 * var(--u)) calc(98 * var(--u));display:flex;flex-direction:column;justify-content:center;gap:calc(40 * var(--u))}
.about-summary h3{font-size:calc(36 * var(--u));line-height:1.14;margin:0;max-width:none}.about-summary p{font-size:calc(25 * var(--u));line-height:1.36;max-width:none}
.outline-button{display:flex;align-items:center;justify-content:center;gap:.5em;border:2px solid var(--line);font-size:calc(36 * var(--u));line-height:1.15;padding:calc(30 * var(--u)) calc(18 * var(--u));min-height:calc(137 * var(--u));flex-shrink:0}.outline-button svg{width:.85em;height:.85em;flex:none;transform:translateY(-.04em)}
.outline-button:hover{border-color:var(--red)}
.contact-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;margin-top:calc(170 * var(--u));min-height:calc(521 * var(--u))}.contact-section>div{min-width:0}.contact-section>div:first-child{gap:calc(33 * var(--u))}
.contact-copy{flex:1;padding:calc(58 * var(--u)) calc(55 * var(--u));display:flex;flex-direction:column;justify-content:center}.contact-copy h2{font-size:calc(72 * var(--u));line-height:1.05;margin-bottom:calc(36 * var(--u))}.contact-copy p{font-size:calc(25 * var(--u));line-height:1.36;max-width:none}
.contact-art{position:relative;min-height:0;padding:0;overflow:hidden}.contact-art img,.contact-art video{position:absolute;inset:0;padding:calc(30 * var(--u));width:100%;height:100%;max-height:none;object-fit:contain}
.red-button{display:flex;align-items:center;justify-content:center;gap:.5em;font-size:calc(36 * var(--u));line-height:1.15;min-height:calc(137 * var(--u));padding:calc(30 * var(--u)) calc(18 * var(--u));flex-shrink:0}.red-button svg{width:1.3em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;transform:translateY(-.08em)}
footer{padding-top:calc(245 * var(--u));padding-bottom:calc(120 * var(--u))}.footer-links{font-size:calc(25 * var(--u));line-height:1.8;gap:calc(90 * var(--u));padding-left:calc(24 * var(--u))}.footer-links span{margin-bottom:calc(10 * var(--u))}.footer-links a:hover,.footer-links button:hover{color:#fff}.footer-logo{opacity:1;filter:none;width:70%;margin-top:calc(130 * var(--u))}
/* Shared sizing for Work, About and project pages. Preserve media ratios. */
.card-hover{padding:calc(28 * var(--u))}.card-hover strong{font-size:calc(40 * var(--u))}.tag{font-size:max(14px,calc(20 * var(--u)));border-radius:calc(8 * var(--u));padding:calc(8 * var(--u)) calc(14 * var(--u))}
.project-intro{margin-top:calc(75 * var(--u));margin-bottom:calc(80 * var(--u))}.project-intro h2{font-size:calc(64 * var(--u))}.project-intro h3{font-size:calc(36 * var(--u));line-height:1.2;margin-bottom:calc(50 * var(--u))}.project-intro>div:last-child{padding:calc(35 * var(--u)) calc(16 * var(--u)) 0}.project-intro>div:last-child p{font-size:calc(25 * var(--u));line-height:1.36;max-width:none;margin-bottom:calc(25 * var(--u))}.credits{font-size:calc(25 * var(--u))}.tags{gap:calc(14 * var(--u));margin:calc(40 * var(--u)) 0 calc(50 * var(--u))}.project-back{margin-top:calc(65 * var(--u));font-size:calc(28 * var(--u));min-height:0}
.about-layout{grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);align-items:stretch}.about-photo{position:relative;min-height:0}.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.bio{padding:calc(64 * var(--u))}.bio h2{font-size:calc(40 * var(--u));margin-bottom:calc(50 * var(--u))}.bio-columns{font-size:calc(24 * var(--u));gap:calc(30 * var(--u));grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bio-columns p{margin-bottom:calc(25 * var(--u))}.stats{gap:calc(18 * var(--u))}.stats>div{gap:calc(35 * var(--u));padding:calc(28 * var(--u))}.stats strong{font-size:calc(105 * var(--u))}.stats span{font-size:calc(31 * var(--u))}.detail-copy{padding:calc(55 * var(--u));font-size:calc(24 * var(--u));margin-top:calc(50 * var(--u))}.detail-art{margin-top:calc(50 * var(--u));min-height:calc(370 * var(--u));padding:calc(14 * var(--u))}.detail-art p{font-size:calc(30 * var(--u));padding:calc(16 * var(--u))}
/* Compact desktop/tablet: readable type and intentional reflow. */
@media(min-width:761px) and (max-width:1100px){
 :root{--gutter:32px;--gap:24px;--side:190px;--radius:14px}
 .layout{padding-top:12px}.sidebar{top:12px;bottom:12px}.page-header{grid-template-columns:1fr 1fr;gap:28px;min-height:300px;padding:20px 0 45px}.page-header .logo{grid-column:1/-1;width:190px}.page-header h1{font-size:20px}.page-header p{font-size:18px;padding-right:16px}
 .side-nav{font-size:16px;gap:8px;padding:10px 0}.side-nav a,.side-nav button{min-height:48px;padding:12px 0;border-radius:9px}.scroll-note{font-size:14px;gap:7px;margin:8px 0 22px}.scroll-note svg{width:26px;height:26px}.side-card{margin-bottom:10px}.side-card .card-hover{padding:16px 12px}.side-card .card-hover strong{font-size:22px}.all-link{font-size:14px;padding:10px}
 section{margin-top:64px}.section-heading{margin-bottom:28px}.section-heading h2{font-size:24px}.section-heading p{font-size:18px}.services-grid{grid-template-columns:1fr}.service-buttons{grid-row:1;gap:12px}.service-buttons button{font-size:40px;min-height:85px;white-space:normal;padding:18px}.service-art{grid-template-rows:auto auto}.service-art .service-media{height:auto;flex:none;aspect-ratio:1.75}.service-art p{font-size:18px;min-height:0;margin:12px;padding:20px}
 .about-home{grid-template-columns:1fr;min-height:0}.portrait-photo{aspect-ratio:704/632}.about-summary{gap:18px}.about-summary>div{padding:40px;gap:28px}.about-summary h3{font-size:28px}.about-summary p{font-size:20px}.outline-button{font-size:24px;padding:24px;min-height:80px}
 .contact-section{grid-template-columns:1fr;min-height:0;margin-top:80px}.contact-section>div:first-child{gap:18px}.contact-copy{padding:40px}.contact-copy h2{font-size:40px;margin-bottom:24px}.contact-copy p{font-size:20px}.contact-art{aspect-ratio:704/521}.contact-art img,.contact-art video{padding:24px}.red-button{font-size:28px;padding:24px;min-height:80px}
 footer{padding:110px 0 50px}.footer-links{font-size:20px;gap:60px;padding-left:0}.footer-logo{margin-top:90px}.work-grid{columns:2}.card-hover strong{font-size:24px}
 .project-intro{grid-template-columns:1fr;gap:32px;margin:40px 0}.project-intro h2{font-size:40px}.project-intro h3{font-size:28px;margin-bottom:24px}.project-intro>div:last-child{padding:0}.project-intro>div:last-child p,.credits{font-size:18px}.tags{margin:24px 0;gap:12px}.project-back{font-size:20px}
 .about-layout{grid-template-columns:1fr}.about-photo{aspect-ratio:1;max-height:600px}.bio{padding:32px}.bio h2{font-size:28px;margin-bottom:30px}.bio-columns{grid-template-columns:1fr;font-size:18px;gap:0}.bio-columns p{margin-bottom:20px}.stats{grid-column:auto;gap:16px}.stats>div{padding:24px;gap:24px;justify-content:space-between}.stats strong{font-size:64px}.stats span{font-size:24px}.detail-copy{font-size:18px;padding:32px;margin-top:20px}.detail-art{min-height:300px;margin-top:20px;padding:16px}.detail-art p{font-size:24px;padding:16px}
}
@media(max-width:760px){
 :root{--gutter:24px;--gap:16px;--radius:12px}
 .layout{padding:24px var(--gutter) 0}.page-header{grid-template-columns:1fr;min-height:0;padding:8px 0 56px;gap:24px}.page-header .logo{width:160px;grid-column:auto;margin:0 0 12px}.page-header h1{font-size:24px}.page-header p{font-size:18px;padding:0;max-width:29ch}
 .mobile-menu{right:var(--gutter)}.menu-open .sidebar{inset:0;width:100%;height:100dvh;overflow:auto;padding:95px var(--gutter) 30px}.menu-open .mobile-menu-logo{padding-left:var(--gutter)}.menu-open .mobile-menu-logo img{width:160px}.menu-open .side-nav{font-size:18px;gap:8px}.menu-open .side-nav a,.menu-open .side-nav button{min-height:48px;padding:14px;border-radius:9px}.scroll-note{font-size:16px;gap:12px;margin:16px 0 22px}.scroll-note svg{width:30px;height:30px}.side-card{margin-bottom:10px}.menu-open .side-card .card-hover strong{font-size:24px}.menu-open .side-card .card-hover{justify-content:flex-end;padding:16px}.all-link{font-size:16px;padding:12px;margin-top:20px}
 section{margin-top:64px}.section-heading{grid-template-columns:1fr;gap:14px;margin-bottom:24px}.section-heading h2{font-size:26px}.section-heading p{font-size:20px}.services-grid{grid-template-columns:1fr;gap:16px}.service-buttons{grid-row:1;grid-template-columns:1fr;gap:12px}.service-buttons button{font-size:36px;padding:18px 12px;min-height:80px;white-space:normal}.service-art{grid-template-rows:auto auto}.service-art .service-media{height:auto;flex:none;aspect-ratio:1.75}.service-art p{font-size:18px;padding:20px;margin:12px;min-height:0}
 .about-home{grid-template-columns:1fr;min-height:0}.portrait-photo{aspect-ratio:704/632;min-height:0}.about-summary{gap:18px}.about-summary>div{padding:28px;gap:24px}.about-summary h3{font-size:26px}.about-summary p{font-size:18px}.outline-button{font-size:22px;padding:22px 10px;min-height:76px}
 .contact-section{grid-template-columns:minmax(0,1fr);min-height:0;margin-top:64px}.contact-section>div:first-child{gap:18px}.contact-copy{padding:28px}.contact-copy h2{font-size:30px;margin-bottom:24px}.contact-copy p{font-size:18px}.contact-art{aspect-ratio:704/521;min-height:0}.contact-art img,.contact-art video{padding:16px}.red-button{font-size:24px;padding:22px 14px;min-height:76px}
 footer{padding:95px 0 40px}.footer-links{font-size:18px;gap:42px;padding:0}.footer-links span{margin-bottom:10px}.footer-logo{width:95%;margin-top:90px}
 .project-intro{margin:35px 0;grid-template-columns:1fr;gap:25px}.project-intro h2{font-size:34px}.project-intro h3{font-size:26px;margin-bottom:24px}.project-intro>div:last-child{padding:0}.project-intro>div:last-child p,.credits{font-size:18px}.tags{margin:24px 0;gap:10px}.tag{font-size:14px;padding:8px 12px;border-radius:7px}.project-back{margin-top:25px;font-size:20px}
 .about-layout{grid-template-columns:1fr}.about-photo{aspect-ratio:1;max-height:none}.bio{padding:25px}.bio h2{font-size:26px;margin-bottom:28px}.bio-columns{grid-template-columns:1fr;font-size:18px;gap:0}.bio-columns p{margin-bottom:20px}.stats{grid-column:auto;gap:16px}.stats>div{padding:22px;gap:18px;justify-content:space-between}.stats strong{font-size:44px}.stats span{font-size:20px}.detail-copy{font-size:18px;padding:25px;margin-top:20px}.detail-art{min-height:250px;margin-top:20px;padding:14px}.detail-art p{font-size:22px;padding:14px}
}
@media(prefers-reduced-motion:reduce){.sidebar{scroll-behavior:auto}}
@media(min-width:1101px){.services-grid{height:calc(557 * var(--u))}.service-art,.service-buttons{height:100%;min-height:0}.service-art .service-media{flex-basis:0}}

/* Final surface polish: one corner radius for all rounded interface surfaces. */
:root{--radius:calc(18 * var(--u))}
.home-reel{aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.home-reel video{width:100%;height:100%;object-fit:contain}
.home-reel,.kaiju-head,.project-card,.reel-placeholder,.main-video,.service-art,.service-art p,.service-buttons button,.portrait-photo,.about-summary>div,.outline-button,.contact-copy,.contact-art,.red-button,.side-nav a,.side-nav button,.all-link,.tag,.tags .tag,.gallery-item,.about-photo,.bio,.stats>div,.detail-copy,.detail-art,.detail-art p,.lightbox,.toast,.mobile-menu,.main-video>button span:first-child,.close-lightbox,.menu-open .side-nav a,.menu-open .side-nav button,.work-grid .card-hover strong{border-radius:var(--radius)}
footer{padding-bottom:calc(24 * var(--u))}
.service-art,.contact-art{border-width:2px}
.red-button svg{transform:translateY(calc(-.08em + 1px))}
.outline-button svg{width:.9em;height:.9em;transform:translateY(calc(-.04em + 1px))}
@media(min-width:761px) and (max-width:1100px){:root{--radius:13px}footer{padding-bottom:24px}}
@media(max-width:760px){:root{--radius:11px}footer{padding-bottom:24px}}
/* Original vector icons and unified smaller radius. */
:root{--radius:calc(16 * var(--u));--soft-ease:cubic-bezier(.22,1,.36,1)}
.outline-button .pdf-plus{width:calc(36.117 * var(--u));height:calc(36.117 * var(--u));transform:none;overflow:visible}
.about-summary .outline-button{gap:calc(19 * var(--u))}
.red-button .pdf-mail{width:calc(57.399 * var(--u));height:calc(39.703 * var(--u));stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;transform:none;overflow:visible}
.red-button{gap:calc(30 * var(--u))}
@media(min-width:761px) and (max-width:1100px){:root{--radius:12px}.outline-button .pdf-plus{width:24px;height:24px}.red-button .pdf-mail{width:44.65px;height:30.88px}.about-summary .outline-button{gap:13px}.red-button{gap:23px}}
@media(max-width:760px){:root{--radius:10px}.outline-button .pdf-plus{width:22px;height:22px}.red-button .pdf-mail{width:38.27px;height:26.47px}.about-summary .outline-button{gap:12px}.red-button{gap:20px}}
/* Motion stays on opacity/translate/transform; no layout changes. */
.motion-module{transition:opacity 650ms var(--soft-ease),translate 850ms var(--soft-ease)}
.motion-pending{opacity:0;translate:0 34px}.motion-pending:focus-within{opacity:1;translate:none}
.project-card{transition:transform 340ms var(--soft-ease),opacity 650ms var(--soft-ease),translate 850ms var(--soft-ease)}
.card-hover{transition:opacity 150ms ease-out}
.title-word{display:inline-block;vertical-align:top;backface-visibility:hidden;opacity:0;transform:translate3d(0,7px,0);transition:opacity 170ms ease-out,transform 300ms var(--soft-ease);transition-delay:0ms}
.project-card:focus-visible .title-word{opacity:1;transform:translate3d(0,0,0);transition-delay:calc(var(--word-index) * 22ms)}
.service-buttons button{transition:background-color 130ms ease-out,color 130ms ease-out,transform 320ms var(--soft-ease),box-shadow 320ms var(--soft-ease),opacity 650ms var(--soft-ease),translate 850ms var(--soft-ease)}
.outline-button,.red-button{transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out,transform 320ms var(--soft-ease),box-shadow 320ms var(--soft-ease),opacity 650ms var(--soft-ease),translate 850ms var(--soft-ease)}
.side-nav a,.side-nav button{transition:none}
@media(hover:hover) and (pointer:fine){
 .project-card:hover{transform:scale(.982)}
 .project-card:hover .title-word{opacity:1;transform:translate3d(0,0,0);transition-delay:calc(var(--word-index) * 22ms)}
 .service-buttons button:hover,.outline-button:hover,.red-button:hover{transform:scale(1.018);box-shadow:0 7px 14px #0002}
 .red-button:hover{background:var(--red)}


}
.project-card:active,.service-buttons button:active,.outline-button:active,.red-button:active{transform:scale(.977);box-shadow:none;transition-duration:100ms}
.scroll-note svg{overflow:visible;display:block}.scroll-note .scroll-arrow{animation:scroll-cue 1250ms linear infinite}
.motion-paused .scroll-arrow,.page-hidden .scroll-note .scroll-arrow{animation-play-state:paused}
@keyframes scroll-cue{0%{transform:translateY(-10px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(10px);opacity:0}}
.copy-confirmation{display:inline-flex;align-items:center;justify-content:center;gap:.35em;animation:copy-enter 200ms var(--soft-ease)}
.copy-confirmation svg,.red-button .copy-confirmation svg{width:1em;height:1em;transform:none;flex:none;stroke-width:3}
.side-nav .copy-confirmation{font-size:.7em;white-space:nowrap}.red-button .copy-confirmation span{margin:0}
@keyframes copy-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:760px){.work-grid .title-word{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){
 .motion-module,.motion-pending{opacity:1;translate:none}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .project-card:hover,.project-card:active,.service-buttons button:hover,.service-buttons button:active,.outline-button:hover,.outline-button:active,.red-button:hover,.red-button:active,.side-nav a:hover,.side-nav button:hover{transform:none}
 .project-card:hover .title-word,.project-card:focus-visible .title-word{opacity:1;transform:translate3d(0,0,0)}
}

/* Supplied looping head keeps the existing square sidebar footprint. */
.kaiju-head video{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:inherit}

/* Depth at the bottom of the independent project rail. */
.side-card{scale:var(--rail-scale,1);opacity:var(--rail-opacity,1);transform-origin:center;transition:transform 340ms var(--soft-ease)}
.service-buttons button,.outline-button,.red-button{transform-origin:center}
@media(prefers-reduced-motion:reduce){.side-card{scale:1;opacity:1}}

/* Compact, bold copy confirmation and a one-shot typographic wave. */
.copy-confirmation svg,.red-button .copy-confirmation svg{width:1.18em;height:1.18em;stroke-width:4.5}
.side-nav .copy-confirmation{font-size:.76em;gap:.25em}
.red-button .contact-word,.red-button .contact-letter{margin:0}
.contact-word{display:inline-flex;white-space:nowrap}
.contact-letter{display:inline-block;transform-origin:50% 100%}
@media(hover:hover) and (pointer:fine){
 .red-button:hover .contact-letter{animation:contact-wave 680ms cubic-bezier(.33,0,.2,1) both;animation-delay:calc(var(--letter) * 32ms)}
}
.red-button:focus-visible .contact-letter{animation:contact-wave 680ms cubic-bezier(.33,0,.2,1) both;animation-delay:calc(var(--letter) * 32ms)}
@keyframes contact-wave{0%,100%{transform:translateY(0) scaleY(1)}20%{transform:translateY(0) scaleY(.78);animation-timing-function:cubic-bezier(.15,.65,.3,1)}47%{transform:translateY(-.22em) scaleY(1);animation-timing-function:cubic-bezier(.55,0,.85,.4)}68%{transform:translateY(0) scaleY(1)}77%{transform:translateY(0) scaleY(.84)}88%{transform:translateY(-.035em) scaleY(1)}96%{transform:translateY(0) scaleY(.97)}}
footer{padding-bottom:calc(42 * var(--u))}
@media(max-width:1100px){footer{padding-bottom:34px}}
/* Shared bottom clearance aligns the rail CTA with the footer logo. */
:root{--bottom-clearance:calc(42 * var(--u))}
footer{padding-bottom:var(--bottom-clearance)}
.side-nav [aria-current]{border-width:3px}
@media(min-width:761px){.sidebar{bottom:0}.side-list{padding-bottom:var(--bottom-clearance)}}
@media(max-width:1100px){:root{--bottom-clearance:34px}}

.scroll-note{font-weight:500}
/* Shared module treatment for Home, Work, About and project pages. */
:root{--module-stroke:2px;--module-line:#3a3b3b}
.service-art,.contact-art,.detail-art{border:var(--module-stroke) solid var(--module-line)}
.main-video iframe{border:0;border-radius:inherit}
.about-photo,.bio,.stats>div,.detail-copy,.detail-art,.gallery-item,.main-video{border-radius:var(--radius)}
.outline-button{border-width:var(--module-stroke);border-color:var(--line)}


.service-media{overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.service-media>img,.service-media>video{width:100%;height:100%;object-fit:contain}
.service-media [hidden]{display:none}

/* Work tags: expanded italic type and compact corners from the artwork. */
@font-face{font-family:ArchivoTags;src:url('/assets/Archivo_Expanded-ExtraBoldItalic.woff') format('woff');font-weight:800;font-style:italic;font-display:swap}
.work-grid .tag,.project-intro .tags .tag{font-family:ArchivoTags,Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:max(16px,calc(20 * var(--u)));line-height:1.2;min-height:max(42px,calc(52 * var(--u)));padding:calc(12 * var(--u)) max(12px,calc(16 * var(--u)));border-radius:max(6px,calc(11 * var(--u)));display:inline-flex;align-items:center;justify-content:center}
@media(max-width:760px){.work-grid .card-hover .tag{display:none}}

@font-face{font-family:Raleway;src:url('/assets/Raleway-BoldItalic.woff') format('woff');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Raleway;src:url('/assets/Raleway-LightItalic.woff') format('woff');font-weight:300;font-style:italic;font-display:swap}
.credits{font-weight:300}.credits strong{font-weight:700}.credits span{font-weight:300}
@media(min-width:1101px){
 .project-intro{grid-template-rows:auto auto auto;row-gap:0;align-items:start}
 .project-intro>div{display:grid;grid-template-rows:subgrid;grid-row:1 / span 3;min-width:0}
 .project-intro>div:first-child{grid-column:1}
 .project-intro>.project-story:last-child{grid-column:2;padding:0 calc(100 * var(--u)) 0 calc(16 * var(--u))}
 .project-story h3{grid-row:1;margin:0;align-self:end}
 .project-story .project-body{grid-row:2 / span 2;align-self:start;min-width:0;padding-top:calc(40 * var(--u))}
 .project-story .project-body p:last-child{margin-bottom:0}
}
@media(min-width:761px){
 .project-gallery .square{aspect-ratio:1;position:relative}
 .project-gallery .vertical{position:relative;align-self:stretch;height:100%;min-height:0}
 .project-gallery .square img,.project-gallery .vertical img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
}

/* About: the portrait's track ends before the lower detail modules. */
@media(min-width:1101px){
 .about-portrait-track{grid-column:1;grid-row:1 / span 2;min-width:0;align-self:stretch}
 .about-portrait-track .about-photo{position:sticky;top:12px;width:100%;aspect-ratio:464.296875 / 728.078125;height:auto;max-height:calc(100dvh - 24px)}
 .about-layout>.bio{grid-column:2;grid-row:1}
 .about-layout>.stats{grid-column:2;grid-row:2}
 .about-layout>.detail-copy{grid-column:1;grid-row:3}
 .about-layout>.detail-art{grid-column:2;grid-row:3}
}
.stats>.stat-bar{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);border:2px solid var(--panel);color:var(--ink);cursor:default;--stat-progress:1}
.stats>.stat-bar::before{content:"";position:absolute;inset:0;background:var(--panel);transform:scaleX(var(--stat-progress));transform-origin:right center;z-index:-1;transition:background-color 160ms ease-out}
.stats>.stat-bar.is-active{color:#fff;border-color:var(--red)}
.stats>.stat-bar.is-active::before{background:var(--red)}
.stats strong{font-variant-numeric:tabular-nums;min-width:4.2ch;text-align:right}
@media(max-width:1100px){.about-portrait-track{min-width:0}.about-portrait-track .about-photo{width:100%}.stats strong{min-width:0}}
@media(prefers-reduced-motion:reduce){.about-portrait-track .about-photo{position:relative;top:0}.stats>.stat-bar::before{transition:none}}

/* Explicit entrance also runs for modules already in view on first paint. */
.motion-module.motion-entering{animation:module-enter 850ms var(--soft-ease) var(--enter-delay,0ms) both}
@keyframes module-enter{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.motion-module.motion-entering{animation:none;opacity:1;translate:none}}

/* Completed statistics retain the same hover cursor as the services. */
.stats.is-complete>.stat-bar{cursor:pointer}

/* Mobile review: compact service tabs keep the selected media and copy together. */
@media(max-width:760px){
 :root{--gutter:clamp(16px,5vw,24px)}
 .layout{display:block}
 .services-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .service-buttons{grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:8px}
 .service-buttons button{min-width:0;min-height:58px;padding:10px 8px;font-size:clamp(14px,4.2vw,20px);line-height:1.15;white-space:normal;overflow-wrap:normal;word-break:normal}
 .service-art .service-media{width:100%;height:auto;flex:none;aspect-ratio:16/9}
 .service-art p{font-size:16px;line-height:1.4;margin:8px;padding:14px;min-height:0}
 .about-home,.about-layout,.project-intro{grid-template-columns:minmax(0,1fr)}
 .about-home>*,.about-layout>*,.project-intro>*{min-width:0}
 .outline-button,.red-button{width:100%;max-width:100%;min-width:0;font-size:clamp(18px,5vw,24px);padding:20px 12px;min-height:70px;gap:10px}
 .about-summary .outline-button{gap:10px;font-size:clamp(17px,4.8vw,22px)}
 .outline-button>span{min-width:0;white-space:nowrap}
 .outline-button .pdf-plus{width:18px;height:18px}
 .red-button .pdf-mail{width:28px;height:20px}
 .contact-copy{padding:clamp(20px,6vw,28px)}
 .contact-copy h2{font-size:clamp(23px,7.7vw,30px);overflow-wrap:normal;word-break:normal}
 .project-intro h2{font-size:clamp(27px,8vw,34px);overflow-wrap:normal;word-break:normal;hyphens:none}
 .stats>.stat-bar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-content:normal;gap:12px;padding:20px 14px}
 .stats strong{font-size:clamp(28px,10vw,44px);min-width:0;white-space:nowrap;text-align:left}
 .stats span{font-size:clamp(13px,4vw,18px);min-width:0;line-height:1.25;overflow-wrap:normal;word-break:normal;hyphens:none}
 .footer-logo{display:block;width:100%;height:auto;margin-top:64px;opacity:1;translate:none}
 .footer-logo img{display:block;width:100%;height:auto;aspect-ratio:238.223/32.562}
 .footer-links{gap:clamp(24px,8vw,42px);font-size:clamp(16px,4.7vw,18px)}
}

/* Consistent project cover and vector play icon on iOS and desktop. */
.main-video>img{opacity:1}
.main-video>button .project-play-icon{padding:0}
.project-play-icon svg{display:block;width:32px;height:32px;flex:none}
@media(max-width:760px){
 /* Explicit block dimensions prevent an empty absolute-video wrapper collapsing on WebKit. */
 .contact-section>.contact-art{display:block;justify-self:stretch;width:100%;height:calc((100vw - var(--gutter) - var(--gutter)) * .74006);min-height:180px;aspect-ratio:704/521}
 .menu-open .side-card{width:100%;height:auto;aspect-ratio:3/2;max-height:none;min-height:0;display:block}
 .menu-open .side-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
 .menu-open .side-card .card-hover{opacity:1;pointer-events:none;background:linear-gradient(transparent 35%,#000b);justify-content:flex-end;padding:16px}
 .menu-open .side-card .card-hover strong{color:#fff;font-size:clamp(18px,5.5vw,24px);line-height:1.15;text-align:left;text-shadow:0 1px 6px #0007}
 .menu-open .side-card .title-word{opacity:1;transform:none;transition:none}
}

/* One red play triangle; its visual mass sits at the centre of the cover. */
.main-video>button{gap:0;text-shadow:none}
.main-video>button .project-play-icon,.main-video>button:hover .project-play-icon{width:clamp(90px,10vw,150px);height:clamp(90px,10vw,150px);padding:0;background:transparent;border-radius:0;backdrop-filter:none;color:var(--red)}
.main-video .project-play-icon svg{width:100%;height:100%;display:block}

/* Contact is an animated image: no player controls or autoplay permission required. */
.contact-art picture{display:block;width:100%;height:100%}
.main-video>iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}

/* Personal loops share the approved photo footprints and fall back to their posters. */
.portrait-photo>video,.about-photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.detail-art{position:relative;overflow:hidden;isolation:isolate}
.detail-art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-1}
.detail-art>p{position:relative}
@media(max-width:760px){.menu-open .sidebar{padding-bottom:max(30px,env(safe-area-inset-bottom))}.toast{bottom:max(24px,env(safe-area-inset-bottom))}}

.portrait-photo>video{object-position:50% 20%}

/* Supplied project artwork keeps its complete composition and readable lettering. */
.project-cover{overflow:hidden;border-radius:var(--radius)}
.project-cover img{width:100%;height:auto;display:block}
.supplied-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
.supplied-gallery .gallery-item{grid-column:1/-1;aspect-ratio:auto;height:auto}
.supplied-gallery .gallery-item img{position:static;width:100%;height:auto;object-fit:contain}
@media(max-width:760px){.project-intro h2{font-size:clamp(23px,7vw,32px)}}

/* Gallery interaction preserves the supplied artwork colours. */
.gallery-item:hover,.gallery-item:active{filter:none}
.gallery-item{cursor:pointer;transition:none}
.work-grid .card-tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;max-width:100%}
.work-grid .card-tags .tag{font-size:clamp(10px,calc(15 * var(--u)),15px);min-height:0;padding:7px 9px;line-height:1.15;border-radius:5px;white-space:nowrap}
.side-card .card-tags{display:none}
@media(max-width:760px){.work-grid .card-tags{display:none}}

/* Row-major masonry: 1/2/3 across, with independent mixed-height columns. */
.work-grid{columns:auto;position:relative}
.work-grid[data-masonry]>.project-card{position:absolute;margin:0;aspect-ratio:3/2}
.work-grid[data-masonry]>.project-card.portrait{aspect-ratio:3/4}

/* Legal uses the portfolio's typography, spacing and palette. */
.legal-page{max-width:1000px;margin:0 auto 100px;font-size:clamp(16px,1.1vw,19px);line-height:1.65}
.legal-updated{opacity:.6;margin:0 0 24px}
.legal-index{display:flex;flex-wrap:wrap;gap:12px 28px;padding:0 0 36px;border-bottom:1px solid #ffffff30}
.legal-page>section{padding:48px 0 12px;scroll-margin-top:40px}
.legal-page h2{font-size:clamp(32px,4vw,56px);line-height:1.1;margin:0 0 36px}
.legal-page h3{font-size:clamp(19px,1.8vw,25px);line-height:1.3;margin:32px 0 12px}
.legal-page p{max-width:78ch;margin:0 0 20px}
.legal-page a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.legal-page a:hover{color:var(--red)}
.legal-details{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px 24px;margin:20px 0 36px}
.legal-details dt{font-weight:700}.legal-details dd{margin:0;overflow-wrap:anywhere}
@media(max-width:760px){.legal-page{margin-bottom:56px}.legal-page>section{padding-top:36px}.legal-details{grid-template-columns:1fr;gap:2px}.legal-details dd{margin-bottom:15px}}

/* Mobile portrait media: preserve vertical artwork and give the home photo intrinsic height. */

@media(max-width:760px){
 .work-grid .project-card.portrait{aspect-ratio:3/4}
 .work-grid .project-card.portrait>video{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover}
 .about-home .portrait-photo{display:block;position:relative;width:100%;height:0;padding-top:100%;aspect-ratio:auto;min-height:0;overflow:hidden}
 .about-home .portrait-photo>video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
}