@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Space+Mono:wght@400;700&display=swap');
:root{--paper:#eeeae0;--ink:#22231e;--terracotta:#c95738;--yellow:#d5df6a;--line:#bcb9ad;--mono:'Space Mono',monospace;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid #3c72b0;outline-offset:4px}img{display:block;max-width:100%}.skip{position:absolute;top:-100px;left:1rem;background:white;z-index:100;padding:1rem}.skip:focus{top:1rem}.wrap{width:min(1410px,calc(100% - 10vw));margin:auto}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line);gap:2rem}.wordmark{font-weight:700;letter-spacing:-.06em;font-size:1.1rem;white-space:nowrap}.wordmark span{color:var(--terracotta);margin:0 .17em}.top-note{font:10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:#6b6b61}.top-note i{color:var(--terracotta);font-style:normal;padding:0 5px}.topbar nav{display:flex;align-items:center;gap:32px;font-size:12px;font-weight:700}.nav-contact{border:1px solid var(--ink);border-radius:99px;padding:11px 17px}.nav-contact span{margin-left:15px}.hero{min-height:650px;height:calc(100svh - 78px);max-height:900px;display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 56px;position:relative;overflow:hidden}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(#22231e08 1px,transparent 1px),linear-gradient(90deg,#22231e08 1px,transparent 1px);background-size:52px 52px;pointer-events:none}.hero-main,.hero-aside,.hero-footer{position:relative}.hero-main{padding:clamp(70px,9vw,150px) 4vw 50px 5vw;display:flex;flex-direction:column;justify-content:center}.eyebrow,.section-kicker,.mini,.door-overline,.door-top,.door-link,.under-doors,.hero-footer,.aside-label,.aside-index,.art-label,.art-caption,.project-meta,.card-meta,.credit strong,.links,.experience-list article>span,.experience-list small,.experience-list article div,.reel-number,.reel-bottom small,.watch-copy small,.watch-copy em,.about-notes,footer,.contact-button,.browser-chrome{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em}.eyebrow{display:flex;align-items:center;gap:9px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--terracotta);box-shadow:0 0 0 4px #c9573820}.hero h1,.section-title h2,.intro h2,.about h2,.contact h2{font-family:var(--serif);font-size:clamp(70px,8.8vw,148px);line-height:.91;letter-spacing:-.055em;font-weight:400;margin:38px 0}.hero h1 em,.intro h2 em,.section-title h2 em,.about h2 em,.contact h2 em,.experience-title h3 em,.film-intro h3 em{font-weight:400;color:var(--terracotta)}.hero-bottom{display:flex;align-items:end;justify-content:space-between;max-width:650px;gap:25px}.hero-bottom p{font-size:clamp(17px,1.4vw,22px);line-height:1.55;max-width:470px;margin:0}.round-arrow{border:1px solid var(--ink);height:58px;width:58px;border-radius:50%;display:grid;place-items:center;font-size:26px;flex:none;transition:.25s}.round-arrow:hover{background:var(--ink);color:var(--paper);transform:rotate(45deg)}.hero-aside{border-left:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:#e2ddd0}.hero-stamp{height:280px;width:280px;border-radius:50%;background:var(--terracotta);color:#f6eedd;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;z-index:2;transform:rotate(-12deg);box-shadow:0 18px 45px #7135222e}.hero-stamp span{font:700 15px var(--mono);line-height:1.25}.hero-stamp b{font-size:100px;line-height:1}.hero-stamp small{font:9px var(--mono)}.orbit{position:absolute;width:85%;aspect-ratio:1;border:1px solid #a7a394;border-radius:50%}.orbit-two{width:115%}.aside-label{position:absolute;top:28px;left:28px;line-height:1.6;color:#747267}.aside-index{position:absolute;right:28px;bottom:28px;color:#747267}.hero-footer{grid-column:1/-1;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 5vw}.intro,.films{padding:120px 0}.section-kicker{display:flex;justify-content:space-between;gap:10px;border-top:1px solid currentColor;padding-top:14px;color:#706e64}.intro-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:65px 0 55px}.intro h2,.section-title h2,.about h2,.contact h2{font-size:clamp(58px,7vw,110px);margin:0}.intro-heading p,.section-title>p{font-size:18px;line-height:1.55;max-width:330px;margin:0 0 5px}.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}.door{min-height:540px;padding:29px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:transform .3s}.door:hover{transform:translateY(-5px)}.door-product{background:#d3df6d;color:#20251a}.door-film{background:#bd543a;color:#f6eee0}.door-top{display:flex;justify-content:space-between}.door-top span:last-child{font:24px var(--sans)}.door-symbol{position:absolute;right:10%;top:20%;width:195px;height:195px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;opacity:.8}.symbol-product span{font-size:165px;line-height:1;animation:rotate 25s linear infinite}.symbol-film span{font-size:72px}.symbol-film:before,.symbol-film:after{content:'';position:absolute;border:1px solid currentColor;border-radius:50%;inset:-16px}.symbol-film:after{inset:-32px}.door h3{font:400 clamp(54px,6vw,90px)/.9 var(--serif);letter-spacing:-.05em;margin:12px 0}.door p:not(.door-overline){font-size:15px}.door-link{border-top:1px solid currentColor;padding-top:16px}.under-doors{display:flex;justify-content:space-between;margin-top:18px;color:#6b6b61}.work{background:#24251f;color:#eeeae0;padding:110px 0 120px}.light-kicker{color:#aaa99d}.section-title{display:flex;justify-content:space-between;align-items:end;gap:40px;margin:72px 0 60px}.mini{margin:0 0 25px}.mini span{color:var(--terracotta);font-size:16px}.work .section-title h2 em{color:#d6e078}.project-feature{display:grid;grid-template-columns:1.15fr .85fr;background:#32342b}.project-media{min-height:480px}.jobifer-media{background:#d3dd6c;color:#24251f;padding:24px}.browser-chrome{display:flex;justify-content:space-between;border-bottom:1px solid #24251f77;padding-bottom:16px}.jobifer-art{height:calc(100% - 30px);position:relative;display:grid;place-items:center}.art-label,.art-caption{position:absolute;line-height:1.5}.art-label{left:4%;top:8%}.art-caption{bottom:4%;right:4%;text-align:right}.jobifer-mark{font:400 240px/.9 var(--serif);letter-spacing:-.12em}.jobifer-mark span{font-size:90px;color:#c95738;vertical-align:top}.project-copy{padding:42px;display:flex;flex-direction:column}.project-meta,.card-meta{display:flex;justify-content:space-between;color:#c3c8a6}.project-copy h3,.project-card h3{font:400 64px var(--serif);letter-spacing:-.04em;margin:65px 0 15px}.project-copy h3 span,.project-card h3 a{float:right;font:30px var(--sans)}.project-copy>p,.project-card>p{line-height:1.65;font-size:16px;color:#d0d1c5;max-width:490px}.credit{font-size:13px!important;color:#aeb0a4!important}.credit strong{display:block;margin-bottom:8px;color:#d6e078}.project-copy .credit{margin-top:auto}.links{display:flex;gap:25px;flex-wrap:wrap;border-top:1px solid #77796b;padding-top:18px;margin-top:25px}.links button,.experience-list button{background:none;border:0;color:inherit;padding:0;cursor:pointer;font:inherit}.links a:hover,.links button:hover,.experience-list a:hover,.experience-list button:hover{text-decoration:underline}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.project-card{padding-bottom:25px}.card-image,.mygoal-art{height:370px;position:relative;overflow:hidden;background:#696b58}.card-image img{width:100%;height:100%;object-fit:cover}.play-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:1px solid white;border-radius:50%;background:#222a;color:white;cursor:pointer}.card-meta{margin-top:22px}.project-card h3{font-size:52px;margin:17px 0 8px}.mygoal-art{background:#d9c0a4;display:grid;place-items:center;color:#353d2f}.mygoal-paper{background:#f3eee3;width:62%;height:80%;transform:rotate(-5deg);box-shadow:0 15px 30px #48413030;padding:28px;display:flex;flex-direction:column}.mygoal-paper>span{font:9px var(--mono)}.mygoal-paper b{font:400 clamp(30px,3.5vw,52px)/1 var(--serif);margin:auto 0}.mygoal-paper b span{color:var(--terracotta)}.fake-task{border-top:1px solid #b9b9a9;padding:12px 0;font-size:12px}.fake-task.muted{color:#aaa}.experience-title{border-top:1px solid #78796e;margin-top:100px;padding-top:35px;display:flex;align-items:end;justify-content:space-between;gap:30px}.experience-title h3{font:400 clamp(40px,5vw,70px)/1 var(--serif);letter-spacing:-.04em;margin:0}.experience-title h3 em{color:#d6e078}.experience-title>p{max-width:325px;line-height:1.6;color:#c5c5b8}.experience-list{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:45px}.experience-list article{border-top:1px solid #77796b;padding-top:18px;display:flex;flex-direction:column}.experience-list article>span{color:#d6e078}.experience-list h4{font:400 30px var(--serif);margin:24px 0 8px}.experience-list p{font-size:14px;line-height:1.6;color:#c5c5b8}.experience-list small{color:#a3a69a;line-height:1.6;margin-top:auto}.experience-list article div{display:flex;gap:20px;margin-top:20px}.films-title{margin-bottom:65px}.film-feature{display:grid;grid-template-columns:.7fr 1.3fr;gap:45px}.film-intro{background:#d6ddaa;padding:35px;display:flex;align-items:start;flex-direction:column}.film-intro h3{font:400 clamp(50px,5.2vw,78px)/.95 var(--serif);letter-spacing:-.05em;margin:auto 0 20px}.film-intro p:not(.mini){line-height:1.65;max-width:390px}.text-link{font:700 10px var(--mono);border-bottom:1px solid;padding-bottom:8px;margin-top:30px}.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reel{min-height:440px;padding:18px;display:flex;flex-direction:column;position:relative;overflow:hidden;color:#fff1df}.reel-one{background:#895044}.reel-two{background:#48574d}.reel-three{background:#aa7951}.reel-art{font:140px var(--serif);position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);opacity:.3;transition:transform .4s}.reel:hover .reel-art{transform:translate(-50%,-50%) rotate(30deg) scale(1.15)}.reel-play{margin:auto;z-index:1;border:1px solid #fff9;border-radius:50%;width:52px;height:52px;display:grid;place-items:center}.reel-bottom{display:flex;flex-direction:column;gap:16px;z-index:1}.reel-bottom b{font:400 27px/.95 var(--serif)}.reel-bottom small{font-size:8px}.watch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}.watch-tile{border:0;background:none;padding:0;text-align:left;cursor:pointer;display:flex;gap:15px;align-items:center}.watch-image{width:42%;aspect-ratio:1.35;position:relative;overflow:hidden;background:#c4beaf;flex:none}.watch-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.watch-tile:hover img{transform:scale(1.06)}.watch-image>span{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:22px;text-shadow:0 1px 8px #000}.watch-copy{display:flex;flex-direction:column;gap:12px}.watch-copy small{color:#77786b;font-size:9px}.watch-copy b{font:400 24px/.95 var(--serif)}.watch-copy em{font-style:normal;font-size:9px;color:#a44d34}.about{background:#dbd6c9;padding:110px 0}.about-grid{display:grid;grid-template-columns:.85fr 1fr;gap:9%;align-items:center}.about-photo{background:#c65e41;padding:30px 30px 0;position:relative}.photo-inner{height:580px;overflow:hidden;display:flex;align-items:end;justify-content:center}.photo-inner img{max-height:100%;width:100%;object-fit:contain;object-position:bottom}.about-photo>span{display:flex;justify-content:space-between;font:700 10px var(--mono);padding:16px 0;color:#fff0df}.about-copy h2{margin:60px 0 30px}.about-copy>p{font-size:16px;line-height:1.7;max-width:590px}.about-copy .about-lead{font-size:22px;line-height:1.5}.about-notes{margin-top:45px;border-top:1px solid #aaa598;padding-top:16px;display:flex;justify-content:space-between;gap:15px}.contact{padding-top:110px}.contact-content{padding:100px 0}.contact h2{font-size:clamp(70px,9vw,140px)}.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:35px}.contact-bottom p{font-size:18px;line-height:1.6;max-width:380px}.contact-button{background:var(--ink);color:var(--paper);padding:24px 28px;min-width:230px;display:flex;justify-content:space-between}.contact-button:hover{background:var(--terracotta)}footer{border-top:1px solid var(--line);padding:25px 0 35px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#6e6f64}footer .wordmark{font-family:var(--sans);color:var(--ink)}footer div{display:flex;gap:20px}dialog{border:0;padding:0;background:#22231e;color:white;width:min(1000px,94vw);max-width:none}dialog::backdrop{background:#111d}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font:10px var(--mono)}.dialog-header button{border:0;background:none;color:white;cursor:pointer;font:inherit}.video-frame{aspect-ratio:16/9;background:#000}.video-frame iframe{border:0;width:100%;height:100%}@keyframes rotate{to{transform:rotate(360deg)}}@media(max-width:900px){.top-note{display:none}.hero{grid-template-columns:1fr .65fr}.hero h1{font-size:clamp(68px,9vw,110px)}.hero-stamp{width:210px;height:210px}.hero-stamp b{font-size:75px}.experience-list{grid-template-columns:1fr 1fr;row-gap:35px}.film-feature{grid-template-columns:1fr}.film-intro{min-height:300px}.film-intro h3{margin:35px 0 15px}.reel{min-height:390px}.watch-row{grid-template-columns:1fr 1fr}.about-grid{gap:5%}.photo-inner{height:500px}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.topbar{height:66px;padding:0 18px}.topbar nav{gap:15px}.topbar nav>a:not(.nav-contact){display:none}.hero{height:auto;min-height:0;display:flex;flex-direction:column}.hero-main{min-height:500px;padding:80px 18px 45px}.hero h1{font-size:clamp(65px,14vw,90px);margin:32px 0}.hero-bottom p{font-size:17px}.hero-aside{min-height:285px;border-left:0;border-top:1px solid var(--line)}.hero-stamp{height:180px;width:180px}.hero-stamp span{font-size:11px}.hero-stamp b{font-size:65px}.hero-stamp small{font-size:7px}.hero-footer{min-height:50px;padding:0 18px;font-size:8px}.aside-label,.aside-index{font-size:8px}.intro,.films{padding:80px 0}.section-kicker{font-size:9px}.intro-heading,.section-title{display:block;margin:55px 0 35px}.intro-heading p,.section-title>p{margin-top:25px;font-size:16px}.intro h2,.section-title h2,.about h2{font-size:clamp(58px,12vw,76px)}.doors{grid-template-columns:1fr}.door{min-height:430px;padding:23px}.door-symbol{width:145px;height:145px;right:12%;top:20%}.symbol-product span{font-size:120px}.door h3{font-size:72px}.under-doors{font-size:8px}.work{padding:80px 0}.project-feature{grid-template-columns:1fr}.project-media{min-height:340px}.jobifer-mark{font-size:170px}.jobifer-mark span{font-size:65px}.project-copy{padding:25px}.project-copy h3{margin:40px 0 10px}.project-copy .credit{margin-top:25px}.project-grid{grid-template-columns:1fr;gap:35px}.card-image,.mygoal-art{height:290px}.project-card h3{font-size:46px}.experience-title{display:block;margin-top:70px}.experience-title>p{margin-top:20px}.experience-list{grid-template-columns:1fr 1fr;gap:26px 16px}.experience-list h4{font-size:25px}.experience-list p{font-size:13px}.experience-list small{font-size:8px}.film-feature{gap:16px}.film-intro{min-height:340px}.reel-grid{gap:7px}.reel{min-height:285px;padding:10px}.reel-number{font-size:8px}.reel-art{font-size:80px}.reel-bottom b{font-size:19px}.reel-bottom small{font-size:7px}.reel-play{width:42px;height:42px}.watch-row{grid-template-columns:1fr;gap:20px;margin-top:35px}.watch-image{width:38%}.about{padding:80px 0}.about-grid{grid-template-columns:1fr;gap:55px}.about-photo{max-width:440px}.photo-inner{height:430px}.about-copy h2{margin:45px 0 25px}.about-copy .about-lead{font-size:20px}.about-notes{font-size:8px}.contact{padding-top:80px}.contact-content{padding:75px 0}.contact h2{font-size:clamp(62px,13vw,95px)}.contact-bottom{display:block}.contact-button{max-width:280px;margin-top:30px}footer{flex-wrap:wrap;font-size:9px}footer .wordmark{width:100%}footer div{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* An introduction to the person and the work. */
.hero-intro{height:auto;min-height:min(780px,calc(100svh - 78px));max-height:none;grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 56px;background:#e9e5da}
.hero-intro .hero-main{padding:clamp(70px,7vw,120px) 6vw clamp(65px,7vw,110px) 5vw;align-items:flex-start;justify-content:center}
.hero-intro h1{font-size:clamp(64px,6.5vw,108px);line-height:.96;margin:30px 0;max-width:850px}
.hero-lead{font-size:clamp(19px,1.65vw,24px);line-height:1.5;max-width:600px;margin:0}
.hero-detail{font-size:16px;line-height:1.7;color:#62635a;max-width:560px;margin:18px 0 0}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:34px;font:700 10px var(--mono);letter-spacing:.05em}
.hero-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:18px 20px;transition:background .2s,color .2s}
.hero-primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.hero-primary:hover{background:var(--terracotta);border-color:var(--terracotta)}
.hero-secondary{border:1px solid #8b8b7f}.hero-secondary:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero-portrait{background:#c65e41;margin:clamp(28px,4vw,65px) 5vw clamp(28px,4vw,65px) 0;padding:22px 22px 0;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.hero-portrait-frame{display:flex;justify-content:center;align-items:end;min-height:0;flex:1;overflow:hidden}
.hero-portrait-frame img{width:100%;height:100%;max-height:570px;object-fit:contain;object-position:center bottom}
.hero-portrait-caption{display:flex;justify-content:space-between;align-items:center;color:#fff0df;padding:15px 0;font:700 10px var(--mono);letter-spacing:.05em}
.hero-portrait-caption span:last-child{font-size:17px}
@media(max-width:900px){.hero-intro{grid-template-columns:1fr .8fr}.hero-intro h1{font-size:clamp(54px,7vw,76px)}.hero-intro .hero-main{padding-right:4vw}.hero-portrait{margin-right:4vw}.hero-actions a{gap:16px}}
@media(max-width:600px){.hero-intro{display:flex;min-height:0}.hero-intro .hero-main{min-height:0;padding:72px 18px 42px}.hero-intro h1{font-size:clamp(51px,11vw,70px);margin:25px 0}.hero-lead{font-size:19px}.hero-detail{font-size:15px}.hero-actions{margin-top:25px;gap:10px}.hero-actions a{padding:16px 14px;font-size:9px}.hero-portrait{margin:0 18px 25px;padding:16px 16px 0}.hero-portrait-frame{height:380px;flex:none}.hero-portrait-caption{font-size:9px}.hero-intro .hero-footer{width:100%}}

/* The avatar lives in its own little terracotta world. */
.avatar-portrait{padding:0;overflow:hidden;background:#ba5138;position:relative}
.avatar-scene{position:relative;flex:1;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#ba5138}
.avatar-art{width:min(100%,570px);aspect-ratio:1/1.01;background-image:url('assets/hallar-avatar-directions.png');background-size:300% 300%;background-position:50% 50%;background-repeat:no-repeat;will-change:transform;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.avatar-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .2s}
.avatar-canvas.ready{opacity:1}
.avatar-hint{position:absolute;top:25px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;color:#f9e9d4;font:700 9px var(--mono);letter-spacing:.06em;pointer-events:none;opacity:.8}
.avatar-hint b{font-size:20px}
.avatar-portrait .hero-portrait-caption{position:relative;padding:18px 25px;background:#ba5138}
@media(max-width:600px){.avatar-scene{min-height:0;aspect-ratio:1/1}.avatar-art{width:100%}.avatar-hint{top:16px;left:17px;right:17px;font-size:8px}.avatar-portrait .hero-portrait-caption{padding:15px 17px}}
@media(prefers-reduced-motion:reduce){.avatar-art,.avatar-canvas{transition:none}}
/* Fill the portrait panel edge to edge while preserving the avatar's proportions. */
.avatar-art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-width:none}
.avatar-canvas{object-fit:cover}

/* A compact window for the avatar, with the artwork meeting its bottom edge. */
.avatar-portrait{align-self:center;margin-top:0;margin-bottom:0}
.avatar-scene{flex:none;width:100%;min-height:0;aspect-ratio:1.16/1}
.avatar-art{inset:0}
.avatar-canvas{object-position:center 45%}
@media(max-width:600px){.avatar-portrait{align-self:stretch;margin:0 18px 25px}.avatar-scene{aspect-ratio:1.16/1}}

/* The character is transparent; the window is an independent layer behind it. */
.avatar-portrait{background:transparent;overflow:visible}
.avatar-scene{background:transparent;overflow:visible;aspect-ratio:1/1}
.avatar-scene::before{content:"";position:absolute;left:0;right:0;top:29%;bottom:0;background:#ba5138}
.avatar-art{background-image:url('assets/hallar-avatar-transparent.png');background-size:300% 300%;background-position:50% 50%;z-index:1}
.avatar-art:has(.avatar-canvas.ready){background-image:none}
.avatar-canvas{object-fit:contain;object-position:center bottom}
@media(max-width:600px){.avatar-scene{aspect-ratio:1/1}}

/* Keep the avatar inside the window at the bottom while allowing it to rise above it. */
.avatar-scene{clip-path:inset(-40px 0 0 0)}
.avatar-scene::before{top:23%}

/* Overscan keeps the shirt below the window edge during pointer movement. */
.avatar-canvas{transform:translateY(12px) scale(1.06);transform-origin:center bottom}

/* A layered little stage for the interactive portrait. */
.avatar-portrait{isolation:isolate}
.avatar-backdrop{position:absolute;pointer-events:none;border-radius:32px;border:1px solid rgba(255,250,238,.75)}
.avatar-backdrop-one{z-index:0;inset:18% 2% 2% 1%;background:linear-gradient(145deg,rgba(242,202,174,.55),rgba(251,240,225,.32));transform:rotate(-7deg);box-shadow:0 32px 65px rgba(128,69,39,.12)}
.avatar-backdrop-two{z-index:0;inset:13% 6% 4% 4%;background:rgba(217,133,94,.18);transform:rotate(6deg)}
.avatar-scene{z-index:1}
.avatar-scene::before{top:23%;background:linear-gradient(155deg,#d06b49 0%,#bb4e34 58%,#a9432c 100%);border:1px solid rgba(255,238,217,.8);border-radius:30px 30px 0 0;box-shadow:0 24px 45px rgba(129,61,37,.16)}
.avatar-orbit{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 5px rgba(255,202,158,.7))}
.avatar-orbit ellipse{stroke:#f7d8b6;stroke-width:1.5;stroke-dasharray:4 5;opacity:.85}.avatar-orbit circle{fill:#c95738;stroke:#f8e5cd;stroke-width:2}
.avatar-token{position:absolute;z-index:3;display:grid;place-items:center;width:clamp(48px,5vw,70px);aspect-ratio:1;background:rgba(250,238,224,.83);border:1px solid rgba(255,255,255,.88);border-radius:17px;box-shadow:0 14px 28px rgba(113,64,43,.16);color:#c95738;pointer-events:none;backdrop-filter:blur(8px)}
.avatar-token svg{width:48%;height:48%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.avatar-token-code{left:-4%;top:40%;transform:rotate(-9deg)}.avatar-token-play{right:-4%;top:64%;transform:rotate(9deg)}
.avatar-spark{position:absolute;z-index:3;color:#f8e7cf;pointer-events:none;text-shadow:0 2px 10px rgba(151,62,37,.25)}
.avatar-spark-one{font-size:clamp(22px,2.5vw,36px);right:8%;top:28%;transform:rotate(15deg)}.avatar-spark-two{color:#c95738;font-size:25px;left:3%;top:20%}
@media(max-width:600px){.avatar-portrait{margin:0 27px 35px}.avatar-backdrop{border-radius:23px}.avatar-scene::before{border-radius:24px 24px 0 0}.avatar-token{width:48px;border-radius:13px}.avatar-token-code{left:-3%}.avatar-token-play{right:-3%}.avatar-spark-one{font-size:25px}.avatar-spark-two{font-size:20px}}
.avatar-scene::before{z-index:0}
.avatar-scene .avatar-orbit{z-index:1}
.avatar-scene .avatar-art{z-index:2}

/* A more direct opening and a gently responsive portrait stage. */
.hero-intro{min-height:100svh}
.hero-contact{color:var(--ink);border:1px solid transparent}
.hero-contact:hover{color:var(--terracotta)}
.avatar-portrait{--pointer-x:0;--pointer-y:0}
.avatar-backdrop-one{transform:translate(calc(var(--pointer-x) * -5px),calc(var(--pointer-y) * -5px)) rotate(-7deg)}
.avatar-backdrop-two{transform:translate(calc(var(--pointer-x) * 7px),calc(var(--pointer-y) * 7px)) rotate(6deg)}
.avatar-token-code{transform:translate(calc(var(--pointer-x) * 12px),calc(var(--pointer-y) * 10px)) rotate(-9deg);animation:avatar-float 5.2s ease-in-out infinite}
.avatar-token-play{transform:translate(calc(var(--pointer-x) * -12px),calc(var(--pointer-y) * -10px)) rotate(9deg);animation:avatar-float 5.8s ease-in-out -2s infinite}
.avatar-spark-one{transform:translate(calc(var(--pointer-x) * -8px),calc(var(--pointer-y) * -8px)) rotate(15deg);animation:avatar-float 5s ease-in-out -1s infinite}
.avatar-spark-two{transform:translate(calc(var(--pointer-x) * 9px),calc(var(--pointer-y) * 9px));animation:avatar-float 6s ease-in-out -3s infinite}
.avatar-backdrop,.avatar-token,.avatar-spark{transition:transform .28s ease,box-shadow .3s ease}
@media(hover:hover) and (pointer:fine){.avatar-portrait:hover .avatar-token{box-shadow:0 18px 34px rgba(113,64,43,.24)}.avatar-portrait:hover .avatar-orbit ellipse{stroke:#fff0d9;opacity:1}.avatar-orbit ellipse{transition:stroke .3s,opacity .3s}}
@keyframes avatar-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:600px){.hero-intro{min-height:0}.hero-contact{padding-left:3px!important}}
@media(prefers-reduced-motion:reduce){.avatar-backdrop,.avatar-token,.avatar-spark{animation:none!important;transition:none!important}}

/* A playful control with an accessible, reliable resting place. */
.follow-toggle{--dodge-x:0px;position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(calc(-50% + var(--dodge-x)));display:flex;align-items:center;gap:8px;min-height:44px;max-width:calc(100% - 16px);padding:7px 10px;border:1px solid rgba(255,255,255,.9);border-radius:999px;background:rgba(251,239,224,.96);color:#49382f;box-shadow:0 9px 24px #6f352e38;font:700 11px var(--sans);white-space:nowrap;cursor:pointer;opacity:0;visibility:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility .22s ease,box-shadow .2s ease}
.avatar-portrait:hover .follow-toggle,.follow-toggle:focus-visible{opacity:1;visibility:visible}
.follow-toggle:hover{box-shadow:0 12px 28px #6f352e55}
.follow-toggle-face{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#f5d2bd;color:#be5639;font:700 10px var(--sans)}
.follow-toggle-switch{width:31px;height:19px;display:flex;align-items:center;padding:2px;border-radius:99px;background:#c65b3c;transition:background .2s}
.follow-toggle-switch i{width:15px;height:15px;border-radius:50%;background:#fff8ef;transform:translateX(12px);transition:transform .2s}
.follow-toggle[aria-pressed="true"] .follow-toggle-switch{background:#aa9e91}
.follow-toggle[aria-pressed="true"] .follow-toggle-switch i{transform:translateX(0)}
@media(hover:none),(pointer:coarse){.follow-toggle{opacity:1;visibility:visible}}
@media(prefers-reduced-motion:reduce){.follow-toggle,.follow-toggle-switch,.follow-toggle-switch i{transition:none!important}}
/* Keep the control reachable by keyboard before the portrait is hovered. */
.follow-toggle{visibility:visible;pointer-events:none}
.avatar-portrait:hover .follow-toggle,.follow-toggle:focus-visible{pointer-events:auto}
@media(hover:none),(pointer:coarse){.follow-toggle{pointer-events:auto}}

/* Bring the work closer to the introduction. */
.intro{padding-top:48px}
.intro-heading{margin-top:38px;margin-bottom:42px}
@media(max-width:600px){.intro{padding-top:36px}.intro-heading{margin-top:32px;margin-bottom:30px}}

/* Two paths: layered illustrations with the cards as the only links. */
.doors{gap:22px;align-items:stretch}
.door{isolation:isolate;border-radius:22px;border:1px solid rgba(255,255,255,.5);box-shadow:0 20px 38px rgba(78,62,36,.14);transition:transform .35s ease,box-shadow .35s ease}
.door-product{background:radial-gradient(circle at 78% 25%,#eff6a8 0%,transparent 35%),linear-gradient(140deg,#e3ee89,#c9d84f)}
.door-film{background:radial-gradient(circle at 75% 22%,#de805d 0%,transparent 37%),linear-gradient(145deg,#cf5c3a,#a93f2b)}
.door::before{content:"";position:absolute;z-index:-1;bottom:-160px;left:-75px;width:70%;height:300px;border-radius:50%;background:rgba(96,113,23,.12);pointer-events:none}
.door-film::before{left:auto;right:-75px;background:rgba(255,213,174,.12)}
.door>div:not(.door-visual),.door-link{position:relative;z-index:2}
.door h3{position:relative;z-index:2}
.door p:not(.door-overline){max-width:52%;line-height:1.5}
.door-visual{position:absolute;right:6%;top:17%;width:42%;aspect-ratio:1;z-index:1;pointer-events:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.door-rings{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;opacity:.27}
.door-rings::before,.door-rings::after{content:"";position:absolute;border:1px solid currentColor;border-radius:50%;inset:13%}
.door-rings::after{inset:26%}
.visual-tile,.visual-stack{position:absolute;width:67%;height:55%;top:24%;left:17%;border-radius:15px;transform:rotate(-8deg);border:1px solid rgba(255,255,255,.68)}
.visual-stack.stack-back{background:rgba(65,77,24,.22);transform:translate(15%,19%) rotate(-8deg)}
.visual-stack.stack-middle{background:rgba(85,98,29,.22);transform:translate(8%,10%) rotate(-8deg)}
.visual-tile{background:rgba(252,250,223,.75);box-shadow:0 17px 30px rgba(68,70,25,.16);display:grid;place-items:center;overflow:hidden}
.visual-tile svg{width:43%;height:43%;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.tile-dots{position:absolute;top:0;left:0;right:0;height:22%;display:flex;align-items:center;gap:5px;padding-left:10%;border-bottom:1px solid rgba(62,70,38,.12)}
.tile-dots i{width:6px;height:6px;background:#c6583d;border-radius:50%}.tile-dots i:nth-child(2){background:#d4a445}.tile-dots i:nth-child(3){background:#8ba040}
.visual-product .visual-tile svg{margin-top:12%}
.visual-film .visual-tile{background:rgba(255,237,217,.3);box-shadow:0 17px 30px rgba(94,35,23,.18)}
.visual-film .visual-stack{background:rgba(255,224,203,.12)}
.visual-film .play-glyph{fill:#ffefde;stroke:none}
.visual-spark{position:absolute;right:1%;top:-4%;font-size:clamp(23px,3vw,40px);line-height:1}
.door-link{display:flex;justify-content:space-between;align-items:center}
@media(hover:hover){.door:hover{transform:translateY(-7px);box-shadow:0 28px 45px rgba(78,62,36,.2)}.door:hover .door-visual{transform:translateY(-7px) rotate(4deg)}}
@media(max-width:900px){.door-visual{width:43%;right:4%;top:20%}.door p:not(.door-overline){max-width:55%}}
@media(max-width:600px){.doors{gap:16px}.door{border-radius:18px}.door-visual{width:43%;right:6%;top:19%}.door p:not(.door-overline){max-width:65%}.visual-tile,.visual-stack{border-radius:11px}.visual-spark{font-size:25px}}
@media(prefers-reduced-motion:reduce){.door,.door-visual{transition:none!important}}
/* Give the titles room to breathe beside the illustrations. */
.door-visual{width:36%;right:4%}
@media(max-width:900px){.door-visual{width:36%;right:3%}}
@media(max-width:600px){.door-visual{width:37%;right:4%}}
/* Compact the two paths and use the supplied Jobifer thumbnail. */
.intro{padding-bottom:70px}
.doors .door{min-height:410px}
.intro-heading{margin-bottom:32px}
.jobifer-media{padding:0;overflow:hidden;background:#eaf4fa}
.jobifer-media img{width:100%;height:100%;min-height:480px;object-fit:cover;object-position:center}
@media(max-width:600px){.intro{padding-bottom:55px}.doors .door{min-height:350px}.jobifer-media img{min-height:0;aspect-ratio:16/9;object-fit:contain}.jobifer-media{min-height:0}}
@media(hover:none),(pointer:coarse){.follow-toggle{display:none}}
.jobifer-media img{object-fit:contain}

/* Curiosity gallery: a swipeable, manually controlled video grid. */
.curiosity-gallery{min-width:0;overflow:hidden}
.curiosity-gallery-head,.curiosity-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;font:700 10px var(--mono);letter-spacing:.05em;color:#67685d}
.curiosity-gallery-head{margin-bottom:16px}
.curiosity-controls{display:flex;gap:8px}
.curiosity-controls button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #9d9a8c;border-radius:50%;background:transparent;font-size:18px;cursor:pointer}
.curiosity-controls button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.curiosity-controls button:disabled{opacity:.3;cursor:default}
.curiosity-rail{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:calc((100% - 14px)/2);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#afac9d transparent;padding-bottom:10px}
.curiosity-card{min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;border:0;padding:0;background:#eeeae0;color:var(--ink);text-align:left;cursor:pointer}
.curiosity-thumb{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#32342b}
.curiosity-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.curiosity-card:hover img{transform:scale(1.05)}
.curiosity-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:17px;text-shadow:0 1px 10px #000}
.curiosity-info{display:flex;flex-direction:column;gap:6px;padding:12px 13px 15px;min-height:80px}
.curiosity-info small{font:700 9px var(--mono);letter-spacing:.04em;color:#a84d34}
.curiosity-info strong{font:400 clamp(17px,1.6vw,23px)/1.08 var(--serif)}
.curiosity-caption{font-size:9px;margin-top:12px;line-height:1.5}
@media(max-width:600px){.curiosity-gallery{width:100%}.curiosity-rail{grid-auto-columns:calc((100% - 10px)/2);gap:10px}.curiosity-info{min-height:76px;padding:10px}.curiosity-info strong{font-size:17px}.curiosity-caption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.curiosity-thumb img{transition:none}}
.jobifer-logo-heading a{display:flex;align-items:center;justify-content:space-between;gap:20px}
.jobifer-logo-heading img{width:min(240px,75%);height:auto}
.jobifer-logo-heading span{float:none!important}
.autopbr-logo-heading a{display:flex;align-items:center;justify-content:space-between;gap:16px;float:none!important}
.autopbr-logo-lockup{display:flex;align-items:center;gap:10px;min-width:0}
.autopbr-logo-lockup .autopbr-icon{width:58px;height:58px;object-fit:contain;flex:none}
.autopbr-logo-lockup .autopbr-wordmark{width:min(235px,100%);height:auto;min-width:0}
.experience-preview{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;margin:18px 0 0;padding:0;border:0;background:#393a32;cursor:pointer}
.experience-preview img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.experience-preview span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:23px;text-shadow:0 1px 10px #000}
.experience-preview:hover img{transform:scale(1.06)}
.experience-preview + h4{margin-top:16px}
@media(prefers-reduced-motion:reduce){.experience-preview img{transition:none}}
.finalovers-media{background:#151b16;display:flex;min-width:0}
.featured-video{position:relative;width:100%;min-height:480px;padding:0;border:0;background:#151b16;cursor:pointer;overflow:hidden}
.featured-video img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .3s}
.featured-video span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:65px;height:65px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;color:#fff;background:#1b201dbb;font-size:19px}
.featured-video:hover img{transform:scale(1.04)}
.jobifer-card-image{background:#eaf4fa}.jobifer-card-image img{object-fit:contain}
.project-card .jobifer-logo-heading{margin:17px 0 8px;min-height:58px;display:flex;align-items:center}.project-card .jobifer-logo-heading a{width:100%}.project-card .jobifer-logo-heading img{width:min(200px,70%)}
@media(max-width:600px){.featured-video{min-height:0;aspect-ratio:16/9}.finalovers-media{min-height:0}}
@media(prefers-reduced-motion:reduce){.featured-video img{transition:none}}
/* A tighter transition from the two paths to the work itself. */
.intro{padding-bottom:38px}
.work{padding-top:55px}
.work > .wrap > .section-title{margin-top:0}
@media(max-width:600px){.intro{padding-bottom:30px}.work{padding-top:42px}}

/* Tactile hero actions echo the portrait's warm, layered shapes. */
.hero-actions{gap:16px;padding-bottom:7px}
.hero-actions a{min-height:54px;padding:17px 21px;border-radius:12px;transform:translateY(0);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.hero-actions a span{font-size:15px;line-height:1;transition:transform .2s ease}
.hero-actions .hero-primary{background:linear-gradient(145deg,#d46c4c,#bb4f35);border:1px solid #a94930;color:#fff8ee;box-shadow:inset 0 1px 0 #ffffff66,0 5px 0 #943f2b,0 10px 18px #8d4d2c30}
.hero-actions .hero-secondary{background:linear-gradient(145deg,#fff9ee,#e8d8c7);border:1px solid #d1b8a4;color:#333029;box-shadow:inset 0 1px 0 #fff,0 5px 0 #c4a990,0 10px 18px #8d6c4b24}
@media(hover:hover){.hero-actions a:hover{transform:translateY(-3px)}.hero-actions a:hover span{transform:translate(3px,-3px)}.hero-actions .hero-primary:hover{box-shadow:inset 0 1px 0 #ffffff66,0 8px 0 #943f2b,0 14px 22px #8d4d2c38}.hero-actions .hero-secondary:hover{box-shadow:inset 0 1px 0 #fff,0 8px 0 #c4a990,0 14px 22px #8d6c4b30}}
.hero-actions a:active{transform:translateY(4px)}
.hero-actions .hero-primary:active{box-shadow:inset 0 1px 2px #80382155,0 1px 0 #943f2b}
.hero-actions .hero-secondary:active{box-shadow:inset 0 1px 2px #a7846540,0 1px 0 #c4a990}
@media(max-width:600px){.hero-actions{gap:12px}.hero-actions a{min-height:50px;padding:15px 16px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-actions a,.hero-actions a span{transition:none}}

/* Soft frosted hero buttons. */
.hero-actions a{border-radius:999px}
.hero-actions .hero-primary,.hero-actions .hero-secondary{background:linear-gradient(145deg,rgba(255,252,245,.94),rgba(239,224,207,.86));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(123,91,62,.15);color:var(--ink)}
.hero-actions .hero-primary span,.hero-actions .hero-secondary{color:#b94d30}
@media(hover:hover){.hero-actions .hero-primary:hover,.hero-actions .hero-secondary:hover{background:linear-gradient(145deg,#fffdf8,#f8e8d8);box-shadow:inset 0 1px 0 #fff,0 12px 24px rgba(123,91,62,.2)}}
.hero-actions .hero-primary:active,.hero-actions .hero-secondary:active{transform:translateY(2px);box-shadow:inset 0 2px 5px rgba(123,91,62,.15),0 2px 6px rgba(123,91,62,.1)}
#choose .intro-heading{margin-top:0}

.door-top span:last-child{margin-left:auto}

/* The Final Overs — a featured case study. */
.tfo-feature{position:relative;overflow:hidden;border:1px solid #a4b64c80;border-radius:26px;background:#171b16;color:#f3efe4;isolation:isolate}
.tfo-main{display:grid;grid-template-columns:1fr 1.05fr;min-height:510px;position:relative}
.tfo-copy{position:relative;z-index:2;padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.tfo-tag{font:700 10px var(--mono);letter-spacing:.08em;color:#d6e979;border:1px solid #a4b64c66;border-radius:99px;padding:10px 14px}.tfo-tag span{margin:0 5px}
.tfo-copy h3{font:400 clamp(52px,5.3vw,83px)/.98 var(--serif);letter-spacing:-.055em;margin:32px 0 20px}.tfo-copy h3 em{color:#d6e978;font-weight:400}
.tfo-description{max-width:430px;font-size:18px;line-height:1.55;margin:0;color:#f0eee4}.tfo-role{max-width:450px;color:#bfc5b4;line-height:1.6;font-size:14px;margin:25px 0 0}.tfo-role strong{display:block;color:#d6e978;font:700 10px var(--mono);letter-spacing:.09em;margin-bottom:7px}
.tfo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.tfo-actions a{display:inline-flex;align-items:center;gap:20px;padding:15px 19px;border-radius:99px;font:700 10px var(--mono);letter-spacing:.03em;transition:transform .2s,background .2s}.tfo-actions a:hover{transform:translateY(-3px)}.tfo-store{background:#d8e975;color:#20251b}.tfo-store:hover{background:#e8f798}.tfo-site{border:1px solid #bfc7a1;color:#f2f2e8}.tfo-site:hover{background:#ffffff16}
.tfo-visual{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;padding:55px 45px;background:linear-gradient(90deg,#171b16 0%,#171b1670 40%,#171b16a8 100%),url('assets/final-overs-gameplay.jpg') center/cover}.tfo-orbit{position:absolute;width:75%;height:48%;border:1px solid #d3ea7660;border-radius:50%;transform:rotate(-21deg);box-shadow:0 0 35px #d3ea7625;pointer-events:none}.tfo-video{position:relative;z-index:1;display:block;width:100%;padding:0;overflow:hidden;border:1px solid #d9ec7b8c;border-radius:18px;background:#080b0a;box-shadow:0 25px 55px #0008;cursor:pointer}.tfo-video img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}.tfo-video:hover img{transform:scale(1.04)}.tfo-play{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid #fff;border-radius:50%;background:#121813bb;color:#fff;font-size:18px}.tfo-video-label{position:absolute;bottom:14px;left:16px;padding:9px 12px;border-radius:99px;background:#171b16dc;color:#fff;font:700 10px var(--mono)}
.tfo-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:28px clamp(28px,4vw,60px);border-top:1px solid #c1d27355;background:linear-gradient(115deg,#20271d,#181d17 65%,#394719);gap:0}.tfo-stats div{display:flex;flex-direction:column-reverse;padding:4px 28px;border-left:1px solid #a7b77d55}.tfo-stats div:first-child{padding-left:0;border:0}.tfo-stats dt{font:700 10px var(--mono);letter-spacing:.08em;color:#d6e978;margin-top:8px}.tfo-stats dd{font:400 clamp(38px,4vw,62px)/1 var(--serif);letter-spacing:-.04em;margin:0}
@media(max-width:900px){.tfo-main{grid-template-columns:1fr}.tfo-visual{padding:35px;min-height:0}.tfo-copy{padding-bottom:15px}}
@media(max-width:600px){.tfo-feature{border-radius:20px}.tfo-copy{padding:28px 23px 10px}.tfo-copy h3{font-size:clamp(46px,12vw,65px);margin-top:25px}.tfo-description{font-size:16px}.tfo-visual{padding:28px 20px}.tfo-play{width:52px;height:52px}.tfo-stats{grid-template-columns:1fr;padding:10px 23px 20px}.tfo-stats div,.tfo-stats div:first-child{padding:18px 0;border-left:0;border-top:1px solid #a7b77d55}.tfo-stats div:first-child{border:0}.tfo-stats dd{font-size:42px}}
@media(prefers-reduced-motion:reduce){.tfo-actions a,.tfo-video img{transition:none}}

/* A quieter, more compact Final Overs feature. */
.tfo-feature{border-color:#77786b;border-radius:18px;background:#292b24}
.tfo-main{min-height:390px}
.tfo-copy{padding:clamp(25px,3vw,44px)}
.tfo-tag{color:#d0d0bc;border-color:#77786b;padding:8px 12px}
.tfo-copy h3{font-size:clamp(48px,4.5vw,70px);margin:24px 0 15px}
.tfo-copy h3 em{color:#d6df87}
.tfo-description{font-size:16px}.tfo-role{margin-top:18px}.tfo-role strong{color:#d6df87}
.tfo-actions{margin-top:22px}.tfo-actions a{padding:13px 16px}
.tfo-store{background:#e8e5d9;color:#252720}.tfo-store:hover{background:#fffaf0}
.tfo-site{border-color:#77796d}
.tfo-visual{padding:36px;background:linear-gradient(90deg,#292b24 0%,#292b2499 48%,#292b2488 100%),url('assets/final-overs-gameplay.jpg') center/cover}
.tfo-orbit{border-color:#eee9d830;box-shadow:none}.tfo-video{border-color:#d8d6bd66;border-radius:13px}
.tfo-stats{padding:20px clamp(25px,3vw,44px);background:#30322b;border-color:#77786b55}
.tfo-stats div{padding:2px 24px;border-color:#96978955}.tfo-stats dd{font-size:clamp(32px,3vw,46px)}.tfo-stats dt{color:#d5d5c5;font-size:9px;margin-top:6px}
@media(max-width:900px){.tfo-main{min-height:0}.tfo-copy{padding-bottom:12px}.tfo-visual{padding:28px}}
@media(max-width:600px){.tfo-copy{padding:25px 22px 8px}.tfo-copy h3{font-size:clamp(43px,11vw,59px)}.tfo-visual{padding:24px 20px}.tfo-stats{grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 15px;gap:0}.tfo-stats div,.tfo-stats div:first-child{padding:0 10px;border-top:0;border-left:1px solid #96978955}.tfo-stats div:first-child{padding-left:0;border:0}.tfo-stats dd{font-size:clamp(25px,7vw,38px)}.tfo-stats dt{font-size:8px;line-height:1.4;overflow-wrap:anywhere}}

/* Keep project numbers together with the description. */
.tfo-stats{align-self:stretch;margin:23px 0 0;padding:17px 0 0;border:0;border-top:1px solid #a6a89a55;background:none}
.tfo-stats div,.tfo-stats div:first-child{padding:0 12px;border-top:0;border-left:1px solid #96978955}
.tfo-stats div:first-child{padding-left:0;border:0}
.tfo-stats dd{font-size:clamp(28px,2.7vw,40px)}
.tfo-stats dt{font-size:9px;line-height:1.35}
@media(max-width:600px){.tfo-stats{margin-top:20px;padding:16px 0 0}.tfo-stats div,.tfo-stats div:first-child{padding:0 8px}.tfo-stats div:first-child{padding-left:0}.tfo-stats dd{font-size:clamp(26px,7vw,36px)}.tfo-stats dt{font-size:8px}}

/* Three featured projects on wide screens. */
.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.project-grid .card-image{height:auto;aspect-ratio:1.45}
.project-grid .project-card h3{font-size:clamp(34px,3vw,52px)}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.project-grid{grid-template-columns:1fr}}

.kynetik-logo-heading a{display:flex;align-items:center;justify-content:space-between;gap:15px}.kynetik-logo-heading img{width:min(75%,220px);height:65px;object-fit:contain;object-position:left center}.kynetik-logo-heading a span{font:30px var(--sans)}

.project-card .kynetik-logo-heading{margin:17px 0 8px;min-height:58px;display:flex;align-items:center}
.project-card .kynetik-logo-heading a{float:none;width:100%}
.project-card .kynetik-logo-heading img{width:min(200px,70%);height:58px;object-fit:contain;object-position:left center}

.experience-title{margin-top:55px}
@media(max-width:600px){.experience-title{margin-top:40px}}

/* Bring the videos closer to the additional projects. */
.work{padding-bottom:65px}.films{padding-top:65px}
@media(max-width:600px){.work{padding-bottom:45px}.films{padding-top:45px}}

/* Video gallery: portrait reels and landscape stories. */
.video-showcase,.landscape-showcase{display:grid;grid-template-columns:minmax(180px, .8fr) minmax(0,3fr);gap:clamp(24px,4vw,65px);align-items:center}
.video-showcase-intro h3,.landscape-intro h3{font:400 clamp(34px,3.5vw,54px)/.98 var(--serif);letter-spacing:-.04em;margin:0}.video-showcase-intro em,.landscape-intro em{color:var(--terracotta);font-weight:400}.video-showcase-intro p,.landscape-intro p{font-size:15px;line-height:1.6;max-width:225px;margin:20px 0}
.reel-carousel{position:relative;min-width:0}.reel-viewport{overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain}.reel-viewport::-webkit-scrollbar{display:none}.reel-track{display:flex;gap:14px;padding:18px 4px 24px}.short-card{position:relative;display:flex;align-items:flex-end;flex:0 0 clamp(150px,14vw,210px);aspect-ratio:9/16;overflow:hidden;border-radius:18px;padding:20px;color:#fff4e6;isolation:isolate;transition:transform .25s,box-shadow .25s}.short-card:hover,.short-card:focus-visible{transform:translateY(-8px);box-shadow:0 16px 28px #7f543a35}.short-one{background:#a9543c}.short-two{background:#48594a}.short-three{background:#c98a5d}.short-four{background:#725348}.short-five{background:#778267}.short-art{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 65% 30%,#f7d2a99c 0 15%,transparent 15.5%),radial-gradient(ellipse at 10% 85%,#e8b18b75 0 36%,transparent 36.5%);transition:transform .7s}.short-two .short-art,.short-five .short-art{background:repeating-radial-gradient(ellipse at 90% 25%,transparent 0 20px,#f9dfbb55 21px 22px,transparent 23px 32px)}.short-three .short-art{background:radial-gradient(circle at 50% 42%,#f2d3aa99 0 23%,transparent 23.5%),linear-gradient(145deg,transparent 50%,#784a3e88 50%)}.short-card:hover .short-art,.short-card:focus-visible .short-art{animation:short-preview 3s ease-in-out infinite alternate}.short-label{font:400 25px/.98 var(--serif);text-shadow:0 2px 8px #0005}.short-label small{display:block;font:700 9px var(--mono);margin-top:12px;letter-spacing:.04em}@keyframes short-preview{to{transform:scale(1.18) rotate(5deg)}}
.reel-controls{display:flex;justify-content:flex-end;gap:8px}.reel-controls button{width:39px;height:39px;border-radius:50%;border:1px solid #d4c6b9;background:#f8efe4;color:#a84730;cursor:pointer;font-size:19px}.reel-controls button:hover{background:#c95738;color:white}
.landscape-showcase{border-top:1px solid #bcb9ad;margin-top:54px;padding-top:55px;align-items:start}.landscape-intro a{font:700 10px var(--mono);color:#ad4b31}.landscape-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);grid-template-columns:repeat(3,minmax(230px,1fr));gap:18px;overflow-x:auto;padding-bottom:15px;scroll-snap-type:x proximity}.landscape-card{min-width:0;text-align:left;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;scroll-snap-align:start}.landscape-image{display:block;position:relative;overflow:hidden;border-radius:13px;aspect-ratio:16/9;background:#dbd6c9}.landscape-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.landscape-card:hover img{transform:scale(1.04)}.landscape-image span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border:1px solid white;border-radius:50%;background:#2229;color:#fff}.landscape-card strong{display:block;font:400 24px/1.1 var(--serif);margin-top:12px}
@media(max-width:900px){.video-showcase,.landscape-showcase{grid-template-columns:1fr;gap:18px}.video-showcase-intro p,.landscape-intro p{max-width:none}.short-card{flex-basis:180px}.landscape-rail{grid-auto-columns:70%;grid-template-columns:none}}
@media(max-width:600px){.short-card{flex-basis:155px}.landscape-showcase{margin-top:35px;padding-top:35px}.landscape-rail{grid-auto-columns:82%}}
@media(prefers-reduced-motion:reduce){.short-card:hover .short-art,.short-card:focus-visible .short-art{animation:none}}

.reel-video-card{border:0;cursor:pointer;text-align:left;font:inherit;background:#343630}.reel-video-card::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#000a);z-index:-1;pointer-events:none}.short-poster,.short-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.short-video{opacity:0}.reel-video-card.is-playing .short-video{opacity:1}.short-ai{position:absolute;top:12px;right:12px;padding:6px 9px;background:#161814b8;color:#fff4e8;border:1px solid #ffffff60;border-radius:99px;font:700 10px var(--sans);letter-spacing:.03em}.reel-play-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff;border-radius:50%;background:#16181477;font-size:13px}.reel-video-card.is-playing .reel-play-indicator{opacity:0}.reel-video-card .short-label{font-size:21px}

/* A quieter introduction with room for the story. */
.about-new{display:grid;grid-template-columns:.9fr 1fr;gap:clamp(45px,9vw,150px);align-items:start}.about-heading h2{margin:0;max-width:570px}.about-story{max-width:650px}.about-story p{font-size:16px;line-height:1.75;margin:0 0 18px}.about-story .about-lead{font-size:clamp(21px,2vw,27px);line-height:1.45;margin-bottom:24px}.about-story .about-notes{margin-top:35px}
@media(max-width:700px){.about-new{grid-template-columns:1fr;gap:28px}.about-story .about-lead{font-size:21px}}

.about-connect{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:38px;padding-top:25px;border-top:1px solid #aaa598;scroll-margin-top:30px}.about-connect h3{font:400 clamp(30px,3vw,42px)/1 var(--serif);letter-spacing:-.04em;margin:0 0 12px}.about-connect h3 em{color:var(--terracotta);font-weight:400}.about-connect p{margin:0;max-width:350px;font-size:15px;line-height:1.55}.about-connect a{display:flex;align-items:center;justify-content:space-between;gap:22px;flex:none;background:var(--ink);color:var(--paper);padding:16px 19px;font:700 10px var(--mono);transition:background .2s}.about-connect a:hover{background:var(--terracotta)}
@media(max-width:600px){.about-connect{align-items:start;flex-direction:column}.about-connect a{min-width:160px}}

.landscape-controls{display:flex;gap:8px;margin-top:24px}.landscape-controls button{width:39px;height:39px;border:1px solid #d4c6b9;border-radius:50%;background:#f8efe4;color:#a84730;cursor:pointer;font-size:19px}.landscape-controls button:hover{background:#c95738;color:white}

.landscape-rail{scrollbar-width:none;scroll-snap-type:none}.landscape-rail::-webkit-scrollbar{display:none}

.reel-unmute-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 12px;border-radius:99px;background:#171814d9;color:#fff;font:600 11px var(--sans);box-shadow:0 4px 14px #0003;pointer-events:none}

/* A tactile, terracotta-toned social shelf. */
.site-footer{display:block;padding:58px 0 28px;color:var(--ink)}
.site-footer .footer-intro{display:block}.footer-kicker{display:flex;align-items:center;gap:9px;color:#8b5342;font:700 10px var(--mono);letter-spacing:.1em}.footer-kicker span{font-size:18px;color:var(--terracotta)}
.footer-intro h2{font:400 clamp(42px,5vw,70px)/1 var(--serif);letter-spacing:-.045em;margin:22px 0 12px}.footer-intro h2 em{color:var(--terracotta);font-weight:400}.footer-intro p{font:400 15px/1.6 var(--sans);color:#67695e;margin:0}
.footer-socials{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,42px);padding:38px 0 48px}.social-button{display:flex;align-items:center;flex-direction:column;gap:14px;font:700 10px var(--mono);letter-spacing:.02em;color:#66665c}.social-tile{width:68px;height:68px;display:grid;place-items:center;border-radius:21px;background:linear-gradient(145deg,#f7e5d2,#e5bda4 55%,#d99e7e);border:1px solid #f9e9d8;box-shadow:inset 2px 2px 3px #fff9,inset -3px -4px 6px #a65c3d45,0 6px 0 #bc8064,0 11px 16px #6e493c30;transform:translateY(0);transition:transform .22s,box-shadow .22s}.social-tile img,.social-tile svg{display:block;width:28px;height:28px;object-fit:contain;filter:brightness(0) saturate(100%) invert(27%) sepia(20%) saturate(1064%) hue-rotate(325deg) brightness(91%)}.social-button:hover .social-tile,.social-button:focus-visible .social-tile{transform:translateY(-5px) scale(1.05);box-shadow:inset 2px 2px 3px #fff9,inset -3px -4px 6px #a65c3d45,0 8px 0 #bc8064,0 17px 23px #6e493c40}.social-button:active .social-tile{transform:translateY(3px);box-shadow:inset 2px 2px 3px #fff9,0 3px 0 #bc8064,0 5px 9px #6e493c30}
.site-footer .footer-base{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:25px;color:#6e6f64}.footer-base .wordmark{color:var(--ink)}.footer-base>a:last-child:hover{color:var(--terracotta)}
@media(max-width:600px){.site-footer{padding-top:42px}.footer-socials{gap:22px 18px;padding:30px 0 38px}.social-tile{width:58px;height:58px;border-radius:18px}.social-tile img,.social-tile svg{width:24px;height:24px}.social-button{font-size:9px}.site-footer .footer-base{flex-wrap:wrap;gap:14px}.site-footer .footer-base .wordmark{width:100%}}
@media(prefers-reduced-motion:reduce){.social-tile{transition:none}.social-button:hover .social-tile,.social-button:focus-visible .social-tile{transform:none}}

/* Social links live alongside the about introduction. */
.about-socials{margin-top:clamp(48px,7vw,100px)}
.about-socials .footer-socials{padding:22px 0 12px;gap:clamp(14px,2vw,30px)}
.site-footer{padding:0 0 28px}
.site-footer .footer-base{border-top:0}
@media(max-width:700px){.about-socials{margin-top:32px}.about-socials .footer-socials{padding-bottom:8px}}

/* Small illustrated companions for selected hover areas. */
@media (hover:hover) and (pointer:fine){
  html.has-themed-cursor,html.has-themed-cursor *{cursor:none!important}
  .themed-cursor{position:fixed;top:0;left:0;z-index:9999;width:68px;height:68px;pointer-events:none;visibility:hidden;will-change:transform}
  .themed-cursor.is-visible{visibility:visible}
  .themed-cursor svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 3px #241c1838)}
  .themed-cursor .cursor-art{transform-origin:42px 39px;animation:cursor-bob 1.8s ease-in-out infinite alternate}
  .themed-cursor .cursor-spark{transform-origin:53px 15px;animation:cursor-twinkle 1.4s ease-in-out infinite alternate}
}
@keyframes cursor-bob{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-3px) rotate(4deg)}}
@keyframes cursor-twinkle{from{transform:scale(.65);opacity:.55}to{transform:scale(1.12);opacity:1}}
@media(prefers-reduced-motion:reduce){.themed-cursor .cursor-art,.themed-cursor .cursor-spark{animation:none}}

/* Local featured videos share the existing modal with YouTube embeds. */
.video-frame video{display:block;width:100%;height:100%;max-height:calc(100svh - 100px);object-fit:contain;background:#000}
.landscape-image .landscape-ai{top:12px;right:12px;left:auto;transform:none;width:auto;height:auto;display:block;padding:6px 9px;border:1px solid #ffffff60;border-radius:99px;background:#161814b8;color:#fff4e8;font:700 10px var(--sans);letter-spacing:.03em}

/* Keep the AI label above thumbnail and hover layers. */
.landscape-image .landscape-ai{z-index:2;pointer-events:none}

/* A small editorial counter alongside the video heading. */
.films-title .films-stat{display:flex;align-items:center;gap:15px;flex:none;border-left:1px solid #bcb9ad;padding:2px 0 2px 22px;margin-bottom:5px}
.films-stat-number{font:400 clamp(42px,4.3vw,64px)/1 var(--serif);letter-spacing:-.05em;white-space:nowrap}
.films-stat-number span{color:var(--terracotta)}
.films-stat-label{font:700 10px/1.6 var(--mono);letter-spacing:.08em;color:#777267}
@media(max-width:900px){.films-title .films-stat{margin-top:28px;width:max-content}}
@media(max-width:600px){.films-title .films-stat{padding-left:16px;gap:12px}.films-stat-number{font-size:42px}.films-stat-label{font-size:9px}}