:root{--red:#ff203d;--hot:#ff0037;--ink:#070304;--paper:#f2eee8;--ease-out:cubic-bezier(.23,1,.32,1);--ease-move:cubic-bezier(.77,0,.175,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--ink);color:var(--paper);font-family:"Space Grotesk",sans-serif;overflow-x:hidden}a{color:inherit}::selection{background:var(--red);color:#fff}.noise{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:100;background:#ffffff10}.progress span{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left;box-shadow:0 0 18px var(--hot)}.nav{position:fixed;z-index:80;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 3vw;mix-blend-mode:difference}.mark{font:700 15px/1 "Space Grotesk";text-decoration:none;letter-spacing:.08em}.mark span{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border:1px solid #fff;border-radius:50%}.coordinates{font-size:10px;letter-spacing:.17em;text-transform:uppercase;opacity:.7}.nav-cta{font-size:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid;padding-bottom:5px}.hero{position:relative;height:500vh}.hero-sequence,.hero-shade{position:fixed;inset:0;width:100%;height:100vh}.hero-sequence{display:block;object-fit:cover;filter:saturate(.62) contrast(1.2) brightness(.74)}.frame-status{position:fixed;z-index:95;inset:auto 4vw 4vh auto;width:180px;transition:opacity 250ms var(--ease-out)}.frame-status span{display:block;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px var(--hot)}.frame-status b{display:block;margin-top:8px;font-size:8px;letter-spacing:.2em}.frame-status.ready{opacity:0;pointer-events:none}.hero-shade{background:linear-gradient(90deg,#080304cf 0%,transparent 58%,#08030466),linear-gradient(0deg,#070304 0%,transparent 30%);pointer-events:none}.hero-copy{position:fixed;z-index:4;top:0;left:0;width:100%;height:100vh;display:grid;place-items:center;perspective:900px;pointer-events:none}.eyebrow,.chapter{font-size:11px;text-transform:uppercase;letter-spacing:.26em;font-weight:600}.eyebrow{position:absolute;z-index:2;top:31vh;left:4vw;margin:0;padding-left:4px}.hero h1,.manifesto h2,.impact h2,.contact h2,.works h2{font-family:"Archivo Black",sans-serif;line-height:.78;letter-spacing:-.075em;margin:0;text-transform:uppercase}.hero h1{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;font-size:clamp(4.3rem,12.5vw,13rem);text-align:center}.hero h1 br{display:none}.hero h1 .flyword{grid-area:1/1}.outline{-webkit-text-stroke:2px var(--paper);color:transparent}.glow{color:#ff2945;text-shadow:0 0 8px #ff0037,0 0 25px #ff0037aa,0 0 70px #ff003766}.intro{position:absolute;z-index:2;left:64vw;top:56vh;width:31vw;font-size:clamp(.9rem,1.2vw,1.2rem);line-height:1.55}.scroll-cue{position:absolute;z-index:5;top:86vh;right:4vw;display:flex;gap:15px;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.2em;writing-mode:vertical-rl}.scroll-cue i{display:block;width:1px;height:70px;background:#fff}.orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.22}.orb-a{width:30vw;height:30vw;background:#f00;left:-15vw;top:30vh}.orb-b{width:20vw;height:20vw;background:#820020;right:-8vw;top:10vh}.manifesto{height:240vh;background:radial-gradient(circle at 70% 45%,#3a0610 0,transparent 35%),var(--ink)}.pin{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;padding:0 5vw;overflow:hidden}.manifesto h2{font-size:clamp(4rem,12vw,12rem);display:flex;flex-direction:column}.manifesto .thin{font-family:"Space Grotesk";font-weight:300;letter-spacing:-.09em}.sidecopy{position:absolute;right:4vw;bottom:9vh;writing-mode:vertical-rl;font-size:10px;letter-spacing:.2em;text-transform:uppercase}.hero-copy{perspective-origin:50% 50%}.flyword{display:inline-block;color:#a6ff00;text-shadow:0 0 7px #b5ff00,0 0 22px #78ff00,0 0 62px #38ff00cc;will-change:transform,opacity;transform-origin:center;backface-visibility:hidden}.flyword.outline{-webkit-text-stroke:2px #a6ff00;color:transparent;text-shadow:0 0 8px #a6ff00,0 0 28px #52ff00}.flyword.glow{color:#b8ff19;text-shadow:0 0 8px #d6ff5c,0 0 24px #8cff00,0 0 72px #35ff00}.works{padding:15vh 4vw 24vh;perspective:1100px;background:linear-gradient(#070304,#100407 70%,#070304)}.works-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16vh}.works h2{font-size:clamp(3rem,8vw,8rem);text-align:right}.works h2 span{color:var(--red)}.cards{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:10vh 3vw}.project{grid-column:span 5;position:relative;transform-style:preserve-3d;transform:translateZ(var(--z)) rotate(var(--r));transition:transform 500ms var(--ease-out)}.project-wide{grid-column:span 7}.project:nth-child(even){margin-top:24vh}.project img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.65) contrast(1.16);box-shadow:0 35px 70px #000b}.project div{display:grid;grid-template-columns:40px 1fr;gap:0 14px;padding-top:18px}.project h3{font-size:clamp(1.7rem,3vw,3rem);margin:0;text-transform:uppercase}.project p,.project div>span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.55}.project p{grid-column:2;margin:4px 0}@media (hover:hover) and (pointer:fine){.project:hover{transform:translateZ(calc(var(--z) + 55px)) rotate(0deg)}.project:hover img{filter:saturate(1) contrast(1.08)}}.impact{height:220vh;position:relative}.impact-bg{height:100vh;position:sticky;top:0;background:radial-gradient(circle at center,#50000d 0,#140308 35%,#050203 67%)}.impact h2{position:absolute;top:65vh;left:5vw;font-size:clamp(6rem,18vw,19rem);z-index:2}.impact .chapter{position:absolute;top:50vh;left:5vw;z-index:2}.ring{position:absolute;z-index:3;top:105vh;right:5vw;width:250px;height:250px;border:1px solid #ff203d55;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 50px #ff003722,0 0 60px #ff003722}.ring span{font-size:10px;letter-spacing:.23em;text-align:center;width:75%;color:#ff8392}.contact{min-height:100vh;padding:14vh 4vw 4vh;display:flex;flex-direction:column;justify-content:space-between;background:#f0ece5;color:#0b0607}.contact h2{font-size:clamp(4rem,12vw,13rem)}.contact .glow{color:#f31334;text-shadow:0 0 18px #ff264655}.contact-row{display:flex;gap:5vw;margin:12vh 0}.contact-row a{font-size:clamp(1rem,2vw,2rem);text-decoration:none;border-bottom:1px solid #0b0607;padding-bottom:10px}.contact-row span{color:#f31334}footer{display:flex;gap:26px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}footer span{margin-right:auto}footer a{text-decoration:none}.chapter{opacity:.64}
@media(max-width:760px){.coordinates{display:none}.nav{padding:18px}.hero-copy{left:0;top:0}.hero h1{font-size:19vw}.intro{left:20px;top:72vh;width:82vw}.scroll-cue{display:none}.manifesto h2{font-size:18vw}.sidecopy{display:none}.works{padding-inline:18px}.works-head{display:block}.works h2{text-align:left;margin-top:24px}.cards{display:block}.project,.project-wide{margin:0 0 16vh!important;transform:rotate(var(--r))}.project img{aspect-ratio:3/4}.impact h2{font-size:24vw}.ring{width:170px;height:170px;right:-20px}.contact{padding-inline:18px}.contact h2{font-size:17vw}.contact-row{flex-direction:column}.contact-row a{font-size:1rem}footer{flex-wrap:wrap}footer span{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orb,.scroll-cue,.ring{display:none}.flyword,.project{transform:none!important;opacity:1!important}.hero-sequence{position:absolute}.progress{display:none}}

.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0 0 22vh;background:#79ff0033;border:1px solid #79ff0033}.portals a{position:relative;min-height:42vh;display:flex;flex-direction:column;justify-content:space-between;padding:28px;text-decoration:none;background:#080504;overflow:hidden;isolation:isolate}.portals a::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 100%,#63ff003d,transparent 55%);transform:translateY(65%);transition:transform 500ms var(--ease-out)}.portals span,.portals i{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-style:normal}.portals strong{font-family:"Archivo Black";font-size:clamp(2rem,4vw,5rem);line-height:.82;color:#a6ff00;text-shadow:0 0 12px #79ff00,0 0 42px #35ff0077;transform:rotate(-90deg);transform-origin:left center;white-space:nowrap}.portals i{align-self:flex-end;color:#a6ff00}@media(hover:hover) and (pointer:fine){.portals a:hover::before{transform:translateY(0)}.portals a:hover strong{text-shadow:0 0 8px #dfff77,0 0 30px #8dff00,0 0 80px #42ff00}}.project{opacity:.25;text-decoration:none;color:inherit}.project img{box-shadow:0 35px 70px #000b,0 0 0 1px #89ff0033,0 0 45px #52ff002b}.project h3{color:#c4ff49;text-shadow:0 0 18px #5dff004f}@media(max-width:760px){.portals{grid-template-columns:1fr}.portals a{min-height:28vh}.portals strong{transform:none}}
.mark{display:flex;align-items:center;width:clamp(120px,14vw,210px);height:54px}.mark img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 0 transparent);transition:filter 250ms var(--ease-out)}@media(hover:hover) and (pointer:fine){.mark:hover img{filter:drop-shadow(0 0 7px #b5ff00) drop-shadow(0 0 20px #52ff00)}}
/* Art-direction pass: centered meeting title, compact portals, uncropped work, contact terminal */
.works{overflow:hidden;padding-top:20vh}.works-head{position:relative;display:block;min-height:58vh;margin-bottom:8vh;overflow:visible}.works-head .chapter{text-align:center}.works-head h2{position:absolute;inset:10vh 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:clamp(3.5rem,9vw,9rem);color:#b7ff22;text-shadow:0 0 8px #d5ff72,0 0 27px #7dff00,0 0 80px #36ff0085}.works-head h2 span{color:#b7ff22}.meetline{display:block;will-change:transform,opacity}.portals{grid-template-columns:repeat(3,1fr);max-width:1100px;margin:0 auto 22vh;border-color:#8aff0055;background:#8aff0055}.portals a{min-height:118px;padding:18px 20px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:15px;background:#090b08}.portals a::before{background:linear-gradient(115deg,transparent 45%,#8aff0018 46%,#8aff003d 50%,transparent 51%);transform:translateX(-100%)}.portals span{grid-column:1;font-size:8px}.portals strong{grid-column:1/3;align-self:end;font-size:clamp(1.25rem,2.2vw,2.4rem);transform:none;white-space:normal;line-height:.9}.portals i{grid-column:2;grid-row:1;font-size:8px}.cards{gap:22vh 7vw;max-width:1180px}.project,.project-wide{grid-column:span 6;margin-top:0!important;position:relative;overflow:visible}.project:nth-child(4n+2),.project:nth-child(4n+4){transform-origin:center}.project img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:clamp(24px,4vw,65px);background:#0b0d0a;box-shadow:0 28px 70px #000d,0 0 0 1px #93ff003d,0 0 38px #54ff0024}.project:nth-child(3n)::before,.project:nth-child(5n)::after{content:"";position:absolute;z-index:4;width:145%;height:1px;left:-22%;top:42%;background:linear-gradient(90deg,transparent,#b8ff22 18%,#b8ff22 82%,transparent);box-shadow:0 0 9px #79ff00,0 0 24px #45ff00;transform:rotate(-13deg);pointer-events:none}.project:nth-child(5n)::after{transform:rotate(11deg);top:64%}.project div{position:relative;z-index:5}.project h3{color:#c9ff52}.contact{position:relative;isolation:isolate;overflow:hidden;min-height:125vh;padding:14vh 6vw 5vh;background:#050705;color:#eaffd5}.contact::before{content:"";position:absolute;z-index:-2;inset:0;background-image:linear-gradient(#79ff0015 1px,transparent 1px),linear-gradient(90deg,#79ff0015 1px,transparent 1px);background-size:68px 68px;animation:gridDrift 12s linear infinite}.contact::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 70% 32%,#5eff001c,transparent 34%),linear-gradient(180deg,transparent,#030503 85%)}@keyframes gridDrift{to{background-position:68px 68px}}.contact h2{font-size:clamp(4rem,10vw,11rem);color:#bdff31;text-shadow:0 0 10px #a8ff27,0 0 45px #54ff006b}.contact .glow{color:inherit;text-shadow:inherit}.contact-form{width:min(100%,920px);margin:10vh 0 8vh 16vw;border-top:1px solid #9cff0066}.form-line{display:grid;grid-template-columns:130px 1fr;align-items:start;border-bottom:1px solid #9cff0066;padding:20px 0;position:relative}.form-line::after{content:"";position:absolute;bottom:-1px;left:0;width:0;height:1px;background:#c5ff42;box-shadow:0 0 12px #73ff00;transition:width 250ms var(--ease-out)}.form-line:focus-within::after{width:100%}.form-line label{padding-top:10px;font-size:9px;letter-spacing:.22em;color:#8dff17}.form-line input,.form-line textarea{width:100%;border:0;outline:0;background:transparent;color:#efffe3;font:400 clamp(1.1rem,2vw,1.7rem)/1.3 "Space Grotesk";padding:4px 0}.form-line textarea{min-height:130px;resize:vertical}.form-line input::placeholder,.form-line textarea::placeholder{color:#dfffcf4d}.contact-form button{width:100%;min-height:70px;border:1px solid #a5ff28;background:#a5ff28;color:#071000;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font:700 12px/1 "Space Grotesk";letter-spacing:.18em;cursor:pointer;transition:color 200ms ease,background-color 200ms ease,box-shadow 200ms ease}.contact-form button:hover,.contact-form button:focus-visible{background:#071000;color:#baff2f;box-shadow:0 0 28px #6dff0055}.contact-form button:focus-visible{outline:2px solid #fff;outline-offset:4px}.contact-form button i{font-style:normal;font-size:24px}.contact-direct{display:flex;gap:35px;margin-left:16vw;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.contact-direct a{color:#baff2f;text-decoration:none;border-bottom:1px solid #a5ff2855;padding-bottom:5px}.contact footer{border-top:1px solid #a5ff2833;padding-top:24px}@media(max-width:760px){.works-head{min-height:42vh}.works-head h2{font-size:15vw}.portals{grid-template-columns:1fr;margin-bottom:15vh}.portals a{min-height:100px}.cards{display:block}.project,.project-wide{margin-bottom:18vh!important}.project img{aspect-ratio:1/1;padding:28px}.contact-form,.contact-direct{margin-left:0}.form-line{grid-template-columns:1fr;gap:8px}.contact-direct{flex-direction:column}.contact{min-height:110vh}}@media(prefers-reduced-motion:reduce){.contact::before{animation:none}.meetline{transform:none!important;opacity:1!important}}
@keyframes portalHibernate{0%,100%{box-shadow:inset 0 0 0 #73ff0000,0 0 0 #73ff0000}45%{box-shadow:inset 0 0 32px #73ff001c,0 0 22px #73ff002b}55%{box-shadow:inset 0 0 44px #9dff0026,0 0 34px #73ff003b}}.portals a{animation:portalHibernate 5.6s var(--ease-out) infinite}.portals a:nth-child(2){animation-delay:-1.8s}.portals a:nth-child(3){animation-delay:-3.6s}.works-head h2{filter:drop-shadow(0 0 18px #7cff0055)}@media(prefers-reduced-motion:reduce){.portals a{animation:none}}
/* True-black living system */
html,body{background:#000!important}
.noise,.sub-noise{display:none!important}
.works,.manifesto,.impact-bg,.contact{background:#000!important}
.works::before,.manifesto::before,.impact-bg::before{display:none!important}
.project:nth-child(3n)::before,.project:nth-child(5n)::after,.art::after{display:none!important}
.project img,.art{background:#000!important}
.portals{background:#8aff0040;border-color:#8aff005c;overflow:visible}
.portals a{background:#000!important;border:0;transform-origin:center;animation:portalBreathing 4.8s cubic-bezier(.77,0,.175,1) infinite!important;will-change:transform,filter}
.portals a:nth-child(2){animation-delay:-1.6s!important}
.portals a:nth-child(3){animation-delay:-3.2s!important}
.portals strong{color:#c2ff39;text-shadow:0 0 6px #e5ffa6,0 0 22px #8cff00,0 0 55px #45ff0085}
@keyframes portalBreathing{0%,100%{transform:scale(.985);filter:brightness(.72);box-shadow:inset 0 0 12px #70ff0008,0 0 4px #70ff0008}50%{transform:scale(1.018);filter:brightness(1.3);box-shadow:inset 0 0 48px #70ff002c,0 0 18px #70ff0055,0 0 58px #43ff0038}}
@media(prefers-reduced-motion:reduce){.portals a{animation:none!important;transform:none!important;filter:none!important}}
.contact h2{transform-origin:left center;will-change:transform,filter;animation:noiseBreathing 5.4s cubic-bezier(.77,0,.175,1) infinite}
@keyframes noiseBreathing{
  0%,100%{transform:scale(.985);filter:brightness(.76);text-shadow:0 0 7px #baff2f,0 0 22px #70ff00,0 0 52px #41ff004f}
  48%{transform:scale(1.018);filter:brightness(1.22);text-shadow:0 0 10px #e4ff9d,0 0 38px #8dff00,0 0 95px #43ff0080}
  58%{transform:scale(1.026);filter:brightness(1.35);text-shadow:0 0 12px #efffc1,0 0 46px #a1ff18,0 0 120px #4cff0099}
}
@media(prefers-reduced-motion:reduce){.contact h2{animation:none;transform:none;filter:none}}
@media(max-width:760px){
  .nav{display:flex!important;align-items:flex-start!important;padding:14px 18px!important;gap:10px!important}
  .nav .mark{width:150px!important;height:42px!important;flex:0 0 150px!important}
  .nav .coordinates{position:absolute!important;left:18px!important;top:60px!important;font-size:8px!important;white-space:nowrap!important}
  .nav .nav-cta{margin-left:auto!important;padding-top:10px!important;font-size:8px!important;white-space:nowrap!important}
  .cards .project,.cards .project-wide{margin:0 0 18vh!important}
}

/* Closed dialogs must never participate in the page layout. */
dialog.slideshow:not([open]),dialog.logo-slideshow:not([open]){display:none!important}

body:has(#contact-form:focus-within) .impact{display:none!important}
/* Showreel grade: lift the frame sequence without washing out the cinematic contrast. */
.hero-sequence{filter:saturate(.78) contrast(1.08) brightness(1.02)}
/* The showreel grade now carries the image; keep the hero layer transparent. */
.hero-shade{background:transparent}
.nav{z-index:200!important;pointer-events:auto!important}
.nav>*{position:relative;z-index:201;pointer-events:auto!important}
.slideshow{width:min(94vw,1180px);max-width:calc(100vw - 24px);box-sizing:border-box}

/* Synced homepage interaction skin. */
.peper-subpage header{z-index:100;pointer-events:auto}
.peper-subpage header .sub-logo,.peper-subpage header .back{position:relative;z-index:101;pointer-events:auto}
.contact{position:relative;z-index:40;pointer-events:auto!important}
.contact-form,.contact-form *{pointer-events:auto!important}
.slideshow{border:1px solid #b7ff2266;background:linear-gradient(145deg,#0b130ddd,#020502f5);box-shadow:0 0 0 1px #b7ff221c,0 0 50px #71ff0033,inset 0 0 70px #71ff0014;backdrop-filter:blur(18px) saturate(1.15)}
.slideshow::backdrop{background:#020402d9;backdrop-filter:blur(16px)}
.slide-stage{background:transparent}
.slide-stage img{filter:drop-shadow(0 0 20px #72ff0030)}
.slide-meta h2{color:#b7ff22;text-shadow:0 0 10px #72ff00,0 0 28px #72ff0055}
.slide-controls button,.slide-close{background:transparent;color:#b7ff22;border:1px solid #b7ff2266;text-shadow:0 0 10px #72ff00}
@media(max-width:760px){
  .slideshow{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;border-radius:0}
  .slideshow[open]{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto}
  .slide-stage{grid-column:1;min-height:0;padding:58px 10px 12px}
  .slide-controls{display:grid;grid-template-columns:1fr 1fr;min-height:56px}
  .slide-controls button{min-height:56px}
}
@media(max-width:760px){
  dialog.slideshow{inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:100vw!important;max-width:100vw!important;height:100svh!important;max-height:100svh!important;margin:0!important}
}
body:has(#contact-form:focus-within) .impact h2{visibility:hidden!important;opacity:0!important}
@media(max-width:760px){
  .nav{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:14px 18px!important;mix-blend-mode:normal!important}
  .nav .mark{width:150px!important;height:42px!important;flex:0 0 150px}
  .nav .coordinates{position:absolute;left:18px;top:60px;font-size:8px;letter-spacing:.12em;opacity:.9;white-space:nowrap}
  .nav .nav-cta{margin-left:auto;padding-top:10px;font-size:8px;letter-spacing:.1em;white-space:nowrap}
}
body:has(#contact-form:focus-within) .impact{visibility:hidden!important;pointer-events:none!important}
@media(min-width:761px){.coordinates{position:fixed;top:28px;left:50%;transform:translateX(-50%)}.nav-cta{position:fixed;z-index:81;top:62px;right:3vw;padding-top:8px}}

/* Contact form: preserve the established neon green for entered text. */
#contact-form input,#contact-form textarea{color:#a6ff00!important;caret-color:#a6ff00!important}
#contact-form input::placeholder,#contact-form textarea::placeholder{color:#a6ff0088!important}

/* The work title crosses in diagonally from beyond both viewport edges. */
.works-head h2.meet-ready .meet-left{transform:translate3d(-130vw,-32vh,0) rotate(-18deg) scale(.96)}
.works-head h2.meet-ready .meet-right{transform:translate3d(130vw,32vh,0) rotate(18deg) scale(.96)}
.works-head h2.meet-active .meet-left{animation:work-meet-left 1200ms cubic-bezier(.23,1,.32,1) both}
.works-head h2.meet-active .meet-right{animation:work-meet-right 1200ms cubic-bezier(.23,1,.32,1) both}
@keyframes work-meet-left{from{opacity:0;transform:translate3d(-130vw,-32vh,0) rotate(-18deg) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}
@keyframes work-meet-right{from{opacity:0;transform:translate3d(130vw,32vh,0) rotate(18deg) scale(.96)}to{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}}

/* Selected work title: opposing lines converge at center when revealed. */
.works-head h2.meet-ready{visibility:hidden}
.works-head h2.meet-ready.meet-active{visibility:visible}
.works-head h2.meet-ready .meetline{opacity:0}
.works-head h2.meet-ready .meet-left{transform:translate3d(-130vw,-32vh,0) rotate(-18deg) scale(.96)}
.works-head h2.meet-ready .meet-right{transform:translate3d(130vw,32vh,0) rotate(18deg) scale(.96)}
.works-head h2.meet-active .meet-left{animation:work-meet-left 1200ms cubic-bezier(.23,1,.32,1) both}
.works-head h2.meet-active .meet-right{animation:work-meet-right 1200ms cubic-bezier(.23,1,.32,1) both}
@media(prefers-reduced-motion:reduce){.works-head h2.meet-ready .meetline{animation:meet-fade 200ms ease both;transform:none!important}@keyframes meet-fade{from{opacity:0}to{opacity:1}}}


/* Mobile-first refinement: readable, touch-safe and never wider than the viewport. */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .nav{min-height:58px;padding:12px 16px!important;align-items:flex-start!important;mix-blend-mode:normal}
  .nav .mark{width:132px!important;height:42px!important;flex:0 0 132px!important}
  .nav .coordinates{display:block!important;position:fixed!important;top:64px!important;left:16px!important;right:auto!important;transform:none!important;font-size:7px!important;letter-spacing:.13em!important;white-space:nowrap}
  .nav .nav-cta{position:fixed!important;z-index:202!important;top:57px!important;right:16px!important;margin:0!important;padding:7px 0 4px!important;font-size:8px!important;letter-spacing:.1em!important;white-space:nowrap}
  .hero h1{font-size:18vw;line-height:.82;padding:0 12px}
  .eyebrow{top:23vh;left:16px;font-size:8px;letter-spacing:.2em}
  .intro{left:16px;right:16px;top:67vh;width:auto;font-size:1rem;line-height:1.45}
  .frame-status{inset:auto 16px 16px auto;width:120px}
  .manifesto{height:190vh}
  .pin{padding:0 18px}
  .manifesto h2{font-size:17vw;line-height:.83}
  .works{padding:14vh 16px 18vh}
  .works-head{min-height:34vh;margin-bottom:8vh}
  .works-head .chapter{font-size:8px;letter-spacing:.18em}
  .works-head h2{inset:8vh 0 auto;font-size:14.5vw;line-height:.82}
  .portals{margin-bottom:14vh}
  .portals a{min-height:118px;padding:16px}
  .portals strong{font-size:clamp(1.35rem,8vw,2.2rem)}
  .cards{max-width:none}
  .cards .project,.cards .project-wide{margin-bottom:13vh!important}
  .project img{aspect-ratio:1/1;padding:18px}
  .project div{grid-template-columns:28px 1fr;padding-top:12px}
  .project h3{font-size:clamp(1.5rem,9vw,2.25rem)}
  .project p,.project div>span{font-size:8px;line-height:1.4}
  .impact{height:150vh}
  .impact h2{top:58vh;left:16px;font-size:21vw}
  .impact .chapter{top:45vh;left:16px;font-size:8px}
  .ring{top:92vh;width:130px;height:130px;right:-28px}
  .contact{min-height:100svh;padding:12vh 16px 24px}
  .contact h2{font-size:15.5vw;line-height:.82}
  .contact-form{margin:8vh 0 6vh;width:100%}
  .form-line{padding:16px 0}
  .form-line input,.form-line textarea{font-size:16px;line-height:1.35}
  .form-line textarea{min-height:112px}
  .contact-form button{min-height:56px;padding:0 16px;font-size:10px}
  .contact-direct{gap:18px;font-size:9px}
  .contact footer{gap:14px;font-size:8px;line-height:1.5}
}


/* Mobile slideshow: one true viewport overlay with a persistent close affordance. */
@media(max-width:760px){
  dialog.slideshow,dialog.slideshow[open]{
    position:fixed!important;inset:0!important;
    display:grid!important;grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto auto!important;
    width:100dvw!important;max-width:100dvw!important;
    height:100dvh!important;max-height:100dvh!important;
    min-height:100dvh!important;margin:0!important;padding:0!important;
    overflow:hidden!important;border:0!important;border-radius:0!important;
  }
  dialog.slideshow::backdrop{background:#020402ef}
  .slideshow .slide-stage{
    grid-column:1!important;grid-row:1!important;display:grid!important;
    place-items:center!important;width:100%!important;min-width:0!important;
    height:100%!important;min-height:0!important;margin:0!important;
    padding:68px 16px 16px!important;border:0!important;
  }
  .slideshow .slide-stage img{
    display:block!important;width:auto!important;height:auto!important;
    max-width:100%!important;max-height:100%!important;object-fit:contain!important;
  }
  .slideshow .slide-hint{display:none!important}
  .slideshow .slide-meta{grid-column:1!important;grid-row:2!important;padding:14px 64px 14px 16px!important}
  .slideshow .slide-meta h2{font-size:clamp(1.5rem,9vw,2.35rem)!important}
  .slideshow .slide-controls{grid-column:1!important;grid-row:3!important;width:100%!important;margin:0!important}
  .slideshow .slide-close{
    position:absolute!important;z-index:5!important;top:14px!important;right:14px!important;
    display:grid!important;place-items:center!important;width:46px!important;height:46px!important;
    margin:0!important;padding:0!important;border-radius:50%!important;
    font-size:30px!important;line-height:1!important;
  }
}


/* Keep the mobile slideshow close control clear of the language switcher. */
@media(max-width:760px){.slideshow .slide-close{top:62px!important;right:16px!important}}



/* Mobile manifesto: a clear three-line statement with more breathing room. */
@media(max-width:760px){
  .peper-immersive-home .manifesto h2{font-size:14vw!important;line-height:.88!important}
  .peper-immersive-home .manifesto h2 .flyword{text-shadow:0 0 9px #dfff77,0 0 28px #78ff00,0 0 72px #38ff00aa}
}

@media(max-width:760px){
  .peper-immersive-home .manifesto .pin{align-items:center!important;text-align:center!important;padding-inline:16px!important}
  .peper-immersive-home .manifesto h2{width:100%;align-items:center!important;text-align:center!important}
}

/* Mobile work cards keep a compact scale and the contact form has no decorative square grid. */
@media(max-width:760px){
  .peper-immersive-home .cards .project{width:86%!important;margin-left:auto!important;margin-right:auto!important}
}
.peper-immersive-home .contact::before{display:none!important}

@media(max-width:760px){
  .peper-immersive-home .cards .project{margin-bottom:22vh!important}
}

/* Mobile asset links must be block-level so the scroll transform can move every card after Karaoke. */
@media(max-width:760px){
  .peper-immersive-home .cards>a.project{display:block!important}
}

/* Mobile performance: avoid interpolating scroll-driven transforms and skip offscreen card painting. */
@media(max-width:760px){
  .peper-immersive-home .cards .project{transition:none!important;will-change:transform,opacity;contain:layout paint style;content-visibility:auto;contain-intrinsic-size:auto 540px}
}

/* Mobile manifesto holds at center before its opposing split exit; the hero copy is optically centered. */
@media(max-width:760px){
  .peper-immersive-home .manifesto{height:235vh!important}
  .peper-immersive-home .hero h1{inset:auto 0!important;top:50%!important;width:100%!important;height:auto!important;padding:0 12px!important;transform:translate3d(0,-50%,0)!important}
}