/* ===== assets/css/styles.css ===== */

:root{--ink:#111214;--night:#090b0e;--paper:#f5f4ef;--white:#fff;--muted:#6a6b6d;--line:#d9d7d0;--red:#ff3434;--red-dark:#c81519;--radius:30px;--shadow:0 28px 90px rgba(7,9,12,.12);--shell:min(1240px,calc(100% - 48px));--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font-body),ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.menu-open,body.lightbox-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit}::selection{color:#fff;background:var(--red)}.shell{width:var(--shell);margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:18px;top:12px;z-index:1000;background:#fff;padding:12px 16px;border-radius:99px;transform:translateY(-150%);transition:.2s}.skip-link:focus{transform:none}.eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}h1,h2,h3,h4,p{margin:0}h1,h2,h3{letter-spacing:-.055em;line-height:1.02}p{line-height:1.72}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:750;border:1px solid transparent;transition:.3s var(--ease)}.button.primary{background:var(--ink);color:#fff;box-shadow:0 15px 32px rgba(0,0,0,.16)}.button.ghost{border-color:var(--line);background:rgba(255,255,255,.64)}.button:hover{transform:translateY(-3px)}.button:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(255,52,52,.4);outline-offset:4px}.reveal{opacity:0;transform:translateY(32px);transition:opacity .85s var(--ease),transform .85s var(--ease)}.reveal.from-left{transform:translate(-70px,20px)}.reveal.from-right{transform:translate(70px,20px)}.reveal.is-visible{opacity:1;transform:none}
.scroll-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:450;background:transparent}.scroll-progress span{display:block;height:100%;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
.site-header{position:fixed;z-index:400;top:16px;left:50%;transform:translateX(-50%);width:min(1260px,calc(100% - 30px));height:66px;padding:0 13px 0 18px;border:1px solid rgba(255,255,255,.17);border-radius:999px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:rgba(10,12,15,.35);backdrop-filter:blur(20px);transition:.35s var(--ease);box-shadow:0 10px 40px rgba(0,0,0,.05)}.site-header.scrolled,.inner-page .site-header{color:var(--ink);background:rgba(249,248,244,.82);border-color:rgba(255,255,255,.86);box-shadow:0 14px 50px rgba(0,0,0,.08)}.brand{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.brand-mark{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.10);position:relative;display:grid;place-items:center;overflow:hidden}.scrolled .brand-mark,.inner-page .brand-mark{background:#101114;color:#fff}.brand-mark i{position:absolute;left:0;right:0;top:16px;height:2px;background:var(--red)}.brand-mark b{font-size:11px;position:relative}.desktop-nav{display:flex;align-items:center;gap:4px}.desktop-nav>a,.sound-toggle{border:0;background:transparent;color:inherit;padding:10px 13px;border-radius:999px;font-size:12px;font-weight:720;cursor:pointer;transition:.2s}.desktop-nav>a:hover,.sound-toggle:hover{background:rgba(255,255,255,.11)}.scrolled .desktop-nav>a:hover,.scrolled .sound-toggle:hover,.inner-page .desktop-nav>a:hover,.inner-page .sound-toggle:hover{background:#eeece6}.desktop-nav .nav-contact{background:#fff;color:#111}.scrolled .desktop-nav .nav-contact,.inner-page .desktop-nav .nav-contact{background:#111;color:#fff}.menu-toggle{display:none;width:44px;height:44px;border:0;border-radius:50%;background:#111;position:relative}.menu-toggle span:not(.sr-only){position:absolute;left:13px;right:13px;height:1px;background:#fff;transition:.25s}.menu-toggle span:first-child{top:18px}.menu-toggle span:nth-child(2){top:25px}.menu-open .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-open .menu-toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}.mobile-nav{position:fixed;inset:0;z-index:350;background:rgba(245,244,239,.97);backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:center;padding:80px 28px;opacity:0;visibility:hidden;transform:translateY(-20px);transition:.35s var(--ease)}.mobile-nav a{font-size:clamp(34px,10vw,56px);letter-spacing:-.06em;font-weight:750;padding:7px 0}.menu-open .mobile-nav{opacity:1;visibility:visible;transform:none}.page-transition{position:fixed;inset:0;z-index:900;background:#090b0e;display:grid;place-items:center;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease);pointer-events:none}.page-transition span{color:#fff;font-size:13px;font-weight:800;letter-spacing:.3em}.transition-redline{position:absolute;left:0;right:0;top:50%;height:4px;background:var(--red);box-shadow:0 0 26px rgba(255,52,52,.7)}body.is-leaving .page-transition{clip-path:inset(0 0 0 0)}
.intro{position:fixed;inset:0;z-index:850;background:#090b0e;display:grid;place-items:center;color:#fff;transition:opacity .55s,visibility .55s}.intro.done{opacity:0;visibility:hidden}.intro-word{font-size:13px;font-weight:800;letter-spacing:.35em;opacity:.82}.intro-line{position:absolute;left:0;top:50%;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;animation:introLine .85s var(--ease) .08s forwards;box-shadow:0 0 28px rgba(255,52,52,.8)}@keyframes introLine{to{transform:scaleX(1)}}
.hero{position:relative;min-height:100svh;background:#090b0e;color:#fff;overflow:hidden}.hero-picture{position:absolute;inset:0}.hero-picture img{width:100%;height:100%;object-fit:cover;object-position:center}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,11,.93) 0%,rgba(6,8,11,.76) 34%,rgba(6,8,11,.12) 68%,rgba(6,8,11,.24) 100%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.45))}.hero-copy{position:relative;z-index:2;padding-top:160px;padding-bottom:90px;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:none}.hero .eyebrow{color:rgba(255,255,255,.57)}.hero h1{font-size:clamp(54px,7.2vw,108px);max-width:900px}.hero-lead{font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.68);max-width:650px;margin-top:28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero .button.primary{background:#fff;color:#111}.hero .button.ghost{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}.hero-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.17)}.hero-proof span{font-size:12px;color:rgba(255,255,255,.58)}.hero-proof strong{display:block;color:#fff;font-size:14px;margin-bottom:3px}.hero-scroll{position:absolute;z-index:3;left:calc((100% - min(1240px,calc(100% - 48px)))/2);bottom:25px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.55)}.hero-scroll i{width:70px;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}.hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--red);transform:translateX(-100%);animation:scrollHint 2.2s infinite}@keyframes scrollHint{60%,100%{transform:translateX(100%)}}
.manifesto{padding:140px 0 90px}.manifesto-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw}.manifesto h2{font-size:clamp(40px,5.3vw,78px)}.manifesto-copy{font-size:clamp(22px,2.5vw,34px);line-height:1.42;letter-spacing:-.035em;color:#3d3e40}.manifesto-copy em{font-family:Georgia,serif;font-weight:400}.red-rule{height:2px;background:linear-gradient(90deg,var(--red),transparent);margin-top:50px}
.work-section{position:relative;padding:70px 0 160px}.work-head{display:grid;grid-template-columns:1fr .75fr;align-items:end;gap:40px;margin-bottom:70px}.work-head h2{font-size:clamp(46px,6vw,86px)}.work-head p{color:var(--muted);max-width:540px}.journey{position:relative}.journey-svg{position:absolute;left:50%;top:0;bottom:0;width:580px;height:100%;transform:translateX(-50%);overflow:visible;pointer-events:none}.journey-svg .base{fill:none;stroke:#d8d5cd;stroke-width:2}.journey-svg .active{fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,52,52,.25))}.journey-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 7px rgba(255,52,52,.13);left:50%;top:0;transform:translate(-50%,-50%);z-index:4}.project-list{position:relative;z-index:2;display:flex;flex-direction:column;gap:95px}.project-row{display:grid;grid-template-columns:1fr 1fr;min-height:520px;align-items:center}.project-row.left .project-card{grid-column:1}.project-row.right .project-card{grid-column:2}.project-card{position:relative;padding:13px;border-radius:34px;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);overflow:hidden;transform-style:preserve-3d;transition:box-shadow .35s,border-color .35s}.project-card:hover{box-shadow:0 40px 120px rgba(7,9,12,.18)}.project-media{position:relative;border-radius:25px;overflow:hidden;aspect-ratio:16/10;background:#ddd}.project-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .65s var(--ease),transform .85s var(--ease)}.project-card:hover .project-media img,.project-card:focus-within .project-media img{filter:grayscale(0);transform:scale(1.035)}.project-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.18));pointer-events:none}.project-number{position:absolute;top:22px;left:22px;z-index:2;padding:9px 11px;border-radius:99px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);font-size:10px;font-weight:850;letter-spacing:.14em}.project-copy{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end;padding:25px 12px 10px}.project-copy h3{font-size:clamp(31px,3vw,44px)}.project-copy p{color:var(--muted);font-size:14px;max-width:430px;margin-top:10px}.project-impact{display:block;font-family:Georgia,serif;font-size:15px;font-style:italic;margin-top:14px;color:#242527}.project-tags{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;max-width:200px}.project-tags span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:9px;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.project-arrow{position:absolute;right:23px;top:23px;z-index:3;width:46px;height:46px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;transform:translate(8px,-8px);opacity:0;transition:.3s}.project-card:hover .project-arrow{opacity:1;transform:none}.project-card.is-active{outline:1px solid rgba(255,52,52,.28);outline-offset:8px}.project-rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:120;display:flex;flex-direction:column;gap:7px}.project-rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:10px;font-weight:800;letter-spacing:.1em;color:#8a8985;transition:.25s}.project-rail b{font-size:10px;font-weight:700;opacity:0;transform:translateX(5px);transition:.25s}.project-rail a:hover b,.project-rail a.active b{opacity:1;transform:none}.project-rail a.active{color:var(--red)}
.process-section{padding:130px 0;background:#0c0e11;color:#fff}.process-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:55px}.process-head h2{font-size:clamp(42px,5vw,74px)}.process-head p{color:rgba(255,255,255,.58);max-width:520px}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.15)}.process-step{padding:28px 18px;border-right:1px solid rgba(255,255,255,.15);min-height:250px}.process-step:last-child{border-right:0}.process-step span{font-size:10px;color:var(--red);font-weight:850;letter-spacing:.16em}.process-step h3{font-size:22px;margin-top:52px}.process-step p{font-size:13px;color:rgba(255,255,255,.52);margin-top:12px}.profile-section{padding:150px 0}.profile-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw}.profile-sticky{position:sticky;top:130px;align-self:start}.profile-sticky h2{font-size:clamp(44px,5vw,72px)}.profile-sticky p{color:var(--muted);margin-top:22px;max-width:470px}.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.timeline{border-top:1px solid var(--line)}.career-item{display:grid;grid-template-columns:145px 1fr;gap:25px;padding:28px 0;border-bottom:1px solid var(--line)}.career-item time{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b8984}.career-item h3{font-size:24px}.career-item p{font-size:14px;color:var(--muted);margin-top:7px}
.site-footer{background:#0a0c0f;color:#fff;padding:70px 0 34px}.footer-line{height:3px;background:rgba(255,255,255,.1);position:relative}.footer-line span{display:block;width:50%;height:100%;background:var(--red)}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;padding-top:80px}.footer-grid .eyebrow{color:rgba(255,255,255,.46)}.footer-grid h2{font-size:clamp(42px,5.5vw,78px);max-width:850px}.footer-contact{align-self:end}.footer-contact>a{font-size:clamp(20px,2vw,30px);font-weight:700;border-bottom:1px solid var(--red)}.footer-contact p{color:rgba(255,255,255,.5);font-size:13px;margin-top:18px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:90px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:rgba(255,255,255,.48)}.footer-bottom div{display:flex;gap:16px}
/* Detail pages */
.inner-page{background:var(--paper)}.detail-hero{position:relative;min-height:720px;background:#080a0d;overflow:hidden;color:#fff}.detail-hero picture{position:absolute;inset:0}.detail-hero picture img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) brightness(.54);opacity:.46}.detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,12,.74),rgba(7,9,12,.1))}.detail-paper{position:relative;z-index:2;width:var(--shell);margin:auto;padding-top:125px}.paper-sheet{position:relative;background:rgba(250,249,245,.96);color:var(--ink);padding:58px 55px 90px;max-width:920px;box-shadow:0 28px 80px rgba(0,0,0,.18);clip-path:polygon(0 0,100% 0,100% 88%,96% 92%,91% 89%,86% 95%,80% 90%,74% 95%,68% 89%,61% 95%,54% 90%,47% 96%,40% 89%,34% 95%,27% 90%,20% 94%,13% 89%,7% 94%,0 89%);transform:translateY(-28px);animation:paperIn .9s var(--ease) .12s both}.paper-sheet::after{content:"";position:absolute;left:0;right:0;bottom:42px;height:3px;background:var(--red)}@keyframes paperIn{from{opacity:0;transform:translateY(-80px) rotate(-1deg)}to{opacity:1;transform:translateY(-28px)}}.paper-sheet h1{font-size:clamp(52px,7vw,98px)}.paper-sheet p{font-size:clamp(16px,1.5vw,20px);color:#5d5e61;max-width:710px;margin-top:23px}.paper-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#777}.detail-section{padding:125px 0}.detail-section.dark{background:#0b0d10;color:#fff}.detail-section.soft{background:#ebe9e2}.detail-heading{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;margin-bottom:55px}.detail-heading h2{font-size:clamp(40px,5vw,72px)}.detail-heading p{color:var(--muted);font-size:17px}.dark .detail-heading p{color:rgba(255,255,255,.58)}.case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.case-card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.08)}.case-card.span-7{grid-column:span 7}.case-card.span-5{grid-column:span 5}.case-card.span-4{grid-column:span 4}.case-card.span-8{grid-column:span 8}.case-card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1);transition:.6s var(--ease)}.case-card:hover img{filter:grayscale(0)}.case-body{padding:25px}.case-body h3{font-size:27px}.case-body p{color:var(--muted);font-size:14px;margin-top:10px}.case-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.case-links a,.pill{display:inline-flex;padding:8px 10px;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.impact-card{padding:30px;border-radius:26px;border:1px solid rgba(255,255,255,.15);min-height:280px;display:flex;flex-direction:column}.impact-card span{font-size:10px;color:var(--red);font-weight:850;letter-spacing:.14em}.impact-card h3{font-size:28px;margin-top:auto}.impact-card p{color:rgba(255,255,255,.55);font-size:14px;margin-top:12px}.other-sites{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.other-site{padding:25px;border-radius:24px;background:#fff;display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid #e4e1d9;transition:.3s}.other-site:hover{transform:translateY(-4px);border-color:rgba(255,52,52,.35)}.other-site h3{font-size:24px}.other-site p{font-size:13px;color:var(--muted);margin-top:5px}.other-site i{font-style:normal;width:42px;height:42px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center}.proof-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.proof-item{padding:25px;border-right:1px solid var(--line)}.proof-item:last-child{border-right:0}.proof-item span{font-size:10px;color:var(--red);font-weight:850;letter-spacing:.12em}.proof-item h3{font-size:21px;margin-top:28px}.proof-item p{font-size:13px;color:var(--muted);margin-top:8px}
/* Cardgame */.deck-stage{position:relative;min-height:660px;border-radius:34px;background:radial-gradient(circle at 30% 15%,rgba(255,255,255,.25),transparent 30%),linear-gradient(140deg,#ff8059,#f24065 45%,#5244a4);display:grid;place-items:center;overflow:hidden}.deck-card{position:absolute;width:min(330px,38vw);aspect-ratio:2/3;border-radius:34px;box-shadow:0 32px 70px rgba(25,14,36,.28);transition:.6s var(--ease)}.deck-card:nth-child(1){transform:translateX(-190px) rotate(-18deg)}.deck-card:nth-child(2){transform:translateY(-20px) rotate(-2deg)}.deck-card:nth-child(3){transform:translateX(190px) rotate(17deg)}.deck-stage:hover .deck-card:nth-child(1){transform:translateX(-260px) rotate(-23deg) translateY(-20px)}.deck-stage:hover .deck-card:nth-child(2){transform:translateY(-50px)}.deck-stage:hover .deck-card:nth-child(3){transform:translateX(260px) rotate(23deg) translateY(-15px)}.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.media-grid img{width:100%;border-radius:25px;filter:grayscale(1);transition:.5s}.media-grid img:hover{filter:none}.placeholder-note{font-size:12px;color:var(--muted);margin-top:14px}
/* Music */.music-stage{position:relative;min-height:620px;border-radius:34px;background:linear-gradient(135deg,#0b0c12,#232236 58%,#64344b);display:grid;place-items:center;overflow:hidden}.vinyl{width:min(430px,62vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#121217 0 7%,#ff5b82 7% 18%,#101014 18% 22%,transparent 22%),repeating-radial-gradient(circle,#111 0 2px,#2c2d34 3px 5px);box-shadow:0 40px 80px rgba(0,0,0,.38);animation:vinyl 14s linear infinite}.music-wave{position:absolute;left:5%;right:5%;bottom:12%;display:flex;align-items:flex-end;justify-content:center;gap:6px;height:110px}.music-wave i{width:5px;border-radius:99px;background:rgba(255,255,255,.72);height:var(--h);animation:wave 1.1s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes vinyl{to{transform:rotate(360deg)}}@keyframes wave{to{height:20%}}.release-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.release-grid img{width:100%;border-radius:24px;filter:grayscale(1);transition:.5s}.release-grid img:hover{filter:none}
/* 3D */.mode-stage{position:relative;border-radius:34px;overflow:hidden;background:#111;min-height:650px}.mode-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .65s}.mode-stage img.active{opacity:1}.mode-controls{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);display:flex;padding:6px;border-radius:99px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px)}.mode-controls button{border:0;background:transparent;border-radius:99px;padding:11px 18px;font-weight:750;font-size:12px;cursor:pointer}.mode-controls button.active{background:#111;color:#fff}.handbuilt{font-family:Georgia,serif;font-size:clamp(35px,5vw,74px);line-height:1.12;max-width:1000px}.handbuilt em{color:var(--red)}.render-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.render-grid figure{margin:0}.render-grid img{width:100%;border-radius:22px;filter:grayscale(1);transition:.5s}.render-grid img:hover{filter:none}.render-grid figcaption{font-size:11px;color:var(--muted);margin-top:8px}
/* Photography */.photo-intro{padding:115px 0 70px}.photo-intro h2{font-size:clamp(48px,7vw,100px);max-width:1000px}.photo-intro p{color:var(--muted);font-size:18px;max-width:580px;margin-top:25px}.photo-story{height:340vh;position:relative}.photo-stack{position:sticky;top:0;height:100vh;overflow:hidden;background:#090b0e;display:grid;place-items:center}.photo-stack-copy{position:absolute;left:max(24px,calc((100% - 1240px)/2));top:110px;color:#fff;z-index:5}.photo-stack-copy .eyebrow{color:rgba(255,255,255,.48)}.photo-stack-copy h2{font-size:clamp(38px,5vw,72px);max-width:520px}.stack-photo{position:absolute;width:min(620px,58vw);height:min(76vh,760px);object-fit:cover;border-radius:10px;box-shadow:0 35px 100px rgba(0,0,0,.38);filter:grayscale(1);transition:filter .4s}.stack-photo:hover{filter:none}.photo-gallery{padding:120px 0}.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.gallery-item{position:relative;border:0;padding:0;background:transparent;cursor:pointer;overflow:hidden;border-radius:20px}.gallery-item:nth-child(6n+1){grid-column:span 7}.gallery-item:nth-child(6n+2){grid-column:span 5}.gallery-item:nth-child(6n+3){grid-column:span 4}.gallery-item:nth-child(6n+4){grid-column:span 8}.gallery-item:nth-child(6n+5){grid-column:span 5}.gallery-item:nth-child(6n){grid-column:span 7}.gallery-item img{width:100%;height:100%;min-height:360px;object-fit:cover;filter:grayscale(1);transition:.65s var(--ease)}.gallery-item:hover img{filter:none;transform:scale(1.025)}.gallery-item span{position:absolute;left:18px;bottom:17px;padding:7px 9px;border-radius:99px;background:rgba(255,255,255,.78);font-size:9px;font-weight:800;letter-spacing:.1em}.lightbox{position:fixed;inset:0;z-index:700;background:rgba(5,6,8,.95);display:grid;place-items:center;padding:70px;opacity:0;visibility:hidden;transition:.35s}.lightbox.open{opacity:1;visibility:visible}.lightbox img{max-width:90vw;max-height:82vh;object-fit:contain}.lightbox button{position:absolute;right:24px;top:24px;width:48px;height:48px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:24px}.lightbox p{position:absolute;bottom:22px;color:rgba(255,255,255,.58);font-size:12px}
/* legal */.legal-main{padding:140px 0 100px}.legal-sheet{max-width:900px}.legal-sheet h1{font-size:clamp(50px,6vw,82px)}.legal-sheet h2{font-size:24px;margin-top:42px}.legal-sheet p,.legal-sheet li{color:var(--muted);font-size:15px;line-height:1.75}.legal-sheet p{margin-top:10px}.legal-note{padding:16px 18px;border:1px solid #edcf7a;background:#fff5ce;border-radius:15px;margin-top:25px;color:#5f4b12}.error-page{min-height:100vh;background:#090b0e;color:#fff;display:grid;place-items:center;text-align:center;padding:30px}.error-page h1{font-size:clamp(90px,18vw,240px);color:var(--red)}.error-page p{color:rgba(255,255,255,.55);margin:18px 0 30px}
@media(max-width:1100px){.project-rail{display:none}.process-grid{grid-template-columns:repeat(3,1fr)}.process-step:nth-child(3){border-right:0}.process-step:nth-child(n+4){border-top:1px solid rgba(255,255,255,.15)}.render-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){:root{--shell:min(100% - 30px,1240px)}.desktop-nav{display:none}.menu-toggle{display:block}.hero::after{background:linear-gradient(90deg,rgba(6,8,11,.88),rgba(6,8,11,.4)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.56))}.hero-copy{padding-top:130px;justify-content:flex-end;padding-bottom:105px}.manifesto-grid,.work-head,.profile-grid,.detail-heading,.footer-grid{grid-template-columns:1fr}.manifesto-copy{margin-top:20px}.journey-svg{left:20px;transform:none;width:160px}.journey-dot{left:20px}.project-row{grid-template-columns:1fr;min-height:auto}.project-row.left .project-card,.project-row.right .project-card{grid-column:1;margin-left:30px}.profile-sticky{position:static}.process-grid{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2n){border-right:0}.process-step:nth-child(3){border-right:1px solid rgba(255,255,255,.15)}.process-step:nth-child(n+3){border-top:1px solid rgba(255,255,255,.15)}.case-card.span-7,.case-card.span-5,.case-card.span-4,.case-card.span-8{grid-column:span 12}.impact-grid{grid-template-columns:1fr}.other-sites{grid-template-columns:1fr}.proof-strip{grid-template-columns:repeat(2,1fr)}.proof-item:nth-child(2){border-right:0}.proof-item:nth-child(n+3){border-top:1px solid var(--line)}.detail-hero{min-height:670px}.paper-sheet{padding:42px 28px 80px}.deck-stage,.music-stage,.mode-stage{min-height:520px}.gallery-item:nth-child(n){grid-column:span 6}.gallery-item img{min-height:300px}}
@media(max-width:640px){.brand-name{display:none}.site-header{height:58px;top:9px}.hero-picture img{object-position:center}.hero h1{font-size:clamp(48px,14vw,70px)}.hero-proof{gap:16px}.hero-scroll{left:15px}.manifesto{padding-top:95px}.work-section{padding-bottom:105px}.project-list{gap:65px}.project-row.left .project-card,.project-row.right .project-card{margin-left:18px}.project-copy{grid-template-columns:1fr}.project-tags{justify-content:flex-start;max-width:none}.project-arrow{opacity:1;transform:none}.process-grid{grid-template-columns:1fr}.process-step,.process-step:nth-child(3){border-right:0}.process-step:nth-child(n+2){border-top:1px solid rgba(255,255,255,.15)}.career-item{grid-template-columns:1fr;gap:8px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:14px}.detail-paper{padding-top:105px}.paper-sheet{transform:translateY(-12px)}@keyframes paperIn{from{opacity:0;transform:translateY(-55px)}to{opacity:1;transform:translateY(-12px)}}.paper-sheet h1{font-size:clamp(44px,14vw,66px)}.detail-section{padding:90px 0}.proof-strip{grid-template-columns:1fr}.proof-item{border-right:0}.proof-item:nth-child(n+2){border-top:1px solid var(--line)}.deck-stage{min-height:450px}.deck-card{width:48vw}.deck-card:nth-child(1){transform:translateX(-85px) rotate(-18deg)}.deck-card:nth-child(3){transform:translateX(85px) rotate(17deg)}.media-grid,.release-grid,.render-grid{grid-template-columns:1fr}.mode-controls button{padding:10px 13px}.photo-story{height:280vh}.photo-stack-copy{top:88px;left:20px}.stack-photo{width:76vw;height:62vh}.gallery-item:nth-child(n){grid-column:span 12}.lightbox{padding:24px}}
@media(hover:none){.project-media img,.case-card img,.media-grid img,.release-grid img,.render-grid img,.gallery-item img{filter:grayscale(.15)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.intro{display:none}.reveal{opacity:1;transform:none}.vinyl{animation:none}}

/* Original 3D archive and 2D work */
.work-archive{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}.work-card{grid-column:span 6;background:#fff;border-radius:28px;overflow:hidden;border:1px solid #e7e3da;box-shadow:0 20px 55px rgba(0,0,0,.07);transition:.45s var(--ease)}.work-card:nth-child(3n){grid-column:span 7}.work-card:nth-child(3n+1){grid-column:span 5}.work-card:hover{transform:translateY(-7px);box-shadow:0 34px 80px rgba(0,0,0,.12)}.work-card-media{position:relative;overflow:hidden;background:#121315}.work-card-media img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1);transition:.7s var(--ease)}.work-card:hover .work-card-media img{filter:none;transform:scale(1.025)}.work-card-media>span{position:absolute;left:16px;top:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);font-size:10px;font-weight:850}.work-card-copy{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;padding:24px}.work-card-copy small{font-size:9px;color:var(--red);font-weight:850;letter-spacing:.12em;text-transform:uppercase}.work-card-copy h3{font-size:clamp(22px,2.3vw,32px);margin-top:7px}.work-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.work-tags span,.fact-tags span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.professional-work{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;background:#fff;border-radius:30px;overflow:hidden;border:1px solid #e4e1d9}.professional-work img{width:100%;height:100%;min-height:430px;object-fit:cover;filter:grayscale(.7)}.professional-work>div{padding:36px 36px 36px 0}.professional-work h3{font-size:clamp(30px,4vw,54px);margin:14px 0}.professional-work p{color:var(--muted);line-height:1.7}.logo-feature{display:grid;grid-template-columns:1.2fr .8fr;align-items:stretch;border-radius:30px;overflow:hidden;background:#111;color:#fff}.logo-feature img{width:100%;height:100%;min-height:480px;object-fit:cover;filter:grayscale(1);transition:.7s var(--ease)}.logo-feature:hover img{filter:none;transform:scale(1.02)}.logo-feature>div{padding:45px;display:flex;flex-direction:column;justify-content:center}.logo-feature small{font-size:10px;color:var(--red);font-weight:850;letter-spacing:.13em;text-transform:uppercase}.logo-feature h3{font-size:clamp(34px,4.8vw,68px);margin:15px 0}.logo-feature p{color:rgba(255,255,255,.6);line-height:1.65}.logo-feature span{margin-top:35px;font-size:13px;font-weight:800}
.project-detail-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}.project-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,7,.5),rgba(4,5,7,.08)),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42))}.project-overview{display:grid;grid-template-columns:.7fr 1.3fr;gap:8vw}.project-facts{align-self:start;position:sticky;top:130px;display:grid;gap:34px}.project-facts p{font-size:16px;line-height:1.65;color:var(--muted)}.fact-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.project-story{display:grid}.project-story article{padding:42px 0;border-top:1px solid var(--line)}.project-story article:last-child{border-bottom:1px solid var(--line)}.project-story article>span{font-size:10px;font-weight:850;letter-spacing:.12em;color:var(--red)}.project-story h2{font-size:clamp(34px,4vw,56px);margin:15px 0}.project-story p{font-size:17px;line-height:1.75;color:var(--muted)}.project-gallery .gallery-item img{min-height:330px}.project-pagination{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;padding-top:70px;padding-bottom:110px}.project-pagination a{padding:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.project-pagination a.next{text-align:right}.project-pagination span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.project-pagination strong{font-size:18px}
@media(max-width:900px){.work-card,.work-card:nth-child(n){grid-column:span 12}.professional-work,.logo-feature,.project-overview{grid-template-columns:1fr}.professional-work>div{padding:30px}.logo-feature>div{padding:30px}.project-facts{position:static}.project-pagination{grid-template-columns:1fr 1fr}.project-pagination a:nth-child(2){display:none}}
@media(max-width:640px){.work-card-copy{flex-direction:column;align-items:flex-start}.work-tags{justify-content:flex-start}.professional-work img,.logo-feature img{min-height:300px}.project-gallery .gallery-item img{min-height:280px}.project-pagination{grid-template-columns:1fr}.project-pagination a.next{text-align:left}}


/* Progressive enhancement: the portfolio must remain readable without JS. */
.reveal,.reveal.from-left,.reveal.from-right{opacity:1;transform:none}
.motion-ready .reveal{opacity:0;transform:translateY(32px)}
.motion-ready .reveal.from-left{transform:translate(-70px,20px)}
.motion-ready .reveal.from-right{transform:translate(70px,20px)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal,.motion-ready .reveal.from-left,.motion-ready .reveal.from-right{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   Editorial project journey — open compositions instead of closed tiles
   -------------------------------------------------------------------------- */
.work-section{overflow:clip}
.project-list{gap:clamp(115px,14vw,210px)}
.project-row{display:block;min-height:clamp(620px,62vw,790px)}
.project-row .project-card,
.project-row.left .project-card,
.project-row.right .project-card{
  grid-column:auto;
  width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(270px,.65fr);
  gap:clamp(38px,7vw,120px);
  align-items:center;
  transform-style:flat;
}
.project-row.right .project-card{grid-template-columns:minmax(270px,.65fr) minmax(0,1.25fr)}
.project-row.right .project-visual{grid-column:2;grid-row:1}
.project-row.right .project-copy{grid-column:1;grid-row:1}
.project-card:hover{box-shadow:none}
.project-card.is-active{outline:0}
.project-card.is-active .project-number{color:var(--red);border-color:rgba(255,52,52,.28)}
.project-visual{position:relative;min-height:clamp(510px,52vw,680px);isolation:isolate}
.project-copy{display:block;padding:0;max-width:430px;position:relative;z-index:8}
.project-copy::before{content:"";display:block;width:44px;height:2px;background:var(--red);margin-bottom:28px;transform-origin:left;transition:width .6s var(--ease)}
.editorial-project:hover .project-copy::before{width:92px}
.project-copy h3{font-size:clamp(46px,5.3vw,76px);line-height:.93;letter-spacing:-.065em;margin-top:10px}
.project-copy p{font-size:15px;line-height:1.7;max-width:390px;margin-top:18px}
.editorial-label{font-size:9px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;color:#8a8985}
.project-tags{justify-content:flex-start;max-width:none;margin-top:26px}
.project-impact{font-size:17px;margin-top:19px;max-width:350px}
.project-arrow{right:0;top:0;width:52px;height:52px;opacity:1;transform:none;background:transparent;color:#111;border:1px solid rgba(15,16,18,.2);transition:background .3s,color .3s,transform .35s var(--ease)}
.editorial-project:hover .project-arrow{background:#111;color:#fff;transform:rotate(45deg)}
.project-number{top:auto;left:auto;right:0;bottom:0;background:rgba(247,246,242,.88);border:1px solid rgba(20,20,20,.1);box-shadow:0 9px 30px rgba(0,0,0,.06)}
.loose-frame{position:absolute;margin:0;overflow:hidden;background:#ddd;box-shadow:0 24px 65px rgba(10,12,15,.16);transition:transform .75s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.loose-frame img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s var(--ease),transform .9s var(--ease)}
.loose-frame figcaption{position:absolute;left:14px;bottom:12px;padding:6px 8px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.editorial-project:hover .loose-frame img,.editorial-project:focus-visible .loose-frame img{filter:grayscale(0);transform:scale(1.025)}
.editorial-project:hover .loose-frame{box-shadow:0 34px 90px rgba(10,12,15,.22)}

/* Websites: three browser windows, deliberately layered */
.websites-composition{min-height:710px}
.website-frame{width:74%;height:45%;border-radius:18px;border:7px solid #fff;padding-top:17px;background:#fff}
.website-frame::before{content:"";position:absolute;z-index:2;left:13px;top:7px;width:5px;height:5px;border-radius:50%;background:#c8c5bf;box-shadow:9px 0 #d5d2cc,18px 0 #e1ded8}
.website-frame img{object-position:top}
.website-one{left:0;top:2%;transform:rotate(-4.2deg)}
.website-two{right:0;top:29%;z-index:3;transform:rotate(3.3deg)}
.website-three{left:8%;bottom:0;z-index:4;transform:rotate(-1.5deg)}
.editorial-project:hover .website-one{transform:rotate(-2.3deg) translate(-8px,-8px)}
.editorial-project:hover .website-two{transform:rotate(1.5deg) translate(10px,-3px)}
.editorial-project:hover .website-three{transform:rotate(-.3deg) translate(-3px,8px)}

/* Game: an open fan instead of a container */
.cardgame-composition{min-height:620px;perspective:1200px}
.game-frame{width:48%;height:43%;border-radius:18px;border:5px solid rgba(255,255,255,.92)}
.game-one{left:2%;top:12%;transform:rotate(-14deg)}
.game-two{left:26%;top:1%;z-index:2;transform:rotate(-3deg)}
.game-three{right:5%;top:13%;z-index:3;transform:rotate(11deg)}
.game-four{left:28%;bottom:2%;z-index:4;transform:rotate(4deg)}
.editorial-project:hover .game-one{transform:rotate(-18deg) translate(-15px,4px)}
.editorial-project:hover .game-two{transform:rotate(-5deg) translateY(-15px)}
.editorial-project:hover .game-three{transform:rotate(15deg) translate(15px,5px)}
.editorial-project:hover .game-four{transform:rotate(1deg) translateY(12px)}

/* Music: cover fragments around a record */
.music-composition{min-height:610px}
.music-frame{width:52%;height:41%;border:5px solid #fff}
.music-one{left:0;top:5%;transform:rotate(-7deg)}
.music-two{right:1%;top:17%;z-index:3;transform:rotate(5deg)}
.music-three{left:12%;bottom:0;z-index:4;transform:rotate(-2deg)}
.music-disc{position:absolute;right:15%;bottom:4%;z-index:5;width:170px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d6d6d6 0 8%,#111 9% 18%,#222 19% 21%,#111 22% 100%);box-shadow:0 24px 50px rgba(0,0,0,.28);animation:spin 14s linear infinite}
.music-wave{position:absolute;left:0;bottom:10%;z-index:6;height:72px;display:flex;align-items:center;gap:5px}
.music-wave i{display:block;width:3px;height:25%;background:var(--red);border-radius:99px;animation:eq 1.3s ease-in-out infinite alternate}
.music-wave i:nth-child(2){height:80%;animation-delay:-.4s}.music-wave i:nth-child(3){height:48%;animation-delay:-.7s}.music-wave i:nth-child(4){height:100%;animation-delay:-.2s}.music-wave i:nth-child(5){height:60%;animation-delay:-.55s}.music-wave i:nth-child(6){height:32%;animation-delay:-.35s}.music-wave i:nth-child(7){height:74%;animation-delay:-.8s}
.editorial-project:hover .music-one{transform:rotate(-10deg) translate(-10px,-8px)}
.editorial-project:hover .music-two{transform:rotate(8deg) translate(12px,-5px)}
.editorial-project:hover .music-three{transform:rotate(-.5deg) translateY(10px)}

/* 3D: a loose material/process wall */
.threed-composition{min-height:660px}
.threed-frame{border:5px solid #fff}
.threed-one{left:0;top:7%;width:77%;height:38%;transform:rotate(-2deg)}
.threed-two{right:2%;top:35%;z-index:3;width:50%;height:48%;transform:rotate(4deg)}
.threed-three{left:8%;bottom:0;z-index:4;width:44%;height:43%;transform:rotate(-4deg)}
.editorial-project:hover .threed-one{transform:rotate(-.7deg) translate(-6px,-8px)}
.editorial-project:hover .threed-two{transform:rotate(2deg) translate(10px,-2px)}
.editorial-project:hover .threed-three{transform:rotate(-2deg) translate(-8px,10px)}

/* Photography: an open contact sheet */
.photo-composition{min-height:650px}
.photo-frame{width:38%;height:72%;border:6px solid #fff}
.photo-one{left:0;top:8%;transform:rotate(-5deg)}
.photo-two{left:30%;top:0;z-index:2;transform:rotate(2deg)}
.photo-three{right:0;top:14%;z-index:3;transform:rotate(6deg)}
.photo-index{position:absolute;right:3%;bottom:0;font-family:Georgia,serif;font-size:13px;line-height:1.55;color:var(--red);letter-spacing:.12em}
.editorial-project:hover .photo-one{transform:rotate(-7deg) translate(-13px,5px)}
.editorial-project:hover .photo-two{transform:rotate(.5deg) translateY(-14px)}
.editorial-project:hover .photo-three{transform:rotate(8deg) translate(13px,7px)}

@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}

@media(max-width:900px){
  .project-list{gap:110px}
  .project-row{min-height:auto}
  .project-row .project-card,.project-row.left .project-card,.project-row.right .project-card{
    display:grid;grid-template-columns:1fr;gap:30px;margin-left:28px;width:calc(100% - 28px)
  }
  .project-row.right .project-visual,.project-row.right .project-copy{grid-column:1;grid-row:auto}
  .project-row.right .project-visual{grid-row:1}.project-row.right .project-copy{grid-row:2}
  .project-copy{max-width:580px;padding-left:clamp(0px,5vw,45px)}
  .project-visual{min-height:600px}
  .websites-composition{min-height:680px}
}
@media(max-width:640px){
  .project-list{gap:90px}
  .project-row .project-card,.project-row.left .project-card,.project-row.right .project-card{margin-left:18px;width:calc(100% - 18px);gap:22px}
  .project-visual,.websites-composition,.cardgame-composition,.music-composition,.threed-composition,.photo-composition{min-height:430px}
  .project-copy{padding-left:0}
  .project-copy h3{font-size:clamp(42px,14vw,60px)}
  .project-copy p{font-size:14px}
  .project-arrow{width:44px;height:44px}
  .project-number{right:2px;bottom:2px;max-width:72%;white-space:normal;line-height:1.35}
  .website-frame{width:82%;height:42%;border-width:4px;border-radius:12px;padding-top:13px}
  .website-one{left:0}.website-two{right:0;top:30%}.website-three{left:5%}
  .game-frame{width:58%;height:38%;border-width:3px}
  .game-one{left:0}.game-two{left:21%}.game-three{right:0}.game-four{left:23%}
  .music-frame{width:61%;height:38%;border-width:3px}.music-disc{width:110px;right:4%}
  .threed-frame{border-width:3px}.threed-one{width:88%;height:35%}.threed-two{width:57%;height:45%}.threed-three{width:51%;height:41%;left:2%}
  .photo-frame{width:48%;height:67%;border-width:3px}.photo-one{left:0}.photo-two{left:25%}.photo-three{right:-4%}
}
@media(hover:none){
  .loose-frame img{filter:grayscale(.25)}
}
.project-number{z-index:12}
.project-arrow{z-index:13}
@media(max-width:640px){.project-number{top:14px;right:10px;bottom:auto;left:auto;max-width:72%}}

/* Red journey marker: hidden until JavaScript has positioned it on the SVG path. */
.journey-dot{opacity:0;transition:opacity .18s ease}

.journey{isolation:isolate}.journey-svg,.journey-dot{z-index:0!important}.project-list{z-index:2!important}

/* ========================================================================== 
   Desktop project dropdown
   ========================================================================== */
.desktop-nav>.nav-projects{position:relative;display:flex;align-items:center}
.desktop-nav>.nav-projects::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.desktop-nav>.nav-projects>.nav-projects-trigger{
  display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border-radius:999px;
  color:inherit;font-size:12px;font-weight:720;transition:background .2s
}
.desktop-nav>.nav-projects>.nav-projects-trigger span{font-size:12px;line-height:1;transition:transform .25s var(--ease)}
.desktop-nav>.nav-projects:hover>.nav-projects-trigger,
.desktop-nav>.nav-projects:focus-within>.nav-projects-trigger{background:rgba(255,255,255,.11)}
.scrolled .desktop-nav>.nav-projects:hover>.nav-projects-trigger,
.scrolled .desktop-nav>.nav-projects:focus-within>.nav-projects-trigger,
.inner-page .desktop-nav>.nav-projects:hover>.nav-projects-trigger,
.inner-page .desktop-nav>.nav-projects:focus-within>.nav-projects-trigger{background:#eeece6}
.desktop-nav>.nav-projects:hover>.nav-projects-trigger span,
.desktop-nav>.nav-projects:focus-within>.nav-projects-trigger span{transform:rotate(180deg)}
.nav-projects-menu{
  position:absolute;right:0;top:calc(100% + 14px);width:245px;padding:9px;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  background:rgba(10,12,15,.94);color:#fff;backdrop-filter:blur(22px);
  box-shadow:0 24px 70px rgba(0,0,0,.28);opacity:0;visibility:hidden;
  pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .22s var(--ease),visibility .22s,transform .28s var(--ease)
}
.nav-projects:hover>.nav-projects-menu,
.nav-projects:focus-within>.nav-projects-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none
}
.nav-projects-menu a{
  display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;
  min-height:43px;padding:7px 10px;border-radius:13px;transition:background .2s,transform .2s
}
.nav-projects-menu a:hover,.nav-projects-menu a:focus-visible{background:rgba(255,255,255,.1);transform:translateX(3px)}
.nav-projects-menu a span{font-size:9px;font-weight:850;letter-spacing:.13em;color:var(--red)}
.nav-projects-menu a strong{font-size:12px;font-weight:720;letter-spacing:.01em}
@media(max-width:900px){.nav-projects-menu{display:none}}

/* Individual project intro heroes */
.detail-hero{min-height:680px;display:grid;align-items:center}
.detail-paper{padding-top:112px;padding-bottom:64px}
.paper-sheet.project-intro{--intro-accent:var(--red);max-width:min(820px,72vw);min-height:430px;padding:76px 64px 58px;clip-path:none;transform:none;overflow:hidden;isolation:isolate;animation:projectIntroIn .85s var(--ease) .08s both}
.paper-sheet.project-intro::after{display:none}
.project-intro .eyebrow{position:relative;z-index:3;margin-bottom:22px}
.project-intro h1{position:relative;z-index:3;font-size:clamp(58px,7vw,100px);max-width:760px}
.project-intro p{position:relative;z-index:3;max-width:650px;margin-top:24px}
.project-intro .paper-meta{position:relative;z-index:3;margin-top:31px}
.project-intro .paper-meta span{display:inline-flex;align-items:center;min-height:28px}
.project-intro .intro-number{position:absolute;z-index:1;right:34px;top:24px;font-size:clamp(72px,11vw,156px);line-height:.8;font-weight:900;letter-spacing:-.09em;color:rgba(17,18,20,.055);pointer-events:none}
.project-intro .intro-foot{position:absolute;z-index:3;left:64px;right:64px;bottom:23px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(17,18,20,.48)}
.project-intro .intro-foot>i{height:1px;background:currentColor;opacity:.32}
.project-intro .intro-foot b{font-weight:800}
@keyframes projectIntroIn{from{opacity:0;transform:translateY(-42px) scale(.985)}to{opacity:1;transform:none}}

/* 01 — Websites: browser / information system */
.detail-hero--websites::after{background:linear-gradient(90deg,rgba(7,9,12,.76),rgba(7,9,12,.09))}
.project-intro--websites{background:rgba(249,249,247,.97);border:1px solid rgba(255,255,255,.68);border-radius:18px;box-shadow:0 34px 100px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06);padding-top:102px!important}
.project-intro--websites::before{content:"";position:absolute;z-index:0;left:0;top:55px;bottom:0;width:6px;background:var(--red)}
.intro-browser{position:absolute;z-index:2;left:0;right:0;top:0;height:56px;display:flex;align-items:center;gap:8px;padding:0 20px;border-bottom:1px solid #ddd;background:#ececea;color:#7b7c7d}
.intro-browser span{width:9px;height:9px;border-radius:50%;background:#bbb}
.intro-browser span:first-child{background:var(--red)}
.intro-browser em{margin-left:12px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-intro--websites .paper-meta span{padding:0 12px;border:1px solid #d7d7d3;border-radius:3px;background:#fff}
.project-intro--websites .intro-number{font-variant-numeric:tabular-nums}

/* 02 — Card game: a physical playing card */
.detail-hero--cardgame::after{background:linear-gradient(90deg,rgba(7,9,12,.76),rgba(7,9,12,.14))}
.project-intro--cardgame{max-width:min(740px,68vw)!important;min-height:490px!important;background:#f6f0e5;border-radius:34px;border:1px solid rgba(255,255,255,.62);box-shadow:18px 18px 0 rgba(113,17,20,.86),36px 36px 0 rgba(245,244,239,.17),0 34px 100px rgba(0,0,0,.36);transform:rotate(-1deg)!important;padding:72px 72px 64px!important}
.project-intro--cardgame h1{font-size:clamp(64px,7.5vw,108px);max-width:560px}
.project-intro--cardgame p{max-width:530px}
.project-intro--cardgame .eyebrow{color:#7d2023}
.project-intro--cardgame .paper-meta span{padding:0 12px;border:1px solid rgba(125,32,35,.25);border-radius:999px;color:#7d2023}
.project-intro--cardgame .intro-number{color:rgba(125,32,35,.075)}
.card-corner{position:absolute;z-index:2;display:grid;justify-items:center;color:#921e25;font-weight:900;line-height:1}
.card-corner span{font-size:25px}.card-corner i{font-style:normal;font-size:18px;margin-top:4px}.card-corner--top{left:23px;top:22px}.card-corner--bottom{right:23px;bottom:22px;transform:rotate(180deg)}
.card-stack{position:absolute;right:-28px;top:80px;width:210px;height:260px;opacity:.14;transform:rotate(10deg)}
.card-stack i{position:absolute;inset:0;border:3px solid #7d2023;border-radius:24px}.card-stack i:nth-child(2){transform:translate(-22px,18px) rotate(-8deg)}.card-stack i:nth-child(3){transform:translate(-43px,42px) rotate(-16deg)}
.project-intro--cardgame .intro-foot{left:72px;right:72px}

/* 03 — Music: dark record sleeve / waveform */
.detail-hero--music::after{background:radial-gradient(circle at 72% 45%,rgba(255,52,52,.17),transparent 23%),linear-gradient(90deg,rgba(5,6,9,.88),rgba(5,6,9,.18))}
.project-intro--music{max-width:min(850px,73vw)!important;min-height:470px!important;background:linear-gradient(135deg,rgba(24,25,29,.97),rgba(8,9,12,.98));color:#fff;border:1px solid rgba(255,255,255,.13);box-shadow:0 40px 120px rgba(0,0,0,.48);padding:68px 72px 86px!important}
.project-intro--music::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.045) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.035) 50%,transparent 50.2%);background-size:72px 72px;mask-image:linear-gradient(90deg,#000,transparent 82%)}
.project-intro--music .eyebrow,.project-intro--music p{color:rgba(255,255,255,.62)}
.project-intro--music h1{font-size:clamp(54px,6.4vw,92px);line-height:.88}
.project-intro--music p{max-width:510px}
.project-intro--music .paper-meta span{padding:0 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff}
.project-intro--music .intro-number{color:rgba(255,255,255,.045)}
.project-intro--music .intro-foot{left:72px;right:72px;color:rgba(255,255,255,.5)}
.music-disc{position:absolute;z-index:1;width:300px;height:300px;border-radius:50%;right:-60px;top:50%;transform:translateY(-50%);border:1px solid rgba(255,255,255,.13);background:repeating-radial-gradient(circle,rgba(255,255,255,.08) 0 1px,transparent 2px 7px),radial-gradient(circle at center,var(--red) 0 8%,#111 8.5% 19%,transparent 19.5%)}
.music-disc i{position:absolute;width:10px;height:10px;border-radius:50%;background:#050609;left:50%;top:50%;transform:translate(-50%,-50%)}
.waveform{position:absolute;z-index:2;left:72px;right:250px;bottom:55px;height:34px;display:flex;align-items:center;gap:5px;opacity:.8}
.waveform i{display:block;width:3px;height:var(--h,20%);background:var(--red);border-radius:4px}.waveform i:nth-child(3n){--h:85%}.waveform i:nth-child(4n){--h:50%}.waveform i:nth-child(5n){--h:100%}.waveform i:nth-child(7n){--h:32%}

/* 04 — 3D: viewport / technical drawing */
.detail-hero--three-d::after{background:linear-gradient(90deg,rgba(3,5,7,.9),rgba(3,5,7,.15))}
.project-intro--three-d{max-width:min(850px,73vw)!important;min-height:500px!important;background-color:rgba(14,18,21,.96);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:26px 26px;color:#fff;border:1px solid rgba(255,255,255,.18);clip-path:polygon(0 0,96% 0,100% 9%,100% 100%,4% 100%,0 91%)!important;box-shadow:0 40px 120px rgba(0,0,0,.45);padding:68px 72px 70px!important}
.project-intro--three-d::before{content:"";position:absolute;z-index:1;inset:14px;border:1px solid rgba(255,52,52,.32);clip-path:inherit;pointer-events:none}
.project-intro--three-d .eyebrow,.project-intro--three-d p{color:rgba(255,255,255,.61)}
.project-intro--three-d h1{font-size:clamp(54px,6.4vw,90px);line-height:.9}
.project-intro--three-d p{max-width:560px}
.project-intro--three-d .paper-meta span{padding:0 11px;border:1px solid rgba(255,255,255,.2);border-radius:2px;color:#fff;background:rgba(0,0,0,.17)}
.project-intro--three-d .intro-number{color:rgba(255,255,255,.045)}
.project-intro--three-d .intro-foot{left:72px;right:72px;color:rgba(255,255,255,.5)}
.axis{position:absolute;z-index:3;font-size:9px;font-weight:900;color:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}.axis--x{right:42px;bottom:38px;background:#dc3e42}.axis--y{right:66px;bottom:58px;background:#4d9b67}.axis--z{right:20px;bottom:58px;background:#4b71bd}
.wire-object{position:absolute;z-index:1;right:54px;top:70px;width:245px;height:245px;opacity:.23;transform:rotate(-12deg)}
.wire-object::before,.wire-object::after,.wire-object i{content:"";position:absolute;inset:0;border:1px solid #fff;transform:rotate(45deg)}
.wire-object::after{transform:rotate(0deg) scale(.72)}.wire-object i:nth-child(1){transform:rotate(22.5deg) scale(.88)}.wire-object i:nth-child(2){transform:rotate(67.5deg) scale(.88)}.wire-object i:nth-child(3){border-radius:50%;transform:scale(.62)}

/* 05 — Photography: contact sheet / film frame */
.detail-hero--photography::after{background:linear-gradient(90deg,rgba(7,9,12,.78),rgba(7,9,12,.11))}
.project-intro--photography{max-width:min(770px,69vw)!important;min-height:480px!important;background:#ebe6dc;border:14px solid #faf9f5;box-shadow:0 34px 100px rgba(0,0,0,.38);padding:74px 72px 74px!important;transform:rotate(.65deg)!important}
.project-intro--photography::before{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 38%),linear-gradient(0deg,rgba(35,35,35,.025),rgba(35,35,35,.025));pointer-events:none}
.project-intro--photography .eyebrow{color:#67625b}
.project-intro--photography h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-style:italic;font-size:clamp(64px,7.8vw,108px);letter-spacing:-.07em}
.project-intro--photography p{max-width:540px;color:#625f5a}
.project-intro--photography .paper-meta span{padding:0 12px;border-bottom:1px solid #88817a;color:#4f4b46}
.project-intro--photography .intro-number{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;color:rgba(17,18,20,.07)}
.project-intro--photography .intro-foot{left:72px;right:72px;color:rgba(17,18,20,.5)}
.film-edge{position:absolute;z-index:3;left:-14px;right:-14px;height:14px;background:repeating-linear-gradient(90deg,#111 0 20px,transparent 20px 34px)}.film-edge--top{top:-14px}.film-edge--bottom{bottom:-14px}
.focus-mark{position:absolute;z-index:2;right:55px;top:68px;width:136px;height:136px;border:1px solid rgba(17,18,20,.17);border-radius:50%}
.focus-mark::before,.focus-mark::after{content:"";position:absolute;background:rgba(17,18,20,.13)}.focus-mark::before{left:50%;top:-18px;bottom:-18px;width:1px}.focus-mark::after{top:50%;left:-18px;right:-18px;height:1px}
.focus-mark i{position:absolute;width:25px;height:25px;border-color:#111;border-style:solid}.focus-mark i:nth-child(1){left:15px;top:15px;border-width:1px 0 0 1px}.focus-mark i:nth-child(2){right:15px;top:15px;border-width:1px 1px 0 0}.focus-mark i:nth-child(3){right:15px;bottom:15px;border-width:0 1px 1px 0}.focus-mark i:nth-child(4){left:15px;bottom:15px;border-width:0 0 1px 1px}

@media(max-width:900px){
  .paper-sheet.project-intro{max-width:min(820px,calc(100vw - 60px));min-height:430px;padding:68px 42px 58px}
  .project-intro .intro-foot{left:42px;right:42px}
  .project-intro--cardgame,.project-intro--music,.project-intro--three-d,.project-intro--photography{max-width:min(760px,calc(100vw - 60px))!important}
  .project-intro--cardgame{padding-left:55px!important;padding-right:55px!important}.project-intro--cardgame .intro-foot{left:55px;right:55px}
  .project-intro--music,.project-intro--three-d,.project-intro--photography{padding-left:50px!important;padding-right:50px!important}.project-intro--music .intro-foot,.project-intro--three-d .intro-foot,.project-intro--photography .intro-foot{left:50px;right:50px}
  .music-disc{right:-120px;opacity:.65}.wire-object{right:-30px}.focus-mark{right:28px;opacity:.55}
}
@media(max-width:640px){
  .detail-hero{min-height:610px}.detail-paper{padding-top:94px;padding-bottom:45px}
  .paper-sheet.project-intro{max-width:calc(100vw - 30px)!important;min-height:430px!important;padding:68px 27px 58px!important;border-radius:0;transform:none!important}
  .project-intro h1{font-size:clamp(49px,15vw,70px)}
  .project-intro p{font-size:15px;line-height:1.65}
  .project-intro .intro-number{right:18px;top:20px;font-size:88px}
  .project-intro .intro-foot,.project-intro--cardgame .intro-foot,.project-intro--music .intro-foot,.project-intro--three-d .intro-foot,.project-intro--photography .intro-foot{left:27px;right:27px}
  .project-intro--websites{padding-top:88px!important;border-radius:12px}.intro-browser{height:48px}.project-intro--websites::before{top:48px;width:4px}
  .project-intro--cardgame{border-radius:25px!important;box-shadow:9px 11px 0 rgba(113,17,20,.86),18px 22px 0 rgba(245,244,239,.15),0 28px 80px rgba(0,0,0,.36)}.card-stack{right:-85px;opacity:.08}.card-corner--bottom{bottom:17px}
  .project-intro--music h1,.project-intro--three-d h1{font-size:clamp(47px,14vw,66px)}.music-disc{width:220px;height:220px;right:-120px;top:35%;opacity:.45}.waveform{left:27px;right:27px;bottom:52px;height:24px}.project-intro--music .intro-foot{bottom:18px}
  .project-intro--three-d{clip-path:polygon(0 0,94% 0,100% 7%,100% 100%,6% 100%,0 93%)!important}.wire-object{width:170px;height:170px;right:-48px;top:66px;opacity:.15}.axis{display:none}
  .project-intro--photography{border-width:9px!important}.film-edge{left:-9px;right:-9px;height:9px;background-size:auto 9px}.film-edge--top{top:-9px}.film-edge--bottom{bottom:-9px}.focus-mark{width:100px;height:100px;right:-18px;top:58px;opacity:.33}
}


/* ========================================================================== 
   Visual-first project pages — see the work before reading the case study
   ========================================================================== */
.visual-first-hero{min-height:clamp(580px,76svh,860px);display:flex;align-items:flex-end;isolation:isolate;background:#07090c}
.visual-first-hero .detail-hero-media{position:absolute;inset:0;z-index:0}
.visual-first-hero .detail-hero-media img{width:100%;height:100%;object-fit:cover;filter:none;opacity:1;transform:scale(1.015);animation:visualHeroIn 1.25s var(--ease) both}
@keyframes visualHeroIn{from{opacity:.2;transform:scale(1.065)}to{opacity:1;transform:scale(1.015)}}
.visual-first-hero::after{display:none}
.visual-first-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,7,10,.08) 8%,rgba(5,7,10,.18) 42%,rgba(5,7,10,.92) 100%),linear-gradient(90deg,rgba(5,7,10,.74),transparent 68%)}
.visual-first-hero-copy{position:relative;z-index:2;color:#fff;padding-top:150px;padding-bottom:74px}
.visual-first-kicker{display:flex;align-items:center;gap:14px;font-size:10px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.visual-first-kicker span:first-child{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:#fff}
.visual-first-hero h1{font-size:clamp(72px,10vw,150px);line-height:.78;letter-spacing:-.075em;margin-top:24px;max-width:1050px;text-wrap:balance}
.visual-first-hero-copy>p{max-width:660px;margin-top:30px;font-size:clamp(17px,1.45vw,21px);line-height:1.65;color:rgba(255,255,255,.72)}
.visual-first-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.visual-first-meta span{padding:9px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(7,9,12,.18);backdrop-filter:blur(12px);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.visual-first-jump{display:inline-flex;align-items:center;gap:9px;margin-top:32px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.52);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;transition:transform .3s var(--ease),border-color .3s}
.visual-first-jump:hover{transform:translateY(3px);border-color:var(--red)}
.detail-hero--websites .visual-first-shade{background:linear-gradient(180deg,rgba(4,6,8,.1),rgba(4,6,8,.9)),linear-gradient(90deg,rgba(4,6,8,.85),transparent 72%)}
.detail-hero--cardgame .visual-first-shade{background:linear-gradient(180deg,rgba(36,8,10,.06),rgba(11,5,7,.93)),linear-gradient(90deg,rgba(18,5,7,.8),transparent 70%)}
.detail-hero--music .visual-first-shade{background:linear-gradient(180deg,rgba(5,6,10,.04),rgba(5,6,10,.94)),radial-gradient(circle at 70% 35%,rgba(255,52,52,.12),transparent 35%)}
.detail-hero--three-d .visual-first-shade{background:linear-gradient(180deg,rgba(4,7,9,.02),rgba(4,7,9,.95)),linear-gradient(90deg,rgba(4,7,9,.72),transparent 70%)}
.detail-hero--photography .visual-first-shade{background:linear-gradient(180deg,rgba(7,7,8,.06),rgba(7,7,8,.91)),linear-gradient(90deg,rgba(7,7,8,.5),transparent 65%)}

.visual-first-showcase{padding:88px 0 112px;background:#111317;color:#fff;overflow:hidden}
.visual-first-showcase-head{display:grid;grid-template-columns:minmax(260px,.72fr) 1.28fr;gap:7vw;align-items:end;margin-bottom:40px}
.visual-first-showcase-head .eyebrow{grid-column:1/-1;margin-bottom:-10px;color:var(--red)}
.visual-first-showcase-head h2{font-size:clamp(44px,6vw,84px);max-width:650px}
.visual-first-showcase-head p{max-width:580px;color:rgba(255,255,255,.58);font-size:16px}
.visual-first-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.visual-first-card{position:relative;grid-column:span 6;min-height:390px;overflow:hidden;background:#1b1d22;isolation:isolate;cursor:pointer}
.visual-first-card--wide{grid-column:span 7;grid-row:span 2;min-height:660px}
.visual-first-card--portrait{grid-column:span 3;min-height:530px}
.visual-first-card--square{grid-column:span 3;min-height:auto;aspect-ratio:1}
.visual-first-card picture,.visual-first-card img{width:100%;height:100%}
.visual-first-card picture{position:absolute;inset:0}
.visual-first-card img{object-fit:cover;filter:grayscale(.7) brightness(.82);transition:transform .8s var(--ease),filter .6s var(--ease)}
.visual-first-card::before{content:attr(data-index);position:absolute;z-index:3;left:17px;top:15px;display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(7,9,12,.24);backdrop-filter:blur(10px);font-size:9px;font-weight:900;letter-spacing:.08em}
.visual-first-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(4,5,7,.86));transition:opacity .4s}
.visual-first-card-caption{position:absolute;z-index:2;left:22px;right:22px;bottom:20px;display:flex;align-items:end;justify-content:space-between;gap:18px;color:#fff}
.visual-first-card-caption>span{display:flex;flex-direction:column;gap:5px}
.visual-first-card-caption small{font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.visual-first-card-caption strong{font-size:clamp(22px,2.2vw,35px);line-height:1;letter-spacing:-.04em}
.visual-first-card-caption b{font-size:10px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.visual-first-card:hover img{filter:grayscale(0) brightness(.95);transform:scale(1.035)}
.visual-first-card:hover .visual-first-card-caption b{opacity:1;transform:none}
.visual-first-card:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.visual-first-showcase--websites .visual-first-card:not(.visual-first-card--wide){grid-column:span 5;min-height:323px}
.visual-first-showcase--websites .visual-first-card img{object-position:top}
.visual-first-showcase--cardgame .visual-first-grid{gap:18px;perspective:1400px}
.visual-first-showcase--cardgame .visual-first-card{border:7px solid #f4f0e7;border-radius:20px;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.visual-first-showcase--cardgame .visual-first-card:nth-child(1){transform:rotate(-2deg) translateY(24px)}
.visual-first-showcase--cardgame .visual-first-card:nth-child(2){transform:rotate(1.5deg)}
.visual-first-showcase--cardgame .visual-first-card:nth-child(3){transform:rotate(-1deg) translateY(12px)}
.visual-first-showcase--cardgame .visual-first-card:nth-child(4){transform:rotate(2.3deg) translateY(30px)}
.visual-first-showcase--music{background:#0a0b0f}
.visual-first-showcase--music .visual-first-card{border-radius:4px;box-shadow:0 30px 65px rgba(0,0,0,.35)}
.visual-first-showcase--three-d .visual-first-card:nth-child(n+2){grid-column:span 5;min-height:323px}
.visual-first-showcase--three-d .visual-first-card:nth-child(4),.visual-first-showcase--three-d .visual-first-card:nth-child(5){grid-column:span 6;min-height:390px}
.visual-first-showcase--photography{background:#e8e4db;color:var(--ink)}
.visual-first-showcase--photography .visual-first-showcase-head p{color:#66625d}
.visual-first-showcase--photography .visual-first-card{grid-column:span 4;min-height:590px;border:9px solid #f8f6f0;box-shadow:0 22px 55px rgba(20,18,14,.12)}
.visual-first-showcase--photography .visual-first-card:nth-child(2),.visual-first-showcase--photography .visual-first-card:nth-child(5){transform:translateY(28px)}

.visual-first-showcase + .project-summary{margin-top:0;padding-top:34px;padding-bottom:34px;border-bottom:1px solid var(--line)}
.project-brief--after-visuals{margin-top:70px;margin-bottom:120px;padding-top:95px;border-top:1px solid var(--line)}

/* Individual case studies: image-first hero and gallery-first reading order */
.visual-first-case-hero{min-height:clamp(600px,82svh,900px);display:flex;align-items:flex-end}
.visual-first-case-hero>img{filter:none;opacity:1}
.visual-first-case-hero .project-hero-overlay{background:linear-gradient(180deg,rgba(4,5,7,.03),rgba(4,5,7,.88)),linear-gradient(90deg,rgba(4,5,7,.45),transparent 66%)}
.visual-first-case-hero .detail-paper{width:var(--shell);padding:0 0 58px;margin:auto}
.project-detail-caption{position:relative;max-width:760px;padding:30px 34px 32px;color:#fff;background:rgba(7,9,12,.72);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(20px);box-shadow:0 28px 85px rgba(0,0,0,.3)}
.project-detail-caption h1{font-size:clamp(44px,6vw,82px);line-height:.9;margin-top:8px}
.project-detail-caption p{max-width:650px;margin-top:18px;color:rgba(255,255,255,.68);font-size:16px;line-height:1.65}
.project-detail-caption .eyebrow{color:var(--red);margin-bottom:0}
.project-detail-caption .paper-meta{margin-top:20px;color:#fff}
.project-detail-caption .paper-meta span{padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
.project-detail-jump{margin-top:22px}
#project-gallery{padding-top:86px}
#project-gallery .detail-heading{margin-bottom:36px}
#project-gallery .project-gallery{grid-template-columns:repeat(12,1fr);gap:12px}
#project-gallery .gallery-item{grid-column:span 4;min-height:360px}
#project-gallery .gallery-item:first-child{grid-column:span 8;grid-row:span 2;min-height:732px}
#project-gallery .gallery-item img{min-height:100%;height:100%;object-fit:cover}
#project-gallery + .project-overview{padding-top:105px}

@media(max-width:900px){
 .visual-first-hero{min-height:680px}.visual-first-hero-copy{padding-bottom:58px}.visual-first-hero h1{font-size:clamp(68px,15vw,112px)}
 .visual-first-showcase-head{grid-template-columns:1fr;gap:18px}.visual-first-showcase-head .eyebrow{grid-column:auto;margin-bottom:0}
 .visual-first-card,.visual-first-card--wide{grid-column:span 12;grid-row:auto;min-height:480px}
 .visual-first-showcase--websites .visual-first-card:not(.visual-first-card--wide),.visual-first-showcase--three-d .visual-first-card:nth-child(n+2),.visual-first-showcase--three-d .visual-first-card:nth-child(4),.visual-first-showcase--three-d .visual-first-card:nth-child(5){grid-column:span 6;min-height:360px}
 .visual-first-card--portrait,.visual-first-card--square{grid-column:span 6;min-height:480px;aspect-ratio:auto}
 .visual-first-showcase--photography .visual-first-card{grid-column:span 6;min-height:540px}
 #project-gallery .gallery-item,#project-gallery .gallery-item:first-child{grid-column:span 6;grid-row:auto;min-height:420px}
}
@media(max-width:640px){
 .visual-first-hero{min-height:620px}.visual-first-hero-copy{padding-top:120px;padding-bottom:40px}.visual-first-hero h1{font-size:clamp(58px,18vw,82px);margin-top:18px}.visual-first-hero-copy>p{font-size:15px;margin-top:22px}.visual-first-meta{margin-top:20px}.visual-first-jump{margin-top:23px}
 .visual-first-showcase{padding:68px 0 78px}.visual-first-showcase-head{margin-bottom:28px}.visual-first-showcase-head h2{font-size:clamp(42px,13vw,60px)}
 .visual-first-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 15px 18px;margin:0 -15px;scrollbar-width:none}.visual-first-grid::-webkit-scrollbar{display:none}
 .visual-first-card,.visual-first-card--wide,.visual-first-card--portrait,.visual-first-card--square,.visual-first-showcase--websites .visual-first-card:not(.visual-first-card--wide),.visual-first-showcase--three-d .visual-first-card:nth-child(n+2),.visual-first-showcase--three-d .visual-first-card:nth-child(4),.visual-first-showcase--three-d .visual-first-card:nth-child(5),.visual-first-showcase--photography .visual-first-card{flex:0 0 82vw;min-height:520px;aspect-ratio:auto;scroll-snap-align:center;transform:none!important;border-width:5px}
 .visual-first-showcase--websites .visual-first-card{min-height:420px}.visual-first-showcase--websites .visual-first-card img{object-position:top}
 .visual-first-showcase--music .visual-first-card{min-height:auto;aspect-ratio:1}.visual-first-showcase--photography .visual-first-card{min-height:560px}
 .visual-first-card-caption{left:16px;right:16px;bottom:15px}.visual-first-card-caption b{display:none}
 .visual-first-showcase + .project-summary{padding-top:24px;padding-bottom:24px}
 .project-brief--after-visuals{margin-top:35px;margin-bottom:80px;padding-top:70px}
 .visual-first-case-hero{min-height:690px}.visual-first-case-hero .detail-paper{padding-bottom:28px}.project-detail-caption{padding:24px 22px 25px}.project-detail-caption h1{font-size:clamp(40px,13vw,62px)}.project-detail-caption p{font-size:14px}.project-detail-caption .paper-meta{gap:7px}
 #project-gallery{padding-top:68px}#project-gallery .detail-heading{margin-bottom:25px}#project-gallery .project-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -15px;padding:0 15px 18px}#project-gallery .gallery-item,#project-gallery .gallery-item:first-child{flex:0 0 84vw;min-height:520px;scroll-snap-align:center}
}


/* 3D project hub: direct project access before explanatory content */
.three-d-hub-hero{min-height:clamp(560px,68svh,720px)}
.three-d-hub-hero .visual-first-hero-copy{padding-bottom:48px}
.three-d-hub-hero .visual-first-hero-copy>p{max-width:760px}
.three-d-hero-project-nav{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px;max-width:1050px}
.three-d-hero-project-nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(5,7,10,.3);backdrop-filter:blur(14px);font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.82);transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.three-d-hero-project-nav a span{color:var(--red)}
.three-d-hero-project-nav a:hover{transform:translateY(-2px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);color:#fff}
.three-d-project-hub{padding:66px 0 84px;background:#0b0d10;color:#fff;overflow:hidden}
.three-d-project-hub-head{display:grid;grid-template-columns:minmax(320px,.8fr) 1.2fr;gap:8vw;align-items:end;margin-bottom:30px}
.three-d-project-hub-head .eyebrow{color:var(--red);margin-bottom:10px}
.three-d-project-hub-head h2{font-size:clamp(42px,5.5vw,76px)}
.three-d-project-hub-head p{max-width:620px;color:rgba(255,255,255,.58);font-size:15px}
.three-d-project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:12px}
.three-d-project-card{position:relative;grid-column:span 5;min-height:340px;overflow:hidden;background:#17191d;color:#fff;isolation:isolate}
.three-d-project-card--feature{grid-column:span 7;grid-row:span 2;min-height:692px}
.three-d-project-card:nth-child(4),.three-d-project-card:nth-child(5),.three-d-project-card:nth-child(6){grid-column:span 4;min-height:350px}
.three-d-project-card--wide{grid-column:span 12;min-height:390px}
.three-d-project-card picture,.three-d-project-card img{position:absolute;inset:0;width:100%;height:100%}
.three-d-project-card img{object-fit:cover;filter:grayscale(.7) brightness(.76);transition:transform .75s var(--ease),filter .55s var(--ease)}
.three-d-project-card--wide img{object-position:center 46%}
.three-d-project-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,5,7,.04) 28%,rgba(4,5,7,.9) 100%),linear-gradient(90deg,rgba(4,5,7,.32),transparent 62%);transition:opacity .35s}
.three-d-project-index{position:absolute;z-index:3;left:16px;top:16px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.36);border-radius:50%;background:rgba(6,8,10,.28);backdrop-filter:blur(10px);font-size:9px;font-weight:900;letter-spacing:.08em}
.three-d-project-info{position:absolute;z-index:3;left:20px;right:20px;bottom:18px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:5px 18px}
.three-d-project-info small{grid-column:1/-1;font-size:9px;font-style:normal;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.three-d-project-info strong{font-size:clamp(24px,2.8vw,42px);line-height:.95;letter-spacing:-.045em}
.three-d-project-info em{font-size:9px;font-style:normal;font-weight:850;letter-spacing:.07em;text-transform:uppercase;opacity:0;transform:translateY(7px);transition:.3s var(--ease)}
.three-d-project-card:hover img{filter:grayscale(0) brightness(.96);transform:scale(1.035)}
.three-d-project-card:hover .three-d-project-info em{opacity:1;transform:none}
.three-d-project-card:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.three-d-project-summary{margin-top:0;padding-top:30px;padding-bottom:30px;border-bottom:1px solid var(--line)}

@media(max-width:900px){
 .three-d-hub-hero{min-height:650px}
 .three-d-project-hub-head{grid-template-columns:1fr;gap:14px}
 .three-d-project-card,.three-d-project-card--feature,.three-d-project-card:nth-child(4),.three-d-project-card:nth-child(5),.three-d-project-card:nth-child(6),.three-d-project-card--wide{grid-column:span 6;grid-row:auto;min-height:390px}
 .three-d-project-card--feature{grid-column:span 12;min-height:560px}
 .three-d-project-card--wide{grid-column:span 12}
}
@media(max-width:640px){
 .three-d-hub-hero{min-height:600px}
 .three-d-hub-hero .visual-first-hero-copy{padding-bottom:28px}
 .three-d-hero-project-nav{flex-wrap:nowrap;overflow-x:auto;margin-right:-15px;padding-right:15px;padding-bottom:8px;scrollbar-width:none}
 .three-d-hero-project-nav::-webkit-scrollbar{display:none}
 .three-d-hero-project-nav a{flex:0 0 auto}
 .three-d-project-hub{padding:54px 0 68px}
 .three-d-project-hub-head{margin-bottom:22px}
 .three-d-project-hub-head h2{font-size:clamp(40px,13vw,58px)}
 .three-d-project-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -15px;padding:0 15px 16px;scrollbar-width:none}
 .three-d-project-grid::-webkit-scrollbar{display:none}
 .three-d-project-card,.three-d-project-card--feature,.three-d-project-card:nth-child(4),.three-d-project-card:nth-child(5),.three-d-project-card:nth-child(6),.three-d-project-card--wide{flex:0 0 80vw;min-height:500px;grid-column:auto;grid-row:auto;scroll-snap-align:center}
 .three-d-project-info{left:16px;right:16px;bottom:15px;grid-template-columns:1fr}
 .three-d-project-info strong{font-size:31px}
 .three-d-project-info em{display:none}
}


/* ========================================================================== 
   Portfolio polish: compact 3D archive, direct facts and visual-first studies
   ========================================================================== */

/* 3D hub: quieter entry and a denser, more informative gallery. */
.page-three-d .project-rail--hidden-on-3d-hub{display:none!important}
.three-d-hub-hero{min-height:clamp(520px,61svh,650px)}
.three-d-hub-hero .visual-first-hero-copy{padding-top:clamp(110px,15vh,150px);padding-bottom:34px}
.three-d-hub-hero .visual-first-hero-copy h1{font-size:clamp(58px,8vw,112px)}
.three-d-hub-hero .visual-first-hero-copy>p{max-width:720px;font-size:clamp(15px,1.3vw,18px)}
.three-d-hub-hero .three-d-hero-project-nav{margin-top:20px}
.three-d-project-hub{padding:48px 0 72px}
.three-d-project-hub-head{grid-template-columns:minmax(270px,.7fr) minmax(330px,1fr);gap:clamp(36px,6vw,92px);margin-bottom:24px;align-items:end}
.three-d-project-hub-head h2{font-size:clamp(40px,4.6vw,64px)}
.three-d-project-hub-head p{font-size:14px;line-height:1.65;max-width:560px}
.three-d-project-grid{gap:10px}
.three-d-project-card{transition:opacity .35s var(--ease),transform .4s var(--ease),filter .35s var(--ease)}
.three-d-project-card img{filter:grayscale(.58) brightness(.84);transform:scale(1.001);transition:transform .65s var(--ease),filter .45s var(--ease)}
.three-d-project-card::after{background:linear-gradient(180deg,rgba(4,5,7,.02) 22%,rgba(4,5,7,.94) 100%),linear-gradient(90deg,rgba(4,5,7,.22),transparent 66%)}
.three-d-project-info{grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;bottom:20px}
.three-d-project-info small{grid-column:1/-1}
.three-d-project-info strong{grid-column:1;font-size:clamp(25px,2.65vw,40px)}
.three-d-project-description{grid-column:1;max-width:570px;color:rgba(255,255,255,.69);font-size:12px;line-height:1.48}
.three-d-project-info em{grid-column:2;grid-row:2/4;align-self:end;opacity:.72;transform:none;white-space:nowrap}
.three-d-project-arrow{position:absolute;right:16px;top:16px;z-index:4;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(7,9,12,.42);border:1px solid rgba(255,255,255,.28);font-size:17px;backdrop-filter:blur(10px);transition:transform .35s var(--ease),background .35s}
.three-d-project-detail-shot{position:absolute;right:22px;top:70px;z-index:3;width:min(31%,250px);aspect-ratio:1.45;overflow:hidden;border:5px solid rgba(247,246,242,.94);box-shadow:0 20px 50px rgba(0,0,0,.34);transform:rotate(2.2deg);transition:transform .5s var(--ease)}
.three-d-project-detail-shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.96)!important;transform:none!important}
.three-d-project-card.card--robot>picture img{object-position:center 48%;filter:grayscale(.28) brightness(.9)}
.three-d-project-card.card--raptor>picture img{object-position:center 48%}
.three-d-project-card.card--elephant>picture img{object-position:center 42%}
.three-d-project-card.card--alarm>picture img{object-position:center 46%;filter:grayscale(.45) brightness(.98)}
.three-d-project-card.card--shoe>picture img{object-position:center 52%}
.three-d-project-card.card--basketball>picture img{object-position:center 50%}
.three-d-project-card.card--props{background:#d9dde0}
.three-d-project-card.card--props>picture img{object-fit:contain;padding:24px 12%;background:linear-gradient(135deg,#e6e8e9,#bcc3c7);filter:grayscale(.55) contrast(.95)}
@media(hover:hover) and (pointer:fine){
 .three-d-project-grid:has(.three-d-project-card:hover) .three-d-project-card:not(:hover){opacity:.68;filter:saturate(.72)}
 .three-d-project-card:hover{transform:translateY(-3px)}
 .three-d-project-card:hover img{filter:grayscale(0) brightness(.98);transform:scale(1.018)}
 .three-d-project-card:hover .three-d-project-arrow{transform:rotate(8deg) scale(1.08);background:var(--red)}
 .three-d-project-card:hover .three-d-project-detail-shot{transform:rotate(-1deg) translateY(-4px) scale(1.025)}
}

/* Correct seven-project progress rail for the overview. */
.three-d-side-index{position:fixed;right:clamp(12px,2vw,28px);top:50%;z-index:60;display:grid;gap:5px;transform:translateY(-50%)}
.three-d-side-index a{width:34px;height:28px;display:grid;place-items:center;border-radius:999px;color:rgba(255,255,255,.44);background:rgba(8,10,13,.44);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);font-size:8px;font-weight:850;letter-spacing:.08em;transition:.25s var(--ease)}
.three-d-side-index a:hover,.three-d-side-index a.active{width:46px;color:#fff;background:var(--red);border-color:var(--red)}

/* Fast, truthful project facts directly below every 3D hero. */
.case-quick-facts{background:#f5f4ef;border-bottom:1px solid var(--line)}
.case-quick-facts>.shell{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.case-quick-facts div{min-height:108px;padding:24px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:9px}
.case-quick-facts div:first-child{padding-left:0}
.case-quick-facts div:last-child{border-right:0;padding-right:0}
.case-quick-facts span{color:var(--red);font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.case-quick-facts strong{font-size:12px;line-height:1.45;font-weight:760}

/* Sticky visual index: gallery views first, explanatory sections afterwards. */
.case-view-nav{position:sticky;top:76px;z-index:80;background:rgba(245,244,239,.9);border-bottom:1px solid rgba(17,18,20,.12);backdrop-filter:blur(18px)}
.case-view-nav-inner{display:flex;align-items:center;gap:6px;min-height:50px;overflow-x:auto;scrollbar-width:none}
.case-view-nav-inner::-webkit-scrollbar{display:none}
.case-view-nav-label{flex:0 0 auto;margin-right:6px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.case-view-nav a{flex:0 0 auto;padding:8px 10px;border-radius:999px;color:#4f5154;font-size:9px;font-weight:800;letter-spacing:.04em;transition:.22s var(--ease)}
.case-view-nav a:hover,.case-view-nav a.active{color:#fff;background:#111}
.case-view-nav a.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.case-view-nav i{flex:0 0 1px;width:1px;height:18px;background:var(--line);margin:0 5px}
.project-gallery .gallery-item,.project-overview,.project-brief{scroll-margin-top:148px}
.project-gallery .gallery-item::after{content:attr(data-view-label);position:absolute;left:12px;bottom:12px;z-index:3;padding:6px 8px;border-radius:999px;background:rgba(7,9,12,.76);color:#fff;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:.28s var(--ease);pointer-events:none}
.project-gallery .gallery-item:hover::after,.project-gallery .gallery-item:focus-visible::after{opacity:1;transform:none}

/* Keep the explanatory sections visually secondary to the imagery. */
.page-work-roboter .project-overview,.page-work-raptor .project-overview,.page-work-elefant .project-overview,.page-work-wecker .project-overview,.page-work-schuh .project-overview,.page-work-basketball .project-overview,.page-work-stifte .project-overview{padding-top:96px}

@media(max-width:900px){
 .three-d-side-index{display:none}
 .three-d-project-hub-head{grid-template-columns:1fr;gap:10px}
 .three-d-project-description{font-size:11px}
 .case-quick-facts>.shell{grid-template-columns:repeat(2,minmax(0,1fr))}
 .case-quick-facts div:nth-child(2){border-right:0;padding-right:0}
 .case-quick-facts div:nth-child(3){padding-left:0;border-top:1px solid var(--line)}
 .case-quick-facts div:nth-child(4){border-top:1px solid var(--line)}
}
@media(max-width:640px){
 .three-d-hub-hero{min-height:470px}
 .three-d-hub-hero .visual-first-hero-copy{padding-top:116px;padding-bottom:24px}
 .three-d-hub-hero .visual-first-hero-copy h1{font-size:clamp(52px,18vw,76px)}
 .three-d-hub-hero .visual-first-hero-copy>p{font-size:14px;line-height:1.55;max-width:92%}
 .three-d-hub-hero .visual-first-meta,.three-d-hub-hero .three-d-hero-project-nav{display:none}
 .three-d-project-hub{padding-top:40px}
 .three-d-project-hub-head h2{font-size:clamp(38px,12vw,52px)}
 .three-d-project-hub-head p{font-size:13px}
 .three-d-project-card,.three-d-project-card--feature,.three-d-project-card:nth-child(4),.three-d-project-card:nth-child(5),.three-d-project-card:nth-child(6),.three-d-project-card--wide{min-height:465px}
 .three-d-project-info{grid-template-columns:1fr;gap:5px;bottom:17px}
 .three-d-project-info strong{font-size:30px}
 .three-d-project-description{grid-column:1;max-width:92%;font-size:11px}
 .three-d-project-info em{display:none}
 .three-d-project-detail-shot{width:34%;right:14px;top:62px;border-width:3px}
 .three-d-project-arrow{width:36px;height:36px}
 .case-quick-facts>.shell{grid-template-columns:1fr}
 .case-quick-facts div,.case-quick-facts div:first-child,.case-quick-facts div:nth-child(2),.case-quick-facts div:nth-child(3),.case-quick-facts div:nth-child(4),.case-quick-facts div:last-child{min-height:auto;padding:18px 0;border-right:0;border-top:1px solid var(--line)}
 .case-quick-facts div:first-child{border-top:0}
 .case-view-nav{top:67px}
 .case-view-nav-inner{margin-right:-15px;padding-right:15px}
 .case-view-nav-label{display:none}
 .project-gallery .gallery-item::after{opacity:1;transform:none}
}

/* The project-specific view navigation replaces the generic category rail on 3D case pages. */
.page-work-roboter .project-rail,.page-work-raptor .project-rail,.page-work-elefant .project-rail,.page-work-wecker .project-rail,.page-work-schuh .project-rail,.page-work-basketball .project-rail,.page-work-stifte .project-rail{display:none!important}


/* Typography refinement — Space Grotesk + Manrope */
:root{
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Manrope","Helvetica Neue",Arial,sans-serif;
}
html{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-weight:400;letter-spacing:-.008em}
button,input,textarea,select{font-family:inherit}
h1,h2,h3,h4,.brand-name{font-family:var(--font-display)}
h1,h2,h3{font-weight:600;letter-spacing:-.048em;line-height:.98}
h4{font-weight:600;letter-spacing:-.025em}
p{line-height:1.68}
.hero h1,.paper-sheet h1,.project-detail-hero h1,.visual-first-title h1{font-weight:600;letter-spacing:-.058em;line-height:.94}
.hero-lead,.manifesto-copy p,.detail-heading p,.project-story p{letter-spacing:-.014em}
.eyebrow,.editorial-label,.project-number,.project-rail,.mechanic-hint,
.paper-meta,.work-tags,.fact-tags,.project-facts,.visual-fact-strip,
.desktop-nav,.mobile-nav,.button,.layout-control,.project-reset{
  font-family:var(--font-body);
}
.eyebrow,.editorial-label,.paper-meta,.project-number,.mechanic-hint{
  font-weight:700;
  letter-spacing:.125em;
}
.desktop-nav,.mobile-nav,.button,.layout-control,.project-reset{font-weight:600;letter-spacing:-.012em}
.project-copy h3,.work-card-copy h3,.case-body h3,.visual-card-copy h2,.visual-card-copy h3{letter-spacing:-.042em}
.project-copy p,.case-body p,.work-card-copy p,.visual-card-copy p{letter-spacing:-.01em}
.brand-name{font-weight:600;letter-spacing:-.025em}
@media(max-width:640px){
  h1,h2,h3{letter-spacing:-.043em}
  .hero h1,.paper-sheet h1,.project-detail-hero h1,.visual-first-title h1{letter-spacing:-.052em}
  p{line-height:1.64}
}

/* ===== assets/css/award.css ===== */
/* Alexander Lampe — Award build
   Progressive enhancement only: the site remains readable without this file or JS. */

@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root){animation-duration:.72s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation-name:awardFadeOut}
::view-transition-new(root){animation-name:awardFadeIn}
::view-transition-group(project-hero){z-index:1100;animation-duration:.9s}
::view-transition-old(project-hero),::view-transition-new(project-hero){height:100%;object-fit:cover;overflow:clip}
@keyframes awardFadeOut{to{opacity:.15;filter:blur(7px)}}
@keyframes awardFadeIn{from{opacity:.15;filter:blur(7px)}}

:root{
  --display:var(--font-display,"Space Grotesk"),"Helvetica Neue",Arial,sans-serif;
  --mono:var(--font-body,"Manrope"),"Helvetica Neue",Arial,sans-serif;
}
.award-build h1,.award-build h2,.award-build h3{font-family:var(--display)}
.award-build .eyebrow,.award-build .editorial-label,.award-build .project-number,.award-build .project-rail,.award-build .mechanic-hint{font-family:var(--mono)}

/* Hero keeps only the red beam contained in the original portrait image. */
.hero-coordinate{position:absolute;z-index:5;right:28px;bottom:28px;display:grid;text-align:right;font:700 9px/1.45 var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.48)}
.hero-coordinate b{color:rgba(255,255,255,.82)}

/* Native transition source/target names are activated only for the selected world. */
html[data-vt="websites"] .project-card[data-project="websites"] .project-visual,
.page-websites .detail-hero-media{view-transition-name:project-hero}
html[data-vt="cardgame"] .project-card[data-project="cardgame"] .project-visual,
.page-cardgame .detail-hero-media{view-transition-name:project-hero}
html[data-vt="music"] .project-card[data-project="music"] .project-visual,
.page-music .detail-hero-media{view-transition-name:project-hero}
html[data-vt="three-d"] .project-card[data-project="3d"] .project-visual,
.page-three-d .detail-hero-media{view-transition-name:project-hero}
html[data-vt="photography"] .project-card[data-project="photography"] .project-visual,
.page-photography .detail-hero-media{view-transition-name:project-hero}

/* The project journey is lighter and more editorial. */
.award-build .project-list{gap:clamp(150px,18vw,270px)}
.award-build .project-row{min-height:clamp(660px,67vw,850px)}
.award-build .project-copy h3{font-size:clamp(54px,6.4vw,94px)}
.award-build .project-copy p{max-width:350px}
.award-build .project-impact{font-size:18px;line-height:1.45}
.award-build .project-tags{opacity:.68;transition:opacity .35s}
.award-build .editorial-project:hover .project-tags{opacity:1}
.award-build .loose-frame{transform:translate3d(var(--parallax-x,0),var(--parallax-y,0),0) rotate(var(--base-rotation,0deg));transition:transform .65s var(--ease),box-shadow .45s,filter .45s}
.award-build .mechanic-hint{position:absolute;z-index:20;left:0;bottom:0;padding:8px 11px;border:1px solid rgba(16,17,19,.15);border-radius:99px;background:rgba(248,247,243,.82);backdrop-filter:blur(12px);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#666;transition:.35s}
.award-build .editorial-project:hover .mechanic-hint{color:var(--red);border-color:rgba(255,52,52,.35);transform:translateY(-4px)}

/* Website world: every image carries a social-impact statement. */
.website-frame::after{content:attr(data-impact);position:absolute;z-index:5;left:16px;right:16px;bottom:14px;padding:11px 13px;background:rgba(9,11,14,.88);color:#fff;font:700 10px/1.35 var(--mono);letter-spacing:.04em;transform:translateY(130%);opacity:0;transition:.45s var(--ease)}
.website-frame:hover::after,.editorial-project:focus-visible .website-frame::after{transform:none;opacity:1}
.website-frame figcaption{bottom:auto;top:25px}

/* Game world: fan amount is controlled by pointer drag / keyboard. */
.cardgame-composition{--fan:0}
.cardgame-composition .game-one{transform:translateX(calc(var(--fan) * -42px)) rotate(calc(-10deg - var(--fan) * 10deg))}
.cardgame-composition .game-two{transform:translateY(calc(var(--fan) * -28px)) rotate(calc(-2deg - var(--fan) * 4deg))}
.cardgame-composition .game-three{transform:translateX(calc(var(--fan) * 42px)) rotate(calc(9deg + var(--fan) * 10deg))}
.cardgame-composition .game-four{transform:translateY(calc(var(--fan) * 30px)) rotate(calc(3deg + var(--fan) * 2deg))}
.cardgame-composition.is-dragging{cursor:grabbing}
.cardgame-composition{cursor:grab;touch-action:pan-y}

/* Music world: JS writes --energy and --music-x. */
.music-composition{--energy:.35;--music-x:0}
.music-composition .music-disc{transform:translateX(calc(var(--music-x) * 12px)) rotate(calc(var(--music-x) * 5deg));animation-duration:calc(18s - var(--energy) * 8s)}
.music-composition .music-wave i{animation:none;transform-origin:center;transform:scaleY(calc(.25 + var(--energy) * var(--wave,1)))}
.music-composition .music-wave i:nth-child(1){--wave:.8}.music-composition .music-wave i:nth-child(2){--wave:1.8}.music-composition .music-wave i:nth-child(3){--wave:1.15}.music-composition .music-wave i:nth-child(4){--wave:2.15}.music-composition .music-wave i:nth-child(5){--wave:1.45}.music-composition .music-wave i:nth-child(6){--wave:.95}.music-composition .music-wave i:nth-child(7){--wave:1.7}

/* Home 3D process proof replaces a decorative collage when pointer/scrub is active. */
.home-process-stack{position:absolute;inset:5% 4% 5% 2%;z-index:7;overflow:hidden;background:#0c0d0f;box-shadow:0 35px 90px rgba(0,0,0,.25);clip-path:polygon(0 0,96% 2%,100% 94%,4% 100%);opacity:0;transform:scale(.96) rotate(-1.2deg);transition:.55s var(--ease)}
.home-process-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1);transition:opacity .5s var(--ease),filter .55s}
.home-process-stack img.is-current{opacity:1}
.home-process-stack .process-readout{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:11px;padding:9px 12px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);font:800 10px var(--mono);letter-spacing:.1em}
.home-process-stack .process-readout b{color:var(--red)}
.home-process-stack .process-readout i{font-style:normal}
.project-card[data-project="3d"].is-scrubbing .home-process-stack,.project-card[data-project="3d"]:hover .home-process-stack{opacity:1;transform:none}
.project-card[data-project="3d"].is-scrubbing .threed-frame,.project-card[data-project="3d"]:hover .threed-frame{opacity:.08;filter:blur(8px)}
.threed-composition{cursor:ew-resize}

/* End signature: the same red line resolves into AL. */
.signature-finale{position:relative;padding:120px 0 80px;background:#090b0e;color:#fff;overflow:hidden}
.signature-copy{display:flex;justify-content:space-between;gap:30px;align-items:end;position:relative;z-index:2}
.signature-copy .eyebrow{color:rgba(255,255,255,.5)}
.signature-copy p{font-family:Georgia,serif;font-size:clamp(20px,2.2vw,34px);color:rgba(255,255,255,.72)}
.signature-svg{display:block;width:100%;height:auto;margin-top:25px}
.signature-guide,.signature-active{fill:none;stroke-linecap:round;stroke-linejoin:round}
.signature-guide{stroke:rgba(255,255,255,.08);stroke-width:3}
.signature-active{stroke:var(--red);stroke-width:5;filter:drop-shadow(0 0 9px rgba(255,52,52,.5));stroke-dasharray:var(--signature-length,2200);stroke-dashoffset:var(--signature-offset,2200)}
.signature-name{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);font:800 clamp(11px,1vw,14px) var(--mono);letter-spacing:.55em;color:rgba(255,255,255,.55);white-space:nowrap}

/* Next-world navigation is part of the story, not a generic footer card. */
.next-world{background:#090b0e;color:#fff;padding:0 0 110px}
.next-world-link{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;width:var(--shell);margin:auto;padding:75px 0 38px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);overflow:hidden}
.next-world-link::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:.7s var(--ease)}
.next-world-link:hover::before{transform:scaleX(1)}
.next-world-link .eyebrow{grid-column:1/-1;color:rgba(255,255,255,.45)}
.next-world-link strong{font:700 clamp(48px,8vw,110px)/.88 var(--display);letter-spacing:-.07em}
.next-world-link p{align-self:end;max-width:320px;color:rgba(255,255,255,.58)}
.next-world-link i{position:absolute;right:0;top:48px;font-style:normal;font-size:40px;transition:.4s var(--ease)}
.next-world-link:hover i{transform:translate(10px,-10px) rotate(45deg);color:var(--red)}
.next-world.compact{padding-top:80px}

/* Websites detail: a sticky, scroll-driven editorial impact story. */
.web-impact-story{height:320vh;background:#0a0c0f;color:#fff;position:relative}
.web-impact-sticky{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;align-items:center;padding:110px 0 60px}
.web-impact-copy h2{font-size:clamp(46px,6vw,88px)}
.web-impact-copy p{font-family:Georgia,serif;font-size:clamp(21px,2.4vw,34px);color:rgba(255,255,255,.67);margin-top:28px;min-height:2.8em}
.web-impact-progress{width:100%;height:2px;background:rgba(255,255,255,.13);margin-top:35px}.web-impact-progress i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--impact-progress,0))}
.web-impact-stack{height:min(72vh,760px);position:relative;perspective:1500px}
.web-impact-stack article{position:absolute;inset:0;overflow:hidden;background:#16181c;border:7px solid #fff;box-shadow:0 45px 100px rgba(0,0,0,.42);transform:translate3d(0,var(--impact-y,80px),0) rotate(var(--impact-r,-4deg)) scale(var(--impact-scale,.9));opacity:var(--impact-opacity,0);transition:opacity .2s linear}
.web-impact-stack article:nth-child(2){--impact-r:3deg}.web-impact-stack article:nth-child(3){--impact-r:-1deg}
.web-impact-stack img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(.95);transition:filter .45s}
.web-impact-stack article.is-active img{filter:grayscale(0)}
.web-impact-stack span{position:absolute;left:18px;bottom:18px;padding:10px 12px;background:#fff;color:#111;font:800 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.web-impact-stack article::after{content:attr(data-index);position:absolute;right:18px;top:16px;color:#fff;font:800 12px var(--mono)}

/* Card game detail: tactile deck interaction. */
.deck-stage[data-drag-deck]{cursor:grab;touch-action:pan-y;outline:none;--deck-fan:.35}
.deck-stage[data-drag-deck].is-dragging{cursor:grabbing}
.deck-stage[data-drag-deck] .deck-card:nth-child(1){transform:translateX(calc(-120px * var(--deck-fan))) rotate(calc(-14deg * var(--deck-fan)))}
.deck-stage[data-drag-deck] .deck-card:nth-child(2){transform:translateY(calc(-34px * var(--deck-fan))) rotate(calc(-2deg * var(--deck-fan)))}
.deck-stage[data-drag-deck] .deck-card:nth-child(3){transform:translateX(calc(120px * var(--deck-fan))) rotate(calc(14deg * var(--deck-fan)))}
.deck-instruction,.music-stage-label{position:absolute;left:22px;bottom:20px;z-index:8;color:rgba(255,255,255,.7);font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.deck-instruction span,.music-stage-label span{color:var(--red);margin-right:8px}

/* Music detail: the pointer controls energy rather than adding decoration. */
.music-stage[data-reactive-music]{--music-energy:.38;--music-pan:0;outline:none}
.music-stage[data-reactive-music] .vinyl{transform:translateX(calc(var(--music-pan) * 30px));animation-duration:calc(18s - var(--music-energy) * 9s)}
.music-stage[data-reactive-music] .music-wave i{animation:none;transform-origin:bottom;transform:scaleY(calc(.25 + var(--music-energy) * 1.5));transition:transform .12s linear}

/* 3D: production proof becomes a sticky scroll sequence, but controls still work. */
.process-proof-section{min-height:300vh;position:relative;background:#eceae4}
.process-proof-section .shell{position:sticky;top:0;min-height:100svh;padding-top:105px;padding-bottom:45px;display:grid;align-content:center}
.process-proof-section .detail-heading{margin-bottom:28px}
.process-proof-section .mode-stage{min-height:min(68vh,720px)}
.mode-stage[data-process-story] img{filter:grayscale(1) contrast(1.04);transform:scale(1.025);transition:opacity .5s,filter .5s,transform .8s}
.mode-stage[data-process-story] img.active{filter:grayscale(0);transform:scale(1)}
.process-scroll-label{position:absolute;left:24px;top:24px;z-index:4;padding:12px 14px;background:rgba(8,10,13,.78);color:#fff;backdrop-filter:blur(14px);display:grid;grid-template-columns:auto 1fr;column-gap:10px;font:800 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.process-scroll-label b{color:var(--red)}.process-scroll-label i{grid-column:1/-1;font-style:normal;font-weight:500;color:rgba(255,255,255,.48);margin-top:4px}

/* Photography: one gallery, several visual rhythms. */
.photo-filters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.photo-filters button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:9px 13px;font:750 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.25s}
.photo-filters button.active,.photo-filters button:hover{background:#111;color:#fff;border-color:#111}
.gallery-item{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.gallery-item.is-filtered{opacity:.08;transform:scale(.94);pointer-events:none}
.photo-gallery[data-layout="portrait"] .gallery-grid{grid-template-columns:1.25fr .75fr 1fr}
.photo-gallery[data-layout="architecture"] .gallery-grid{grid-template-columns:1.4fr .8fr}
.photo-gallery[data-layout="night"] .gallery-grid{grid-template-columns:repeat(3,1fr)}
.photo-gallery[data-layout="objects"] .gallery-grid{grid-template-columns:.8fr 1.2fr .8fr}

/* Mobile is deliberately re-art-directed instead of simply stacked. */
@media(max-width:900px){
  .project-rail{left:50%;right:auto;top:auto;bottom:12px;transform:translateX(-50%);flex-direction:row;padding:8px 10px;border-radius:999px;background:rgba(247,246,242,.84);backdrop-filter:blur(18px);box-shadow:0 12px 35px rgba(0,0,0,.12)}
  .project-rail b{display:none}.project-rail a{min-width:30px;justify-content:center}
  .hero-coordinate{display:none}
  .award-build .project-row{min-height:auto}.award-build .project-list{gap:130px}
  .award-build .project-copy h3{font-size:clamp(48px,13vw,78px)}
  .web-impact-sticky{grid-template-columns:1fr;padding-top:100px}.web-impact-copy{position:absolute;z-index:5;left:24px;right:24px;bottom:35px;padding:20px;background:rgba(8,10,13,.74);backdrop-filter:blur(14px)}.web-impact-copy h2{font-size:34px}.web-impact-copy p{font-size:19px;min-height:auto}.web-impact-stack{height:70vh}
  .signature-copy{display:block}.signature-copy p{margin-top:12px}.signature-name{bottom:42px}
  .next-world-link{grid-template-columns:1fr;padding-top:55px}.next-world-link p{margin-top:20px}
  .process-proof-section{min-height:240vh}.process-proof-section .shell{padding-top:90px}.process-proof-section .mode-stage{min-height:58vh}
}
@media(max-width:640px){
  
  .mechanic-hint{display:none}
  .award-build .project-list{gap:105px}
  .award-build .project-row .project-card{margin-left:0;width:100%}
  .award-build .project-visual{min-height:460px}
  .home-process-stack{inset:3% 0 7% 0}
  .signature-finale{padding-top:85px}.signature-svg{width:155%;margin-left:-25%}.signature-name{letter-spacing:.28em}
  .web-impact-story{height:270vh}.web-impact-sticky{width:100%;padding:0}.web-impact-stack{height:100svh}.web-impact-stack article{border-width:3px}.web-impact-copy{left:12px;right:12px;bottom:72px}.web-impact-copy .eyebrow,.web-impact-copy h2{display:none}
  .deck-stage[data-drag-deck] .deck-card{max-width:54vw}
  .photo-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.photo-filters button{white-space:nowrap}
  .photo-gallery[data-layout] .gallery-grid{grid-template-columns:1fr 1fr}
  .next-world-link strong{font-size:clamp(48px,15vw,75px)}
}
@media(hover:none){
  .website-frame::after{transform:none;opacity:1;font-size:8px;padding:7px 8px}
  .cardgame-composition{--fan:.5}
}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  
  .signature-active{stroke-dashoffset:0!important}
  .web-impact-story,.process-proof-section{height:auto}.web-impact-sticky,.process-proof-section .shell{position:relative;min-height:auto}.web-impact-sticky{padding:90px 0}.web-impact-stack{height:600px}
}
/* Preserve the intentional base rotations while still allowing JS parallax. */
.website-one{--base-rotation:-4.2deg}.website-two{--base-rotation:3.3deg}.website-three{--base-rotation:-1.5deg}
.game-one{--base-rotation:-10deg}.game-two{--base-rotation:-2deg}.game-three{--base-rotation:9deg}.game-four{--base-rotation:3deg}
.music-one{--base-rotation:-7deg}.music-two{--base-rotation:5deg}.music-three{--base-rotation:-2deg}
.threed-one{--base-rotation:-2deg}.threed-two{--base-rotation:4deg}.threed-three{--base-rotation:-4deg}
.photo-one{--base-rotation:-5deg}.photo-two{--base-rotation:2deg}.photo-three{--base-rotation:6deg}

/* Multimedia positioning */
.focus-section{position:relative;padding:145px 0 125px;background:#f0eee8;overflow:hidden}
.focus-section::before{content:"CONTENT / VISUAL / MOTION / DIGITAL";position:absolute;right:-1vw;top:24px;font:750 clamp(56px,10vw,150px)/1 var(--display);letter-spacing:-.07em;color:rgba(12,14,17,.035);white-space:nowrap;pointer-events:none}
.focus-layout{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw;align-items:start}
.focus-intro{position:sticky;top:128px}
.focus-intro h2{font-size:clamp(45px,5.4vw,78px);max-width:690px}
.focus-intro>p{max-width:620px;margin-top:24px;color:var(--muted);font-size:17px;line-height:1.75}
.capability-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(12,14,17,.14);border-left:1px solid rgba(12,14,17,.14)}
.capability{min-height:265px;padding:28px;border-right:1px solid rgba(12,14,17,.14);border-bottom:1px solid rgba(12,14,17,.14);background:rgba(255,255,255,.2);transition:background .35s var(--ease),transform .35s var(--ease)}
.capability:hover{background:rgba(255,255,255,.72);transform:translateY(-5px)}
.capability>span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.14em}
.capability h3{margin-top:54px;font-size:clamp(22px,2.25vw,31px);letter-spacing:-.04em}
.capability p{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.65}
.compact-process{padding:115px 0}
.compact-process .process-grid{grid-template-columns:repeat(3,1fr)}
.compact-process .process-step{min-height:235px}
.compact-process .process-step h3{margin-top:45px}
.project-summary{display:grid;grid-template-columns:1.25fr .75fr 1fr;gap:0;padding-top:58px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.project-summary>div{padding:0 24px 28px;border-right:1px solid var(--line)}
.project-summary>div:first-child{padding-left:0}.project-summary>div:last-child{border-right:0}
.project-summary span{display:block;margin-bottom:9px;color:var(--red);font-size:9px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.project-summary strong{display:block;font-size:14px;line-height:1.55;font-weight:700;color:#393b3e}
.case-role-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--line)}
.case-role-meta span{font-size:11px;line-height:1.5;color:var(--muted)}
.case-role-meta b{display:block;margin-bottom:3px;color:var(--ink);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.development-note{max-width:850px;margin:22px auto 0;padding:15px 18px;border-left:3px solid var(--red);background:#f0eee8;color:#55575a;font-size:13px;line-height:1.65}
.footer-intro{max-width:700px;margin-top:22px;color:rgba(255,255,255,.56);font-size:16px;line-height:1.65}
.footer-roleline{display:block;margin-top:22px;color:rgba(255,255,255,.36);font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;line-height:1.7}
.award-build .hero-copy{max-width:none}
.award-build .hero h1{max-width:960px}
.award-build .hero-lead{max-width:760px}
.award-build .hero-proof{max-width:850px}
.award-build .manifesto-copy{max-width:650px}

@media(max-width:900px){
  .focus-layout{grid-template-columns:1fr;gap:60px}.focus-intro{position:static}.project-summary{grid-template-columns:1fr 1fr}.project-summary>div:nth-child(2){border-right:0}.project-summary>div:last-child{grid-column:1/-1;padding-left:0;border-top:1px solid var(--line);padding-top:24px}.compact-process .process-grid{grid-template-columns:1fr}.compact-process .process-step{border-right:0!important;border-top:1px solid rgba(255,255,255,.15)}.compact-process .process-step:first-child{border-top:0}.footer-grid h2{max-width:900px}
}
@media(max-width:640px){
  .focus-section{padding:100px 0 90px}.capability-grid{grid-template-columns:1fr}.capability{min-height:220px}.capability h3{margin-top:34px}.project-summary{grid-template-columns:1fr;padding-top:34px}.project-summary>div,.project-summary>div:first-child,.project-summary>div:last-child{grid-column:auto;padding:18px 0;border-right:0;border-top:1px solid var(--line)}.project-summary>div:first-child{border-top:0}.case-role-meta{grid-template-columns:1fr}.footer-roleline{font-size:9px}
}

/* Mobile overflow safeguards for loose editorial compositions */
html,body{overflow-x:clip}
.signature-finale,.work-section,.web-impact-story{overflow-x:clip}
@media(max-width:640px){
  .project-row.left .project-card,.project-row.right .project-card{margin-left:0!important;width:100%;max-width:100%}
  .project-visual{max-width:100%}
  .signature-svg{width:100%;max-width:100%}
}


/* --------------------------------------------------------------------------
   Staggered project rhythm — the five worlds no longer sit on one vertical rail
   -------------------------------------------------------------------------- */
@media (min-width: 901px){
  .award-build .project-row{position:relative}
  .award-build .project-row.left .project-card{
    margin-left:0;
    margin-right:auto;
  }
  .award-build .project-row.right .project-card{
    margin-left:auto;
    margin-right:0;
  }

  /* Deliberately varied widths create an editorial, less templated rhythm. */
  .award-build .project-websites .project-card{width:93%}
  .award-build .project-cardgame .project-card{width:86%}
  .award-build .project-music .project-card{width:89%}
  .award-build .project-three-d .project-card{width:95%}
  .award-build .project-photography .project-card{width:84%}

  /* Pull imagery toward the outside edge and keep copy closer to the journey. */
  .award-build .project-row.left .project-visual{transform:translateX(-2.2vw)}
  .award-build .project-row.left .project-copy{transform:translateX(1.2vw)}
  .award-build .project-row.right .project-visual{transform:translateX(2.2vw)}
  .award-build .project-row.right .project-copy{transform:translateX(-1.2vw)}

  /* Small individual offsets stop the sequence from feeling mechanically uniform. */
  .award-build .project-music .project-card{margin-left:2.5vw}
  .award-build .project-photography .project-card{margin-left:3.5vw}
}

@media (min-width: 1180px){
  .award-build .project-list{gap:clamp(175px,19vw,300px)}
  .award-build .project-row.left .project-visual{transform:translateX(-3.2vw)}
  .award-build .project-row.right .project-visual{transform:translateX(3.2vw)}
  .award-build .project-row.left .project-copy{transform:translateX(1.8vw)}
  .award-build .project-row.right .project-copy{transform:translateX(-1.8vw)}
}

@media (max-width: 900px){
  .award-build .project-row .project-card,
  .award-build .project-row.left .project-card,
  .award-build .project-row.right .project-card{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
  .award-build .project-row .project-visual,
  .award-build .project-row .project-copy{
    transform:none;
  }
}


/* --------------------------------------------------------------------------
   Multi-image preview system
   Every project world is a composition of separate images. Only the image
   under the pointer gains color and moves to the foreground.
   -------------------------------------------------------------------------- */
.award-build .loose-frame{
  opacity:.82;
  cursor:zoom-in;
  transform-origin:center;
  transition:transform .58s var(--ease),box-shadow .42s var(--ease),opacity .35s var(--ease),filter .35s var(--ease);
}
.award-build .loose-frame figcaption{
  z-index:8;
  opacity:.72;
  transition:opacity .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.award-build .editorial-project:hover .loose-frame img,
.award-build .editorial-project:focus-visible .loose-frame img{
  filter:grayscale(1) contrast(1.04);
  transform:none;
}
.award-build .editorial-project:hover .loose-frame{
  box-shadow:0 24px 65px rgba(10,12,15,.16);
}
.award-build .home-process-stack{display:none!important}
.award-build .project-card[data-project="3d"].is-scrubbing .threed-frame,
.award-build .project-card[data-project="3d"]:hover .threed-frame{
  opacity:.82;
  filter:none;
}
.award-build .threed-composition{cursor:default}

/* Additional individual previews. */
.music-four{right:4%;bottom:2%;z-index:5;width:38%;height:34%;--base-rotation:7deg}
.threed-four{right:5%;bottom:1%;z-index:5;width:48%;height:32%;--base-rotation:1.5deg}
.photo-four{left:18%;bottom:0;z-index:5;width:34%;height:36%;--base-rotation:-2deg}
.photo-five{right:9%;bottom:1%;z-index:6;width:36%;height:34%;--base-rotation:4deg}

/* Slightly smaller layers ensure that no world reads as one full-width image. */
.websites-composition .website-frame{width:68%;height:42%}
.cardgame-composition .game-frame{width:45%;height:40%}
.music-composition .music-frame{width:46%;height:37%}
.threed-composition .threed-one{width:64%;height:34%}
.threed-composition .threed-two{width:43%;height:43%}
.threed-composition .threed-three{width:39%;height:39%}
.photo-composition{min-height:700px}
.photo-composition .photo-frame{width:34%;height:59%}
.photo-composition .photo-one{left:0;top:6%}
.photo-composition .photo-two{left:27%;top:0}
.photo-composition .photo-three{right:0;top:10%}

@media (hover:hover) and (pointer:fine){
  .award-build .project-visual:has(.loose-frame:hover) .loose-frame:not(:hover){
    opacity:.28;
    filter:saturate(.4) blur(.35px);
  }
  .award-build .project-visual .loose-frame:hover{
    z-index:60!important;
    opacity:1!important;
    filter:none!important;
    transform:translate3d(var(--parallax-x,0),var(--parallax-y,0),0) rotate(0deg) scale(1.075)!important;
    box-shadow:0 40px 110px rgba(7,9,12,.28)!important;
  }
  .award-build .project-visual .loose-frame:hover img{
    filter:grayscale(0) contrast(1.01)!important;
    transform:scale(1.045)!important;
  }
  .award-build .project-visual .loose-frame:hover figcaption{
    opacity:1;
    color:#fff;
    background:rgba(9,11,14,.88);
  }
}

@media (max-width:900px){
  .music-four{right:1%;bottom:3%;width:40%;height:33%}
  .threed-four{right:2%;bottom:1%;width:45%;height:31%}
  .photo-composition{min-height:650px}
}
@media (max-width:640px){
  .websites-composition .website-frame{width:78%;height:39%}
  .cardgame-composition .game-frame{width:55%;height:36%}
  .music-composition .music-frame{width:56%;height:34%}
  .music-four{right:-1%;bottom:3%;width:43%;height:30%}
  .threed-composition .threed-one{width:77%;height:31%}
  .threed-composition .threed-two{width:48%;height:38%}
  .threed-composition .threed-three{width:44%;height:35%}
  .threed-four{right:0;bottom:0;width:48%;height:29%}
  .photo-composition{min-height:500px}
  .photo-composition .photo-frame{width:42%;height:49%}
  .photo-composition .photo-one{left:0;top:4%}
  .photo-composition .photo-two{left:28%;top:0}
  .photo-composition .photo-three{right:-2%;top:7%}
  .photo-four{left:10%;bottom:0;width:39%;height:33%}
  .photo-five{right:5%;bottom:0;width:39%;height:31%}
}
@media (hover:none){
  .award-build .loose-frame{opacity:1}
  .award-build .loose-frame img{filter:grayscale(.15)}
}

/* --------------------------------------------------------------------------
   Safe composition bounds
   The editorial image groups keep their staggered rhythm, but no layer is
   allowed to leave the visible project area or be clipped at the viewport.
   -------------------------------------------------------------------------- */
@media (min-width: 901px){
  /* Stagger the complete project block, not the imagery beyond the viewport. */
  .award-build .project-row.left .project-visual,
  .award-build .project-row.right .project-visual{
    transform:none!important;
  }

  /* A protected inner gutter accommodates rotation and the 1.075 hover scale. */
  .award-build .project-visual{
    --composition-gutter:clamp(34px,3.4vw,58px);
    width:calc(100% - (var(--composition-gutter) * 2));
    margin-inline:var(--composition-gutter);
    max-width:calc(100% - (var(--composition-gutter) * 2));
  }

  /* Copy may retain a subtle inward offset; it never affects viewport bounds. */
  .award-build .project-row.left .project-copy{transform:translateX(.6vw)}
  .award-build .project-row.right .project-copy{transform:translateX(-.6vw)}
}

/* Keep every resting layer inside its composition box. */
.award-build .websites-composition .website-one{left:3%}
.award-build .websites-composition .website-two{right:3%}
.award-build .websites-composition .website-three{left:10%}

.award-build .cardgame-composition .game-one{left:5%}
.award-build .cardgame-composition .game-three{right:5%}

.award-build .music-composition .music-one{left:4%}
.award-build .music-composition .music-two{right:4%}
.award-build .music-composition .music-four{right:6%}
.award-build .music-composition .music-wave{left:4%}

.award-build .threed-composition .threed-one{left:3%}
.award-build .threed-composition .threed-two{right:4%}
.award-build .threed-composition .threed-three{left:10%}
.award-build .threed-composition .threed-four{right:6%}

.award-build .photo-composition .photo-one{left:3%}
.award-build .photo-composition .photo-three{right:3%}
.award-build .photo-composition .photo-five{right:7%}

/* Disable the former whole-project outward pushes. Individual hover remains. */
.award-build .editorial-project:hover .website-one:not(:hover),
.award-build .editorial-project:hover .website-two:not(:hover),
.award-build .editorial-project:hover .website-three:not(:hover),
.award-build .editorial-project:hover .music-one:not(:hover),
.award-build .editorial-project:hover .music-two:not(:hover),
.award-build .editorial-project:hover .music-three:not(:hover),
.award-build .editorial-project:hover .threed-one:not(:hover),
.award-build .editorial-project:hover .threed-two:not(:hover),
.award-build .editorial-project:hover .threed-three:not(:hover),
.award-build .editorial-project:hover .photo-one:not(:hover),
.award-build .editorial-project:hover .photo-two:not(:hover),
.award-build .editorial-project:hover .photo-three:not(:hover){
  transform:translate3d(var(--parallax-x,0),var(--parallax-y,0),0) rotate(var(--base-rotation,0deg));
}

/* Keep the draggable card fan lively, but within the protected gutter. */
.award-build .editorial-project:hover .cardgame-composition .game-one:not(:hover){
  transform:translateX(calc(var(--fan) * -26px)) rotate(calc(-10deg - var(--fan) * 7deg));
}
.award-build .editorial-project:hover .cardgame-composition .game-two:not(:hover){
  transform:translateY(calc(var(--fan) * -20px)) rotate(calc(-2deg - var(--fan) * 3deg));
}
.award-build .editorial-project:hover .cardgame-composition .game-three:not(:hover){
  transform:translateX(calc(var(--fan) * 26px)) rotate(calc(9deg + var(--fan) * 7deg));
}
.award-build .editorial-project:hover .cardgame-composition .game-four:not(:hover){
  transform:translateY(calc(var(--fan) * 20px)) rotate(calc(3deg + var(--fan) * 2deg));
}

@media (max-width: 900px){
  .award-build .project-visual{
    width:calc(100% - 36px);
    max-width:calc(100% - 36px);
    margin-inline:18px;
  }
  .award-build .project-row .project-copy{transform:none!important}
}

@media (max-width: 640px){
  .award-build .project-visual{
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    margin-inline:10px;
  }
  .award-build .photo-composition .photo-three{right:0}
  .award-build .music-composition .music-four{right:2%}
  .award-build .threed-composition .threed-four{right:2%}
}


/* ========================================================================== 
   Interactive project compositions — movable images and safe line layering
   ========================================================================== */
.award-build .journey{isolation:isolate}
.award-build .journey-svg,
.award-build .journey-dot{z-index:0;pointer-events:none}
.award-build .project-list{position:relative;z-index:2}
.award-build .journey-dot{box-shadow:0 0 0 6px rgba(255,52,52,.12)}

.award-build .project-card{position:relative}
.award-build .project-title-link{display:inline-block;color:inherit;text-decoration:none}
.award-build .project-title-link:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:3px}
.award-build .project-arrow{text-decoration:none}

.award-build .loose-frame{
  display:block;
  translate:var(--drag-x,0px) var(--drag-y,0px);
  cursor:pointer;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:pan-y;
}
.award-build .loose-frame img{-webkit-user-drag:none;pointer-events:none}
.award-build .loose-frame .frame-caption{
  position:absolute;left:14px;bottom:12px;z-index:8;padding:6px 8px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase;
  opacity:.72;transition:opacity .3s var(--ease),background .3s var(--ease),color .3s var(--ease)
}
.award-build .loose-frame.edge-grab{
  cursor:grab!important;
  box-shadow:0 0 0 2px var(--red),0 30px 80px rgba(10,12,15,.2)!important;
}
.award-build .loose-frame.is-dragging{
  cursor:grabbing!important;
  z-index:100!important;
  transition:none!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:0 42px 120px rgba(7,9,12,.3)!important;
  transform:rotate(0deg) scale(1.02)!important;
}
.award-build .loose-frame.was-moved::before{
  content:"";position:absolute;right:8px;top:8px;z-index:12;width:7px;height:7px;
  border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(255,52,52,.14)
}
.award-build .composition-reset{
  position:absolute;right:4px;top:76px;z-index:110;border:1px solid rgba(15,16,18,.16);
  border-radius:999px;padding:8px 11px;background:rgba(247,246,242,.92);color:#111;
  font:800 9px/1.1 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 9px 26px rgba(0,0,0,.08);backdrop-filter:blur(12px);cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,opacity .25s
}
.award-build .composition-reset:hover{background:#111;color:#fff;transform:translateY(-2px)}
.award-build .composition-reset:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.award-build .composition-reset[hidden]{display:none!important}

.award-build [data-focus-item].focus-first{scroll-margin-top:110px}
.award-build .case-card.focus-first,
.award-build .web-impact-stack article.focus-first,
.award-build .gallery-item.focus-first{
  outline:2px solid rgba(255,52,52,.55);outline-offset:6px
}
.award-build .media-grid img.focus-first,
.award-build .release-grid img.focus-first{box-shadow:0 0 0 3px var(--red),0 28px 70px rgba(0,0,0,.18)}

@media (hover:hover) and (pointer:fine){
  .award-build .loose-frame:hover .frame-caption{opacity:1;color:#fff;background:rgba(9,11,14,.88)}
}
@media(max-width:640px){
  .award-build .composition-reset{right:2px;top:64px;padding:7px 9px;font-size:8px}
  .award-build .loose-frame{touch-action:pan-y}
}


/* Global page-wide image arrangement */
.award-build .work-section{overflow:visible!important}
.global-drag-layer{
  position:absolute;left:0;top:0;width:100%;min-height:100%;z-index:260;
  pointer-events:none;overflow:visible;contain:layout style;
}
.global-drag-layer .loose-frame{
  pointer-events:auto!important;margin:0!important;max-width:none!important;
  isolation:isolate;box-sizing:border-box;
}
.global-drag-layer .loose-frame:not(.is-dragging){
  transition:box-shadow .28s var(--ease),filter .28s var(--ease)!important;
}
.global-drag-layer .loose-frame.was-moved{z-index:1}
.global-drag-layer .loose-frame.was-moved:hover{z-index:5}
.global-drag-layer .loose-frame.is-dragging{z-index:20!important}
@media(max-width:760px){
  .global-drag-layer{display:none!important}
  .award-build .loose-frame.is-global-positioned{display:none!important}
}


/* Free image canvas v4 — every preview is an independent page object. */
.award-build .frame-origin{
  visibility:hidden!important;
  pointer-events:none!important;
  box-shadow:none!important;
  opacity:0!important;
}
.global-drag-layer.free-image-canvas{
  z-index:260;
  pointer-events:none;
}
.global-drag-layer.free-image-canvas .loose-frame{
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.global-drag-layer.free-image-canvas .loose-frame.is-pressed{
  cursor:pointer!important;
}
.global-drag-layer.free-image-canvas .loose-frame.is-dragging{
  cursor:grabbing!important;
}
.global-drag-layer.free-image-canvas .loose-frame:hover{
  z-index:8!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:0 40px 110px rgba(7,9,12,.28)!important;
}
.global-drag-layer.free-image-canvas .loose-frame:hover img{
  filter:grayscale(0) contrast(1.01)!important;
  transform:scale(1.035)!important;
}
.global-drag-layer.free-image-canvas .loose-frame:hover .frame-caption{
  opacity:1;color:#fff;background:rgba(9,11,14,.88)
}
.global-drag-layer.free-image-canvas .loose-frame.is-dragging{
  z-index:30!important;
  transform:rotate(0deg) scale(1.018)!important;
  transition:none!important;
}
.award-build .mechanic-hint{max-width:260px}
@media(max-width:760px){
  .global-drag-layer.free-image-canvas{display:none!important}
  .award-build .frame-origin{display:none!important}
}

/* Reset controls: anchored beside project copy, rendered above free images. */
.award-build .composition-reset-slot{
  display:block;
  width:1px;
  height:1px;
  margin-top:18px;
  pointer-events:none;
}
.global-control-layer{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:0;
  z-index:2000;
  overflow:visible;
  pointer-events:none;
}
.award-build .global-control-layer .composition-reset{
  position:absolute;
  right:auto;
  bottom:auto;
  z-index:2001;
  pointer-events:auto;
  white-space:nowrap;
}
@media(max-width:760px){
  .global-control-layer{display:none!important}
  .award-build .composition-reset-slot{display:none!important}
}

/* ========================================================================== 
   Tighter project rhythm and click-to-open / drag-to-move cursor
   ========================================================================== */
.award-build .project-visual,
.award-build .cardgame-composition,
.award-build .threed-composition{cursor:default!important}
.global-drag-layer.free-image-canvas .loose-frame{cursor:pointer!important}
.global-drag-layer.free-image-canvas .loose-frame.is-pressed{cursor:pointer!important}
.global-drag-layer.free-image-canvas .loose-frame.is-dragging{cursor:grabbing!important}

@media(min-width:901px){
  .award-build .project-list{gap:clamp(58px,6vw,92px)!important}
  .award-build .project-row{min-height:clamp(540px,52vw,690px)}
  .award-build .project-row .project-card,
  .award-build .project-row.left .project-card,
  .award-build .project-row.right .project-card{gap:clamp(30px,5vw,78px)}
}
@media(max-width:900px){
  .award-build .project-list{gap:72px!important}
}
@media(max-width:640px){
  .award-build .project-list{gap:54px!important}
}

/* ========================================================================== 
   Deluxe interaction and project-documentation update
   ========================================================================== */

/* Richer image labels: title plus the concrete contribution. */
.award-build .loose-frame .frame-caption{
  display:grid;
  gap:3px;
  max-width:calc(100% - 28px);
  text-transform:none;
  letter-spacing:0;
  padding:8px 10px;
}
.award-build .loose-frame .frame-caption b{
  font:850 9px/1.1 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.award-build .loose-frame .frame-caption small{
  display:block;
  overflow:hidden;
  color:inherit;
  font:650 9px/1.25 Inter,Arial,sans-serif;
  white-space:nowrap;
  text-overflow:ellipsis;
  opacity:.74;
}
.award-build .website-frame .frame-caption{top:12px;bottom:auto}

/* The original slot becomes a temporary outline while an image is being moved. */
.award-build .frame-origin.is-drag-ghost{
  visibility:visible!important;
  opacity:1!important;
  background:rgba(255,255,255,.08)!important;
  border:1.5px dashed rgba(255,52,52,.52)!important;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.34)!important;
  filter:none!important;
  pointer-events:none!important;
  animation:ghostPulse 1.1s ease-in-out infinite alternate;
}
@keyframes ghostPulse{to{border-color:rgba(255,52,52,.9);background:rgba(255,52,52,.055)!important}}

/* Lift, directional tilt and a soft spring on release. */
.global-drag-layer.free-image-canvas .loose-frame.is-dragging{
  cursor:grabbing!important;
  z-index:40!important;
  opacity:1!important;
  filter:none!important;
  transform:rotate(var(--drag-tilt,0deg)) translateY(-7px) scale(1.04)!important;
  box-shadow:0 55px 145px rgba(7,9,12,.36)!important;
  transition:none!important;
}
.global-drag-layer.free-image-canvas .loose-frame.is-settling{
  animation:frameSettle .5s cubic-bezier(.18,.88,.24,1.26) both;
}
@keyframes frameSettle{
  0%{transform:rotate(var(--release-tilt,0deg)) translateY(-7px) scale(1.04)}
  58%{transform:rotate(calc(var(--base-rotation,0deg) - .65deg)) translateY(2px) scale(.99)}
  78%{transform:rotate(calc(var(--base-rotation,0deg) + .25deg)) translateY(-1px) scale(1.008)}
  100%{transform:rotate(var(--base-rotation,0deg)) translateY(0) scale(1)}
}

/* No explanatory text: one preview briefly wiggles and shows a drag glyph. */
.global-drag-layer .drag-cue{
  position:absolute;
  left:50%;
  top:50%;
  z-index:30;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:50%;
  background:rgba(9,11,14,.82);
  color:#fff;
  box-shadow:0 14px 45px rgba(0,0,0,.28);
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  pointer-events:none;
  backdrop-filter:blur(12px);
}
.global-drag-layer .drag-cue i{
  position:absolute;
  width:30px;
  height:1px;
  background:rgba(255,255,255,.28);
}
.global-drag-layer .drag-cue b{font:800 20px/1 var(--mono);letter-spacing:0}
.global-drag-layer .loose-frame.is-drag-teaser{
  animation:dragTeaserWiggle 1.55s cubic-bezier(.22,.8,.22,1) 1;
  z-index:18!important;
}
.global-drag-layer .loose-frame.is-drag-teaser .drag-cue{
  animation:dragCueIn 1.55s ease both;
}
.global-drag-layer .drag-cue.is-leaving{animation:dragCueOut .35s ease both}
@keyframes dragTeaserWiggle{
  0%,100%{transform:rotate(var(--base-rotation,0deg)) translateX(0)}
  17%{transform:rotate(calc(var(--base-rotation,0deg) - 1.7deg)) translateX(-9px)}
  35%{transform:rotate(calc(var(--base-rotation,0deg) + 1.5deg)) translateX(10px)}
  54%{transform:rotate(calc(var(--base-rotation,0deg) - .9deg)) translateX(-6px)}
  72%{transform:rotate(calc(var(--base-rotation,0deg) + .5deg)) translateX(4px)}
}
@keyframes dragCueIn{0%,10%,100%{opacity:0;transform:translate(-50%,-50%) scale(.72)}25%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes dragCueOut{to{opacity:0;transform:translate(-50%,-50%) scale(.7)}}

/* Global layout tools remain above every free image. */
.global-control-layer{z-index:4000}
.global-control-layer .layout-tools{
  position:fixed;
  right:clamp(14px,2vw,28px);
  bottom:clamp(18px,2vw,30px);
  z-index:4010;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(15,16,18,.13);
  border-radius:999px;
  background:rgba(247,246,242,.9);
  box-shadow:0 18px 55px rgba(0,0,0,.14);
  pointer-events:auto;
  backdrop-filter:blur(16px);
}
.global-control-layer .layout-tools[hidden]{display:none!important}
.global-control-layer .layout-tools button{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:35px;
  border:0;
  border-radius:999px;
  padding:8px 12px;
  background:transparent;
  color:#151618;
  cursor:pointer;
  transition:background .24s var(--ease),color .24s var(--ease),transform .24s var(--ease);
}
.global-control-layer .layout-tools button:hover{background:#111;color:#fff;transform:translateY(-1px)}
.global-control-layer .layout-tools button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.global-control-layer .layout-tools button span{color:var(--red);font:900 13px/1 var(--mono)}
.global-control-layer .layout-tools button b{font:800 9px/1 var(--mono);letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.global-control-layer .layout-tools button[aria-pressed="true"]{background:#111;color:#fff}
.global-control-layer .layout-tools button[hidden]{display:none!important}

/* A fixed arrangement behaves exactly like a normal collection of links. */
.global-drag-layer.free-image-canvas.layout-locked .loose-frame,
.image-layout-locked .global-drag-layer.free-image-canvas .loose-frame{
  cursor:pointer!important;
}
.global-drag-layer.free-image-canvas.layout-locked .loose-frame::before{
  display:none!important;
}

/* Professional, consistent project overview on every main detail page. */
.project-brief{
  padding-top:clamp(72px,8vw,118px);
  padding-bottom:clamp(74px,8vw,120px);
}
.project-brief-heading{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:6vw;
  align-items:end;
  padding-bottom:34px;
  border-bottom:1px solid var(--line);
}
.project-brief-heading .eyebrow{grid-column:1/-1}
.project-brief-heading h2{font-size:clamp(40px,5vw,72px);max-width:780px}
.project-brief-heading p{max-width:560px;color:var(--muted);font-size:15px;line-height:1.72}
.project-brief-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--line);
}
.project-brief-item{
  min-height:265px;
  padding:28px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.18);
  transition:background .32s var(--ease),transform .32s var(--ease);
}
.project-brief-item:hover{background:rgba(255,255,255,.72);transform:translateY(-3px)}
.project-brief-item>span{display:block;color:var(--red);font:850 10px/1 var(--mono);letter-spacing:.12em}
.project-brief-item h3{margin-top:42px;font-size:clamp(21px,2vw,29px);letter-spacing:-.035em}
.project-brief-item p{margin-top:13px;color:var(--muted);font-size:13px;line-height:1.7}

/* Rendering work below the fold is deferred without changing the visual order. */
.project-brief,
.case-grid,
.gallery-grid,
.impact-grid,
.proof-strip,
.other-sites,
.project-story{
  content-visibility:auto;
  contain-intrinsic-size:auto 760px;
}

/* Mobile is a purpose-built swipeable image ribbon rather than a compressed collage. */
@media(max-width:760px){
  .award-build .project-visual{
    display:flex!important;
    position:relative!important;
    align-items:stretch!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin-inline:0!important;
    padding:12px 18px 24px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:18px;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    cursor:default!important;
  }
  .award-build .project-visual::-webkit-scrollbar{height:4px}
  .award-build .project-visual::-webkit-scrollbar-thumb{background:rgba(15,16,18,.24);border-radius:10px}
  .award-build .project-visual>.loose-frame{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    z-index:1!important;
    flex:0 0 min(78vw,370px)!important;
    width:min(78vw,370px)!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    opacity:1!important;
    translate:none!important;
    transform:none!important;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    cursor:pointer!important;
    box-shadow:0 18px 48px rgba(10,12,15,.14)!important;
  }
  .award-build .websites-composition>.loose-frame{aspect-ratio:16/10}
  .award-build .cardgame-composition>.loose-frame,
  .award-build .music-composition>.loose-frame,
  .award-build .threed-composition>.loose-frame{aspect-ratio:4/3}
  .award-build .photo-composition>.loose-frame{aspect-ratio:3/4;flex-basis:min(70vw,330px)!important;width:min(70vw,330px)!important}
  .award-build .project-visual>.loose-frame img{width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important;filter:grayscale(.12)}
  .award-build .project-visual>.loose-frame .frame-caption{opacity:1;background:rgba(9,11,14,.82);color:#fff}
  .award-build .project-visual>.project-number,
  .award-build .project-visual>.project-arrow,
  .award-build .project-visual>.music-disc,
  .award-build .project-visual>.music-wave{display:none!important}
  .award-build .project-card{gap:24px!important}
  .award-build .project-list{gap:48px!important}
  .award-build .project-row{min-height:0!important}
  .global-control-layer .layout-tools{display:none!important}
  .project-brief-heading{grid-template-columns:1fr;gap:20px}
  .project-brief-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-left:0;padding-bottom:8px}
  .project-brief-item{flex:0 0 82vw;min-height:270px;border-left:1px solid var(--line);scroll-snap-align:start}
}

@media(max-width:900px) and (min-width:761px){
  .project-brief-grid{grid-template-columns:repeat(2,1fr)}
  .project-brief-heading{grid-template-columns:1fr;gap:20px}
}

@media(prefers-reduced-motion:reduce){
  .global-drag-layer .loose-frame.is-drag-teaser,
  .global-drag-layer .loose-frame.is-drag-teaser .drag-cue,
  .global-drag-layer.free-image-canvas .loose-frame.is-settling,
  .award-build .frame-origin.is-drag-ghost{animation:none!important}
}


/* Curated by default: arranging images is an explicit, reversible mode. */
.page-home .global-control-layer .layout-tools{display:flex!important}
.page-home.image-layout-locked .global-drag-layer.free-image-canvas .loose-frame{cursor:pointer!important}
.page-home:not(.image-layout-locked) .global-drag-layer.free-image-canvas .loose-frame{cursor:pointer!important}
.page-home:not(.image-layout-locked) .global-drag-layer.free-image-canvas .loose-frame.is-dragging{cursor:grabbing!important}
.page-home .global-control-layer .layout-tools .layout-lock{background:#111;color:#fff}
.page-home:not(.image-layout-locked) .global-control-layer .layout-tools .layout-lock{background:var(--red);color:#fff}
.page-home .global-control-layer .layout-tools .layout-lock span{color:currentColor}

/* Final state styling for the opt-in arrangement control. */
.image-layout-locked .page-home .global-control-layer .layout-tools .layout-lock{background:#111;color:#fff}
html:not(.image-layout-locked) .page-home .global-control-layer .layout-tools .layout-lock{background:var(--red);color:#fff}


/* Typography alignment with the refreshed type system */
.award-build h1,.award-build h2,.award-build h3{font-weight:600;letter-spacing:-.05em}
.award-build .eyebrow,.award-build .editorial-label,.award-build .project-number,
.award-build .project-rail,.award-build .mechanic-hint{font-weight:700;letter-spacing:.12em}
.award-build .project-title,.award-build .world-title{font-family:var(--font-display);font-weight:600}

/* ===== assets/css/radical.css ===== */
/* RiskyShot — radical editorial direction, 2026-08-09
   Inspired by contemporary studio/editorial portfolio patterns, implemented as an original RiskyShot system. */

:root{
  --rs-black:#08090a;
  --rs-black-2:#101113;
  --rs-paper:#f1efe7;
  --rs-paper-2:#e7e3d8;
  --rs-white:#f7f6f1;
  --rs-dim:rgba(247,246,241,.58);
  --rs-hair:rgba(247,246,241,.18);
  --rs-red:#ff3434;
  --rs-gutter:clamp(18px,3.2vw,54px);
}

.editorial-v3{background:var(--rs-paper);}
.editorial-v3 .shell{width:min(100% - (var(--rs-gutter) * 2),1480px)}
.editorial-v3 h1,.editorial-v3 h2,.editorial-v3 h3{font-family:var(--display);font-weight:600;letter-spacing:-.072em}
.editorial-v3 p{letter-spacing:-.018em}
.editorial-v3 .eyebrow,.editorial-v3 .editorial-label{font-size:9px;letter-spacing:.16em;font-weight:800}

/* ------------------------------------------------------------
   Header — utility, not decoration
   ------------------------------------------------------------ */
.editorial-v3 .site-header{
  top:16px;
  width:min(calc(100% - 32px),1480px);
  height:54px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:0;
  background:rgba(8,9,10,.58);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(18px);
}
.editorial-v3.inner-page .site-header{background:rgba(8,9,10,.72)}
.editorial-v3 .brand{gap:0}.editorial-v3 .brand-name{display:none}
.editorial-v3 .brand-mark{width:auto;height:auto;border-radius:0;background:none;color:#fff;display:block}
.editorial-v3 .brand-mark i{display:none}.editorial-v3 .brand-mark b{font:700 18px/.9 var(--display);letter-spacing:-.08em}
.editorial-v3 .brand-mark b::after{content:".";color:var(--rs-red)}
.editorial-v3 .desktop-nav{gap:22px}.editorial-v3 .desktop-nav>a,.editorial-v3 .nav-projects-trigger{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.editorial-v3 .desktop-nav>a:hover,.editorial-v3 .nav-projects-trigger:hover{color:#fff}
.editorial-v3 .sound-toggle{display:none}
.editorial-v3 .nav-projects-menu{border-radius:0;background:rgba(8,9,10,.96);border-color:rgba(255,255,255,.15);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.editorial-v3 .nav-projects-menu a{color:#fff;border-color:rgba(255,255,255,.1)}
.editorial-v3 .nav-projects-menu a:hover{background:#fff;color:#0a0a0a}
.editorial-v3 .project-rail{display:none}
.editorial-v3 .scroll-progress{height:2px;background:transparent}.editorial-v3 .scroll-progress span{background:var(--rs-red)}

/* ------------------------------------------------------------
   Home hero — name first, explanation second
   ------------------------------------------------------------ */
.editorial-v3.page-home .hero{min-height:100svh;background:var(--rs-black);overflow:hidden}
.editorial-v3.page-home .hero-picture img{object-position:67% center;filter:grayscale(.12) contrast(1.06) brightness(.82)}
.editorial-v3.page-home .hero::after{
  background:
    linear-gradient(90deg,rgba(8,9,10,.98) 0%,rgba(8,9,10,.72) 36%,rgba(8,9,10,.04) 70%),
    linear-gradient(180deg,rgba(8,9,10,.02) 55%,rgba(8,9,10,.9) 100%);
}
.editorial-v3.page-home .hero-copy{
  padding-top:clamp(105px,13vh,150px);
  padding-bottom:44px;
  justify-content:flex-start;
  min-height:100svh;
}
.editorial-v3.page-home .hero .eyebrow{margin:0 0 26px;color:rgba(255,255,255,.62)}
.editorial-v3.page-home .hero h1{
  display:grid;
  width:100%;
  max-width:none;
  margin:0;
  font-size:clamp(82px,14.7vw,224px);
  line-height:.72;
  letter-spacing:-.09em;
  text-transform:uppercase;
  color:#fff;
}
.editorial-v3.page-home .hero h1 span{display:block;white-space:nowrap}
.editorial-v3.page-home .hero h1 span:last-child{margin-left:clamp(0px,8vw,120px);color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.92)}
.editorial-v3.page-home .hero-lead{
  width:min(470px,40vw);
  max-width:none;
  margin:clamp(36px,6vh,72px) 0 0 auto;
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.58;
  color:rgba(255,255,255,.72);
}
.editorial-v3.page-home .hero-actions{margin-top:28px;margin-left:auto;width:min(470px,40vw)}
.editorial-v3.page-home .hero-actions .button{min-height:auto;padding:0 0 7px;border:0!important;border-bottom:1px solid rgba(255,255,255,.42)!important;border-radius:0;background:none!important;box-shadow:none!important;color:#fff!important;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.editorial-v3.page-home .hero-actions .button:hover{transform:none;border-color:var(--rs-red)!important}
.editorial-v3.page-home .hero-proof{
  margin-top:auto;
  padding-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--rs-hair);
}
.editorial-v3.page-home .hero-proof span{padding:0 24px;border-right:1px solid var(--rs-hair);font-size:10px;line-height:1.45;color:rgba(255,255,255,.48)}
.editorial-v3.page-home .hero-proof span:first-child{padding-left:0}.editorial-v3.page-home .hero-proof span:last-child{border-right:0}
.editorial-v3.page-home .hero-proof strong{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.editorial-v3.page-home .hero-scroll{left:var(--rs-gutter);bottom:24px;display:none}
.editorial-v3.page-home .hero-coordinate{right:var(--rs-gutter);bottom:22px;opacity:.65}

/* ------------------------------------------------------------
   Manifesto — one strong thought
   ------------------------------------------------------------ */
.editorial-v3.page-home .manifesto{width:100%;max-width:none;padding:clamp(100px,12vw,190px) var(--rs-gutter);background:var(--rs-paper);}
.editorial-v3.page-home .manifesto-grid{width:min(100%,1480px);margin:auto;display:block}
.editorial-v3.page-home .manifesto .eyebrow{color:#6d6b65}
.editorial-v3.page-home .manifesto h2{max-width:1320px;font-size:clamp(54px,8.8vw,142px);line-height:.87;letter-spacing:-.08em}
.editorial-v3.page-home .manifesto-copy{max-width:690px;margin:clamp(38px,5vw,72px) 0 0 auto;font-size:clamp(19px,2vw,31px);line-height:1.34;color:#343536}
.editorial-v3.page-home .red-rule{width:min(100%,1480px);margin:70px auto 0;height:1px;background:#151617;position:relative}
.editorial-v3.page-home .red-rule::before{content:"";position:absolute;left:0;top:-1px;width:18%;height:3px;background:var(--rs-red)}

/* ------------------------------------------------------------
   Project index — no cards, just work
   ------------------------------------------------------------ */
.editorial-v3.page-home .work-section{width:100%;max-width:none;padding:0;background:var(--rs-black);color:#fff;overflow:clip}
.editorial-v3.page-home .work-section>.work-head{width:min(100% - (var(--rs-gutter)*2),1480px);margin:0 auto;padding:clamp(90px,10vw,150px) 0 56px;border-bottom:1px solid var(--rs-hair);grid-template-columns:1.05fr .65fr;gap:7vw}
.editorial-v3.page-home .work-head .eyebrow{color:var(--rs-red)}
.editorial-v3.page-home .work-head h2{font-size:clamp(54px,8vw,125px);line-height:.84;letter-spacing:-.08em;max-width:980px}
.editorial-v3.page-home .work-head p{color:var(--rs-dim);font-size:15px;line-height:1.65;align-self:end}
.editorial-v3.page-home .journey{width:min(100% - (var(--rs-gutter)*2),1480px);margin:auto}
.editorial-v3.page-home .journey-svg,.editorial-v3.page-home .journey-dot{display:none!important}
.editorial-v3.page-home .project-list{gap:0!important}
.editorial-v3.page-home .project-row{min-height:0!important;border-bottom:1px solid var(--rs-hair);padding:clamp(48px,6vw,86px) 0}
.editorial-v3.page-home .project-row .project-card,
.editorial-v3.page-home .project-row.left .project-card,
.editorial-v3.page-home .project-row.right .project-card{
  width:100%!important;
  margin:0!important;
  padding:0;
  display:grid;
  grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);
  gap:clamp(42px,7vw,120px)!important;
  align-items:center;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.editorial-v3.page-home .project-row.right .project-card{grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr)}
.editorial-v3.page-home .project-row.right .project-visual{grid-column:1;grid-row:1}.editorial-v3.page-home .project-row.right .project-copy{grid-column:2;grid-row:1}
.editorial-v3.page-home .project-visual{min-height:clamp(390px,39vw,610px);transform:none!important;overflow:visible}
.editorial-v3.page-home .project-copy{transform:none!important;padding:0;max-width:none;color:#fff}
.editorial-v3.page-home .project-copy::before{width:24px;height:3px;margin-bottom:24px;background:var(--rs-red)}
.editorial-v3.page-home .editorial-project:hover .project-copy::before{width:70px}
.editorial-v3.page-home .editorial-label{color:rgba(255,255,255,.45)}
.editorial-v3.page-home .project-copy h3{font-size:clamp(56px,7.3vw,112px);line-height:.78;letter-spacing:-.082em;color:#fff}
.editorial-v3.page-home .project-copy p{max-width:440px;margin-top:22px;color:rgba(255,255,255,.6);font-size:14px;line-height:1.65}
.editorial-v3.page-home .project-impact{max-width:420px;color:rgba(255,255,255,.74);font-family:var(--font-body,"Manrope"),sans-serif;font-style:normal;font-size:12px;line-height:1.5}
.editorial-v3.page-home .project-tags{margin-top:24px;gap:12px;opacity:1}
.editorial-v3.page-home .project-tags span{padding:0;border:0;border-radius:0;color:rgba(255,255,255,.45);font-size:9px;letter-spacing:.1em}
.editorial-v3.page-home .project-title-link{display:inline-block}
.editorial-v3.page-home .project-title-link h3{transition:transform .45s var(--ease),color .35s}
.editorial-v3.page-home .project-title-link:hover h3{transform:translateX(12px);color:var(--rs-red)}
.editorial-v3.page-home .project-number{top:0;left:0;padding:0;border:0;border-radius:0;background:none;color:rgba(255,255,255,.5);font-size:9px;backdrop-filter:none}
.editorial-v3.page-home .project-arrow{top:0;right:0;width:auto;height:auto;border-radius:0;background:none;font-size:30px;opacity:1;color:#fff;transform:none}
.editorial-v3.page-home .project-arrow:hover{color:var(--rs-red);transform:translate(6px,-6px)}
.editorial-v3.page-home .composition-reset-slot{margin-top:15px}
.editorial-v3.page-home .mechanic-hint{display:none}

/* Preview objects: graphic, sharp, not card-like. */
.editorial-v3.page-home .loose-frame,
.editorial-v3.page-home .global-drag-layer .loose-frame{border-radius:0!important;box-shadow:0 22px 80px rgba(0,0,0,.28)!important;background:#17181a}
.editorial-v3.page-home .loose-frame img{filter:grayscale(.85) contrast(1.04)!important;transition:filter .55s var(--ease),transform .65s var(--ease)!important}
.editorial-v3.page-home .global-drag-layer .loose-frame:hover img{filter:grayscale(0) contrast(1.02)!important;transform:scale(1.018)!important}
.editorial-v3.page-home .loose-frame .frame-caption{left:0;right:auto;bottom:0;max-width:100%;border-radius:0;background:#0b0c0d!important;color:#fff!important;padding:9px 11px!important}
.editorial-v3.page-home .website-frame::after{left:0;right:auto;bottom:0;max-width:80%;border-radius:0}
.editorial-v3.page-home .photo-index{color:rgba(255,255,255,.24)}

/* Floating layout controls become a small editorial utility bar. */
.editorial-v3.page-home .global-control-layer .layout-tools{right:18px;bottom:18px;border-radius:0;border-color:rgba(255,255,255,.16);background:rgba(8,9,10,.9);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.32)}
.editorial-v3.page-home .global-control-layer .layout-tools button{border-radius:0;color:#fff}
.editorial-v3.page-home .global-control-layer .layout-tools button:hover{background:#fff;color:#0a0a0a}
.editorial-v3.page-home .global-control-layer .layout-tools .layout-lock{background:#fff;color:#0a0a0a}
html:not(.image-layout-locked) .editorial-v3.page-home .global-control-layer .layout-tools .layout-lock{background:var(--rs-red);color:#fff}
.editorial-v3.page-home .global-control-layer .composition-reset{border-radius:0!important;background:#fff!important;color:#111!important;border:0!important;box-shadow:0 10px 30px rgba(0,0,0,.22)!important}

/* ------------------------------------------------------------
   Home supporting sections — fewer boxes, more editorial scale
   ------------------------------------------------------------ */
.editorial-v3.page-home .focus-section{padding:clamp(100px,12vw,180px) 0;background:var(--rs-paper);color:#111}
.editorial-v3.page-home .focus-section::before{content:"CURIOSITY / PROCESS / MAKING";top:22px;color:rgba(10,11,12,.035)}
.editorial-v3.page-home .focus-layout{grid-template-columns:1.05fr .95fr;gap:8vw}
.editorial-v3.page-home .focus-intro h2{font-size:clamp(52px,6.8vw,105px);line-height:.88;letter-spacing:-.078em}
.editorial-v3.page-home .focus-intro p{max-width:560px;font-size:16px;color:#4e4d49}
.editorial-v3.page-home .capability-grid{border-top:1px solid #1a1b1d;display:block}
.editorial-v3.page-home .capability{min-height:0;padding:25px 0;display:grid;grid-template-columns:50px .55fr 1fr;gap:22px;align-items:start;border:0;border-bottom:1px solid rgba(20,21,23,.18);background:none!important}
.editorial-v3.page-home .capability span{color:var(--rs-red)}
.editorial-v3.page-home .capability h3{margin:0;font-size:25px}.editorial-v3.page-home .capability p{margin:0;color:#64625d;font-size:13px}
.editorial-v3.page-home .process-section{background:var(--rs-black);padding:clamp(100px,10vw,150px) 0;color:#fff}
.editorial-v3.page-home .process-head{border-bottom:1px solid var(--rs-hair);padding-bottom:48px}
.editorial-v3.page-home .process-head h2{font-size:clamp(50px,7vw,108px);line-height:.84}
.editorial-v3.page-home .process-head p{color:var(--rs-dim)}
.editorial-v3.page-home .process-grid{border:0;border-top:1px solid var(--rs-hair)}
.editorial-v3.page-home .process-step{min-height:270px;border-color:var(--rs-hair);padding:30px 26px;background:none}
.editorial-v3.page-home .process-step h3{margin-top:70px;font-size:32px}.editorial-v3.page-home .process-step p{color:var(--rs-dim)}
.editorial-v3.page-home .profile-section{padding:clamp(110px,12vw,190px) 0;background:var(--rs-paper)}
.editorial-v3.page-home .profile-grid{grid-template-columns:1fr 1fr;gap:9vw}
.editorial-v3.page-home .profile-sticky h2{font-size:clamp(50px,6vw,92px);line-height:.88}.editorial-v3.page-home .profile-sticky p{max-width:560px}
.editorial-v3.page-home .career-item{padding:25px 0;border-color:rgba(20,21,23,.18)}
.editorial-v3.page-home .career-item h3{font-size:21px;letter-spacing:-.035em}
.editorial-v3.page-home .signature-finale{padding-top:100px;background:var(--rs-black)}
.editorial-v3.page-home .signature-copy p{font-family:var(--font-body,"Manrope"),sans-serif;font-size:clamp(20px,2vw,30px)}

/* ------------------------------------------------------------
   Inner pages — see the work before the explanation
   ------------------------------------------------------------ */
.editorial-v3.inner-page{background:var(--rs-paper);color:#111}
.editorial-v3.inner-page .visual-first-hero,
.editorial-v3.inner-page .visual-first-case-hero{min-height:92svh;background:var(--rs-black)}
.editorial-v3.inner-page .visual-first-hero .detail-hero-media img,
.editorial-v3.inner-page .visual-first-case-hero>img{filter:grayscale(.1) contrast(1.04);transform:none}
.editorial-v3.inner-page .visual-first-shade,
.editorial-v3.inner-page .visual-first-case-hero .project-hero-overlay{background:linear-gradient(180deg,rgba(7,8,9,.02) 30%,rgba(7,8,9,.92) 100%),linear-gradient(90deg,rgba(7,8,9,.35),transparent 58%)}
.editorial-v3.inner-page .visual-first-hero-copy{padding-top:150px;padding-bottom:clamp(48px,7vh,80px)}
.editorial-v3.inner-page .visual-first-kicker span:first-child{border-radius:0;width:32px;height:32px}
.editorial-v3.inner-page .visual-first-hero h1{font-size:clamp(82px,13.3vw,205px);line-height:.72;letter-spacing:-.09em;text-transform:uppercase;max-width:none}
.editorial-v3.inner-page .visual-first-hero-copy>p{max-width:620px;font-size:clamp(15px,1.25vw,18px);line-height:1.55}
.editorial-v3.inner-page .visual-first-meta span{border-radius:0;background:rgba(7,8,9,.25);font-size:9px}
.editorial-v3.inner-page .visual-first-jump{font-size:10px}

.editorial-v3.inner-page .visual-first-showcase{padding:clamp(80px,9vw,130px) 0;background:var(--rs-paper);color:#111}
.editorial-v3.inner-page .visual-first-showcase-head{margin-bottom:48px;grid-template-columns:1fr .75fr;gap:8vw;border-bottom:1px solid #161719;padding-bottom:34px}
.editorial-v3.inner-page .visual-first-showcase-head .eyebrow{color:var(--rs-red);grid-column:1/-1}
.editorial-v3.inner-page .visual-first-showcase-head h2{font-size:clamp(52px,7.6vw,116px);line-height:.85;letter-spacing:-.08em;max-width:920px}
.editorial-v3.inner-page .visual-first-showcase-head p{color:#5d5c57;align-self:end}
.editorial-v3.inner-page .visual-first-grid{gap:12px}
.editorial-v3.inner-page .visual-first-card{border-radius:0!important;border:0!important;background:#17181a;box-shadow:none!important}
.editorial-v3.inner-page .visual-first-card img{filter:grayscale(.55) brightness(.9)}
.editorial-v3.inner-page .visual-first-card:hover img{filter:grayscale(0) brightness(.98);transform:scale(1.018)}
.editorial-v3.inner-page .visual-first-card::before{border-radius:0;background:#0a0b0c;border:0;color:#fff}
.editorial-v3.inner-page .visual-first-card-caption{left:18px;right:18px;bottom:16px}
.editorial-v3.inner-page .visual-first-card-caption strong{font-size:clamp(24px,2.4vw,38px)}
.editorial-v3.inner-page .visual-first-showcase--photography{background:var(--rs-paper);color:#111}
.editorial-v3.inner-page .visual-first-showcase--photography .visual-first-card{border:0;box-shadow:none}

/* Facts become a hard typographic strip. */
.editorial-v3.inner-page .project-summary,
.editorial-v3.inner-page .case-quick-facts{background:var(--rs-black);color:#fff;border:0;margin:0;max-width:none;width:100%;padding-left:var(--rs-gutter);padding-right:var(--rs-gutter)}
.editorial-v3.inner-page .project-summary{grid-template-columns:1.2fr .8fr 1fr;padding-top:0;padding-bottom:0}
.editorial-v3.inner-page .project-summary>div{padding:28px;border-color:var(--rs-hair)}
.editorial-v3.inner-page .project-summary>div:first-child{padding-left:0}
.editorial-v3.inner-page .project-summary span,.editorial-v3.inner-page .case-quick-facts span{color:var(--rs-red)}
.editorial-v3.inner-page .project-summary strong,.editorial-v3.inner-page .case-quick-facts strong{color:#fff;font-size:12px}
.editorial-v3.inner-page .case-quick-facts>.shell{width:min(100%,1480px)}
.editorial-v3.inner-page .case-quick-facts div{border-color:var(--rs-hair)}

/* Detail sections: no rounded boxes by default. */
.editorial-v3.inner-page .detail-section{padding:clamp(88px,9vw,140px) 0}
.editorial-v3.inner-page .detail-section.soft{background:var(--rs-paper-2)}
.editorial-v3.inner-page .detail-section.dark{background:var(--rs-black);color:#fff}
.editorial-v3.inner-page .detail-heading{grid-template-columns:1.1fr .75fr;gap:8vw;margin-bottom:48px;border-bottom:1px solid currentColor;padding-bottom:32px}
.editorial-v3.inner-page .detail-heading h2{font-size:clamp(48px,7vw,106px);line-height:.86;letter-spacing:-.078em}
.editorial-v3.inner-page .detail-heading p{align-self:end;color:#66645e}
.editorial-v3.inner-page .dark .detail-heading p{color:var(--rs-dim)}
.editorial-v3.inner-page .case-card,.editorial-v3.inner-page .other-site,.editorial-v3.inner-page .impact-card,.editorial-v3.inner-page .professional-work,.editorial-v3.inner-page .logo-feature{border-radius:0;box-shadow:none}
.editorial-v3.inner-page .case-card img{filter:grayscale(.4)}.editorial-v3.inner-page .case-card:hover img{filter:none}

/* Project briefs become a readable appendix, not the opening act. */
.editorial-v3.inner-page .project-brief{padding-top:clamp(90px,10vw,150px);padding-bottom:clamp(100px,11vw,170px)}
.editorial-v3.inner-page .project-brief-heading{grid-template-columns:1.1fr .7fr;border-bottom:1px solid #17181a;padding-bottom:34px}
.editorial-v3.inner-page .project-brief-heading h2{font-size:clamp(48px,6.8vw,102px);line-height:.86;letter-spacing:-.078em}
.editorial-v3.inner-page .project-brief-grid{grid-template-columns:repeat(2,1fr);border-left:0;border-top:1px solid #17181a}
.editorial-v3.inner-page .project-brief-item{min-height:240px;padding:30px 24px;border-color:rgba(20,21,23,.2);background:none}
.editorial-v3.inner-page .project-brief-item:nth-child(odd){border-left:1px solid rgba(20,21,23,.2)}
.editorial-v3.inner-page .project-brief-item:hover{background:#fff;transform:none}
.editorial-v3.inner-page .project-brief-item h3{margin-top:55px;font-size:28px}

/* 3D hub becomes a visual archive rather than a tile dashboard. */
.editorial-v3.page-three-d .three-d-hub-hero .three-d-hero-project-nav{border-radius:0}
.editorial-v3.page-three-d .three-d-project-hub{padding:clamp(85px,9vw,135px) 0;background:var(--rs-paper)}
.editorial-v3.page-three-d .three-d-project-hub-head{grid-template-columns:1.05fr .65fr;gap:8vw;margin-bottom:50px;border-bottom:1px solid #151617;padding-bottom:32px}
.editorial-v3.page-three-d .three-d-project-hub-head h2{font-size:clamp(54px,8vw,124px);line-height:.84;letter-spacing:-.08em}
.editorial-v3.page-three-d .three-d-project-grid{gap:10px}
.editorial-v3.page-three-d .three-d-project-card{border-radius:0;box-shadow:none}
.editorial-v3.page-three-d .three-d-project-card img{filter:grayscale(.5) brightness(.87)}
.editorial-v3.page-three-d .three-d-project-card:hover img{filter:none;transform:scale(1.016)}
.editorial-v3.page-three-d .three-d-project-index{border-radius:0;border:0;background:#0b0c0d}
.editorial-v3.page-three-d .three-d-project-arrow{border-radius:0;background:#0b0c0d;border:0}
.editorial-v3.page-three-d .three-d-project-detail-shot{border-width:3px;border-radius:0}
.editorial-v3.page-three-d .three-d-side-index{background:rgba(8,9,10,.9);border-radius:0}

/* Individual case-study heroes. */
.editorial-v3[class*="page-work-"] .visual-first-case-hero .detail-paper{padding:0 0 48px}
.editorial-v3[class*="page-work-"] .project-detail-caption{max-width:1180px}
.editorial-v3[class*="page-work-"] .project-detail-caption h1{font-size:clamp(70px,10.5vw,165px);line-height:.76;letter-spacing:-.085em;text-transform:uppercase;color:#fff}
.editorial-v3[class*="page-work-"] .project-detail-caption p{max-width:620px;color:rgba(255,255,255,.72);font-size:15px}
.editorial-v3[class*="page-work-"] .paper-meta{color:rgba(255,255,255,.55)}
.editorial-v3[class*="page-work-"] .case-section-nav{border-radius:0}
.editorial-v3[class*="page-work-"] .project-gallery .gallery-item{border-radius:0}

/* Footer — quiet and oversized. */
.editorial-v3 .site-footer{background:var(--rs-black);color:#fff;padding-top:110px}
.editorial-v3 .footer-line{display:none}
.editorial-v3 .footer-grid{grid-template-columns:1.15fr .55fr;gap:8vw;padding-bottom:90px;border-bottom:1px solid var(--rs-hair)}
.editorial-v3 .footer-grid h2{font-size:clamp(48px,7.6vw,115px);line-height:.82;letter-spacing:-.08em}
.editorial-v3 .footer-contact p{color:var(--rs-dim)}
.editorial-v3 .footer-roleline{color:rgba(255,255,255,.45)}
.editorial-v3 .footer-bottom{color:rgba(255,255,255,.48)}
.editorial-v3 .footer-bottom a{color:#fff}
.editorial-v3 .next-world{background:var(--rs-black)}
.editorial-v3 .next-world-link{width:min(100% - (var(--rs-gutter)*2),1480px)}
.editorial-v3 .next-world-link strong{font-size:clamp(60px,10vw,150px);line-height:.72;text-transform:uppercase}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media(max-width:1000px){
  .editorial-v3.page-home .hero h1{font-size:clamp(72px,16.5vw,155px)}
  .editorial-v3.page-home .hero-lead,.editorial-v3.page-home .hero-actions{width:min(520px,62vw)}
  .editorial-v3.page-home .project-row .project-card,.editorial-v3.page-home .project-row.left .project-card,.editorial-v3.page-home .project-row.right .project-card{grid-template-columns:1fr;gap:24px!important}
  .editorial-v3.page-home .project-row.right .project-visual,.editorial-v3.page-home .project-row.right .project-copy{grid-column:1;grid-row:auto}
  .editorial-v3.page-home .project-row.right .project-copy{grid-row:1}.editorial-v3.page-home .project-row.right .project-visual{grid-row:2}
  .editorial-v3.page-home .project-row.left .project-copy{grid-row:1}.editorial-v3.page-home .project-row.left .project-visual{grid-row:2}
  .editorial-v3.page-home .project-visual{min-height:560px}
  .editorial-v3.page-home .focus-layout,.editorial-v3.page-home .profile-grid{grid-template-columns:1fr;gap:55px}
  .editorial-v3.inner-page .visual-first-showcase-head,.editorial-v3.inner-page .detail-heading,.editorial-v3.inner-page .project-brief-heading,.editorial-v3.page-three-d .three-d-project-hub-head{grid-template-columns:1fr;gap:18px}
}

@media(max-width:760px){
  .editorial-v3 .site-header{top:9px;width:calc(100% - 18px);height:50px;padding:0 12px}
  .editorial-v3.page-home .hero-copy{padding-top:94px;padding-bottom:26px}
  .editorial-v3.page-home .hero-picture img{object-position:62% center;opacity:.76}
  .editorial-v3.page-home .hero::after{background:linear-gradient(180deg,rgba(8,9,10,.18),rgba(8,9,10,.75) 58%,rgba(8,9,10,.98) 100%),linear-gradient(90deg,rgba(8,9,10,.7),rgba(8,9,10,.1))}
  .editorial-v3.page-home .hero h1{font-size:clamp(63px,21vw,98px);line-height:.73}
  .editorial-v3.page-home .hero h1 span:last-child{margin-left:0;-webkit-text-stroke-width:1px}
  .editorial-v3.page-home .hero-lead{width:100%;margin:30px 0 0;font-size:14px;max-width:520px}
  .editorial-v3.page-home .hero-actions{width:100%;margin-left:0}
  .editorial-v3.page-home .hero-proof{grid-template-columns:1fr;margin-top:auto}
  .editorial-v3.page-home .hero-proof span{padding:8px 0;border-right:0;border-bottom:1px solid var(--rs-hair)}
  .editorial-v3.page-home .hero-proof span:last-child{border-bottom:0}
  .editorial-v3.page-home .hero-coordinate{display:none}
  .editorial-v3.page-home .manifesto{padding:90px 15px}
  .editorial-v3.page-home .manifesto h2{font-size:clamp(46px,15vw,72px)}
  .editorial-v3.page-home .manifesto-copy{font-size:19px;margin-top:36px}
  .editorial-v3.page-home .work-section>.work-head{width:calc(100% - 30px);grid-template-columns:1fr;padding:78px 0 38px;gap:24px}
  .editorial-v3.page-home .work-head h2{font-size:clamp(48px,15vw,72px)}
  .editorial-v3.page-home .journey{width:calc(100% - 30px)}
  .editorial-v3.page-home .project-row{padding:52px 0}
  .editorial-v3.page-home .project-copy h3{font-size:clamp(48px,16vw,72px)}
  .editorial-v3.page-home .project-visual{min-height:0!important;margin-top:12px;overflow-x:auto!important;padding-bottom:12px}
  .editorial-v3.page-home .project-card{gap:20px!important}
  .editorial-v3.page-home .focus-section{padding:90px 0}
  .editorial-v3.page-home .focus-intro h2{font-size:clamp(45px,14vw,68px)}
  .editorial-v3.page-home .capability{grid-template-columns:34px 1fr;gap:12px}.editorial-v3.page-home .capability p{grid-column:2}
  .editorial-v3.page-home .profile-section{padding:90px 0}
  .editorial-v3.page-home .profile-sticky h2{font-size:clamp(44px,14vw,66px)}
  .editorial-v3.inner-page .visual-first-hero,.editorial-v3.inner-page .visual-first-case-hero{min-height:78svh}
  .editorial-v3.inner-page .visual-first-hero-copy{padding-top:108px;padding-bottom:34px}
  .editorial-v3.inner-page .visual-first-hero h1{font-size:clamp(62px,19vw,88px);line-height:.76}
  .editorial-v3.inner-page .visual-first-showcase{padding:66px 0 78px}
  .editorial-v3.inner-page .visual-first-showcase-head{padding-bottom:24px;margin-bottom:28px}
  .editorial-v3.inner-page .visual-first-showcase-head h2{font-size:clamp(43px,14vw,62px)}
  .editorial-v3.inner-page .visual-first-grid{padding-left:15px;padding-right:15px}
  .editorial-v3.inner-page .project-summary{grid-template-columns:1fr;padding-left:15px;padding-right:15px}
  .editorial-v3.inner-page .project-summary>div,.editorial-v3.inner-page .project-summary>div:first-child{padding:18px 0;border-right:0;border-bottom:1px solid var(--rs-hair)}
  .editorial-v3.inner-page .project-summary>div:last-child{border-bottom:0}
  .editorial-v3.inner-page .detail-heading h2{font-size:clamp(43px,13vw,62px)}
  .editorial-v3.inner-page .project-brief-grid{display:block;border-top:1px solid #17181a}
  .editorial-v3.inner-page .project-brief-item{min-height:0;border-left:0!important;padding:28px 0}
  .editorial-v3.inner-page .project-brief-item h3{margin-top:28px}
  .editorial-v3.page-three-d .three-d-project-hub{padding:64px 0}
  .editorial-v3.page-three-d .three-d-project-hub-head h2{font-size:clamp(48px,15vw,68px)}
  .editorial-v3[class*="page-work-"] .project-detail-caption h1{font-size:clamp(54px,16vw,78px)}
  .editorial-v3 .footer-grid{grid-template-columns:1fr;gap:34px;padding-bottom:58px}.editorial-v3 .footer-grid h2{font-size:clamp(47px,14vw,68px)}
  .editorial-v3 .next-world-link{grid-template-columns:1fr}.editorial-v3 .next-world-link p{margin-top:20px}
}

@media(prefers-reduced-motion:reduce){
  .editorial-v3 *{scroll-behavior:auto!important}
}


/* ------------------------------------------------------------
   Always-free image canvas + back-to-top utility
   ------------------------------------------------------------ */
.editorial-v3 .global-control-layer .layout-tools{display:none!important}
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame{cursor:pointer!important}
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame.is-dragging{cursor:grabbing!important}
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:5200;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:0;
  background:rgba(8,9,10,.9);
  color:#fff;
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s,background .25s,color .25s,border-color .25s;
}
.back-to-top span{display:block;font-family:var(--font-display,"Space Grotesk"),sans-serif;font-size:26px;line-height:1;transform:translateY(-1px)}
.back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.back-to-top:hover{background:var(--rs-red,#ff3434);border-color:var(--rs-red,#ff3434);color:#fff}
.back-to-top:focus-visible{outline:3px solid rgba(255,52,52,.42);outline-offset:4px}
body.menu-open .back-to-top,body.lightbox-open .back-to-top{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:760px){.back-to-top{right:12px;bottom:12px;width:48px;height:48px}.back-to-top span{font-size:23px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* ===== assets/css/final-polish.css ===== */
/* RiskyShot final polish — interaction, rhythm, accessibility, 2026-08-09 */
:root{
  --motion-ui:150ms;
  --motion-media:340ms;
  --motion-section:590ms;
  --motion-ease:cubic-bezier(.2,.8,.2,1);
  /* No external font request. Use the preferred families when installed and
     fall back to modern platform fonts without blocking rendering. */
  --font-display:"Space Grotesk","Aptos Display","Segoe UI Variable Display","Helvetica Neue",Arial,sans-serif;
  --font-body:"Manrope","Aptos","Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
}

/* Header: almost invisible at the top, reliably readable after scrolling. */
.editorial-v3 .site-header,
.editorial-v3.inner-page .site-header{
  background:rgba(8,9,10,.08);
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  transition:background var(--motion-ui) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease,backdrop-filter var(--motion-ui) ease;
}
.editorial-v3 .site-header.scrolled,
.editorial-v3.inner-page .site-header.scrolled{
  background:rgba(8,9,10,.90);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 14px 46px rgba(0,0,0,.18);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  color:#fff;
}
.editorial-v3 .site-header.scrolled .brand-mark,
.editorial-v3.inner-page .site-header.scrolled .brand-mark{background:none;color:#fff}
.editorial-v3 .site-header.scrolled .desktop-nav>a,
.editorial-v3 .site-header.scrolled .nav-projects-trigger{color:rgba(255,255,255,.8)}

/* Stronger underlying grid: the images may move freely, everything else stays disciplined. */
@media(min-width:1001px){
  .editorial-v3.page-home .project-row .project-card,
  .editorial-v3.page-home .project-row.left .project-card,
  .editorial-v3.page-home .project-row.right .project-card{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(18px,2.2vw,36px)!important;
  }
  .editorial-v3.page-home .project-row.left .project-copy{grid-column:9/13;grid-row:1}
  .editorial-v3.page-home .project-row.left .project-visual{grid-column:1/8;grid-row:1}
  .editorial-v3.page-home .project-row.right .project-copy{grid-column:1/5;grid-row:1}
  .editorial-v3.page-home .project-row.right .project-visual{grid-column:6/13;grid-row:1}
  .editorial-v3.page-home .project-copy{align-self:center}
  .editorial-v3.page-home .project-row{padding:clamp(48px,5.2vw,74px) 0}
}

/* Project previews communicate both link and craft, without a heavy overlay. */
.editorial-v3.page-home .global-drag-layer .loose-frame{
  transition:opacity var(--motion-media) var(--motion-ease),box-shadow var(--motion-media) var(--motion-ease),filter var(--motion-media) var(--motion-ease)!important;
  outline:none;
}
.editorial-v3.page-home.frame-hovering .global-drag-layer .loose-frame:not(.is-hovered):not(.is-dragging){opacity:.54}
.editorial-v3.page-home .global-drag-layer .loose-frame.is-hovered{opacity:1;z-index:1000}
.editorial-v3.page-home .global-drag-layer .loose-frame .frame-caption{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:18px;
  align-items:end;
  min-width:min(100%,250px);
  transition:opacity var(--motion-ui) ease,transform var(--motion-ui) ease,background var(--motion-ui) ease!important;
}
.editorial-v3.page-home .global-drag-layer .loose-frame .frame-caption::after{
  content:"↗";
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font:600 18px/1 var(--font-display);
  color:var(--rs-red);
}
.editorial-v3.page-home .global-drag-layer .loose-frame .frame-caption b{grid-column:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editorial-v3.page-home .global-drag-layer .loose-frame .frame-caption small{grid-column:1;white-space:normal}
.editorial-v3.page-home .global-drag-layer .loose-frame:focus-visible{
  outline:3px solid var(--rs-red);
  outline-offset:5px;
}

/* Dragging: only starts after the JS movement threshold. The active object rises above all others. */
.editorial-v3.page-home .global-drag-layer .loose-frame.is-dragging{
  box-shadow:0 34px 110px rgba(0,0,0,.46)!important;
  cursor:grabbing!important;
  transition:box-shadow var(--motion-ui) ease!important;
}
.editorial-v3.page-home .global-drag-layer .loose-frame.is-dragging img{transform:scale(1.025)!important}
.editorial-v3.page-home .global-drag-layer .loose-frame.is-dragging .frame-caption{opacity:0!important}
.editorial-v3.page-home .frame-origin.is-drag-ghost{opacity:.16!important;outline:1px solid rgba(255,255,255,.4);outline-offset:-1px}

/* More consistent motion language. */
.reveal{transition-duration:var(--motion-section)!important;transition-timing-function:var(--motion-ease)!important}
.button,.desktop-nav a,.nav-projects-trigger,.nav-projects-menu a,.back-to-top{transition-duration:var(--motion-ui)!important}
.project-title-link h3,.visual-first-card img,.three-d-project-card img,.case-card img,.gallery-item img{transition-duration:var(--motion-media)!important;transition-timing-function:var(--motion-ease)!important}

/* Visual-first pages: give the hero image more room; metadata follows without competing with it. */
.editorial-v3.inner-page .visual-first-hero,
.editorial-v3.inner-page .visual-first-case-hero{min-height:min(94svh,980px)}
.editorial-v3.inner-page .visual-first-hero-copy{max-width:1480px}
.editorial-v3.inner-page .visual-first-hero-copy>p{max-width:560px}
.editorial-v3[class*="page-work-"] .project-detail-caption p{max-width:560px}
.editorial-v3.inner-page .project-summary strong,
.editorial-v3.inner-page .case-quick-facts strong{line-height:1.45}

/* Project gallery navigation stays compact and keyboard-friendly. */
.case-view-nav a:focus-visible,.three-d-side-index a:focus-visible,.visual-first-card:focus-visible,.three-d-project-card:focus-visible{
  outline:3px solid var(--rs-red);
  outline-offset:4px;
}

/* Personal closing statement; professional enough to share, personal enough to feel like an archive. */
.editorial-v3 .site-footer .footer-grid h2{max-width:1050px}
.editorial-v3 .footer-personal-line{display:block;margin-top:22px;color:#fff;font-size:12px;line-height:1.55;letter-spacing:.02em}
.editorial-v3.page-home .signature-copy p{max-width:860px}

/* Reduced motion: preserve layout and usability without decorative movement. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .intro,.page-transition{display:none!important}
  .reveal,.reveal.from-left,.reveal.from-right{opacity:1!important;transform:none!important;transition:none!important}
  .editorial-v3 *, .editorial-v3 *::before, .editorial-v3 *::after{animation:none!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .editorial-v3 img,.editorial-v3 a:hover img,.editorial-v3 .loose-frame:hover img,.editorial-v3 .three-d-project-card:hover img{transform:none!important}
  .signature-active{stroke-dashoffset:0!important}
}

@media(max-width:760px){
  .editorial-v3 .site-header,.editorial-v3.inner-page .site-header{background:rgba(8,9,10,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .editorial-v3 .site-header.scrolled,.editorial-v3.inner-page .site-header.scrolled{background:rgba(8,9,10,.94)}
  .editorial-v3.page-home .project-row{padding:44px 0}
}

/* Free objects keep the z-order of the last object moved. */
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame,
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame.was-moved,
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame:hover,
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame.is-dragging{
  z-index:var(--drag-z,1)!important;
}

/* Keep the project image dominant: titles identify the work without covering it. */
.editorial-v3.inner-page .visual-first-shade,
.editorial-v3.inner-page .visual-first-case-hero .project-hero-overlay{
  background:linear-gradient(180deg,rgba(7,8,9,.01) 34%,rgba(7,8,9,.78) 100%),linear-gradient(90deg,rgba(7,8,9,.22),transparent 55%);
}
.editorial-v3.inner-page .visual-first-hero h1{font-size:clamp(70px,9vw,138px);line-height:.78}
.editorial-v3[class*="page-work-"] .project-detail-caption h1{font-size:clamp(64px,8.4vw,128px);line-height:.8}
.editorial-v3.inner-page .visual-first-hero-copy,
.editorial-v3[class*="page-work-"] .project-detail-caption{text-shadow:0 2px 24px rgba(0,0,0,.28)}
@media(max-width:760px){
  .editorial-v3.inner-page .visual-first-hero h1{font-size:clamp(56px,17vw,78px)}
  .editorial-v3[class*="page-work-"] .project-detail-caption h1{font-size:clamp(50px,14vw,68px)}
}

/* -------------------------------------------------------------------------
   Navigation continuity + refined page motion — 2026-08-09
   ------------------------------------------------------------------------- */
.return-to-previous{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:5900;
  min-height:54px;
  max-width:min(300px,calc(100vw - 96px));
  display:flex;
  align-items:center;
  gap:11px;
  padding:7px 15px 7px 7px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(8,9,10,.88);
  color:#fff;
  box-shadow:0 14px 42px rgba(0,0,0,.20);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  cursor:pointer;
  opacity:0;
  animation:returnControlIn .5s var(--motion-ease) .5s forwards;
  transition:background var(--motion-ui) ease,border-color var(--motion-ui) ease,box-shadow var(--motion-ui) ease,transform var(--motion-ui) var(--motion-ease);
}
.return-to-previous:hover,
.return-to-previous:focus-visible{
  background:rgba(15,16,18,.97);
  border-color:rgba(255,255,255,.32);
  box-shadow:0 18px 54px rgba(0,0,0,.28);
}
.return-to-previous:focus-visible{outline:3px solid rgba(255,52,52,.58);outline-offset:4px}
.return-arrow{
  width:40px;height:40px;flex:0 0 40px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--rs-red,var(--red,#ff3434));
  color:#fff;
  font:600 20px/1 var(--font-display);
  transition:transform var(--motion-ui) var(--motion-ease);
}
.return-to-previous:hover .return-arrow{transform:translateX(-3px)}
.return-copy{min-width:0;display:grid;text-align:left;line-height:1.05}
.return-copy small{font:650 8px/1.2 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.return-copy strong{display:block;max-width:210px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:650 11px/1.2 var(--font-body);letter-spacing:-.01em;color:#fff}
@keyframes returnControlIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Page changes feel like one continuous editorial canvas rather than a hard load. */
@keyframes rsPageOut{
  to{opacity:.22;transform:translateX(-18px) scale(.995);filter:blur(3px)}
}
@keyframes rsPageIn{
  from{opacity:.12;transform:translateX(20px) scale(1.006);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes rsProjectOut{
  to{opacity:.38;transform:scale(.985);filter:brightness(.72)}
}
@keyframes rsProjectIn{
  from{opacity:.56;transform:scale(1.025);filter:brightness(.72)}
  to{opacity:1;transform:none;filter:none}
}
::view-transition-old(root){animation:rsPageOut .30s var(--motion-ease) both!important}
::view-transition-new(root){animation:rsPageIn .40s var(--motion-ease) both!important}
::view-transition-group(project-hero){animation-duration:.56s!important;animation-timing-function:var(--motion-ease)!important}
::view-transition-old(project-hero){animation:rsProjectOut .40s var(--motion-ease) both!important}
::view-transition-new(project-hero){animation:rsProjectIn .56s var(--motion-ease) both!important}

/* Fallback transition keeps the red line as a signature but moves more quickly. */
.page-transition{
  transition:clip-path .30s var(--motion-ease)!important;
  background:rgba(7,8,10,.985)!important;
}
.page-transition .transition-redline{
  height:2px!important;
  box-shadow:0 0 22px rgba(255,52,52,.75)!important;
  transform:scaleX(.06);
  transform-origin:left;
  transition:transform .26s var(--motion-ease) .02s;
}
body.is-leaving .page-transition .transition-redline{transform:scaleX(1)}
body.is-returning .page-transition{clip-path:inset(0 0 0 0)!important}
body.is-returning .page-transition .transition-redline{transform-origin:right}
.page-transition>img{
  width:54px;height:54px;object-fit:contain;
  opacity:.78;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.08));
}

/* Coordinated first beat: image settles, type follows, then the first visual block. */
body.page-arrived:not(.is-restoring-position) > .detail-hero > img,
body.page-arrived:not(.is-restoring-position) .visual-first-hero .detail-hero-media img{
  animation:heroSettle .64s var(--motion-ease) both;
}
body.page-arrived:not(.is-restoring-position) .visual-first-hero-copy,
body.page-arrived:not(.is-restoring-position) .project-detail-caption,
body.page-arrived:not(.is-restoring-position) .detail-paper{
  animation:heroCopyIn .50s var(--motion-ease) .08s both;
}
body.page-arrived:not(.is-restoring-position) .visual-first-showcase,
body.page-arrived:not(.is-restoring-position) .three-d-project-hub,
body.page-arrived:not(.is-restoring-position) .case-quick-facts{
  animation:firstBlockIn .48s var(--motion-ease) .16s both;
}
@keyframes heroSettle{from{opacity:.72;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes firstBlockIn{from{opacity:.2;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Returning to a remembered scroll position should be instant and calm. */
body.is-restoring-position .reveal{transition:none!important}
body.is-restoring-position .return-to-previous{animation:none;opacity:1}

@media(max-width:760px){
  .return-to-previous{left:12px;bottom:12px;min-height:48px;padding:5px 12px 5px 5px;max-width:calc(100vw - 78px)}
  .return-arrow{width:38px;height:38px;flex-basis:38px}
  .return-copy strong{max-width:150px}
}

@media(prefers-reduced-motion:reduce){
  .return-to-previous{animation:none!important;opacity:1!important}
  .return-arrow{transition:none!important}
  ::view-transition-old(root),::view-transition-new(root),::view-transition-old(project-hero),::view-transition-new(project-hero){animation:none!important}
  body.page-arrived > .detail-hero > img,
  body.page-arrived .visual-first-hero .detail-hero-media img,
  body.page-arrived .visual-first-hero-copy,
  body.page-arrived .project-detail-caption,
  body.page-arrived .detail-paper,
  body.page-arrived .visual-first-showcase,
  body.page-arrived .three-d-project-hub,
  body.page-arrived .case-quick-facts{animation:none!important}
}

/* Shared-image transition for the 3D archive and its case studies. */
.three-d-project-card.is-vt-source picture,
.visual-first-case-hero>img{view-transition-name:project-hero}

/* 2026-08-09 — extra motion + utility fine tuning */
.return-to-previous{
  border-color:rgba(255,255,255,.12);
  background:rgba(8,9,10,.84);
  box-shadow:0 18px 46px rgba(0,0,0,.22);
}
.return-copy small{letter-spacing:.16em}
.page-transition{
  background:linear-gradient(90deg,rgba(7,8,10,.985) 0%,rgba(8,10,12,.975) 50%,rgba(7,8,10,.985) 100%)!important;
}
.page-transition .transition-redline{
  box-shadow:0 0 26px rgba(255,52,52,.8),0 0 48px rgba(255,52,52,.2)!important;
}
@keyframes rsPageOut{
  to{opacity:.14;transform:translateX(-22px) scale(.992);filter:blur(4px)}
}
@keyframes rsPageIn{
  from{opacity:.08;transform:translateX(24px) scale(1.008);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes heroSettle{
  from{opacity:.66;transform:scale(1.034)}
  60%{opacity:1}
  to{opacity:1;transform:scale(1)}
}
@keyframes heroCopyIn{
  from{opacity:0;transform:translateY(24px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes firstBlockIn{
  from{opacity:.12;transform:translateY(20px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
.visual-first-card,
.release-grid img,
.material-grid img,
.three-d-project-card,
.case-gallery img{
  transition:transform .26s var(--motion-ease), box-shadow .26s ease, filter .26s ease;
}
.visual-first-card:hover,
.release-grid img:hover,
.material-grid img:hover,
.three-d-project-card:hover,
.case-gallery img:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(0,0,0,.12);
  filter:saturate(1.02) contrast(1.01);
}

/* Visual placeholders for projects whose original screenshots are not curated yet. */
.other-sites--visual{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.other-sites--visual .other-site{
  min-height:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  overflow:hidden;
  position:relative;
}
.other-site-thumb{display:block;overflow:hidden;background:#111;aspect-ratio:16/10}
.other-site-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28);transition:transform .45s var(--motion-ease),filter .45s ease}
.other-sites--visual .other-site>div{padding:20px 62px 22px 22px}
.other-sites--visual .other-site>i{position:absolute;right:18px;bottom:20px}
.other-sites--visual .other-site:hover .other-site-thumb img{transform:scale(1.025);filter:grayscale(0)}
.placeholder-label{display:block;margin-bottom:8px;font:700 8px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--red,#ff3434)}
@media(max-width:900px){.other-sites--visual{grid-template-columns:1fr}.other-site-thumb{aspect-ratio:16/9}}

/* 2026-08-09 — hovered free image always owns the visual foreground */
.editorial-v3.page-home.frame-hovering .global-drag-layer.free-image-canvas .loose-frame.is-hovered,
.editorial-v3.page-home .global-drag-layer.free-image-canvas .loose-frame:hover{
  z-index:2147483000!important;
  opacity:1!important;
  filter:none!important;
}
.editorial-v3.page-home.frame-hovering .global-drag-layer.free-image-canvas .loose-frame:not(.is-hovered):not(.is-dragging){
  opacity:.38;
}

/* V13 — keep overlapping project images fully opaque. */
.editorial-v3.page-home.frame-hovering .global-drag-layer .loose-frame:not(.is-hovered):not(.is-dragging){opacity:1!important}
.editorial-v3.page-home .global-drag-layer .loose-frame,
.editorial-v3.page-home .global-drag-layer .loose-frame img{opacity:1!important;mix-blend-mode:normal!important}
.editorial-v3.page-home .frame-origin.is-drag-ghost{opacity:0!important;visibility:hidden!important}

/* ===== assets/css/side-rail.css ===== */
/* RiskyShot navigation rail — consolidated quality pass, 2026-08-09 */
:root{
  --rail-trigger:16px;
  --rail-expanded:214px;
  --rail-bg:#070809;
  --rail-card:#171819;
  --rail-card-hover:#202123;
  --rail-active:#f3eee4;
  --rail-text:#f7f4ed;
  --rail-muted:rgba(247,244,237,.43);
  --rail-red:#ff3434;
  --rail-ease:cubic-bezier(.2,.72,.18,1);
  --rail-speed:118ms;
  --stage-offset:0px;
}

.site-header,.mobile-nav,.project-rail{display:none!important}

/* The rail owns one interaction model: desktop = hover/focus, mobile = click. */
.side-rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail-trigger);
  z-index:6100;
  color:var(--rail-text);
  font-family:var(--font-body,"Manrope",Inter,system-ui,sans-serif);
  pointer-events:auto;
}
.side-rail.is-peek{width:var(--rail-expanded)}
.side-rail-shell{position:static;width:0;height:0;overflow:visible;pointer-events:none}
.side-brand,.side-nav-toggle,.side-nav-panel{pointer-events:auto}

/* Launcher: free-standing mark + two lines, no button chrome. Difference blend
   keeps it legible over both the dark hero and light editorial sections. */
.side-brand{
  position:fixed;
  top:16px;left:16px;
  width:30px;height:30px;
  display:grid;place-items:center;
  padding:0;border:0;background:transparent;
  z-index:5;
  mix-blend-mode:difference;
  transition:transform 120ms var(--rail-ease),opacity 120ms ease;
}
.side-brand img{display:block;width:100%;height:100%;object-fit:contain}
.side-brand:hover,.side-brand:focus-visible{transform:scale(1.04)}

.side-nav-toggle{
  position:fixed;
  top:17px;left:57px;
  width:28px;height:28px;
  display:grid;place-content:center;gap:6px;
  padding:0;border:0;background:transparent;color:#fff;
  cursor:pointer;z-index:5;
  mix-blend-mode:difference;
  transition:opacity 120ms ease;
  touch-action:manipulation;
}
.side-nav-toggle span:not(.sr-only){
  display:block;width:18px;height:1px;background:currentColor;
  transform-origin:center;
  transition:transform 145ms var(--rail-ease),width 145ms var(--rail-ease);
}
.side-nav-toggle::after{
  content:"";position:absolute;right:-4px;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--rail-red);transform:translateY(-50%) scale(0);transition:transform 100ms ease;
}
.side-nav-toggle:hover::after,.side-nav-toggle:focus-visible::after{transform:translateY(-50%) scale(1)}
.side-brand:focus-visible,.side-nav-toggle:focus-visible{outline:2px solid var(--rail-red);outline-offset:5px}

.side-rail.is-peek .side-brand,.side-rail.is-peek .side-nav-toggle,
.side-rail.is-open .side-brand,.side-rail.is-open .side-nav-toggle{mix-blend-mode:normal}
.side-rail.is-peek .side-nav-toggle span:first-child,.side-rail.is-open .side-nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
.side-rail.is-peek .side-nav-toggle span:nth-child(2),.side-rail.is-open .side-nav-toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.side-nav-panel{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail-expanded);
  min-width:var(--rail-expanded);
  padding:61px 8px 12px;
  display:flex;flex-direction:column;
  background:var(--rail-bg);
  transform:translate3d(-100%,0,0);
  visibility:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  z-index:3;
  border-right:1px solid rgba(255,52,52,.34);
  transition:transform var(--rail-speed) var(--rail-ease),visibility 0s linear var(--rail-speed);
  contain:layout paint style;
  backface-visibility:hidden;
}
.side-nav-panel::-webkit-scrollbar{display:none}
.side-rail.is-peek .side-nav-panel,.side-rail.is-open .side-nav-panel{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform var(--rail-speed) var(--rail-ease),visibility 0s;
}

/* Equal-weight overview tiles. */
.side-tile-nav{display:grid;gap:5px}
.side-tile-wrap{position:relative;min-width:0}
.side-tile{
  position:relative;
  width:100%;min-height:47px;
  padding:5px 8px 5px 5px;
  display:grid;grid-template-columns:34px minmax(0,1fr) 10px;gap:8px;align-items:center;
  border:1px solid transparent;
  border-radius:7px;
  background:var(--rail-card);
  color:rgba(247,244,237,.84);
  overflow:hidden;
  transition:background 105ms ease,color 105ms ease,border-color 105ms ease,transform 120ms var(--rail-ease);
  contain:paint;
}
.side-tile-wrap>.side-tile{padding-right:39px}
.side-tile:hover,.side-tile:focus-visible{background:var(--rail-card-hover);color:#fff;border-color:rgba(255,255,255,.035);transform:translate3d(1px,0,0)}
.side-tile:focus-visible{outline:2px solid rgba(255,52,52,.72);outline-offset:2px}
.side-tile.is-active{background:var(--rail-active);color:#0d0e10;border-color:transparent;transform:none}

.side-tile-thumb{width:34px;height:34px;border-radius:3px;overflow:hidden;background:#0e0f10;display:grid;place-items:center}
.side-tile-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) contrast(1.03);transition:filter 120ms ease,transform 170ms var(--rail-ease)}
.side-tile:hover .side-tile-thumb img,.side-tile.is-active .side-tile-thumb img{filter:none}
.side-tile:hover .side-tile-thumb img{transform:scale(1.035)}
.side-tile-thumb.logo-thumb{padding:6px;background:#111214}.side-tile-thumb.logo-thumb img{object-fit:contain;filter:none!important}
.side-tile strong{min-width:0;font-family:var(--font-display,"Space Grotesk",Inter,sans-serif);font-size:9.8px;font-weight:650;line-height:1.05;letter-spacing:.012em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-tile-index{font:700 6.7px/1 var(--font-body,"Manrope",sans-serif);letter-spacing:.08em;color:rgba(247,244,237,.23);text-align:right}
.side-tile.is-active .side-tile-index{color:var(--rail-red)}

/* Direct project-page action; tile itself remains the start-page overview jump. */
.side-tile-direct{
  position:absolute;z-index:4;top:50%;right:4px;
  width:30px;height:33px;transform:translateY(-50%);
  display:grid;place-items:center;
  border-left:1px solid rgba(255,255,255,.075);border-radius:0 5px 5px 0;
  color:rgba(247,244,237,.42);
  font:600 13px/1 var(--font-display,"Space Grotesk",Inter,sans-serif);
  transition:color 100ms ease,background 100ms ease,transform 120ms var(--rail-ease);
}
.side-tile-direct:hover,.side-tile-direct:focus-visible{color:var(--rail-red);background:rgba(255,255,255,.04);transform:translateY(-50%) translate3d(1px,-1px,0)}
.side-tile-direct:focus-visible{outline:2px solid rgba(255,52,52,.72);outline-offset:1px}
.side-tile.is-active + .side-tile-direct{color:rgba(13,14,16,.48);border-left-color:rgba(13,14,16,.12)}
.side-tile.is-active + .side-tile-direct:hover,.side-tile.is-active + .side-tile-direct:focus-visible{color:#d72828;background:rgba(13,14,16,.05)}

.side-rail-foot{margin-top:auto;padding:12px 3px 0;display:grid;gap:8px;color:var(--rail-muted)}
.side-rail-foot>span{font-size:6.7px;text-transform:uppercase;letter-spacing:.17em}
.side-rail-foot div{display:flex;gap:10px;flex-wrap:wrap}
.side-rail-foot a{font-size:6.7px;text-transform:uppercase;letter-spacing:.06em;color:var(--rail-muted);transition:color 100ms ease}
.side-rail-foot a:hover{color:#fff}
.side-nav-backdrop{position:fixed;inset:0;z-index:6050;background:rgba(0,0,0,.58);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms ease,visibility 150ms ease}

/* Desktop reflow: the browser lays the page out inside the remaining width.
   Only one layout property changes and it is deliberately fast. */
@media(min-width:901px){
  body{
    --stage-offset:0px;
    padding-left:var(--stage-offset);
    overflow-x:hidden;
    transition:padding-left 112ms var(--rail-ease);
  }
  body.side-nav-visible{--stage-offset:var(--rail-expanded);background:#08090a}
  body.side-nav-visible .side-nav-backdrop{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

  .scroll-progress{left:var(--stage-offset)!important;width:calc(100% - var(--stage-offset))!important;transition:left 112ms var(--rail-ease),width 112ms var(--rail-ease)}
  .return-to-previous{left:calc(18px + var(--stage-offset))!important;transition:left 112ms var(--rail-ease),background 110ms ease,border-color 110ms ease,box-shadow 110ms ease!important}
  body>.global-drag-layer{left:var(--stage-offset)!important;width:calc(100vw - var(--stage-offset))!important;max-width:calc(100vw - var(--stage-offset))!important;transition:left 112ms var(--rail-ease),width 112ms var(--rail-ease)}
  body.side-nav-visible>.global-drag-layer .loose-frame{pointer-events:none!important}
}

/* Touch/tablet: traditional overlay drawer, no hover assumptions. */
@media(max-width:900px){
  :root{--rail-trigger:0px;--rail-expanded:min(86vw,292px)}
  .side-rail{width:0;overflow:visible}.side-rail.is-open{width:var(--rail-expanded)}
  .side-brand{top:14px;left:14px;width:30px;height:30px}
  .side-nav-toggle{top:15px;left:55px;width:28px;height:28px}
  .side-nav-panel{padding:59px 8px 12px}
  body.side-nav-open{overflow:hidden}
  body.side-nav-open .side-nav-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .back-to-top{right:12px!important}
}
@media(max-width:520px){
  :root{--rail-expanded:min(90vw,280px)}
  .side-brand{top:12px;left:12px;width:29px;height:29px}
  .side-nav-toggle{top:13px;left:52px;width:27px;height:27px}
}

.project-row[id],#profile,#werdegang{scroll-margin-top:24px}

@media(prefers-reduced-motion:reduce){
  body,.side-brand,.side-nav-toggle,.side-nav-toggle span,.side-nav-panel,.side-tile,.side-tile-thumb img,.side-tile-direct,.side-nav-backdrop,.scroll-progress,.return-to-previous,body>.global-drag-layer{transition:none!important}
}


/* 2026-08-09 V7 — slower editorial rail reveal inspired by the deliberate LamaLama menu rhythm. */
:root{--rail-expanded:226px;--rail-open-speed:980ms;--rail-close-speed:430ms;--rail-open-ease:cubic-bezier(.48,0,.18,1);--rail-close-ease:cubic-bezier(.32,.72,.2,1)}
.side-nav-panel{transform:translate3d(-103%,0,0);transition:transform var(--rail-close-speed) var(--rail-close-ease),visibility 0s linear var(--rail-close-speed);box-shadow:18px 0 60px rgba(0,0,0,.12)}
.side-rail.is-peek .side-nav-panel,.side-rail.is-open .side-nav-panel{transform:translate3d(0,0,0);transition:transform var(--rail-open-speed) var(--rail-open-ease),visibility 0s}
.side-tile-nav>*{opacity:0;transform:translate3d(-18px,0,0);transition:opacity 300ms ease,transform 620ms var(--rail-open-ease)}
.side-rail.is-peek .side-tile-nav>*,.side-rail.is-open .side-tile-nav>*{opacity:1;transform:none}
.side-rail.is-peek .side-tile-nav>*:nth-child(1),.side-rail.is-open .side-tile-nav>*:nth-child(1){transition-delay:300ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(2),.side-rail.is-open .side-tile-nav>*:nth-child(2){transition-delay:350ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(3),.side-rail.is-open .side-tile-nav>*:nth-child(3){transition-delay:400ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(4),.side-rail.is-open .side-tile-nav>*:nth-child(4){transition-delay:450ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(5),.side-rail.is-open .side-tile-nav>*:nth-child(5){transition-delay:500ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(6),.side-rail.is-open .side-tile-nav>*:nth-child(6){transition-delay:550ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(7),.side-rail.is-open .side-tile-nav>*:nth-child(7){transition-delay:600ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(8),.side-rail.is-open .side-tile-nav>*:nth-child(8){transition-delay:650ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(9),.side-rail.is-open .side-tile-nav>*:nth-child(9){transition-delay:700ms}
.side-rail.is-peek .side-tile-nav>*:nth-child(10),.side-rail.is-open .side-tile-nav>*:nth-child(10){transition-delay:750ms}
.side-rail:not(.is-peek):not(.is-open) .side-tile-nav>*{transition-delay:0ms}
.side-rail-foot{opacity:0;transform:translate3d(-10px,0,0);transition:opacity 220ms ease,transform 420ms var(--rail-open-ease)}
.side-rail.is-peek .side-rail-foot,.side-rail.is-open .side-rail-foot{opacity:1;transform:none;transition-delay:800ms}
@media(min-width:901px){
 body{transition:padding-left 900ms var(--rail-open-ease)}
 .scroll-progress{transition:left 900ms var(--rail-open-ease),width 900ms var(--rail-open-ease)!important}
 body>.global-drag-layer{transition:left 900ms var(--rail-open-ease),width 900ms var(--rail-open-ease)!important}
}
@media(prefers-reduced-motion:reduce){.side-tile-nav>*,.side-rail-foot{opacity:1!important;transform:none!important}}

/* 2026-08-09 V11 — single top-left menu launcher, based on the supplied reference. */
.side-brand{display:none!important}
.side-nav-toggle{
  top:8px;
  left:8px;
  width:84px;
  height:84px;
  display:block;
  padding:0;
  border:1px solid rgba(238,238,234,.22);
  border-radius:8px;
  background:rgba(31,32,32,.78);
  color:rgba(239,239,235,.84);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 10px 28px rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(10px) saturate(.86);
  backdrop-filter:blur(10px) saturate(.86);
  mix-blend-mode:normal;
  transition:background 260ms ease,border-color 260ms ease,color 260ms ease,box-shadow 260ms ease;
}
.side-nav-toggle:hover,
.side-nav-toggle:focus-visible{
  background:rgba(36,37,37,.9);
  border-color:rgba(245,245,240,.34);
  color:rgba(250,250,246,.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 32px rgba(0,0,0,.12);
}
.side-nav-toggle:focus-visible{outline:1px solid rgba(245,245,240,.58);outline-offset:3px}
.side-nav-toggle::after{display:none!important}
.side-nav-toggle span:not(.sr-only){
  position:absolute;
  display:block;
  margin:0;
  padding:0;
  background:currentColor;
  transform:none!important;
  transition:none!important;
}
.side-nav-toggle span:first-child{
  left:27px;
  top:29px;
  width:6px;
  height:5px;
  border-radius:.5px;
  box-shadow:0 9px 0 currentColor,0 18px 0 currentColor;
}
.side-nav-toggle span:nth-child(2){
  left:38px;
  top:30px;
  width:21px;
  height:3px;
  border-radius:.5px;
  box-shadow:0 9px 0 currentColor,0 18px 0 currentColor;
}
.side-rail.is-peek .side-nav-toggle,
.side-rail.is-open .side-nav-toggle{
  mix-blend-mode:normal;
  background:rgba(27,28,28,.94);
  border-color:rgba(245,245,240,.26);
}
.side-rail.is-peek .side-nav-toggle span:first-child,
.side-rail.is-open .side-nav-toggle span:first-child,
.side-rail.is-peek .side-nav-toggle span:nth-child(2),
.side-rail.is-open .side-nav-toggle span:nth-child(2){transform:none!important}
.side-nav-panel{padding-top:106px}

@media(max-width:900px){
  .side-nav-toggle{
    top:10px;
    left:10px;
    width:64px;
    height:64px;
    border-radius:8px;
  }
  .side-nav-toggle span:first-child{left:20px;top:20px;width:5px;height:4px;box-shadow:0 8px 0 currentColor,0 16px 0 currentColor}
  .side-nav-toggle span:nth-child(2){left:29px;top:20.5px;width:17px;height:2.5px;box-shadow:0 8px 0 currentColor,0 16px 0 currentColor}
  .side-nav-panel{padding-top:86px}
}
@media(max-width:520px){
  .side-nav-toggle{top:9px;left:9px;width:60px;height:60px}
  .side-nav-toggle span:first-child{left:18px;top:19px}
  .side-nav-toggle span:nth-child(2){left:27px;top:19.5px}
  .side-nav-panel{padding-top:80px}
}


/* 2026-08-09 V12 — compact LamaLama-inspired launcher. The launcher disappears
   as soon as the rail opens, leaving the drawer itself as the only navigation UI. */
:root{
  --launcher-bg:#1a1c1c;
  --launcher-ink:#f9f4eb;
}
.side-nav-toggle{
  top:14px;
  left:14px;
  width:58px;
  height:58px;
  border:1px solid rgba(249,244,235,.24);
  border-radius:5px;
  background:rgba(26,28,28,.88);
  color:rgba(249,244,235,.92);
  box-shadow:none;
  -webkit-backdrop-filter:blur(12px) saturate(.82);
  backdrop-filter:blur(12px) saturate(.82);
  transition:
    opacity 180ms ease,
    transform 420ms cubic-bezier(.16,.84,.18,1),
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
  transform-origin:left top;
}
.side-nav-toggle:hover,
.side-nav-toggle:focus-visible{
  background:rgba(26,28,28,.98);
  border-color:rgba(249,244,235,.42);
  color:#f9f4eb;
  box-shadow:none;
  transform:scale(.985);
}
.side-nav-toggle span:first-child{
  left:18px;
  top:19px;
  width:4px;
  height:4px;
  border-radius:.25px;
  box-shadow:0 8px 0 currentColor,0 16px 0 currentColor;
}
.side-nav-toggle span:nth-child(2){
  left:27px;
  top:20px;
  width:14px;
  height:2px;
  border-radius:0;
  box-shadow:0 8px 0 currentColor,0 16px 0 currentColor;
}
.side-rail.is-peek .side-nav-toggle,
.side-rail.is-open .side-nav-toggle{
  opacity:0;
  transform:translate3d(-10px,-2px,0) scale(.86);
  pointer-events:none;
  background:rgba(26,28,28,.88);
  border-color:rgba(249,244,235,.24);
}
.side-nav-panel{
  padding-top:14px;
}
@media(max-width:900px){
  .side-nav-toggle{
    top:12px;
    left:12px;
    width:54px;
    height:54px;
    border-radius:5px;
  }
  .side-nav-toggle span:first-child{left:17px;top:17px;width:4px;height:4px;box-shadow:0 8px 0 currentColor,0 16px 0 currentColor}
  .side-nav-toggle span:nth-child(2){left:26px;top:18px;width:13px;height:2px;box-shadow:0 8px 0 currentColor,0 16px 0 currentColor}
  .side-nav-panel{padding-top:12px}
}
@media(max-width:520px){
  .side-nav-toggle{top:10px;left:10px;width:52px;height:52px}
  .side-nav-toggle span:first-child{left:16px;top:16px}
  .side-nav-toggle span:nth-child(2){left:25px;top:17px}
  .side-nav-panel{padding-top:10px}
}

/* 2026-08-09 V14 — open rail fully replaces the launcher.
   The panel is intentionally stacked above the launcher so there can never be
   a visible overlap with the first navigation tile during open/close motion. */
.side-nav-panel{
  z-index:8;
}
.side-nav-toggle{
  z-index:7;
}
.side-rail.is-peek .side-nav-toggle,
.side-rail.is-open .side-nav-toggle,
body.side-nav-visible .side-nav-toggle,
body.side-nav-open .side-nav-toggle{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(-8px,-2px,0) scale(.84)!important;
  z-index:1!important;
}
.side-rail.is-peek .side-nav-panel,
.side-rail.is-open .side-nav-panel{
  z-index:8;
}


/* 2026-08-09 V15 — rail and responsive stage move as one system.
   Open and close now use the exact same timing/easing on drawer and page reflow. */
@media(min-width:901px){
  body{
    transition:padding-left var(--rail-close-speed) var(--rail-close-ease)!important;
  }
  body.side-nav-visible{
    transition:padding-left var(--rail-open-speed) var(--rail-open-ease)!important;
  }
  .scroll-progress{
    transition:left var(--rail-close-speed) var(--rail-close-ease),width var(--rail-close-speed) var(--rail-close-ease)!important;
  }
  body.side-nav-visible .scroll-progress{
    transition:left var(--rail-open-speed) var(--rail-open-ease),width var(--rail-open-speed) var(--rail-open-ease)!important;
  }
  body>.global-drag-layer{
    transition:left var(--rail-close-speed) var(--rail-close-ease),width var(--rail-close-speed) var(--rail-close-ease),max-width var(--rail-close-speed) var(--rail-close-ease)!important;
  }
  body.side-nav-visible>.global-drag-layer{
    transition:left var(--rail-open-speed) var(--rail-open-ease),width var(--rail-open-speed) var(--rail-open-ease),max-width var(--rail-open-speed) var(--rail-open-ease)!important;
  }
  .return-to-previous{
    transition:left var(--rail-close-speed) var(--rail-close-ease),background 110ms ease,border-color 110ms ease,box-shadow 110ms ease!important;
  }
  body.side-nav-visible .return-to-previous{
    transition:left var(--rail-open-speed) var(--rail-open-ease),background 110ms ease,border-color 110ms ease,box-shadow 110ms ease!important;
  }
}

/* "Über mich" and "Werdegang" must be two real scroll stations instead of
   two links resolving to almost the same vertical coordinate. */
.editorial-v3.page-home #werdegang{
  margin-top:clamp(190px,20vh,290px);
  scroll-margin-top:34px;
}
.editorial-v3.page-home .career-heading{
  display:grid;
  gap:10px;
  padding:0 0 30px;
  border-bottom:1px solid var(--line);
}
.editorial-v3.page-home .career-heading h3{
  max-width:560px;
  font-family:var(--font-display,"Space Grotesk",Inter,sans-serif);
  font-size:clamp(28px,3vw,44px);
  line-height:.98;
  letter-spacing:-.045em;
}
.editorial-v3.page-home .career-heading p{
  max-width:520px;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
@media(max-width:900px){
  .editorial-v3.page-home #werdegang{margin-top:72px;scroll-margin-top:24px}
  .editorial-v3.page-home .career-heading{padding-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  body,.scroll-progress,body>.global-drag-layer,.return-to-previous{transition:none!important}
}

/* ===== assets/css/brand-intro.css ===== */
/* RiskyShot signature opening — icon morph / editorial reveal, 2026-08-09 */
.brand-intro{display:none;--intro-progress:0;--intro-ink:#17191a;--intro-paper:#f5f0e7;--intro-red:#ff3434}
html.brand-intro-pending{overflow:hidden}
html.brand-intro-pending body{overflow:hidden}
html.brand-intro-pending .brand-intro{
  position:fixed;inset:0;z-index:12000;display:block;overflow:hidden;isolation:isolate;
  background:var(--intro-paper);color:var(--intro-ink);cursor:pointer;
  clip-path:inset(0 0 0 0);will-change:clip-path;
}
.brand-intro::before,.brand-intro::after{content:"";position:absolute;pointer-events:none;z-index:1}
.brand-intro::before{inset:0;background:linear-gradient(90deg,transparent 49.94%,rgba(23,25,26,.09) 50%,transparent 50.06%);opacity:.4}
.brand-intro::after{left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(23,25,26,.13),transparent);transform:scaleX(.03);opacity:0;animation:introHorizon 2.1s cubic-bezier(.16,.8,.18,1) .24s forwards}
.brand-intro-grain{position:absolute;inset:-20%;z-index:7;opacity:.028;pointer-events:none;background-image:radial-gradient(circle at 10% 20%,#111 0 1px,transparent 1.1px),radial-gradient(circle at 70% 40%,#111 0 .7px,transparent .8px),radial-gradient(circle at 40% 80%,#111 0 .65px,transparent .75px);background-size:31px 29px,37px 43px,53px 47px;transform:rotate(2deg);mix-blend-mode:multiply}
.brand-intro-darkfield{position:absolute;left:50%;top:50%;z-index:2;width:24vmax;height:24vmax;border-radius:50%;background:#17191a;transform:translate3d(-50%,-50%,0) scale(.035);opacity:0;will-change:transform,opacity}
.brand-intro.is-morphing .brand-intro-darkfield{animation:introDarkfield 1.18s cubic-bezier(.16,.82,.16,1) forwards}
.brand-intro-wordmark{position:absolute;left:50%;top:50%;z-index:3;width:min(92vw,1500px);display:flex;justify-content:space-between;align-items:center;transform:translate3d(-50%,-44%,0);font:650 clamp(76px,15vw,250px)/.76 var(--font-display,"Space Grotesk",Inter,sans-serif);letter-spacing:-.095em;color:rgba(245,240,231,.97);opacity:0;clip-path:inset(0 50%);pointer-events:none;white-space:nowrap}
.brand-intro-wordmark span:last-child{color:transparent;-webkit-text-stroke:1px rgba(245,240,231,.34)}
.brand-intro.is-wordmark .brand-intro-wordmark{animation:introWordmark 1.05s cubic-bezier(.16,.82,.16,1) forwards}
.brand-intro-origin{position:absolute;left:24px;bottom:52px;z-index:8;display:flex;gap:18px;font:650 7px/1 var(--font-body,"Manrope",sans-serif);letter-spacing:.16em;text-transform:uppercase;color:rgba(23,25,26,.34);transition:color .5s ease,opacity .35s ease}
.brand-intro.is-complete .brand-intro-origin{color:rgba(245,240,231,.28)}
.brand-intro-stage{position:absolute;inset:0;z-index:4;display:grid;place-items:center;perspective:1000px}
.brand-intro-stage::before,.brand-intro-stage::after{content:"";position:absolute;left:50%;top:50%;width:min(60vw,620px);height:min(60vw,620px);transform:translate(-50%,-50%) scale(.92);border:1px solid rgba(23,25,26,.08);opacity:0;animation:introGuide 1.1s ease .42s forwards;pointer-events:none;transition:border-color .45s ease,opacity .4s ease}
.brand-intro-stage::after{width:min(43vw,450px);height:min(43vw,450px);transform:translate(-50%,-50%) rotate(45deg) scale(.92);animation-delay:.62s}
.brand-intro.is-morphing .brand-intro-stage::before,.brand-intro.is-morphing .brand-intro-stage::after{border-color:rgba(245,240,231,.065)}
.brand-intro-emblem{position:fixed;left:50%;top:50%;z-index:5;width:clamp(180px,21vw,300px);aspect-ratio:1;transform:translate3d(-50%,-51%,0) scale(.9);transform-origin:center;will-change:transform,opacity;animation:introMarkSettle .8s cubic-bezier(.16,.82,.18,1) .18s both}
.brand-intro-drawing,.brand-intro-fill,.brand-intro-lockup{position:absolute;inset:0;width:100%;height:100%;display:block}
.brand-intro-drawing{overflow:visible;z-index:2;transition:opacity .38s ease}
.brand-intro-path{fill:none;stroke:rgba(23,25,26,.92);stroke-width:1.45;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke .55s ease}
.brand-intro.is-running .brand-intro-path--one{animation:introDraw 1.2s cubic-bezier(.62,0,.22,1) .45s forwards}
.brand-intro.is-running .brand-intro-path--two{animation:introDraw 1.2s cubic-bezier(.62,0,.22,1) 1.02s forwards}
.brand-intro.is-morphing .brand-intro-path{stroke:rgba(245,240,231,.92)}
.brand-intro-red{fill:none;stroke:var(--intro-red);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:.04 .96;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 9px rgba(255,52,52,.65))}
.brand-intro.is-running .brand-intro-red{animation:introTracer 1.05s cubic-bezier(.2,.8,.2,1) 1.35s forwards}
.brand-intro-fill{z-index:1;overflow:hidden;clip-path:inset(0 50%);filter:blur(1.5px);opacity:0;transform:scale(.96);transform-origin:center}
.brand-intro-lockup{object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,255,255,.08))}
.brand-intro.is-filling .brand-intro-fill{animation:introFill .92s cubic-bezier(.16,.82,.16,1) forwards}
.brand-intro.is-complete .brand-intro-fill{clip-path:inset(0);filter:none;opacity:1;transform:none}
.brand-intro.is-complete .brand-intro-drawing{opacity:.12}
.brand-intro.is-wordmark .brand-intro-emblem{animation:introMarkFloat 1.25s cubic-bezier(.16,.82,.16,1) forwards}
.brand-intro-grid{display:none}
.brand-intro-status{position:absolute;left:24px;top:21px;z-index:8;display:flex;align-items:flex-start;gap:4px;font:650 9px/1 var(--font-body,"Manrope",Inter,system-ui,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:rgba(23,25,26,.48);transition:color .45s ease,opacity .3s ease}
.brand-intro-count{min-width:34px;font-family:var(--font-display,"Space Grotesk",Inter,sans-serif);font-size:12px;font-variant-numeric:tabular-nums;color:currentColor;letter-spacing:.04em}
.brand-intro-phase{position:absolute;right:24px;top:21px;z-index:8;max-width:48vw;font:650 8px/1.2 var(--font-body,"Manrope",Inter,system-ui,sans-serif);letter-spacing:.17em;text-transform:uppercase;text-align:right;color:rgba(23,25,26,.38);transition:color .45s ease,opacity .3s ease}
.brand-intro-meta{position:absolute;left:24px;right:24px;bottom:21px;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;font:650 8px/1.2 var(--font-body,"Manrope",Inter,system-ui,sans-serif);letter-spacing:.17em;text-transform:uppercase;color:rgba(23,25,26,.34);opacity:0;animation:introMeta .75s ease .5s forwards;transition:color .45s ease,opacity .3s ease}
.brand-intro-meta span:nth-child(2){text-align:center;color:currentColor;opacity:.5}.brand-intro-meta span:last-child{text-align:right}
.brand-intro.is-complete .brand-intro-status,.brand-intro.is-complete .brand-intro-phase,.brand-intro.is-complete .brand-intro-meta{color:rgba(245,240,231,.46)}
.brand-intro-progress{position:absolute;left:0;bottom:0;z-index:9;width:100%;height:3px;background:rgba(23,25,26,.08);transition:background .45s ease,opacity .3s ease}
.brand-intro-progress i{display:block;width:100%;height:100%;background:var(--intro-red);transform:scaleX(var(--intro-progress));transform-origin:left;box-shadow:0 0 20px rgba(255,52,52,.45)}
.brand-intro.is-complete .brand-intro-progress{background:rgba(255,255,255,.08)}
.brand-intro-ready{position:absolute;left:-.035em;bottom:-.16em;z-index:6;display:flex;align-items:flex-start;gap:.03em;font-family:var(--font-display,"Space Grotesk",Inter,sans-serif);font-weight:650;letter-spacing:-.095em;color:#f5f0e7;opacity:0;transform:translate3d(0,12%,0);pointer-events:none;will-change:transform,opacity}
.brand-intro-ready span{font-size:clamp(170px,37vw,590px);line-height:.68}.brand-intro-ready b{font-size:clamp(32px,6vw,90px);line-height:1;font-weight:520;letter-spacing:-.05em;margin-top:.02em;color:var(--intro-red)}
.brand-intro.is-ready .brand-intro-ready{animation:introReadyIn .68s cubic-bezier(.16,.82,.16,1) forwards}
.brand-intro.is-ready .brand-intro-wordmark{opacity:.13;filter:blur(.4px);transition:opacity .4s ease,filter .4s ease}
.brand-intro.is-ready .brand-intro-emblem{opacity:.16;transform:translate3d(-50%,-50%,0) scale(.72);transition:opacity .4s ease,transform .6s ease}
.brand-intro.is-revealing{pointer-events:none;animation:introCurtainOut .9s cubic-bezier(.76,0,.24,1) forwards}
.brand-intro.is-revealing .brand-intro-ready{opacity:0;transform:translate3d(0,-8%,0);transition:opacity .28s ease,transform .55s ease}
.brand-intro.is-revealing .brand-intro-wordmark,.brand-intro.is-revealing .brand-intro-emblem,.brand-intro.is-revealing .brand-intro-meta,.brand-intro.is-revealing .brand-intro-status,.brand-intro.is-revealing .brand-intro-phase,.brand-intro.is-revealing .brand-intro-origin,.brand-intro.is-revealing .brand-intro-progress{opacity:0;transition:opacity .24s ease}
.brand-intro.is-exiting{pointer-events:none}
html.brand-intro-pending body>main,html.brand-intro-pending body>.signature-finale,html.brand-intro-pending body>.site-footer{transform:translate3d(0,9vh,0) scale(.995);opacity:.2;transition:transform 1.08s cubic-bezier(.16,.84,.16,1),opacity .86s ease;will-change:transform,opacity}
html.brand-intro-page-reveal body>main,html.brand-intro-page-reveal body>.signature-finale,html.brand-intro-page-reveal body>.site-footer{transform:translate3d(0,0,0) scale(1);opacity:1}
html.brand-intro-pending:not(.brand-intro-finished) .side-brand,html.brand-intro-pending:not(.brand-intro-finished) .side-nav-toggle,html.brand-intro-pending:not(.brand-intro-finished) .back-to-top{opacity:0!important;pointer-events:none!important}
html.brand-intro-finished .side-brand{animation:introLauncherIn .78s cubic-bezier(.16,.82,.16,1) .16s both}
html.brand-intro-finished .side-nav-toggle{animation:introLauncherIn .78s cubic-bezier(.16,.82,.16,1) .26s both}
@keyframes introDraw{to{stroke-dashoffset:0}}
@keyframes introTracer{0%{opacity:0;stroke-dashoffset:1}10%{opacity:1}78%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
@keyframes introFill{0%{clip-path:inset(0 50%);filter:blur(1.5px);opacity:0;transform:scale(.96)}40%{opacity:.65}100%{clip-path:inset(0);filter:none;opacity:1;transform:none}}
@keyframes introMarkSettle{from{opacity:0;transform:translate3d(-50%,-51%,0) scale(.72)}to{opacity:1;transform:translate3d(-50%,-51%,0) scale(.9)}}
@keyframes introMarkFloat{0%{transform:translate3d(-50%,-51%,0) scale(.9)}100%{transform:translate3d(-50%,-50%,0) scale(.72)}}
@keyframes introDarkfield{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.035)}10%{opacity:1}100%{opacity:1;transform:translate3d(-50%,-50%,0) scale(8.4)}}
@keyframes introWordmark{0%{opacity:0;clip-path:inset(0 50%);transform:translate3d(-50%,-40%,0) scale(.96)}35%{opacity:.36}100%{opacity:.92;clip-path:inset(0 0);transform:translate3d(-50%,-50%,0) scale(1)}}
@keyframes introReadyIn{0%{opacity:0;transform:translate3d(0,14%,0)}100%{opacity:.94;transform:translate3d(0,0,0)}}
@keyframes introCurtainOut{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
@keyframes introHorizon{0%{opacity:0;transform:scaleX(.03)}38%{opacity:.55}100%{opacity:.2;transform:scaleX(1)}}
@keyframes introGuide{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:.26;transform:translate(-50%,-50%) scale(1)}}
@keyframes introMeta{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes introLauncherIn{from{opacity:0;transform:translate3d(-12px,0,0) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .brand-intro-emblem{width:clamp(166px,47vw,225px)}
 .brand-intro-status{left:16px;top:16px}.brand-intro-phase{right:16px;top:16px}
 .brand-intro-meta{left:16px;right:16px;bottom:17px;font-size:7px;grid-template-columns:1fr auto}.brand-intro-meta span:nth-child(2){display:none}
 .brand-intro-origin{left:16px;bottom:43px;font-size:6px;gap:10px}
 .brand-intro-stage::before{width:78vw;height:78vw}.brand-intro-stage::after{width:58vw;height:58vw}
 .brand-intro-wordmark{width:94vw;font-size:clamp(40px,11vw,78px);gap:1vw}
 .brand-intro-ready span{font-size:clamp(150px,56vw,250px)}.brand-intro-ready b{font-size:clamp(28px,10vw,48px)}
 html.brand-intro-pending body>main,html.brand-intro-pending body>.signature-finale,html.brand-intro-pending body>.site-footer{transform:translate3d(0,7vh,0) scale(.997)}
}
@media(prefers-reduced-motion:reduce){
 .brand-intro::after,.brand-intro-stage::before,.brand-intro-stage::after,.brand-intro-path,.brand-intro-red,.brand-intro-meta,.brand-intro-darkfield,.brand-intro-wordmark,.brand-intro-ready{animation:none!important}
 .brand-intro{background:#17191a;color:#f5f0e7}.brand-intro-darkfield{opacity:1;transform:translate3d(-50%,-50%,0) scale(8.4)}
 .brand-intro-path{stroke-dashoffset:0;stroke:#f5f0e7}.brand-intro-red{display:none}.brand-intro-fill{clip-path:inset(0);filter:none;opacity:1;transform:none}.brand-intro-ready{opacity:.8;transform:none}
 html.brand-intro-pending body>main,html.brand-intro-pending body>.signature-finale,html.brand-intro-pending body>.site-footer{transform:none;opacity:1;transition:none!important}
}

/* ===== assets/css/cursor-trail.css ===== */
.cursor-trail-canvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:5800;
  pointer-events:none;opacity:.86;mix-blend-mode:screen;
  transition:opacity 110ms ease;
}
html.brand-intro-pending .cursor-trail-canvas,
body.side-nav-open .cursor-trail-canvas,
body.side-nav-visible .cursor-trail-canvas,
body.lightbox-open .cursor-trail-canvas{opacity:0}
@media(hover:none),(pointer:coarse){.cursor-trail-canvas{display:none!important}}
@media(prefers-reduced-motion:reduce){.cursor-trail-canvas{display:none!important}}

/* ===== assets/css/quality-pass.css ===== */
/* RiskyShot — cohesive quality pass, 2026-08-09
   Final visual and performance layer. It intentionally refines rather than
   introduces new concepts. */
:root{
  --quality-ease:cubic-bezier(.2,.72,.18,1);
  --quality-ui:120ms;
  --quality-media:280ms;
  --quality-section:520ms;
  --quality-hair-dark:rgba(247,246,241,.145);
  --quality-hair-light:rgba(17,18,20,.145);
}

html{
  scrollbar-gutter:stable;
  scroll-padding-top:20px;
  background:#08090a;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-synthesis:none;
}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{image-rendering:auto}
.editorial-v3 h1,.editorial-v3 h2,.editorial-v3 h3{text-wrap:balance;font-kerning:normal}
.editorial-v3 p{text-wrap:pretty}
.editorial-v3 .eyebrow{line-height:1.35}

/* One more disciplined spacing scale. */
.editorial-v3{--rs-gutter:clamp(18px,3.4vw,58px)}
.editorial-v3 .shell{width:min(100% - (var(--rs-gutter) * 2),1460px)}

/* Hero: retain the oversized identity, add a little more breathing room. */
@media(min-width:1001px){
  .editorial-v3.page-home .hero-copy{padding-top:clamp(108px,12.5vh,146px);padding-bottom:38px}
  .editorial-v3.page-home .hero h1{font-size:clamp(80px,13.9vw,212px);line-height:.745;letter-spacing:-.084em}
  .editorial-v3.page-home .hero h1 span:last-child{margin-left:clamp(0px,7vw,106px);-webkit-text-stroke-width:1.15px}
  .editorial-v3.page-home .hero-lead{width:min(500px,39vw);margin-top:clamp(34px,5.2vh,62px);font-size:clamp(15px,1.08vw,17px);line-height:1.62}
  .editorial-v3.page-home .hero-actions{width:min(500px,39vw);margin-top:24px}
}
.editorial-v3.page-home .hero-actions .button{transition:border-color var(--quality-ui) ease,color var(--quality-ui) ease!important}
.editorial-v3.page-home .hero-proof{border-color:var(--quality-hair-dark)}
.editorial-v3.page-home .hero-proof span{border-color:var(--quality-hair-dark)}

/* Editorial manifesto and section headers share the same tighter vertical rhythm. */
.editorial-v3.page-home .manifesto{padding-top:clamp(96px,10.5vw,164px);padding-bottom:clamp(88px,9vw,142px)}
.editorial-v3.page-home .manifesto h2{letter-spacing:-.074em}
.editorial-v3.page-home .manifesto-copy{line-height:1.38}
.editorial-v3.page-home .work-section>.work-head{padding-top:clamp(82px,8.4vw,126px);padding-bottom:46px;border-color:var(--quality-hair-dark)}
.editorial-v3.page-home .work-head h2{letter-spacing:-.074em;line-height:.87}

/* Project index: cleaner hierarchy, calmer copy, stronger media framing. */
.editorial-v3.page-home .project-row{padding:clamp(44px,5vw,72px) 0;border-color:var(--quality-hair-dark)}
.editorial-v3.page-home .project-row .project-card,
.editorial-v3.page-home .project-row.left .project-card,
.editorial-v3.page-home .project-row.right .project-card{gap:clamp(34px,5.8vw,92px)!important}
.editorial-v3.page-home .project-copy h3{font-size:clamp(53px,6.8vw,104px);line-height:.81;letter-spacing:-.076em}
.editorial-v3.page-home .project-copy p{margin-top:18px;line-height:1.6;color:rgba(255,255,255,.63)}
.editorial-v3.page-home .project-copy::before{margin-bottom:20px;height:2px;transition:width 220ms var(--quality-ease)}
.editorial-v3.page-home .project-title-link h3{transition:transform 220ms var(--quality-ease),color 150ms ease!important}
.editorial-v3.page-home .project-title-link:hover h3{transform:translateX(7px)}
.editorial-v3.page-home .project-tags{margin-top:20px}
.editorial-v3.page-home .project-tags span{color:rgba(255,255,255,.5)}
.editorial-v3.page-home .project-arrow{transition:transform 160ms var(--quality-ease),color 120ms ease}
.editorial-v3.page-home .project-arrow:hover{transform:translate(4px,-4px)}

/* Free images: crisp hover layering and less expensive idle compositing. */
.editorial-v3.page-home .global-drag-layer .loose-frame{will-change:auto!important;backface-visibility:hidden}
.editorial-v3.page-home .global-drag-layer .loose-frame.is-hovered,
.editorial-v3.page-home .global-drag-layer .loose-frame.is-dragging{will-change:transform,box-shadow!important}
.editorial-v3.page-home.frame-hovering .global-drag-layer .loose-frame:not(.is-hovered):not(.is-dragging){opacity:.42!important;filter:grayscale(.3) brightness(.82)}
.editorial-v3.page-home .global-drag-layer .loose-frame.is-hovered{z-index:2147480000!important;filter:none!important;box-shadow:0 26px 72px rgba(0,0,0,.32)!important}
.editorial-v3.page-home .global-drag-layer .loose-frame .frame-caption{border-top:1px solid rgba(255,255,255,.1)}

/* Inner pages: image first, then compact facts, then readable appendix. */
.editorial-v3.inner-page .visual-first-hero,
.editorial-v3.inner-page .visual-first-case-hero{min-height:min(90svh,940px)}
.editorial-v3.inner-page .visual-first-hero-copy>p,
.editorial-v3[class*="page-work-"] .project-detail-caption p{line-height:1.58;color:rgba(255,255,255,.74)}
.editorial-v3.inner-page .project-summary,
.editorial-v3.inner-page .case-quick-facts{border-color:var(--quality-hair-dark)}
.editorial-v3.inner-page .project-summary>div,
.editorial-v3.inner-page .case-quick-facts>div{border-color:var(--quality-hair-dark)}
.editorial-v3.inner-page .project-summary span,
.editorial-v3.inner-page .case-quick-facts span{letter-spacing:.14em;font-size:8px}
.editorial-v3.inner-page .project-summary strong,
.editorial-v3.inner-page .case-quick-facts strong{font-weight:620;letter-spacing:-.015em}
.editorial-v3.inner-page .visual-first-showcase-head,
.editorial-v3.inner-page .detail-heading,
.editorial-v3.inner-page .project-brief-heading{border-color:var(--quality-hair-light)}
.editorial-v3.inner-page .visual-first-card-caption{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.editorial-v3.inner-page .visual-first-card img,
.editorial-v3.page-three-d .three-d-project-card img,
.editorial-v3[class*="page-work-"] .gallery-item img{transition:transform var(--quality-media) var(--quality-ease),filter var(--quality-media) ease!important}

/* Long lower sections can skip rendering work until they approach the viewport. */
@supports(content-visibility:auto){
  .editorial-v3.inner-page .project-brief,
  .editorial-v3.inner-page .detail-section{content-visibility:auto;contain-intrinsic-size:auto 820px}
}

/* 3D archive: slightly tighter gallery and clearer hover target. */
.editorial-v3.page-three-d .three-d-project-grid{gap:8px}
.editorial-v3.page-three-d .three-d-project-card{isolation:isolate}
.editorial-v3.page-three-d .three-d-project-card:hover{z-index:2}
.editorial-v3.page-three-d .three-d-project-card:hover img{transform:scale(1.012)}
.editorial-v3.page-three-d .three-d-project-arrow{transition:color var(--quality-ui) ease,transform var(--quality-ui) var(--quality-ease)}

/* Controls should feel immediate, not animated for animation's sake. */
.button,.back-to-top,.return-to-previous,.composition-reset,.case-section-nav a,.case-view-nav a{transition-duration:var(--quality-ui)!important}
.back-to-top:hover{transform:translateY(-2px)}
.return-to-previous:hover .return-arrow{transform:translateX(-2px)}

/* Cleaner keyboard focus: visible, narrow, consistent. */
.editorial-v3 :focus-visible{outline-width:2px!important;outline-color:rgba(255,52,52,.82)!important;outline-offset:3px!important}

/* Footer: a quiet finish instead of another large card-like section. */
.editorial-v3 .site-footer{padding-top:clamp(84px,8vw,116px)}
.editorial-v3 .footer-grid{border-color:var(--quality-hair-dark);padding-bottom:clamp(62px,6.5vw,88px)}
.editorial-v3 .footer-bottom{border-color:var(--quality-hair-dark)}

/* Refined, unobtrusive scrollbars for the few intentionally scrollable areas. */
@media(hover:hover) and (pointer:fine){
  .editorial-v3 *{scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.34) transparent}
  .editorial-v3 *::-webkit-scrollbar{width:7px;height:7px}
  .editorial-v3 *::-webkit-scrollbar-thumb{background:rgba(127,127,127,.3);border-radius:999px}
  .editorial-v3 *::-webkit-scrollbar-track{background:transparent}
}

@media(max-width:1000px){
  .editorial-v3.page-home .project-row{padding:44px 0}
  .editorial-v3.page-home .project-copy h3{line-height:.84}
}
@media(max-width:760px){
  html{scrollbar-gutter:auto}
  .editorial-v3{--rs-gutter:15px}
  .editorial-v3.page-home .hero h1{letter-spacing:-.075em}
  .editorial-v3.page-home .manifesto,.editorial-v3.page-home .focus-section,.editorial-v3.page-home .profile-section{padding-top:78px;padding-bottom:78px}
  .editorial-v3.page-home .project-row{padding:44px 0}
  .editorial-v3.inner-page .visual-first-hero,.editorial-v3.inner-page .visual-first-case-hero{min-height:74svh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .editorial-v3.page-home .global-drag-layer .loose-frame{will-change:auto!important}
}

/* V13 — no dimming/transparency between overlapping free-image frames. */
.editorial-v3.page-home.frame-hovering .global-drag-layer .loose-frame:not(.is-hovered):not(.is-dragging){opacity:1!important}

/* ===== assets/css/ambient-motion.css ===== */
/* Alexander Lampe — living section cuts, 2026-08-09
   Crisp light/dark boundaries with a shallow organic curve that shifts with scroll.
   Text remains readable at every stage; motion never depends on opacity:0. */
:root{
  --alive-ease:cubic-bezier(.16,.82,.16,1);
  --alive-paper:#f5f4ef;
  --alive-night:#08090a;
}

.editorial-v3.page-home .manifesto,
.editorial-v3.page-home .work-section,
.editorial-v3.page-home .focus-section,
.editorial-v3.page-home .process-section,
.editorial-v3.page-home .profile-section,
.editorial-v3.page-home .signature-finale{
  position:relative;
  isolation:isolate;
  --cut-x:0px;
  --cut-y:0px;
  --cut-rot:0deg;
}
.editorial-v3.page-home .manifesto>* ,
.editorial-v3.page-home .work-section>* ,
.editorial-v3.page-home .focus-section>* ,
.editorial-v3.page-home .process-section>* ,
.editorial-v3.page-home .profile-section>*{
  position:relative;
  z-index:2;
}
.editorial-v3.page-home .signature-finale .signature-copy,
.editorial-v3.page-home .signature-finale .signature-svg,
.editorial-v3.page-home .signature-finale .signature-name{position:relative;z-index:2}

/* A large ellipse of the PREVIOUS section colour overlaps the first pixels of
   the next section. Its lower edge becomes the visible cut: hard, but not ruler-straight. */
.editorial-v3.page-home .manifesto::after,
.editorial-v3.page-home .work-section::after,
.editorial-v3.page-home .focus-section::after,
.editorial-v3.page-home .process-section::after,
.editorial-v3.page-home .profile-section::after,
.editorial-v3.page-home .signature-finale::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  top:0;
  width:142vw;
  height:230px;
  border-radius:50%;
  transform:translate3d(calc(-50% + var(--cut-x)),calc(-79% + var(--cut-y)),0) rotate(var(--cut-rot));
  transform-origin:center;
  pointer-events:none;
  will-change:transform;
}
.editorial-v3.page-home .manifesto::after{background:var(--alive-night)}
.editorial-v3.page-home .work-section::after{background:var(--alive-paper)}
.editorial-v3.page-home .focus-section::after{background:var(--alive-night)}
.editorial-v3.page-home .process-section::after{background:#f0eee8}
.editorial-v3.page-home .profile-section::after{background:var(--alive-night)}
.editorial-v3.page-home .signature-finale::after{background:var(--alive-paper)}

/* Restore the editorial word texture on the light focus block. The animated
   colour boundary now lives on ::after, so ::before is free for this detail. */
.editorial-v3.page-home .focus-section::before{
  content:"CONTENT / VISUAL / MOTION / DIGITAL";
  position:absolute;right:-1vw;top:24px;z-index:0;
  font:750 clamp(56px,10vw,150px)/1 var(--font-display,"Space Grotesk",Inter,sans-serif);
  letter-spacing:-.07em;color:rgba(12,14,17,.035);white-space:nowrap;pointer-events:none;
}

/* Robust reveal system: copy never becomes invisible. Motion is spatial only,
   so a slow observer, browser restore or JS hiccup cannot erase text. */
.motion-ready .editorial-v3.page-home .reveal{
  opacity:1!important;
  filter:blur(2.6px);
  transform:translate3d(0,30px,0);
  clip-path:none!important;
  transition:
    filter .68s ease,
    transform .92s var(--alive-ease)!important;
  transition-delay:var(--reveal-delay,0ms)!important;
}
.motion-ready .editorial-v3.page-home .reveal[data-reveal-variant="left"]{transform:translate3d(-34px,16px,0)}
.motion-ready .editorial-v3.page-home .reveal[data-reveal-variant="right"]{transform:translate3d(34px,16px,0)}
.motion-ready .editorial-v3.page-home .reveal[data-reveal-variant="wipe"]{transform:translate3d(0,22px,0) scale(.996);filter:blur(1.8px)}
.motion-ready .editorial-v3.page-home .reveal.is-visible{opacity:1!important;filter:none;transform:none}

.editorial-v3.page-home .capability-grid .reveal:nth-child(2),
.editorial-v3.page-home .process-grid .reveal:nth-child(2),
.editorial-v3.page-home .timeline .reveal:nth-child(2){--reveal-delay:70ms}
.editorial-v3.page-home .capability-grid .reveal:nth-child(3),
.editorial-v3.page-home .process-grid .reveal:nth-child(3),
.editorial-v3.page-home .timeline .reveal:nth-child(3){--reveal-delay:140ms}
.editorial-v3.page-home .capability-grid .reveal:nth-child(4),
.editorial-v3.page-home .timeline .reveal:nth-child(4){--reveal-delay:210ms}

.editorial-v3.page-home .scroll-alive{translate:0 var(--alive-y,0px);transition:translate 80ms linear}
.editorial-v3.page-home .work-head h2,
.editorial-v3.page-home .focus-intro h2,
.editorial-v3.page-home .process-head h2,
.editorial-v3.page-home .profile-sticky h2{will-change:translate}
.editorial-v3.page-home .red-rule::before{
  transform:scaleX(calc(.58 + (var(--section-progress,.5) * .42)));
  transform-origin:left;transition:transform 80ms linear;
}
.editorial-v3.page-home .signature-name{
  opacity:calc(.52 + (var(--section-progress,.5) * .48));
  translate:0 calc((1 - var(--section-progress,.5)) * 12px);
}

@media(max-width:760px){
  .editorial-v3.page-home .manifesto::after,
  .editorial-v3.page-home .work-section::after,
  .editorial-v3.page-home .focus-section::after,
  .editorial-v3.page-home .process-section::after,
  .editorial-v3.page-home .profile-section::after,
  .editorial-v3.page-home .signature-finale::after{
    width:172vw;height:190px;transform:translate3d(calc(-50% + var(--cut-x)),calc(-80% + var(--cut-y)),0) rotate(var(--cut-rot));
  }
  .motion-ready .editorial-v3.page-home .reveal[data-reveal-variant="left"],
  .motion-ready .editorial-v3.page-home .reveal[data-reveal-variant="right"]{transform:translate3d(0,26px,0)}
}

@media(prefers-reduced-motion:reduce){
  .editorial-v3.page-home .manifesto::after,
  .editorial-v3.page-home .work-section::after,
  .editorial-v3.page-home .focus-section::after,
  .editorial-v3.page-home .process-section::after,
  .editorial-v3.page-home .profile-section::after,
  .editorial-v3.page-home .signature-finale::after{transform:translate3d(-50%,-79%,0);will-change:auto}
  .motion-ready .editorial-v3.page-home .reveal{opacity:1!important;filter:none;transform:none!important;transition:none!important}
  .editorial-v3.page-home .scroll-alive{translate:none!important;transition:none}
}


/* ==========================================================================
   V16 — reset controls in copy flow + scroll-reactive dotted tone seams
   ========================================================================== */
.editorial-v3.page-home .composition-reset-slot{
  width:100%!important;height:0!important;margin-top:0!important;
  transition:height .34s cubic-bezier(.2,.72,.2,1),margin-top .34s cubic-bezier(.2,.72,.2,1)!important;
}
.editorial-v3.page-home .composition-reset-slot.has-reset{height:46px!important;margin-top:17px!important}
.editorial-v3.page-home .global-control-layer .composition-reset{min-height:31px;padding:8px 11px!important;transform:none!important}
.editorial-v3.page-home .global-control-layer .composition-reset:hover{transform:translateY(-1px)!important}

.editorial-v3.page-home .manifesto::after,
.editorial-v3.page-home .work-section::after,
.editorial-v3.page-home .focus-section::after,
.editorial-v3.page-home .process-section::after,
.editorial-v3.page-home .profile-section::after,
.editorial-v3.page-home .signature-finale::after{display:none!important}
.editorial-v3.page-home .tone-divider{
  --divider-ink:#111315;--divider-accent:#ef3f3f;
  position:absolute;left:0;right:0;top:-32px;height:64px;z-index:7;
  pointer-events:none;overflow:visible;contain:layout style;
}
.editorial-v3.page-home .work-section .tone-divider,
.editorial-v3.page-home .process-section .tone-divider,
.editorial-v3.page-home .signature-finale .tone-divider{--divider-ink:#f5f1e8}
.editorial-v3.page-home .tone-divider::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;opacity:.075;
  background:linear-gradient(90deg,transparent 1%,var(--divider-ink) 18%,var(--divider-ink) 82%,transparent 99%);
  transform:translateY(-50%);
}
.editorial-v3.page-home .tone-dot{
  position:absolute;left:calc(var(--dot-x) * 100%);top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
  border-radius:50%;background:var(--divider-ink);opacity:var(--dot-opacity,.46);
  transform:translate3d(0,var(--dot-y,0px),0) scale(var(--dot-scale,1));transform-origin:center;
  will-change:transform,opacity;box-shadow:0 0 0 0 transparent;
}
.editorial-v3.page-home .tone-dot.is-accent{background:var(--divider-accent);box-shadow:0 0 0 3px rgba(239,63,63,.08)}
.editorial-v3.page-home .tone-dot.is-pulse{box-shadow:0 0 18px color-mix(in srgb,var(--divider-ink) 34%,transparent)}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){.editorial-v3.page-home .tone-dot.is-pulse{box-shadow:none}}
@media(max-width:760px){
  .editorial-v3.page-home .tone-divider{top:-25px;height:50px}
  .editorial-v3.page-home .tone-dot{width:3px;height:3px;margin:-1.5px 0 0 -1.5px}
  .editorial-v3.page-home .composition-reset-slot.has-reset{height:43px!important;margin-top:15px!important}
}
@media(prefers-reduced-motion:reduce){.editorial-v3.page-home .tone-dot{will-change:auto!important}}

/* ===== assets/css/contextual-subnav.css ===== */
/* RiskyShot contextual subpage navigation — HTML-first, no floating return button */
.contextual-subnav .return-to-previous{display:none!important}

/* Local rail: first tile is always the escape route, the rest belongs to this page. */
.side-tile--local .side-tile-thumb--type{
  display:grid;place-items:center;background:#101113;
  border:1px solid rgba(255,255,255,.065);color:rgba(247,244,237,.56);
  font:750 8px/1 var(--font-body,"Manrope",sans-serif);letter-spacing:.06em
}
.side-tile--local:hover .side-tile-thumb--type,
.side-tile--local.is-active .side-tile-thumb--type{color:inherit;border-color:currentColor}
.side-tile--back{
  margin-bottom:10px;background:rgba(255,52,52,.085);
  border-color:rgba(255,52,52,.18)
}
.side-tile--back::after{
  content:"";position:absolute;left:5px;right:5px;bottom:-10px;height:1px;
  background:linear-gradient(90deg,rgba(255,52,52,.45),rgba(255,255,255,.07))
}
.side-tile--back .side-tile-thumb--type{
  color:var(--rail-red);border-color:rgba(255,52,52,.34);font-size:12px
}
.side-tile--back:hover,.side-tile--back:focus-visible{background:rgba(255,52,52,.17)}
.side-tile--local.is-active:not(.side-tile--back){background:rgba(255,255,255,.065)}
.side-tile--local.is-active:not(.side-tile--back) strong{color:#fff}

/* One project navigator, split into left/right halves. */
.project-switcher{
  position:relative;width:var(--shell);margin:88px auto 118px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:30px;
  background:#090b0e;box-shadow:0 28px 80px rgba(0,0,0,.16)
}
.project-switcher::after{
  content:"";position:absolute;z-index:4;top:22px;bottom:22px;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.2) 18%,rgba(255,255,255,.2) 82%,transparent);
  pointer-events:none
}
.project-switcher-card{
  position:relative;min-width:0;min-height:clamp(245px,29vw,400px);
  padding:clamp(30px,4.2vw,58px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:#090b0e;color:#fff;
  isolation:isolate;transition:background .32s var(--ease),transform .32s var(--ease)
}
.project-switcher-card::before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:radial-gradient(circle at 15% 100%,rgba(255,52,52,.18),transparent 42%);
  opacity:0;transform:scale(.94);transition:opacity .35s var(--ease),transform .6s var(--ease)
}
.project-switcher-card--next::before{background:radial-gradient(circle at 85% 100%,rgba(255,52,52,.18),transparent 42%)}
.project-switcher-card:hover::before,.project-switcher-card:focus-visible::before{opacity:1;transform:scale(1)}
.project-switcher-card:hover,.project-switcher-card:focus-visible{background:#101215}
.project-switcher-card:focus-visible{outline:3px solid rgba(255,52,52,.55);outline-offset:-3px}
.project-switcher-direction{
  position:absolute;top:28px;left:clamp(30px,4.2vw,58px);
  font:750 9px/1 var(--font-body,"Manrope",sans-serif);letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.46)
}
.project-switcher-card--next{text-align:right;align-items:flex-end}
.project-switcher-card--next .project-switcher-direction{left:auto;right:clamp(30px,4.2vw,58px)}
.project-switcher-card .eyebrow{color:var(--red);margin-bottom:12px}
.project-switcher-card strong{
  max-width:10em;font:700 clamp(34px,5vw,72px)/.88 var(--display);
  letter-spacing:-.055em;text-transform:uppercase
}
.project-switcher-card i{margin-top:22px;font-style:normal;font-size:22px;color:var(--red);transition:transform .25s var(--ease)}
.project-switcher-card--prev:hover i{transform:translateX(-6px)}
.project-switcher-card--next:hover i{transform:translateX(6px)}

@media(max-width:720px){
  .project-switcher{grid-template-columns:1fr;margin:54px auto 78px;border-radius:22px}
  .project-switcher::after{top:50%;bottom:auto;left:18px;right:18px;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
  .project-switcher-card{min-height:210px;padding:28px}
  .project-switcher-direction{top:22px;left:28px}
  .project-switcher-card--next .project-switcher-direction{right:28px}
  .project-switcher-card strong{font-size:clamp(30px,10vw,50px)}
}

@media(prefers-reduced-motion:reduce){
  .project-switcher-card,.project-switcher-card::before,.project-switcher-card i{transition:none!important}
}

/* ===== assets/css/home-refine-v7.css ===== */
/* Home V7 — project spacing and additional featured projects */
.editorial-v3.page-home .project-list{gap:clamp(118px,13vw,210px)!important}
.editorial-v3.page-home .project-row{padding:clamp(70px,7.2vw,112px) 0!important;border-bottom:1px solid rgba(255,255,255,.11)}
.editorial-v3.page-home .project-row:first-child{padding-top:clamp(76px,8vw,120px)!important}
.editorial-v3.page-home .project-row:last-child{padding-bottom:clamp(90px,9vw,138px)!important}
.editorial-v3.page-home .home-feature-visual{position:relative;min-height:clamp(430px,43vw,650px);overflow:hidden!important;background:#111315;box-shadow:0 28px 90px rgba(0,0,0,.28)}
.editorial-v3.page-home .home-feature-link{position:absolute;inset:0;display:block;overflow:hidden}
.editorial-v3.page-home .home-feature-link::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.16));pointer-events:none}
.editorial-v3.page-home .home-feature-link img{width:100%;height:100%;object-fit:cover;filter:grayscale(.72) contrast(1.03);transform:scale(1.002);transition:filter .72s cubic-bezier(.16,.82,.16,1),transform 1.05s cubic-bezier(.16,.82,.16,1)}
.editorial-v3.page-home .project-card:hover .home-feature-link img,.editorial-v3.page-home .project-card:focus-within .home-feature-link img{filter:grayscale(0) contrast(1);transform:scale(1.025)}
.editorial-v3.page-home .project-kleusberg .project-copy h3{font-size:clamp(42px,4.2vw,64px);line-height:.86}
.editorial-v3.page-home .project-logo-development .project-copy h3{font-size:clamp(49px,6.1vw,92px)}
@media(max-width:1000px){.editorial-v3.page-home .project-list{gap:clamp(86px,12vw,130px)!important}.editorial-v3.page-home .project-row{padding:58px 0!important}.editorial-v3.page-home .home-feature-visual{min-height:clamp(360px,61vw,560px)}}
@media(max-width:640px){
.editorial-v3.page-home .project-list{gap:82px!important}
.editorial-v3.page-home .project-row{padding:48px 0!important}
.editorial-v3.page-home .home-feature-visual{min-height:330px!important;overflow:hidden!important;padding-bottom:0!important;margin-top:22px}
.editorial-v3.page-home .project-kleusberg .project-copy h3{font-size:clamp(42px,13vw,64px)}
.editorial-v3.page-home .project-logo-development .project-copy h3{font-size:clamp(34px,8vw,62px)!important}
}

/* ===== assets/css/home-refine-v8.css ===== */
/* Home V8 — alexanderlampe.de identity, readable motion, crisp organic section cuts */
.motion-ready .reveal{opacity:1!important}

/* The longer personal wordmark needs a calmer scale than the former short alias. */
.brand-intro-wordmark{
  width:min(94vw,1680px)!important;
  gap:clamp(18px,3vw,62px);
  font-size:clamp(62px,10.3vw,176px)!important;
  letter-spacing:-.075em!important;
}
.brand-intro-wordmark span:first-child{letter-spacing:-.085em}
.brand-intro-wordmark span:last-child{letter-spacing:-.06em}

/* Keep project copy legible against freely arranged imagery at its default positions. */
.editorial-v3.page-home .project-copy{position:relative}
.editorial-v3.page-home .project-copy p{max-width:500px}
.editorial-v3.page-home .work-head,
.editorial-v3.page-home .focus-intro,
.editorial-v3.page-home .process-head,
.editorial-v3.page-home .profile-sticky{position:relative}

/* A little extra breathing room around the curved cuts. */
.editorial-v3.page-home .manifesto{padding-top:clamp(126px,13vw,205px)}
.editorial-v3.page-home .focus-section{padding-top:clamp(126px,13vw,200px)}
.editorial-v3.page-home .process-section{padding-top:clamp(126px,12vw,182px)}
.editorial-v3.page-home .profile-section{padding-top:clamp(126px,13vw,205px)}
.editorial-v3.page-home .signature-finale{padding-top:clamp(126px,12vw,180px)}

@media(max-width:700px){
  .brand-intro-wordmark{width:94vw!important;gap:10px;font-size:clamp(34px,8.25vw,56px)!important;letter-spacing:-.055em!important}
  .brand-intro-wordmark span:first-child,.brand-intro-wordmark span:last-child{letter-spacing:-.055em}
  .editorial-v3.page-home .manifesto,
  .editorial-v3.page-home .focus-section,
  .editorial-v3.page-home .process-section,
  .editorial-v3.page-home .profile-section,
  .editorial-v3.page-home .signature-finale{padding-top:104px}
}


/* V10 project discipline labels */
.editorial-v3.page-home .project-copy .editorial-label{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.68);font-size:10px;line-height:1.35;letter-spacing:.145em;font-weight:800}
.editorial-v3.page-home .project-copy .editorial-label::before{content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:var(--rs-red,var(--red,#ff3434));box-shadow:0 0 0 4px rgba(255,52,52,.10)}
@media(max-width:700px){.editorial-v3.page-home .project-copy .editorial-label{font-size:9px;letter-spacing:.115em;gap:7px;max-width:92vw}}

/* ===== assets/css/home-refine-v18.css ===== */
/* ==========================================================================
   V18 — 7-project 3D board on the homepage
   All seven 3D case studies are visible as independent, fully opaque cards.
   ========================================================================== */
@media (min-width:761px){
  .editorial-v3.page-home .threed-composition{
    min-height:clamp(720px,62vw,900px);
  }
  .editorial-v3.page-home .threed-composition .threed-frame{
    opacity:1!important;
    background:#090a0b;
    border-width:4px;
    box-shadow:0 22px 62px rgba(0,0,0,.18);
  }
  .editorial-v3.page-home .threed-composition .threed-frame img{
    opacity:1!important;
    mix-blend-mode:normal!important;
  }
  .editorial-v3.page-home .threed-composition .threed-one{left:2%;top:2%;width:43%;height:29%;z-index:2;--base-rotation:-2.4deg;transform:rotate(-2.4deg)}
  .editorial-v3.page-home .threed-composition .threed-two{right:3%;top:6%;width:36%;height:31%;z-index:3;--base-rotation:2.8deg;transform:rotate(2.8deg)}
  .editorial-v3.page-home .threed-composition .threed-three{left:30%;top:27%;bottom:auto;width:34%;height:31%;z-index:5;--base-rotation:-1.2deg;transform:rotate(-1.2deg)}
  .editorial-v3.page-home .threed-composition .threed-four{right:4%;top:40%;bottom:auto;width:34%;height:28%;z-index:6;--base-rotation:2deg;transform:rotate(2deg)}
  .editorial-v3.page-home .threed-composition .threed-five{left:3%;top:39%;width:34%;height:29%;z-index:4;--base-rotation:-3.2deg;transform:rotate(-3.2deg)}
  .editorial-v3.page-home .threed-composition .threed-six{left:16%;bottom:2%;width:34%;height:27%;z-index:7;--base-rotation:1.8deg;transform:rotate(1.8deg)}
  .editorial-v3.page-home .threed-composition .threed-seven{right:11%;bottom:0;width:29%;height:29%;z-index:8;--base-rotation:-2.1deg;transform:rotate(-2.1deg)}

  .editorial-v3.page-home .editorial-project:hover .threed-one:not(:hover),
  .editorial-v3.page-home .editorial-project:hover .threed-two:not(:hover),
  .editorial-v3.page-home .editorial-project:hover .threed-three:not(:hover),
  .editorial-v3.page-home .editorial-project:hover .threed-four:not(:hover),
  .editorial-v3.page-home .editorial-project:hover .threed-five:not(:hover),
  .editorial-v3.page-home .editorial-project:hover .threed-six:not(:hover),
  .editorial-v3.page-home .editorial-project:hover .threed-seven:not(:hover){
    opacity:1!important;
    filter:none!important;
    transform:translate3d(var(--parallax-x,0),var(--parallax-y,0),0) rotate(var(--base-rotation,0deg));
  }
}
@media (min-width:761px) and (max-width:1050px){
  .editorial-v3.page-home .threed-composition{min-height:700px}
  .editorial-v3.page-home .threed-composition .threed-one{width:46%;height:27%}
  .editorial-v3.page-home .threed-composition .threed-two{width:39%;height:29%;right:1%}
  .editorial-v3.page-home .threed-composition .threed-three{width:37%;height:29%;left:28%}
  .editorial-v3.page-home .threed-composition .threed-four{width:37%;height:27%;right:1%}
  .editorial-v3.page-home .threed-composition .threed-five{width:37%;height:28%;left:1%}
  .editorial-v3.page-home .threed-composition .threed-six{width:37%;height:26%;left:12%}
  .editorial-v3.page-home .threed-composition .threed-seven{width:33%;height:28%;right:7%}
}
@media (max-width:760px){
  /* Mobile already turns every loose frame into an opaque horizontal snap card. */
  .editorial-v3.page-home .threed-composition>.threed-frame{opacity:1!important;background:#090a0b}
}