/* fonts.css */
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/53a90e281b5dcb1b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/cd6ed524815ea4ca.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/712e6990c0fa77c7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/3b1fc03727047d17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/4671269ff78476ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/9eb71af0efac4985.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/4671269ff78476ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/9eb71af0efac4985.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/4671269ff78476ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/9eb71af0efac4985.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/4671269ff78476ae.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/9eb71af0efac4985.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/0dbccc38f1b76c53.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/c1a7777e4a7cb1c8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/61eb9089f03f8a29.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/6ecca7897e5d7a7b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/2dc1871151c57409.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/6a8efa5808ca5e37.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/0d765915e5dd3514.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/adf7264998fb8dfb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/2dc1871151c57409.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/6a8efa5808ca5e37.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/0d765915e5dd3514.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/adf7264998fb8dfb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* shared.css */
/* Shared visual language for the entire portfolio */
/* Balance display lines and discourage isolated final words in reading text. */
h1,h2,h3,h4,h5,h6,blockquote {
  text-wrap:balance;
}
p,li,dd,figcaption {
  text-wrap:pretty;
  orphans:3;
  widows:3;
}
@media print {
  h1,h2,h3,h4,h5,h6 { break-after:avoid; }
  figure,.project-role-card,.properly-card { break-inside:avoid; }
}
.brand{transition:opacity .25s ease,transform .25s ease}.brand:hover{opacity:.68;transform:translateY(-2px)}
.clean-wordmark{font-family:"DM Sans",sans-serif!important;font-size:30px!important;font-weight:700!important;letter-spacing:-2.8px!important;line-height:1!important}
.back,.next-project a,.about-contact a,.trailer-link{transition:opacity .25s ease,transform .25s ease}.back:hover,.next-project a:hover,.about-contact a:hover,.trailer-link:hover{opacity:.68;transform:translateX(6px)}
.project-arrow{transition:transform .3s ease}.project:hover .project-arrow{transform:translate(5px,-5px)}
.case-cover,.atone-hero,.case-image{transition:filter .4s ease}.case-cover:hover,.atone-hero:hover,.case-image:hover{filter:saturate(1.08) contrast(1.03)}
footer p{font:12px "DM Mono",monospace}footer a{transition:opacity .25s ease,transform .25s ease}footer a:hover{opacity:.7}footer a:not(.brand):hover{transform:translateY(-3px)}
@media(max-width:700px){.back:hover,.next-project a:hover,.about-contact a:hover,.trailer-link:hover{transform:none}.case-cover:hover,.atone-hero:hover,.case-image:hover{filter:none}}

