:root { --ink:#090909; --paper:#f1f1ec; --acid:#f1f1ec; --signal:#51ff35; --quiet:#9c9c98; --line:rgba(241,241,236,.14); --panel:#121212; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--paper); font-family:Manrope,Arial,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.grain { pointer-events:none; position:fixed; inset:0; z-index:8; opacity:.12; background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.022) 3px 4px); mix-blend-mode:screen; }
.rail { position:fixed; z-index:10; width:120px; height:100svh; padding:27px 0 38px 28px; display:flex; flex-direction:column; font:800 .875rem/1.3 Manrope,Arial,sans-serif; letter-spacing:.015em; font-synthesis:none; }
.rail a { position:relative; width:max-content; display:flex; align-items:center; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.rail a::before { content:""; position:absolute; width:0; height:8px; right:calc(100% + 8px); top:50%; border-radius:99px; background:var(--paper); transform:translateY(-50%); transition:width .45s cubic-bezier(.16,1,.3,1); }
.rail a:hover,.rail a:focus-visible { transform:translateX(8px); }.rail a:hover::before,.rail a:focus-visible::before { width:8px; }.rail a.active { transform:none; }.rail-home::before { display:none; }.rail nav { position:absolute; top:43%; left:28px; display:grid; gap:5px; transform:translateY(-50%); }.nav-word { display:inline-block; min-width:max-content; overflow:visible; padding-right:2px; }.nav-word>span { display:block; }
.rail-connect { margin-top:auto; margin-bottom:105px; gap:10px; transition:color .35s ease,transform .5s cubic-bezier(.16,1,.3,1); }.rail-connect::before { display:none; }.connect-icon { position:relative; width:28px; height:28px; margin-left:-6px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(241,241,236,.34); border-radius:50%; transition:color .35s ease,background .45s ease,border-color .45s ease,box-shadow .45s ease; }.connect-icon>span { font-size:1rem; transition:transform .5s cubic-bezier(.16,1,.3,1); }.connect-icon::after { content:"↗"; position:absolute; font-size:1rem; color:var(--ink); transform:translate(-120%,120%); transition:transform .5s cubic-bezier(.16,1,.3,1); }.rail-connect:hover .connect-icon,.rail-connect:focus-visible .connect-icon { background:var(--paper); border-color:var(--paper); }.rail-connect:hover .connect-icon>span,.rail-connect:focus-visible .connect-icon>span { transform:translate(120%,-120%); }.rail-connect:hover .connect-icon::after,.rail-connect:focus-visible .connect-icon::after { transform:translate(0,0); }body.logo-active .rail-connect { color:var(--signal); }body.logo-active .connect-icon { color:var(--signal); border-color:var(--signal); box-shadow:0 0 22px rgba(81,255,53,.3); }
main { padding-left:120px; }.hero { height:100svh; min-height:720px; position:relative; padding:19px 4vw 0 5vw; overflow:hidden; }
.hero-top,.section-header { display:flex; justify-content:space-between; align-items:center; }.eyebrow,.section-count { margin:0; font:500 .74rem/1.2 "DM Mono",monospace; letter-spacing:-.05em; }.section-count { color:var(--acid); }
.menu-button { width:42px; height:42px; border:0; border-radius:50%; background:var(--paper); display:grid; place-content:center; gap:5px; cursor:pointer; transition:transform .4s cubic-bezier(.16,1,.3,1); }.menu-button:hover { transform:rotate(90deg); }.menu-button i { width:15px; height:1px; background:var(--ink); display:block; }
.hero-frame { position:absolute; top:155px; left:0; right:1.2vw; bottom:156px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,#101010 0%,#0c0c0c 52%,#111 100%); overflow:hidden; }
.hero-logo-panel { position:absolute; z-index:4; top:28px; left:0; right:1.2vw; height:82px; display:flex; justify-content:center; align-items:flex-start; }
.logo-switch { position:relative; width:min(14vw,155px); aspect-ratio:2.54/1; overflow:hidden; border:0; background:transparent; color:var(--paper); cursor:pointer; padding:0; }.sds-logo { position:absolute; inset:0; width:100%; height:100%; fill:currentColor; opacity:1; transition:opacity .4s ease,filter .4s ease,transform .55s cubic-bezier(.16,1,.3,1); }.logo-switch:hover .sds-logo,.logo-switch:focus-visible .sds-logo { opacity:0; filter:blur(5px); transform:scale(.9); }
.liquid-logo-reveal { --logo-split:115px; position:absolute; z-index:5; top:40px; left:0; right:1.2vw; height:230px; opacity:0; pointer-events:none; transition:opacity .42s ease; }.liquid-logo-layer { position:absolute; inset:0; display:grid; justify-items:center; align-items:start; }.liquid-logo-video { width:min(50vw,560px); aspect-ratio:2.54/1; object-fit:cover; transform:translateY(92px) scale(.7); transform-origin:center 52%; transition:transform .9s cubic-bezier(.16,1,.3,1); }.liquid-logo-sharp { clip-path:inset(0 0 calc(100% - var(--logo-split)) 0); }.liquid-logo-blurred { clip-path:inset(var(--logo-split) 0 0 0); filter:blur(12px); opacity:.82; mask-image:linear-gradient(to bottom,transparent 45%,#000 53%,rgba(0,0,0,.78) 72%,transparent 100%); }.logo-liquid-active .liquid-logo-reveal { opacity:1; }.logo-liquid-active .liquid-logo-video { transform:translateY(0) scale(1); }
.logo-intro-reveal { position:absolute; z-index:5; top:0; left:0; right:1.2vw; height:230px; display:grid; place-items:start center; opacity:0; pointer-events:none; transition:opacity .55s ease; }
.logo-intro-video { width:min(50vw,560px); height:230px; object-fit:contain; }
.logo-active .logo-intro-reveal { opacity:1; }
.logo-liquid-active .logo-intro-reveal { opacity:0; }
@media (max-width:760px) { .logo-intro-reveal { top:25px; left:18px; right:18px; height:180px; }.logo-intro-video { width:min(80vw,360px); height:180px; } }
.render-stage { position:absolute; inset:0; overflow:hidden; background:#090909; }
.hero-render { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 58%; }
.hero-info-band { position:absolute; left:0; right:0; bottom:0; height:29%; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(310px,38%) 1fr; }
.hero-copy { position:relative; isolation:isolate; overflow:hidden; perspective:700px; padding:34px 42px; display:grid; align-content:start; gap:24px; border-right:1px solid var(--line); background:#090909; font-size:.82rem; line-height:1.5; transition:background .55s ease,box-shadow .55s ease,border-color .55s ease; }.hero-copy::before { content:""; position:absolute; z-index:-2; inset:-10%; opacity:0; background:radial-gradient(ellipse at 42% 66%,rgba(255,255,255,.065),rgba(255,255,255,.012) 32%,transparent 66%); filter:blur(10px); transform:scale(1.12); transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1); }.hero-copy::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; border:1px solid rgba(255,255,255,.2); opacity:0; box-shadow:inset 0 0 38px rgba(255,255,255,.025),0 15px 42px rgba(0,0,0,.72); transition:opacity .55s ease; }.hero-copy:hover { z-index:2; background:#050505; border-color:rgba(255,255,255,.2); box-shadow:0 15px 42px rgba(0,0,0,.72); }.hero-copy:hover::before { opacity:1; transform:scale(1); }.hero-copy:hover::after { opacity:1; }.hero-copy p,.hero-copy a { position:relative; z-index:1; }.hero-copy p { margin:0; transform-origin:left center; transition:opacity .65s ease,filter .65s ease,transform .75s cubic-bezier(.16,1,.3,1); }.hero-copy:hover p { opacity:.2; filter:blur(4px); transform:translate3d(0,-5px,-80px) scale(.92); }.text-link { width:max-content; font:500 .71rem "DM Mono",monospace; }.text-link span,.contact-button span { margin-left:10px; font-size:1rem; }.hero-index { margin:0; align-self:end; justify-self:end; padding:0 24px 30px; color:var(--paper); text-shadow:0 1px 6px #000,0 0 16px #000; font:500 .66rem "DM Mono",monospace; }body.logo-active .hero-copy { background:#060606; border-color:rgba(255,255,255,.18); box-shadow:inset 0 0 28px rgba(255,255,255,.02); }body.logo-active .hero-copy::after { opacity:.45; }
.marquee { position:absolute; z-index:3; bottom:-.08em; left:0; width:100%; height:clamp(74px,10vw,150px); font:800 clamp(4.8rem,10vw,10rem)/.78 Manrope,sans-serif; letter-spacing:-.065em; word-spacing:.16em; white-space:nowrap; pointer-events:none; overflow:visible; }.marquee-line { position:absolute; inset:0; overflow:hidden; }.marquee-track { --marquee-gap:.58em; display:flex; gap:var(--marquee-gap); width:max-content; will-change:transform; animation:marquee 22s linear infinite; }.marquee span { display:block; flex:none; }.marquee-sharp { clip-path:inset(0 0 51% 0); }.marquee-soft { clip-path:inset(48% 0 0 0); filter:blur(12px); opacity:.72; mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%); }
.text-link { position:relative; display:inline-flex; align-items:center; transform-origin:left center; transition:font-weight .35s ease,letter-spacing .55s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .55s ease; }.text-link::before { display:none; }.text-link:hover,.text-link:focus-visible { color:var(--paper); }.hero-copy:hover .text-link { font-weight:700; letter-spacing:.025em; transform:translate3d(5px,4px,75px) scale(1.48); filter:drop-shadow(0 0 8px rgba(255,255,255,.24)); }.text-link span { transition:transform .55s cubic-bezier(.16,1,.3,1); }.hero-copy:hover .text-link span { transform:translate(4px,-4px); }
.hero-copy { --copy-pad:42px; --link-top:98px; transform-origin:center; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.16,1,.3,1),background .55s ease,box-shadow .55s ease,border-color .55s ease; }
.hero-copy::before { inset:-22%; opacity:.2; background:radial-gradient(ellipse at 22% 32%,rgba(255,255,255,.075),transparent 30%),radial-gradient(ellipse at 76% 68%,rgba(255,255,255,.045),transparent 34%),repeating-radial-gradient(circle at 48% 52%,rgba(255,255,255,.018) 0 1px,transparent 1px 5px); filter:blur(13px); transform:translate3d(-2%,1%,0) scale(1.1) rotate(-2deg); animation:liquid-flow 10s ease-in-out infinite alternate; }
.hero-copy:hover { transform:translateY(-7px) scale(1.025); box-shadow:0 20px 52px rgba(0,0,0,.82); }
.hero-copy:hover::before { opacity:.48; }
.hero-copy p { transform-origin:center bottom; backface-visibility:hidden; }
.hero-copy:hover p { opacity:.12; filter:blur(5px); transform:perspective(620px) translate3d(0,-14px,-110px) rotateX(67deg) scale(.9); }
.text-link { position:relative; z-index:4; left:auto; top:auto; display:inline-flex; color:var(--paper); opacity:1; visibility:visible; white-space:nowrap; }
.hero-copy .text-link { position:absolute; left:42px; top:98px; transform-origin:center; transition:left .7s cubic-bezier(.16,1,.3,1),top .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),font-weight .35s ease,letter-spacing .55s cubic-bezier(.16,1,.3,1),filter .55s ease; }
.hero-copy:hover .text-link { left:50%; top:50%; font-weight:700; letter-spacing:.035em; transform:translate(-50%,-50%) scale(1.52); filter:drop-shadow(0 0 9px rgba(255,255,255,.28)); }
.hero-copy:hover .text-link span { transform:none; }
.hero-copy:hover::after { border-color:rgba(81,255,53,.3); box-shadow:inset 0 0 12px rgba(81,255,53,.035); }
@media (max-width:760px) { .hero-copy:not(:hover) .text-link { left:24px; top:94px; } }
.rail-connect { transform-origin:left center; }.rail-connect:hover,.rail-connect:focus-visible { transform:translateX(9px) scale(1.27); }.rail-connect .nav-word { position:relative; overflow:visible; }.rail-connect .nav-word::after { content:none; }.rail-connect:hover .nav-word>span,.rail-connect:focus-visible .nav-word>span,.rail-connect.xray-pulse .nav-word>span { color:transparent; background:radial-gradient(ellipse 31px 23px at 104% -8%,#bfe9ff 0 96%,var(--paper) 100%); background-clip:text; -webkit-background-clip:text; filter:drop-shadow(0 0 4px rgba(191,233,255,.28)); }.rail-connect.xray-pulse { animation:connect-pulse .72s cubic-bezier(.16,1,.3,1); }
@keyframes connect-pulse { 0% { transform:translateX(9px) scale(1.27); } 42% { transform:translateX(13px) scale(1.38); } 100% { transform:translateX(9px) scale(1.27); } }
@keyframes liquid-flow { 0% { transform:translate3d(-4%,-1%,0) scale(1.08) rotate(-3deg); } 50% { transform:translate3d(3%,2%,0) scale(1.16) rotate(2deg); } 100% { transform:translate3d(-1%,4%,0) scale(1.12) rotate(-1deg); } }
.process-film { position:absolute; z-index:0; inset:-4%; width:108%; height:108%; object-fit:cover; pointer-events:none; opacity:0; filter:grayscale(1) brightness(.34) contrast(1.08) blur(1px); transform:scale(1.04); transition:opacity .8s ease .48s,transform 1.6s cubic-bezier(.16,1,.3,1); }.hero-copy:hover .process-film { opacity:.52; transform:scale(1.1); }.hero-copy::before { z-index:1; background:radial-gradient(ellipse at 42% 66%,transparent 8%,rgba(0,0,0,.16) 45%,rgba(0,0,0,.66) 100%),repeating-radial-gradient(circle at 48% 52%,rgba(255,255,255,.015) 0 1px,transparent 1px 5px); mix-blend-mode:normal; }.hero-copy::after { z-index:2; }.hero-copy p,.hero-copy a { z-index:3; }
@media (max-width:760px) { .liquid-logo-reveal { --logo-split:85px; top:40px; left:18px; right:18px; height:180px; }.liquid-logo-video { width:min(80vw,360px); } }
@keyframes marquee { to { transform:translate3d(calc(-50% - .29em),0,0); } }
.section-pad { padding:32px 4vw 140px; border-top:1px solid var(--line); }.project-intro { display:flex; justify-content:space-between; align-items:end; margin:140px 0 90px; }.project-intro h2,.connect h2 { margin:0; font:800 clamp(3rem,6vw,7.3rem)/.86 Manrope,sans-serif; letter-spacing:-.09em; }.project-intro em,.connect em { font-family:"Instrument Serif",serif; font-weight:400; }.project-intro>p { width:260px; margin:0; color:var(--quiet); font-size:.86rem; line-height:1.55; }
.project-grid { display:grid; grid-template-columns:1.3fr .8fr; gap:10vw 5vw; }.project-card:nth-child(3) { grid-column:2; }.project-art { aspect-ratio:1/1.15; position:relative; overflow:hidden; display:flex; align-items:end; padding:20px; background:#161816; }.project-card--wide .project-art { aspect-ratio:1/1; }.project-art span { position:relative; z-index:2; font:500 .8rem "DM Mono",monospace; }.art-one { background:radial-gradient(circle at 80% 20%,rgba(107,255,26,.9),transparent 12%),radial-gradient(ellipse at 47% 64%,#e9f4d8 0 2%,#879771 3% 11%,#1b261b 33%,#090a09 71%); }.art-two { background:radial-gradient(circle at 50% 45%,#e9ffdb 0 2%,#8bea52 5%,rgba(107,255,26,.15) 10%,transparent 28%),linear-gradient(140deg,#061309,#233725 48%,#050605); }.art-three { background:radial-gradient(ellipse at 20% 90%,rgba(255,157,64,.9),transparent 5%),linear-gradient(160deg,#202623,#070807 55%,#1d4322); }.project-meta { display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); font:.72rem "DM Mono",monospace; }.project-meta p { margin:0; }.project-meta span { color:var(--quiet); }
.process-layout { margin-top:120px; display:grid; grid-template-columns:1.55fr .75fr; gap:6vw; }.process-list { border-top:1px solid var(--line); }.process-step { width:100%; min-height:130px; padding:22px 0; display:grid; grid-template-columns:14% 37% 1fr; align-items:center; text-align:left; color:var(--paper); background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; transition:color .25s ease; }.process-step span { font:.75rem "DM Mono",monospace; }.process-step strong { font:800 clamp(1.5rem,2.8vw,3.8rem)/.88 Manrope,sans-serif; letter-spacing:-.08em; }.process-step small { font-size:.8rem; color:var(--quiet); max-width:230px; line-height:1.45; }.process-step:hover,.process-step.active { color:var(--acid); }.process-step.active small { color:var(--paper); }.process-visual { position:sticky; top:30px; align-self:start; min-height:480px; padding:28px; overflow:hidden; background:#121612; border:1px solid rgba(107,255,26,.3); display:flex; flex-direction:column; justify-content:end; }.process-visual .orb { position:absolute; width:65%; aspect-ratio:1; top:12%; left:20%; border-radius:50%; background:radial-gradient(circle at 32% 30%,#efffe8,#79ff38 19%,#235c18 55%,#0c1d0d 71%); box-shadow:0 0 85px rgba(107,255,26,.22); transition:background .35s ease,transform .35s ease; }.visual-number,.visual-copy,.process-visual h3 { position:relative; margin:0; }.visual-number { font:.75rem "DM Mono",monospace; color:var(--acid); }.process-visual h3 { margin-top:10px; font:800 3rem/.86 Manrope,sans-serif; letter-spacing:-.09em; }.visual-copy { margin-top:12px; max-width:220px; color:var(--quiet); font-size:.8rem; line-height:1.5; }.visual-grid { position:absolute; inset:0; opacity:.17; background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:24px 24px; mask-image:linear-gradient(to bottom,black,transparent 60%); }
.testimonial-stage { min-height:820px; position:relative; display:grid; place-items:center; overflow:hidden; }.testimonial-stage h2 { margin:0; text-align:center; position:sticky; top:38vh; font:800 clamp(3rem,6.5vw,7.5rem)/.85 Manrope,sans-serif; letter-spacing:-.09em; }.quote { position:absolute; padding:28px; width:min(440px,40%); background:#1a1b19; border:1px solid rgba(255,255,255,.06); opacity:0; transform:translateY(40px); transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1); }.quote-one { top:19%; left:2%; }.quote-two { right:0; bottom:17%; }.testimonials.in-view .quote { opacity:1; transform:translateY(0); }.quote p { margin:0 0 26px; line-height:1.45; font-size:.95rem; }.quote span { color:var(--quiet); font:.66rem "DM Mono",monospace; }
.connect { min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; }.connect-main { display:flex; justify-content:space-between; align-items:end; margin:120px 0; }.connect-main>div { width:290px; }.connect-main p { color:var(--quiet); font-size:.9rem; line-height:1.55; }.contact-button { margin-top:28px; display:inline-flex; padding:15px 17px; border:1px solid var(--paper); font:.72rem "DM Mono",monospace; transition:background .25s,color .25s; }.contact-button:hover { color:var(--ink); background:var(--acid); border-color:var(--acid); }.contact-button:hover span { color:var(--ink); }footer { border-top:1px solid var(--line); padding-top:16px; display:flex; justify-content:space-between; gap:20px; font:.66rem "DM Mono",monospace; }footer p { margin:0; color:var(--quiet); }footer div { display:flex; gap:15px; }
@media (max-width:760px) { .rail { position:fixed; width:100%; height:auto; padding:17px 22px; flex-direction:row; align-items:center; gap:18px; background:linear-gradient(var(--ink),transparent); font-size:.78rem; }.rail nav { position:static; display:flex; gap:13px; margin:0; transform:none; }.rail-connect { margin:0 0 0 auto; }.connect-icon { width:24px; height:24px; }.rail-home { display:none; }main { padding-left:0; }.hero { min-height:700px; padding:70px 18px 0; }.hero-top .eyebrow { display:none; }.hero-top { justify-content:flex-end; }.hero-frame { top:125px; left:18px; right:18px; bottom:110px; border-radius:18px; }.hero-logo-panel { top:66px; left:18px; right:18px; height:48px; padding:0; }.logo-switch { width:min(34vw,130px); }.hero-info-band { height:36%; grid-template-columns:1fr; }.hero-copy { border-right:0; padding:28px 24px; }.hero-index { display:none; }.marquee { height:20vw; font-size:20vw; }.section-pad { padding:24px 22px 95px; }.project-intro,.connect-main { display:grid; gap:34px; margin:85px 0 55px; }.project-intro>p,.connect-main>div { width:auto; }.project-grid { grid-template-columns:1fr; gap:48px; }.project-card:nth-child(3) { grid-column:auto; }.project-card--wide .project-art,.project-art { aspect-ratio:1/1; }.process-layout { margin-top:70px; grid-template-columns:1fr; }.process-visual { position:relative; top:auto; min-height:360px; order:-1; }.process-step { min-height:118px; grid-template-columns:13% 48% 1fr; }.process-step small { font-size:.7rem; }.testimonial-stage { min-height:700px; }.testimonial-stage h2 { top:auto; font-size:14vw; }.quote { width:75%; padding:20px; }.quote-one { top:12%; }.quote-two { bottom:8%; }.connect h2 { font-size:14vw; }.connect-main { align-items:start; }.connect-main>div { width:100%; }footer { flex-wrap:wrap; } }

/* Both images stay registered; only the upper image's mask moves. */
.hero-scroll { position:relative; height:calc(max(100svh,720px) + 115svh); }
.hero-scroll .hero { position:sticky; top:min(0px,calc(100svh - 720px)); }

@media (max-width:760px) { .hero-scroll { height:calc(max(100svh,700px) + 100svh); }.hero-scroll .hero { top:min(0px,calc(100svh - 700px)); } }
/* Real text stays inside the frame at every width, independent of image cropping. */
.breakdown-labels { position:absolute; inset:0 0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,2vw,28px); padding:clamp(16px,2.4vw,32px); padding-bottom:45px; pointer-events:none; opacity:var(--labels-opacity,0); background:linear-gradient(#0009,transparent); color:#f1f1ec; font:500 clamp(10px,.85vw,14px)/1.45 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.045em; text-shadow:0 1px 8px #0008; }
.breakdown-labels span { min-width:0; }
.breakdown-labels small { display:block; margin-bottom:7px; font-size:9px; color:#ccc; letter-spacing:.1em; }
.breakdown-labels small::after { content:""; display:inline-block; vertical-align:middle; width:22px; height:1px; margin-left:9px; background:#799ab7; }
.breakdown-labels span:nth-child(2) small::after { background:#c8ab73; }
.breakdown-labels span:nth-child(3) small::after { background:#73b6b9; }
@media(max-width:480px) { .breakdown-labels { padding:15px 12px 35px; gap:10px; grid-template-columns:1fr 1fr 1fr; font-size:9px; letter-spacing:.015em; }.breakdown-labels small { margin-bottom:5px; } }

.breakdown-labels span:last-child { text-align:right; }

/* Full-frame registration keeps the scene continuous across responsive thirds. */
.hero-side-reveal { position:absolute; inset:0; pointer-events:none; --reveal-edge:calc(100% + 16px); mask-image:linear-gradient(to bottom,transparent calc(var(--reveal-edge) - 12px),#000 var(--reveal-edge)); }
.hero-side-reveal .hero-render { position:absolute; inset:0; }
.hero-viewport { clip-path:inset(0 66.666667% 0 0); }
.hero-wireframe { clip-path:inset(0 0 0 66.666667%); }
.breakdown-labels { gap:0; padding-left:0; padding-right:0; }
.breakdown-labels span { padding-inline:clamp(10px,2vw,28px); }
.breakdown-labels span:nth-child(2) { text-align:center; }
@media(max-width:480px) { .breakdown-labels { padding-inline:0; gap:0; }.breakdown-labels span { padding-inline:8px; } }
.project-thumbnail { position:relative; display:block; width:100%; padding:0; border:0; background:#101010; color:var(--paper); cursor:pointer; overflow:hidden; aspect-ratio:16/9; }
.project-thumbnail img { display:block; width:100%; height:100%; object-fit:contain; transition:filter .4s; }
.project-play { position:absolute; left:20px; bottom:20px; display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid #ffffff40; background:#090909a8; backdrop-filter:blur(8px); font:500 11px 'DM Mono',monospace; transition:background .3s; }
.project-thumbnail:hover .project-play { background:#f1f1ec; color:#090909; }
.project-thumbnail:focus-visible { outline:2px solid var(--paper); outline-offset:5px; }
.project-dialog { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; padding:24px; margin:0; border:0; background:transparent; color:var(--paper); overflow:auto; }
.project-dialog[open] { display:grid; place-items:center; }
.project-dialog::backdrop { background:#050505bd; backdrop-filter:blur(15px); }
.film-window { width:min(1100px,100%,calc((100dvh - 190px)*16/9)); margin:auto; position:relative; background:#101010; border:1px solid #ffffff26; box-shadow:0 30px 100px #0009; transform-origin:top left; }
.film-close { position:absolute; right:0; bottom:calc(100% + 12px); display:flex; align-items:center; gap:16px; background:#141414; color:var(--paper); border:1px solid #ffffff40; padding:8px 14px; cursor:pointer; font:500 11px 'DM Mono',monospace; }
.film-close span { font:24px/1 Arial,sans-serif; }
.portfolio-video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#000; }
.film-details { padding:22px 26px; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.film-details h2 { font:500 clamp(18px,2vw,26px)/1.2 Manrope,Arial,sans-serif; margin:8px 0 0; }
.film-details>p { font:10px/1.8 'DM Mono',monospace; text-align:right; margin:0; }
.film-details>p span { color:var(--quiet); }
.film-error { margin:0; padding:12px 24px; font-size:12px; }.film-error a { text-decoration:underline; }
body.film-open { overflow:hidden; }
@media(max-width:600px) { .project-dialog { padding:18px; }.film-window { width:100%; }.film-details { padding:18px; flex-direction:column; align-items:flex-start; gap:12px; }.film-details>p { text-align:left; }.project-meta { gap:12px; flex-wrap:wrap; } }

/* Staggered portfolio: artwork keeps its own proportions and breathing room. */
.project-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:72px 2.5%; align-items:start; }
.project-card { min-width:0; }
.project-card--wide { grid-column:1 / 9; grid-row:1; }
.project-description { grid-column:10 / 13; grid-row:1; align-self:center; margin:0; max-width:220px; color:var(--quiet); font:400 clamp(14px,1.25vw,19px)/1.6 Manrope,sans-serif; }
.project-card.project-card--portrait { grid-column:9 / 13; grid-row:2; margin-top:0; }
.project-card--portrait .project-art { aspect-ratio:3 / 4; }
.project-card.project-card--landscape { grid-column:2 / 9; grid-row:3; margin-top:0; }
.project-card--landscape .project-art { aspect-ratio:4 / 3; }
.project-meta { gap:12px; flex-wrap:wrap; line-height:1.5; }
@media(max-width:760px) {
  .project-grid { grid-template-columns:minmax(0,1fr); gap:42px; }
  .project-card--wide,.project-description,.project-card.project-card--portrait,.project-card.project-card--landscape { grid-column:1; grid-row:auto; margin:0; }
  .project-description { margin-top:-28px; max-width:none; font-size:14px; }
  .project-card--portrait { width:80%; justify-self:end; }
  .project-card--landscape { width:100%; }
}

.project-card.project-card--portrait { grid-column:8 / 13; }
@media(max-width:760px) { .project-card.project-card--portrait { grid-column:1; width:100%; } }

.project-description--intro { grid-column:2 / 6; grid-row:2; }
.project-description--visual { grid-column:10 / 13; grid-row:3; }
@media(max-width:760px) {
  .project-description--intro,.project-description--visual { grid-column:1; grid-row:auto; }
}
.project-card.project-card--ai { grid-column:6 / 13; grid-row:4; }
.project-description--ai { grid-column:1 / 4; grid-row:4; }
@media(max-width:760px) {
  .project-card.project-card--ai,.project-description--ai { grid-column:1; grid-row:auto; }
}

/* Full-length rules slide out through a clipped edge as the page scrolls. */
.project-meta { position:relative; overflow:hidden; border-bottom-color:transparent; }
.project-meta::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); transform:translateX(var(--rule-offset,0%)); pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .project-meta::after { transform:none; } }
.process-reference { display:block; width:calc(100% + 56px); max-width:none; height:auto; margin:-28px -28px 32px; object-fit:contain; }
.process-reference[hidden] { display:none; }
.process-visual.has-reference { background:#181818; border-color:var(--line); justify-content:flex-start; }
.process-visual.has-reference .orb,.process-visual.has-reference .visual-grid { display:none; }
.process-visual.has-reference .visual-number { color:var(--quiet); margin-top:auto; }

.discuss-studies { display:none; }
.has-reference .discuss-studies { display:block; margin:0 0 24px; }
.has-reference .process-reference { margin-bottom:18px; }
.study-palette { display:flex; gap:5px; }
.study-palette span { flex:1; height:24px; background:var(--swatch); border:1px solid #ffffff0d; }
.study-label { margin:7px 0 0; font:400 8px/1.5 "DM Mono",monospace; letter-spacing:.08em; color:#8d8c86; }
.composition-study { display:block; width:100%; height:auto; margin-top:18px; color:#b8b5aa; background:#1d1d1b; border:1px solid #ffffff0a; }

.scope-studies { display:none; }
.process-visual.has-scope { background:#181818; border-color:var(--line); justify-content:flex-start; }
.has-scope .scope-studies { display:block; margin-bottom:30px; }
.has-scope .orb,.has-scope .visual-grid { display:none; }
.has-scope .visual-number { color:var(--quiet); margin-top:auto; }
.scope-heading { display:flex; justify-content:space-between; font:9px/1.4 "DM Mono",monospace; letter-spacing:.06em; color:#a8a59d; margin-bottom:14px; }
.scope-shot { border:1px solid #ffffff15; }
.scope-shot img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.55); }
.scope-shot>span { display:block; padding:8px; font:8px/1.4 "DM Mono",monospace; color:#aaa69a; }
.scope-plan { margin:18px 0; }
.scope-plan p { margin:0; padding:10px 0; border-bottom:1px solid #ffffff12; }
.scope-plan p>span { display:block; font:8px/1.4 "DM Mono",monospace; color:#8d8c86; letter-spacing:.07em; }
.scope-plan strong { display:block; margin-top:5px; font:400 11px/1.5 Manrope,sans-serif; color:#d2cec4; }
.scope-studies .study-palette span { height:12px; }
.scope-timeline { display:flex; justify-content:space-between; gap:4px; margin-top:22px; padding-top:12px; border-top:1px solid #8e887c; font:7px/1.4 "DM Mono",monospace; color:#b8b5aa; }
.scope-timeline span { position:relative; }
.scope-timeline span::before { content:""; position:absolute; top:-15px; left:0; width:4px; height:4px; border:1px solid #aaa69a; background:#181818; }
.has-scope h3 { font-size:clamp(1.8rem,3.3vw,3rem); }

.blockout-studies { display:none; }
.process-visual.has-blockout { background:#181818; border-color:var(--line); justify-content:flex-start; }
.has-blockout .blockout-studies { display:block; margin-bottom:28px; }
.has-blockout .orb,.has-blockout .visual-grid { display:none; }
.has-blockout .visual-number { color:var(--quiet); margin-top:auto; }
.blockout-image { display:block; width:calc(100% + 56px); max-width:none; margin:0 -28px 12px; height:auto; }
.has-blockout h3 { font-size:clamp(1.8rem,3.3vw,3rem); }
.blockout-studies .study-palette span { height:12px; }

.development-studies { display:none; }
.process-visual.has-development { background:#181818; border-color:var(--line); justify-content:flex-start; }
.has-development .development-studies { display:block; margin-bottom:24px; }
.has-development .orb,.has-development .visual-grid { display:none; }
.has-development .visual-number { color:var(--quiet); margin-top:auto; }
.development-main { display:block; width:calc(100% + 56px); max-width:none; margin:0 -28px 12px; height:auto; }
.development-details { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.development-details figure { margin:0; overflow:hidden; }
.development-details img { display:block; width:100%; height:90px; object-fit:cover; }
.development-details .detail-material { object-position:5% center; }
.development-details .detail-light { object-position:65% center; }
.development-details figcaption { margin-top:7px; font:7px/1.5 "DM Mono",monospace; color:#8d8c86; letter-spacing:.04em; }
.has-development h3 { font-size:clamp(1.25rem,2.2vw,2.3rem); overflow-wrap:anywhere; line-height:1; }

.animation-studies { display:none; }
.process-visual.has-animation { background:#181818; border-color:var(--line); justify-content:flex-start; }
.has-animation .animation-studies { display:block; margin-bottom:24px; }
.has-animation .orb,.has-animation .visual-grid { display:none; }
.has-animation .visual-number { color:var(--quiet); margin-top:auto; }
.animation-preview { display:block; width:calc(100% + 56px); max-width:none; margin:0 -28px 12px; aspect-ratio:16/9; object-fit:contain; background:#101010; }
.has-animation h3 { font-size:clamp(1.25rem,2.2vw,2.3rem); line-height:1; }
.motion-timeline { position:relative; margin:22px 0 18px; padding:8px 0; overflow:hidden; border-block:1px solid #ffffff18; }
.motion-track { display:flex; gap:8px; align-items:center; height:21px; }
.motion-track span { width:42px; font:7px "DM Mono",monospace; color:#8d8c86; }
.motion-track i { flex:1; height:12px; border:1px solid #b0ab9830; background:repeating-linear-gradient(90deg,#85857938 0 22px,transparent 22px 25px); }
.motion-track:nth-child(2) i { margin-left:12px; margin-right:16px; opacity:.6; }
.motion-track:nth-child(3) i { opacity:.4; }
.motion-playhead { position:absolute; top:0; bottom:0; left:calc(50px + (100% - 50px) * 0); left:max(50px,var(--motion-position,0%)); width:1px; background:#d7d1bd; pointer-events:none; }

.review-studies { display:none; }
.process-visual.has-review { background:#181818; border-color:var(--line); justify-content:flex-start; }
.has-review .review-studies { display:block; margin-bottom:28px; }
.has-review .orb,.has-review .visual-grid { display:none; }
.has-review .visual-number { color:var(--quiet); margin-top:auto; }
.has-review h3 { font-size:clamp(1.25rem,2.2vw,2.3rem); line-height:1; }
.review-frame { position:relative; margin:0 -28px 12px; }
.review-frame img { display:block; width:100%; height:auto; }
.review-pin { position:absolute; width:22px; height:22px; border:1px solid #ded8c6b0; border-radius:50%; display:grid; place-items:center; background:#171715d9; color:#e1ddcf; font:8px "DM Mono",monospace; box-shadow:0 0 0 5px #17171530; }
.review-pin--light { left:63%; top:28%; }
.review-pin--detail { left:24%; top:69%; }
.review-note { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid #ffffff15; }
.review-note>span { font:9px/1.7 "DM Mono",monospace; color:#a9a28f; }
.review-note strong { font:400 11px/1.5 Manrope,sans-serif; color:#dedbd2; }
.review-note p,.review-caption { margin:5px 0 0; font:400 11px/1.6 Manrope,sans-serif; color:#96938c; }
.review-flow { display:flex; align-items:center; justify-content:space-between; gap:5px; margin:22px 0 12px; font:7px/1.5 "DM Mono",monospace; color:#bbb6a7; }

.scope-concept svg { display:block; width:100%; height:auto; background:#20201e; color:#bdb8ab; }

.delivery-studies { display:none; }
.process-visual.has-delivery { background:#181818; border-color:var(--line); justify-content:flex-start; }
.has-delivery .delivery-studies { display:block; margin-bottom:28px; }
.has-delivery .orb,.has-delivery .visual-grid { display:none; }
.has-delivery .visual-number { color:var(--quiet); margin-top:auto; }
.has-delivery h3 { font-size:clamp(1.5rem,2.7vw,2.6rem); line-height:1; }
.delivery-image { display:block; width:calc(100% + 56px); max-width:none; height:auto; margin:0 -28px 12px; }
.delivery-package { display:flex; gap:12px; align-items:center; border:1px solid #ffffff1c; padding:12px; }
.delivery-package>span { font-size:22px; color:#bdb6a4; }
.delivery-package strong { display:block; font:9px/1.5 "DM Mono",monospace; color:#d7d2c6; }
.delivery-package small { display:block; margin-top:4px; font:10px/1.5 Manrope,sans-serif; color:#96938c; }

/* A centred sticky title sits behind alternating scrolling review cards. */
.testimonial-stage { display:grid; grid-template-columns:1fr; gap:0; min-height:0; overflow:visible; align-items:start; padding-top:60px; isolation:isolate; }
.testimonial-heading { grid-area:1 / 1; position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center; z-index:0; pointer-events:none; }
.testimonial-stage h2 { position:static; text-align:center; font-size:clamp(2.4rem,4.3vw,5.6rem); line-height:1.16; letter-spacing:-.025em; word-spacing:.08em; }
.testimonial-reviews { grid-area:1 / 1; position:relative; z-index:1; min-width:0; padding-block:110svh 35svh; display:flex; flex-direction:column; gap:18svh; }
.client-review { width:46%; min-height:0; display:flex; flex-direction:column; padding:clamp(24px,3vw,42px); background:rgba(28,28,28,.58); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.075); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.client-review:nth-child(even) { align-self:flex-end; }
.client-review blockquote { order:2; margin:26px 0 0; font-size:clamp(.95rem,1.2vw,1.25rem); line-height:1.55; letter-spacing:-.02em; color:#c9c9c5; text-wrap:pretty; }
.review-name { margin:0 0 7px; font-size:.9rem; font-weight:600; overflow-wrap:anywhere; }
.review-source { margin:0; color:var(--quiet); font:.68rem/1.5 "DM Mono",monospace; }
@media (max-width:760px) {
  .testimonial-stage { gap:30px; padding-top:65px; }
  .testimonial-heading { grid-area:auto; position:static; height:auto; }
  .testimonial-stage h2 { font-size:clamp(2.5rem,10vw,4.5rem); }
  .testimonial-reviews { grid-area:auto; padding:35svh 0 0; gap:24px; }
  .client-review { width:100%; padding:26px; }
  .client-review blockquote { font-size:1rem; }
}
/* Reveal each glass card as it enters the reading area. */
.client-review.review-waiting { opacity:0; transform:translateY(28px); }
.client-review { transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce) { .client-review { transition:none; } }

.booking-options { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); padding:38px 0 48px; border-top:1px solid var(--line); }
.booking-options .eyebrow { color:var(--quiet); font-size:.65rem; letter-spacing:.04em; }
.booking-options h3 { margin:18px 0 12px; font-size:clamp(1.3rem,2.2vw,2rem); font-weight:600; line-height:1.25; letter-spacing:-.035em; }
.booking-options p:not(.eyebrow) { max-width:360px; color:var(--quiet); font-size:.86rem; line-height:1.65; }
.direct-offer .eyebrow { color:var(--paper); }
.booking-links { display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:25px; }
.booking-links a { padding:10px 0; border-bottom:1px solid #ffffff36; font:.65rem/1.5 "DM Mono",monospace; transition:color .2s,border-color .2s; }
.booking-links a span { margin-left:10px; }
.booking-links a:hover { color:var(--signal); border-color:var(--signal); }
.booking-links a:focus-visible { outline:1px solid var(--paper); outline-offset:5px; }
@media(max-width:760px) { .booking-options { grid-template-columns:1fr; gap:32px; } }

/* Contact dialog: quiet charcoal glass with a fine green edge. */
button.contact-button { background:transparent; color:var(--paper); cursor:pointer; gap:16px; }
.contact-dialog { width:min(600px,calc(100% - 36px)); max-height:calc(100svh - 40px); padding:clamp(26px,4vw,48px); overflow:auto; color:var(--paper); background:linear-gradient(145deg,#191d18,#101210 65%); border:1px solid rgba(81,255,53,.48); border-radius:18px; box-shadow:0 0 24px #51ff351a,0 0 75px #51ff350d,inset 0 0 24px #51ff3506; }
.contact-dialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.contact-dialog[open] { animation:contact-arrive .35s ease-out; }
@keyframes contact-arrive { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
body.contact-open { overflow:hidden; }
.contact-close { position:absolute; right:22px; top:18px; display:flex; align-items:center; gap:10px; background:none; border:0; color:var(--quiet); font:10px "DM Mono",monospace; cursor:pointer; padding:8px; }
.contact-close span { font:22px Arial,sans-serif; }
.contact-dialog>.eyebrow { color:var(--signal); margin:20px 0; font-size:10px; letter-spacing:.08em; }
.contact-dialog h2 { font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.045em; line-height:1.08; margin:0 0 16px; }
#contact-intro { color:var(--quiet); font-size:.85rem; line-height:1.6; margin:0 0 30px; }
.contact-form label { display:flex; flex-direction:column; gap:10px; font-size:.75rem; color:#d3d5ce; }
.contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px; }
.contact-form input,.contact-form textarea { width:100%; min-width:0; border:1px solid #ffffff25; border-radius:6px; background:#090b09a6; padding:13px 14px; color:var(--paper); font:400 .9rem/1.5 Manrope,Arial,sans-serif; }
.contact-form textarea { resize:vertical; min-height:115px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:#71766f; }
.contact-form input:focus,.contact-form textarea:focus { outline:1px solid #51ff3580; border-color:#51ff3580; }
.contact-form-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:24px; }
.contact-form-bottom p { font-size:.72rem; color:var(--quiet); }
.contact-send { background:var(--signal); border:1px solid var(--signal); color:#0b1508; border-radius:5px; padding:14px 17px; cursor:pointer; font:500 .68rem "DM Mono",monospace; }
.contact-send span { margin-left:15px; }
.contact-send:hover { background:#85ff71; }
.contact-close:focus-visible,.contact-send:focus-visible { outline:2px solid var(--paper); outline-offset:4px; }
.contact-status { margin:18px 0 0; color:#cbd0c6; font-size:.8rem; line-height:1.5; }
@media(max-width:480px) { .contact-fields { grid-template-columns:1fr; } .contact-form-bottom { align-items:start; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .contact-dialog[open] { animation:none; } }

/* Draw the conversation button's top and bottom edges on hover. */
button.contact-button { position:relative; isolation:isolate; }
button.contact-button::before,button.contact-button::after { content:""; position:absolute; left:-1px; right:-1px; height:1px; background:var(--signal); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.2,.7,.2,1); pointer-events:none; box-shadow:0 0 7px #51ff3566; }
button.contact-button::before { top:-1px; }
button.contact-button::after { bottom:-1px; }
button.contact-button:hover,button.contact-button:focus-visible { background:transparent; color:var(--paper); border-color:rgba(81,255,53,.25); }
button.contact-button:hover span,button.contact-button:focus-visible span { color:var(--signal); }
button.contact-button:hover::before,button.contact-button:hover::after,button.contact-button:focus-visible::before,button.contact-button:focus-visible::after { transform:scaleX(1); }
button.contact-button:focus-visible { outline:1px solid var(--signal); outline-offset:4px; }
button.contact-button:active { background:rgba(81,255,53,.06); }
@media(prefers-reduced-motion:reduce) { button.contact-button::before,button.contact-button::after { transition:none; } }

/* Give the alternative booking route a clear, reassuring presence. */
.fiverr-booking { padding:clamp(24px,3vw,36px); border:1px solid rgba(81,255,53,.28); border-radius:12px; background:linear-gradient(135deg,rgba(81,255,53,.045),rgba(255,255,255,.015)); box-shadow:0 0 26px rgba(81,255,53,.035); }
.fiverr-booking .eyebrow { color:var(--signal); }
.fiverr-booking h3 { color:var(--paper); }
.fiverr-booking .booking-links a { border-bottom-color:rgba(81,255,53,.45); }
.fiverr-booking .booking-links a:first-child { color:var(--signal); }
.fiverr-booking .booking-links a:hover { border-bottom-color:var(--signal); }

.process-visual[hidden] { display:none; }
@media(max-width:760px) {
  .process-list>.process-visual { position:relative; top:auto; order:initial; margin:0 0 16px; min-height:0; animation:process-expand .25s ease-out; }
  .process-step { position:relative; padding-right:23px; }
  .process-step::after { content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); font:400 20px/1 Arial,sans-serif; color:var(--quiet); }
  .process-step[aria-expanded="true"]::after { content:'−'; color:var(--paper); }
  @keyframes process-expand { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
}
@media(prefers-reduced-motion:reduce) { .process-list>.process-visual { animation:none; } }
.contact-form label small,.contact-privacy,.contact-fallback { color:var(--quiet); font-size:.68rem; line-height:1.5; }
.contact-privacy { margin-top:18px; }
.contact-privacy a,.contact-fallback a { text-decoration:underline; text-underline-offset:3px; }
.contact-send:disabled { opacity:.6; cursor:wait; }