/* styles.css */
body { font-kerning: normal; font-feature-settings: "kern" 1; }
:root{--ink:#17211f;--paper:#f3f0e8;--acid:#c7f550;--coral:#ff704a;--line:rgba(23,33,31,.22)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}.grain{position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.nav{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2vw;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand{font:bold 28px/1 "DM Sans";letter-spacing:-2px;color:var(--ink);text-decoration:none}.brand span{font:12px "DM Mono";vertical-align:top;letter-spacing:0}.nav nav{display:flex;gap:30px;margin-left:120px}.nav a,footer a{color:inherit;text-decoration:none;font-size:14px}.availability{font:12px "DM Mono"!important;display:flex;gap:8px;align-items:center}.availability i{width:8px;height:8px;border-radius:50%;background:#6ca422;display:block;box-shadow:0 0 0 4px rgba(108,164,34,.13)}.section,.hero,.quote{padding-left:4.2vw;padding-right:4.2vw}.hero{min-height:calc(100vh - 86px);padding-top:clamp(55px,10vw,145px);display:flex;flex-direction:column}.eyebrow,.count,.art-label,.attribution{font:12px "DM Mono";letter-spacing:.02em}.hero-title{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px}.hero h1{font-size:clamp(53px,8.7vw,138px);line-height:.91;letter-spacing:-.0750em;margin:0;max-width:1000px;font-weight:600}.hero em,.about em,.quote em,.contact em{font-family:"Playfair Display",serif;font-weight:600;letter-spacing:-.08em}.orb-wrap{width:156px;text-align:center;font:10px "DM Mono";letter-spacing:.04em;margin:0 6vw 0 10px}.orb{width:124px;height:124px;margin:auto auto 12px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#f8ffb2 0 7%,var(--acid) 27%,#6d9b2c 50%,#1c3927 74%);box-shadow:inset -18px -16px 30px rgba(0,0,0,.25);animation:float 5s ease-in-out infinite}.hero-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:auto;padding:90px 0 40px}.hero-bottom p{max-width:330px;font-size:16px;line-height:1.4;margin:0}.circle-link{height:58px;width:58px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);text-decoration:none;font-size:24px;transition:.25s}.circle-link:hover{background:var(--ink);color:var(--paper);transform:translateY(4px)}.work{padding-top:95px}.section-heading{border-top:1px solid var(--ink);padding-top:16px;display:flex;justify-content:space-between}.section-heading p{margin:0}.project{position:relative;display:block;text-decoration:none;color:var(--ink);padding:65px 0 35px;border-bottom:1px solid var(--line)}.project-art{height:clamp(280px,37vw,540px);overflow:hidden;position:relative}.art-label{position:absolute;top:18px;left:20px;z-index:1}.project-meta{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center;padding-top:18px}.project-meta h2,.project-meta p{font-size:20px;margin:0;letter-spacing:-.04em}.project-meta p{font-size:15px;letter-spacing:-.02em}.project-meta span{font:11px "DM Mono"}.project-arrow{position:absolute;right:4px;bottom:37px;font-size:26px}.project-coda .project-art{background:#a4b9d5}.phone{width:32%;min-width:190px;height:76%;border:7px solid #182325;border-radius:29px;background:#f7f5ec;position:absolute;bottom:-3%;left:34%;box-shadow:16px 20px 24px rgba(24,35,37,.25);overflow:hidden;transform:rotate(-6deg)}.phone-notch{background:#182325;width:45%;height:19px;border-radius:0 0 13px 13px;margin:auto}.health-ui{padding:14% 9%;font-size:clamp(10px,1.2vw,17px)}.health-ring{border:clamp(10px,1.7vw,20px) solid var(--coral);width:58%;aspect-ratio:1;border-radius:50%;margin:14% auto;display:grid;place-content:center;text-align:center;font-size:clamp(18px,3vw,43px)}.health-ring span{font:8px "DM Mono"}.health-ui small{font:9px "DM Mono"}.orange-disc{width:33%;aspect-ratio:1;border-radius:50%;background:var(--coral);position:absolute;right:16%;top:11%}.project-loom .project-art{background:#e9e4d6}.loom-window{position:absolute;width:58%;height:72%;left:20%;top:15%;background:#fcfaf5;border:1px solid #c9c5ba;box-shadow:18px 23px 0 #293539;padding:5%}.window-top{height:25px;border-bottom:1px solid #ddd8ca;display:flex;gap:5px;align-items:center}.window-top i{height:6px;width:6px;border-radius:50%;background:#b5b2aa}.window-top b{font:10px "DM Mono";margin-left:8px}.chart-bars{position:absolute;bottom:12%;left:10%;right:10%;height:45%;display:flex;gap:7%;align-items:end}.chart-bars i{width:9%;background:#b7dc56;height:var(--h)}.chart-bars i:nth-child(1){height:28%}.chart-bars i:nth-child(2){height:45%}.chart-bars i:nth-child(3){height:34%}.chart-bars i:nth-child(4){height:70%}.chart-bars i:nth-child(5){height:55%}.chart-bars i:nth-child(6){height:82%}.chart-bars i:nth-child(7){height:92%;background:#ec7959}.chart-line{position:absolute;width:69%;top:49%;left:13%;border-top:3px solid #243438;transform:rotate(-13deg)}.loom-sticker{position:absolute;right:13%;top:18%;background:var(--coral);padding:17px;border-radius:50%;font:15px "DM Mono";transform:rotate(13deg)}.project-oda .project-art{background:#e7d8ff}.oda-shape{position:absolute;background:#5641ca;border-radius:50%}.oda-shape.one{width:48%;aspect-ratio:1;right:-4%;top:-25%}.oda-shape.two{width:27%;aspect-ratio:1;left:19%;bottom:-21%;background:#ff8d4f}.oda-word{position:absolute;left:20%;top:25%;font-size:clamp(75px,14vw,220px);letter-spacing:-.12em;font-weight:700;color:#1f2851}.oda-word span{color:#ff8d4f}.oda-card{position:absolute;right:18%;bottom:15%;background:#f9f5eb;padding:24px;font-size:clamp(13px,1.8vw,25px);line-height:1.05;transform:rotate(-8deg);box-shadow:9px 10px 0 #1f2851}.about{padding-top:145px}.about> .eyebrow{border-top:1px solid var(--ink);padding-top:16px;margin:0}.about-content{display:grid;grid-template-columns:1.2fr .8fr;gap:13%;padding:100px 10% 130px 12%}.about h2,.contact h2{font-size:clamp(42px,5.5vw,82px);line-height:.98;letter-spacing:-.070em;margin:0}.about-content div p{font-size:17px;line-height:1.45;margin:0 0 21px}.text-link{display:inline-block;color:var(--ink);font:13px "DM Mono";padding-bottom:6px;border-bottom:1px solid var(--ink);margin-top:18px;text-decoration:none}.text-link span{font-size:20px;margin-left:16px}.marquee{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);white-space:nowrap;overflow:hidden;padding:21px 0;font-size:clamp(24px,3.6vw,53px);letter-spacing:-.0550em}.marquee div{width:max-content;animation:marquee 28s linear infinite}.marquee b{color:#f15e3e;margin:0 16px}.quote{background:#1e302c;color:#f3f0e8;padding-top:105px;padding-bottom:105px}.quote .eyebrow{color:#b7e74d}.quote blockquote{font-size:clamp(35px,5.1vw,76px);line-height:1.05;letter-spacing:-.0650em;max-width:1100px;margin:80px 0 65px}.attribution{margin:0}.contact{background:var(--acid);padding-top:105px;padding-bottom:105px}.contact .eyebrow{margin:0 0 70px}.contact h2{font-size:clamp(64px,10.2vw,158px)}.contact-link{display:inline-flex;gap:15px;align-items:center;color:var(--ink);font-size:clamp(18px,2.5vw,33px);letter-spacing:-.050em;margin-top:52px;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:6px}.contact-link span{font-size:30px}footer{background:#1e302c;color:#f3f0e8;padding:32px 4.2vw;display:flex;justify-content:space-between;align-items:center}footer .brand{color:#f3f0e8}footer p,footer a{font:12px "DM Mono"}footer div{display:flex;gap:18px}.toast{position:fixed;z-index:10;bottom:25px;left:50%;background:var(--ink);color:var(--paper);font:12px "DM Mono";padding:13px 18px;border-radius:30px;transform:translate(-50%,100px);opacity:0;transition:.3s}.toast.show{transform:translate(-50%,0);opacity:1}.reveal{animation:reveal .8s both}.hero-title .reveal{animation-delay:.13s}.hero-bottom.reveal{animation-delay:.25s}@keyframes reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes float{50%{transform:translateY(-12px) rotate(9deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@media(max-width:700px){.nav{height:70px;padding:0 20px}.nav nav,.availability{display:none}.section,.hero,.quote{padding-left:20px;padding-right:20px}.hero{min-height:calc(100vh - 70px);padding-top:70px}.hero-title{display:block}.orb-wrap{display:none}.hero-bottom{padding:65px 0 26px}.project{padding:42px 0 23px}.project-art{height:68vw}.project-meta{grid-template-columns:1fr auto;gap:8px;padding-right:35px}.project-meta p{grid-row:2;grid-column:1/-1}.project-meta span{display:none}.project-arrow{bottom:24px}.about{padding-top:90px}.about-content{display:block;padding:65px 8% 85px}.about-content h2{margin-bottom:40px}.quote{padding-top:70px;padding-bottom:70px}.quote blockquote{margin:55px 0 45px}.contact{padding-top:70px;padding-bottom:75px}.contact .eyebrow{margin-bottom:48px}footer{padding:25px 20px}footer p{display:none}.phone{left:32%;width:39%}.oda-card{padding:15px}.project-meta h2{font-size:19px}}

/* single-page.css */
/* Single-page case-study flow */
body > main > .hero { min-height: calc(100vh - 86px); }
.wordmark { display: inline-flex; align-items: baseline; gap: 0; font-size: 31px; letter-spacing: -3px; }
.logo-image-link { display: flex; align-items: center; height: 44px; }
.logo-image-link img { display: block; width: 70px; height: 34px; object-fit: contain; }
footer .logo-image-link img { filter: invert(1); }
.wordmark span { font-family: "DM Sans", sans-serif; line-height: .75; }
.wordmark-s { font-weight: 700; }
.wordmark-i { font-family: "Playfair Display", serif!important; font-style: italic; font-weight: 700; transform: translateX(-2px) rotate(-8deg); }
.wordmark-d { font-weight: 500; transform: translateX(-3px); }
.project-art .art-label { color: #fff; font-size: 14px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.65); }
.project { transition: padding .35s ease, background .35s ease; }
.project:hover { background: transparent; }
.project-meta { transition: transform .35s ease; }
.about-content div p { font-size:19px; line-height:1.5; }
.project-meta > p { font-size:19px; line-height:1.5; font-weight:400; letter-spacing:normal; }
@media (min-width:701px) and (hover:hover) {
  /* Reserve the text shift and arrow nudge before hover to avoid reflow. */
  .project-meta { width:calc(99.25% - 1.2vw - 5px); }
  .project:hover .project-meta { transform:translateX(1.2vw); }
}
@media (prefers-reduced-motion:reduce) {
  .project-meta { transition:none; }
}
.project:hover .project-art { transform: scale(.985); }
.project-art { transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.project:hover .project-art { filter: saturate(1.1) contrast(1.04); }
.project-arrow { transition: transform .3s ease; }
.project-meta > span { justify-self:end; text-align:right; padding-right:42px; }
.project:hover .project-arrow { transform: translate(5px,-5px); }
.text-link,.contact-link,footer a:not(.brand),.top-link { transition: color .25s ease, transform .25s ease, border-color .25s ease, opacity .25s ease; }
.text-link:hover,.contact-link:hover { transform: translateX(7px); }
.text-link:hover span,.contact-link:hover span { display:inline-block; transform: translate(4px,-4px); }
.contact { padding-top: 100px; padding-bottom: 105px; }
.contact .eyebrow { margin: 0 0 68px; }
.contact-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; text-align:left; }
.contact-heading { grid-column:1 / 3; padding-right:56px; padding-bottom:30px; }
.contact-details { grid-column:3; padding-left:28px; margin-top:0; text-align:left; }
.contact-layout h2 { margin: 0; font-size: clamp(55px,8vw,122px); }
.contact-intro { max-width: 350px; font-size: 18px; line-height: 1.42; margin: 0; }
.contact-location { font:12px/16px "DM Mono",monospace; border-top:1px solid var(--ink); padding-top:14px; margin:12px 0 0; }
.contact .contact-link { border-bottom-width:1px; margin-bottom:0; }
.contact .contact-link { font-size: clamp(18px,2.4vw,30px); }
.top-link { border: 1px solid #f3f0e8; border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px; }
.top-link:hover { color: #1e302c; background: #f3f0e8; transform: translateY(-5px); }
footer a:hover:not(.brand) { opacity: .65; }
.home-nav .availability { display: flex; }
.marquee { margin-left: -4.2vw; margin-right: -4.2vw; padding-left: 4.2vw; padding-right: 4.2vw; border-top: 1px solid var(--ink); border-bottom: 0; }
.marquee div { animation: marquee 28s linear infinite; }
.scroll-case { padding: 105px 4.2vw; border-top: 1px solid var(--ink); scroll-margin-top: 0; }
.scroll-case > .eyebrow { margin: 0; }
.scroll-case-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 11%; margin: 70px 10% 70px 12%; }
.scroll-case h2 { margin: 0; font-size: clamp(44px, 6vw, 88px); line-height: .94; letter-spacing:-.0750em; }
.scroll-case h2 em { font-family: "Playfair Display", serif; font-weight: 600; }
.scroll-case-grid p { font-size: 18px; line-height: 1.45; margin: 0; }
.scroll-case-grid .case-tags { font: 11px/1.45 "DM Mono", monospace; margin-top: 28px; text-transform: uppercase; }
.case-image { height: min(57vw, 700px); overflow: hidden; background: #273c3c; }
.case-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.case-points { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 32px; }
.case-points div { padding: 22px 25px 0 0; }
.case-points div + div { padding-left: 25px; border-left: 1px solid var(--line); }
.case-points b { font: 12px "DM Mono", monospace; text-transform: uppercase; }
.case-points p { margin: 16px 0 0; font-size: 16px; line-height: 1.38; max-width: 260px; }
.case-echo { background: #203538; color: #f5f1e8; border-color: #203538; }
.case-echo .case-points { border-color: rgba(245,241,232,.6); }
.case-echo .case-points div + div { border-color: rgba(245,241,232,.25); }
.case-nitro { background: #e7d8ff; }
.case-atone { background: #d9d2bf; }
.process-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); }
.process-points div { display: grid; align-content:start; gap: 24px; padding: 28px 0 0; border-top: 1px solid rgba(243,240,232,.35); }
.process-points b { color: #b7e74d; font: 12px "DM Mono", monospace; }
.process-points span { font-size: 16px; line-height: 1.35; max-width: 240px; }
@media (max-width: 700px) {
  body > main > .hero { min-height: calc(100vh - 70px); }
  .home-nav .availability { display: flex; font-size: 10px !important; }
  .orb-wrap { display: none !important; }
  .project:hover { padding-left: 0; padding-right: 0; background: transparent; }
  .project:active .project-art { transform: scale(.98); }
  .project-art .art-label { font-size: 12px; }
  .contact { padding: 70px 20px; }
  .contact .eyebrow { margin-bottom: 45px; }
  .contact-layout { display: block; }
  .contact-heading { padding-right:0; padding-bottom:0; }
  .contact-details { padding-left:0; margin-top:48px; }
  .contact-intro { font-size: 16px; }
  .contact-location { margin:40px 0 0; }
  .contact-layout h2 { font-size: clamp(52px,14vw,72px); }
  .logo-image-link img { width: 62px; height: 31px; }
  .marquee { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .scroll-case { padding: 70px 20px; }
  .scroll-case-grid { display: block; margin: 45px 0 42px; }
  .scroll-case h2 { font-size: clamp(46px, 13vw, 64px); margin-bottom: 28px; }
  .scroll-case-grid p { font-size: 16px; }
  .case-image { height: 70vw; margin: 0 -20px; }
  .case-points { display: block; margin-top: 35px; }
  .case-points div { padding: 20px 0; }
  .case-points div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .case-points p { margin-top: 9px; font-size: 15px; }
  .process-points { grid-template-columns:1fr; gap:32px; }
  .process-points div { padding: 20px 0; }
}
.hero-play { width:170px; flex-shrink:0; text-align:center; margin:0 6vw 0 10px; }
.idea-spark { display:block; width:148px; height:148px; padding:5px; margin:0 auto 18px; color:var(--coral,#ff704a); background:none; border:0; cursor:pointer; transform:translate(var(--spark-x,0px),var(--spark-y,0px)); transition:transform .2s ease; -webkit-tap-highlight-color:transparent; }
.idea-spark svg { display:block; width:100%; height:100%; transform:rotate(var(--spark-turn,0deg)); transition:transform .85s cubic-bezier(.22,.8,.24,1); }
.idea-spark:hover { color:#ff805a; }
.idea-spark:focus-visible { outline:2px solid var(--ink); outline-offset:8px; border-radius:50%; }
.spark-caption { display:block; min-height:3em; font:10px/1.5 "DM Mono",monospace; letter-spacing:.02em; }
@media (max-width: 1100px), (max-width: 1366px) and (pointer: coarse) {
  .hero-title { display:block; }
  .hero-play { display:block; width:170px; max-width:100%; margin:52px auto 0 0; text-align:left; }
  .idea-spark { width:104px; height:104px; margin:0 0 12px; touch-action:manipulation; }
}
@media(prefers-reduced-motion:reduce) { .idea-spark,.idea-spark svg { transition:none; transform:none; } }
.project .project-art.project-art-full-banner {
  height: auto;
  min-height: 0;
  aspect-ratio: 1920 / 788;
  background-repeat: no-repeat;
}
.hero-bottom .scroll-work-cue { display:flex; align-items:center; gap:14px; }
.scroll-work-arrow { display:inline-block; font-family:"DM Sans",sans-serif; font-size:1.35em; line-height:1; animation:scroll-work-bob 2s ease-in-out infinite; }
@keyframes scroll-work-bob { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(4px); } }
@media(prefers-reduced-motion:reduce) { .scroll-work-arrow { animation:none; } }
.hero h1.hero-headline {
  flex: 1;
  min-width: 0;
  max-width: 1100px;
  font-size: clamp(38px, 6.6vw, 108px);
  line-height: 1.04;
  text-wrap: balance;
}
.hero-headline .headline-keep { white-space: nowrap; }
@media (max-width: 700px) {
  .hero h1.hero-headline { font-size: clamp(38px, 10vw, 66px); }
}

/* site-chrome.css */
/* Consistent header and footer across every page. */
/* Match the footer beneath iOS safe areas and rubber-band scrolling. */
html { --page-canvas:#f3f0e8; background:var(--page-canvas); }
body { min-height:100svh; background:var(--page-canvas); }
/* Keep paper on the content, not on the canvas Safari exposes below it. */
body > main, body > header.nav { background:var(--paper,#f3f0e8); }
footer.site-footer { padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); }
/* Do not let the fixed grain tint the footer differently from its canvas. */
footer.site-footer, .next-project { position:relative; z-index:5; background:#1e302c; }
.ui-arrow { width:1em; height:1em; display:inline-block; vertical-align:-.1em; overflow:visible; }
.project-art-full-banner > img { display:block; width:100%; height:100%; object-fit:cover; }
.animation-media { display:block; }
.loop-video { display:block; width:100%; height:auto; object-fit:contain; }
html body .next-project > a:not(.return-work) {
  display:inline-flex;
  align-items:baseline;
  gap:clamp(16px,2vw,32px);
  font-kerning:normal;
  letter-spacing:-.035em;
  line-height:1.15;
}
html body .next-project > a:not(.return-work) span {
  margin-left:0;
  letter-spacing:0;
  flex-shrink:0;
}
html body .process blockquote {
  font-family:"DM Sans",sans-serif;
  font-weight:400;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:-.02em;
}
html body .marquee {
  font-kerning:normal;
  letter-spacing:-.02em;
}
html body .marquee b { letter-spacing:0; }
html body .process blockquote em {
  font-family:inherit;
  font-weight:inherit;
  font-style:normal;
  letter-spacing:inherit;
}
/* Unified page-title typography; existing sizes and colours are preserved. */
html body .case-hero h1,
html body .about-hero h1,
html body .hero h1,
html body .about-content h2,
html body .contact-heading h2 {
  font-family:"DM Sans",sans-serif;
  font-weight:700;
  font-style:normal;
  font-kerning:normal;
  letter-spacing:-.035em;
}
html body .case-hero h1 em,
html body .about-hero h1 em,
html body .hero h1 em,
html body .about-content h2 em,
html body .contact-heading h2 em {
  font-family:inherit;
  font-weight:inherit;
  font-style:normal;
  letter-spacing:inherit;
}
img { transition:opacity .45s ease; }
img.image-loading { opacity:0; }
@media(prefers-reduced-motion:reduce) { img { transition:none; } }
.meta-pills,
.case-hero .case-kicker.meta-pills > .heading-reveal-mask > .heading-reveal-text {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:16px;
  row-gap:12px;
}
.meta-pills .meta-pill {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:28px;
  padding:6px 12px;
  border:0;
  border-radius:0;
  background:var(--coral);
  color:var(--ink);
  font:400 10px/1.2 "DM Mono",monospace;
  letter-spacing:.01em;
}
.case-hero .case-kicker.meta-pills { margin-bottom:16px; }
.case-hero .case-kicker.meta-pills > .heading-reveal-mask { width:100%; }
.project-meta > .project-pills {
  grid-column:3;
  min-width:0;
  justify-self:end;
  justify-content:flex-end;
  padding-right:58px;
}
.project-meta .project-pills .meta-pill { display:inline-flex; }
.project-meta > .project-pills { position:relative; }
.project-meta .project-pills > .project-arrow {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:auto;
  font-size:26px;
  line-height:1;
}
@media(max-width:700px) {
  .project-meta > .project-pills:has(.project-arrow) { padding-right:42px; }
}
@media(max-width:900px) {
  .case-hero .case-kicker.meta-pills,
  .case-hero .case-kicker.meta-pills > .heading-reveal-mask > .heading-reveal-text {
    flex-direction:row;
    align-items:center;
    gap:6px;
  }
}
@media(max-width:700px) {
  .project-meta > .project-pills {
    grid-column:1 / -1;
    grid-row:3;
    justify-self:start;
    flex-direction:row;
    align-items:center;
    gap:6px;
    padding-right:0;
  }
  .meta-pills .meta-pill { font-size:9px; padding:6px 8px; white-space:nowrap; }
}
header.nav .header-meta { display:flex; align-items:center; gap:24px; margin-left:auto; font:12px/1.4 "DM Mono",monospace; white-space:nowrap; }
header.nav .header-social, .case-details .project-website-link { display:inline-flex; align-items:center; min-height:44px; color:inherit; font:12px/1.4 "DM Mono",monospace; text-decoration:underline; text-underline-offset:5px; transition:opacity .2s ease; }
header.nav .header-social:hover, .case-details .project-website-link:hover { opacity:.65; }
@media(max-width:900px) {
  header.nav { flex-wrap:wrap; height:auto; gap:12px 20px; padding-block:16px; }
  header.nav .back { position:static; transform:none; margin-left:auto; }
  header.nav .header-meta { gap:18px; }
}
@media(max-width:500px) {
  header.nav .header-meta { width:100%; justify-content:space-between; margin-left:0; }
}
header.nav a.brand,
footer.site-footer a.brand {
  display: inline-block;
  font: 700 24px/1 "DM Sans", sans-serif !important;
  letter-spacing: -1.6px !important;
  white-space: nowrap;
  text-decoration: none;
}
header.nav a.brand,
footer.site-footer a.brand {
  position:relative;
  transition:transform .25s ease;
}
header.nav a.brand::after,
footer.site-footer a.brand::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  background:var(--coral,#ff704a);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s cubic-bezier(.22,.8,.24,1);
}
header.nav a.brand:focus-visible,
footer.site-footer a.brand:focus-visible {
  transform:translateY(-2px);
  outline:2px solid var(--coral,#ff704a);
  outline-offset:9px;
}
header.nav a.brand:focus-visible::after,
footer.site-footer a.brand:focus-visible::after {
  transform:scaleX(1);
  transform-origin:left;
}
@media(hover:hover) {
  header.nav a.brand:hover,
  footer.site-footer a.brand:hover { transform:translateY(-2px); }
  header.nav a.brand:hover::after,
  footer.site-footer a.brand:hover::after {
    transform:scaleX(1);
    transform-origin:left;
  }
}
@media(prefers-reduced-motion:reduce) {
  header.nav a.brand, footer.site-footer a.brand,
  header.nav a.brand::after, footer.site-footer a.brand::after { transition:none; }
  header.nav a.brand:hover, footer.site-footer a.brand:hover,
  header.nav a.brand:focus-visible, footer.site-footer a.brand:focus-visible { transform:none; }
}
footer.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.site-footer .brand { justify-self: start; }
.site-footer .footer-top {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 24px/1 "DM Sans", sans-serif;
  text-decoration: none;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.site-footer .footer-social {
  justify-self: end;
  display: grid;
  align-items: center;
  min-height: 48px;
  font: 13px "DM Mono", monospace;
}
.site-footer .footer-top:hover { background: #f3f0e8; color: #1e302c; transform: translateY(-4px); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 700px) {
  header.nav { flex-wrap: wrap; height: auto; min-height: 70px; gap: 12px 20px; padding-top: 16px; padding-bottom: 16px; }
  header.nav .back { position: static; transform: none; margin-left: auto; }
  header.nav .availability { margin-left: auto; }
  footer.site-footer { gap: 6px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .site-footer .footer-top { width: 44px; height: 44px; }
  .site-footer .footer-social { font-size: 12px; }
}
/* Homepage project navigation fade-out. Project pages appear without a fade-in. */
body.page-leaving {
  opacity: 0;
  transition: opacity 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  body.page-leaving { opacity: 1; transition: none; }
  body:has(.case-hero) main { animation: none; }
  html { scroll-behavior: auto; }
  .site-footer a { transition: none; }
}
.case-details dl div { gap:20px; align-items:baseline; }
.case-details .project-website-link { display:inline; min-height:0; font-size:12px; line-height:1.5; }
.case-details dt { flex-shrink:0; }
.case-details dd { min-width:0; overflow-wrap:break-word; line-height:1.5; }
.project-role { padding-inline:4.2vw; }
.project-role-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:60px; }
.project-role-card { border:1px solid var(--line); padding:32px; min-width:0; }
.project-role-card > span { font:11px/1.5 "DM Mono",monospace; letter-spacing:.08em; }
.project-role-card h3 { font-size:clamp(23px,2.5vw,34px); letter-spacing:-.0450em; line-height:1.1; margin:22px 0 16px; }
.project-role-card p { font-size:17px; line-height:1.6; margin:0; max-width:700px; }
@media(max-width:700px) {
 .project-role { padding-inline:20px; }
 .project-role-grid { grid-template-columns:1fr; gap:24px; margin-top:36px; }
 .project-role-card { padding:24px; }
}
/* Shared project-style closing callout, also used on About. */
.next-project { background:#1e302c; color:#f3f0e8; padding:90px 4.2vw; }
.next-project > .eyebrow { color:#b7e74d; margin:0 0 35px; }
.next-project > a { font-size:clamp(50px,8vw,120px); letter-spacing:-.08em; text-decoration:none; color:inherit; }
.next-project > a span { font-size:.55em; margin-left:20px; }
@media(max-width:700px) { .next-project { padding:65px 20px; } }
.case-hero .project-page-hero { width:100%; aspect-ratio:16 / 9; margin:0; overflow:hidden; }
.case-hero .project-page-hero img { display:block; width:100%; height:100%; object-fit:contain; }

/* buttons.css */
/* Shared calls to action. Selected-work banners deliberately excluded. */
.button-medium {
  display:inline-flex !important;
  align-items:center;
  gap:16px;
  width:fit-content;
  max-width:100%;
  font:13px/1.5 "DM Mono",monospace !important;
  letter-spacing:0;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:6px;
}
.button-large {
  display:inline-flex;
  align-items:center;
  gap:15px;
  max-width:100%;
  color:inherit;
  font-size:clamp(18px,2.4vw,30px);
  letter-spacing:-.050em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:6px;
  overflow-wrap:anywhere;
}
.button-medium span { font-size:20px; margin-left:0 !important; }
header.nav a.header-social.button-medium {
  min-height:0;
  text-decoration:none;
  padding-bottom:6px;
  transition:transform .25s ease, border-color .25s ease;
}
header.nav a.header-social.button-medium:hover { opacity:1; }
.button-large span { font-size:30px; margin-left:0; }
.button-medium, .button-large, .next-project a {
  transition:transform .25s ease, border-color .25s ease;
}
.button-medium span, .button-large span, .next-project a span {
  display:inline-block;
  flex-shrink:0;
  transition:transform .25s ease;
}
.next-project a { display:inline-block; max-width:100%; }
.next-project a[style] { width:fit-content; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .button-medium:hover, .button-large:hover, .next-project a:hover {
    opacity:1;
    transform:translateX(7px);
  }
  .button-medium:hover span, .button-large:hover span, .next-project a:hover span {
    transform:translate(4px,-4px);
  }
}
.site-footer .footer-copyright {
  justify-self:end;
  text-align:right;
  font:12px/1.5 "DM Mono",monospace;
}
header.nav .header-meta { width:auto; margin-left:auto; }
@media(max-width:500px) {
  .site-footer .footer-copyright { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .button-medium, .button-large, .next-project a,
  .button-medium span, .button-large span, .next-project a span { transition:none; }
  .button-medium:hover, .button-large:hover, .next-project a:hover,
  .button-medium:hover span, .button-large:hover span, .next-project a:hover span { transform:none; opacity:1; }
}
.return-work-wrap { padding:0 4.2vw 48px; }
.return-work,.next-project .return-work { display:block; width:fit-content; margin-top:45px; color:inherit; font:13px/1.5 "DM Mono",monospace; letter-spacing:0; text-decoration:none; transition:transform .25s ease,opacity .25s ease; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .return-work:hover { transform:translateX(6px); opacity:.68; } }
@media(max-width:700px) { .return-work-wrap { padding-inline:20px; } }
@media(prefers-reduced-motion:reduce) { .return-work { transition:none; } }
/* Consistent trailer band across game case studies. */
section.game-trailer { background:#17211f; color:#f3f0e8; padding:72px 4.2vw; }
.game-trailer > .eyebrow { margin:0 0 32px; }
.game-trailer > .button-medium { color:inherit; margin-top:24px; }
.game-trailer-placeholder { min-height:320px; aspect-ratio:16 / 9; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:24px; text-align:center; padding:32px; border:1px dashed rgba(243,240,232,.35); }
.game-trailer-placeholder > span { font-size:48px; }
.game-trailer-placeholder h2 { font-size:clamp(28px,4vw,52px); letter-spacing:-.050em; margin:0; }
.game-trailer-placeholder p { font:12px/1.6 "DM Mono",monospace; margin:0; }
@media(max-width:700px) { section.game-trailer { padding:55px 20px; } }

/* project-wipe.css */
/* Orange to/from home; lime green between projects. */
html::after {
  content: ''; position: fixed; z-index: 2147483647;
  top: -100px; bottom: -100px; left: -50vh; right: -50vh;
  background: var(--wipe-colour, #ff704a); pointer-events: none;
  transform: translateX(110%) skewX(-12deg);
  transition: none;
}
html.project-wipe-cover::after {
  transform: translateX(0) skewX(-12deg);
  transition: transform 450ms cubic-bezier(.65,0,.35,1);
  pointer-events: auto;
}
html.project-wipe-arriving::after { transition:none; }
html.project-wipe-reveal::after {
  transform: translateX(-110%) skewX(-12deg);
  transition: transform 500ms cubic-bezier(.65,0,.35,1);
}
html.project-wipe-cover main { animation: none; }
/* Safari may expose the document beneath its translucent toolbars even while
   a fixed overlay covers the layout viewport. Paint that document as well. */
html.project-wipe-cover,
html.project-wipe-cover body { background:var(--wipe-colour,#ff704a) !important; }
html.project-wipe-covered body > * { visibility:hidden !important; }
@media (prefers-reduced-motion: reduce) {
  html::after { display: none; }
}
/* Mobile uses opacity only: never try to paint across Safari's browser bars. */
@media (max-width:900px), (hover:none) {
  html::after { display:none; }
  body { transition:opacity 180ms ease; }
  html.page-fade-out body, html.page-fade-in body { opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  body { transition:none; }
  html.page-fade-out body, html.page-fade-in body { opacity:1; }
}

/* heading-reveal.css */
:is(.case-hero h1, .about-hero h1, main h2, main p, .hero-headline, .spark-caption) > .heading-reveal-mask {
  display: block;
  overflow: clip;
  /* Leave space for italic overhangs and descenders without moving the title. */
  padding: .12em .15em;
  margin: -.12em -.15em;
}
:is(.case-hero h1, .about-hero h1, main h2, main p, .hero-headline, .spark-caption) > .heading-reveal-mask > .heading-reveal-text { display: block; }
.hero-bottom .scroll-work-cue > .heading-reveal-mask > .heading-reveal-text {
  display: flex; align-items: center; gap: 14px;
}