@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--sc-canvas:#151515;--sc-surface:#202020;--sc-ink:#f5f3ee;--sc-ink-soft:#a5a7aa;--sc-accent:#09aef4;--sc-accent-ink:#071116;--sc-font-display:'Bebas Neue',Impact,sans-serif;--sc-font-text:Manrope,Arial,sans-serif;--ink:#f5f3ee;--muted:#a5a7aa;--blue:#09aef4;--paper:#f5f3ee;--max:1180px;--line:color-mix(in srgb,var(--ink) 18%,transparent)}
*{box-sizing:border-box}body{background:#151515;background-image:radial-gradient(#4c4c4c .7px,transparent .8px);background-size:4px 4px}a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}.site-nav{position:fixed;z-index:100;inset:24px 50% auto auto;transform:translateX(50%);width:min(850px,calc(100% - 28px));padding:8px 9px 8px 13px;display:flex;align-items:center;justify-content:space-between;border:1px solid #484848;border-radius:99px;background:#151515e6;backdrop-filter:blur(14px);box-shadow:0 15px 35px #0004}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px}.brand i{display:block;width:8px;height:8px;border-radius:99px;background:var(--blue);box-shadow:0 0 0 4px #09aef41f}.nav-links{display:flex;align-items:center;gap:3px}.nav-links a{font-size:12px;padding:11px 14px;border-radius:99px;color:#d4d4d4}.nav-links a:hover,.nav-links a[aria-current=page]{background:var(--blue);color:#081116}.nav-contact{border-radius:99px;border:1px solid var(--blue);padding:10px 15px;font-size:12px;color:var(--blue)}.cursor{position:fixed;z-index:1000;width:18px;height:18px;border-radius:50%;background:var(--blue);pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;transition:width .2s,height .2s,opacity .2s;will-change:transform}.cursor.is-active{width:42px;height:42px;opacity:.78}.hero{min-height:100svh;display:grid;align-items:center;padding:125px 0 70px;overflow:hidden;position:relative}.hero::before{content:'';position:absolute;inset:12% 9% 8%;background:linear-gradient(115deg,#202020bb,#1115);clip-path:polygon(0 11%,100% 0,91% 100%,6% 90%)}.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:20px}.kicker{font:12px 'DM Mono';letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}.hero h1,.page-hero h1{font:clamp(82px,12vw,180px)/.77 var(--sc-font-display);letter-spacing:-.025em;margin:18px 0 30px}.hero h1 span{display:block}.hero-desc{max-width:410px;margin:0;color:#d4d4d4;font-size:clamp(15px,1.5vw,19px);line-height:1.65}.hero-actions{display:flex;gap:12px;margin-top:29px}.button{display:inline-flex;align-items:center;gap:10px;border-radius:99px;padding:14px 20px;background:var(--blue);color:#071116;font-size:13px;font-weight:800}.button.alt{background:transparent;color:var(--ink);border:1px solid #777}.hero-portrait{width:min(100%,370px);justify-self:end;aspect-ratio:.78;object-fit:cover;filter:grayscale(1);border-radius:3px;box-shadow:28px 32px 0 #09aef422;animation:portrait-in 1.2s var(--sc-ease-out) both}.hero-note{position:absolute;right:3%;bottom:12%;font:11px 'DM Mono';color:var(--blue);writing-mode:vertical-rl;letter-spacing:.15em}.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}.section{padding:clamp(80px,12vw,150px) 0;position:relative}.section-line{border-top:1px solid var(--line)}.section-heading{max-width:650px;font:clamp(58px,8vw,112px)/.82 var(--sc-font-display);letter-spacing:-.01em;margin:13px 0 28px}.section-copy{color:var(--muted);max-width:615px;line-height:1.7;margin:0}.services{margin-top:68px;border-top:1px solid var(--line)}.service{display:grid;grid-template-columns:70px minmax(160px,.75fr) 1.4fr;gap:24px;padding:29px 0;border-bottom:1px solid var(--line)}.service .n{font:13px 'DM Mono';color:var(--blue)}.service h3{margin:0;font-size:22px}.service p{margin:0;white-space:pre-line;line-height:1.75;color:var(--muted);font-size:14px}.about-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,8vw,120px);align-items:end}.about-photo{width:100%;max-height:630px;object-fit:cover;filter:grayscale(1)}.about-copy{font-size:clamp(19px,2.2vw,29px);line-height:1.45;margin:0}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:55px;padding-top:20px;border-top:1px solid var(--line)}.metric{min-height:120px}.reel{display:flex;height:58px;overflow:hidden;font:64px/1 var(--sc-font-display);letter-spacing:.02em}.reel .digit{height:58px;display:inline-block;overflow:hidden}.reel .strip{display:flex;flex-direction:column;transform:translateY(0);transition:transform 1.05s cubic-bezier(.18,.82,.18,1)}.reel .strip span{height:58px;line-height:58px}.metric small{display:block;color:var(--muted);font-size:11px;line-height:1.35;max-width:100px}.project-stack{position:relative;margin-top:62px}.project-layer{height:77vh;min-height:530px;position:sticky;top:11vh;margin-bottom:14vh;border:1px solid #3d3d3d;background:#202020;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;box-shadow:0 18px 60px #0008;transform-origin:top center}.project-layer:nth-child(2){top:14vh;background:#24211f}.project-layer:nth-child(3){top:17vh;background:#1d2424}.project-layer:nth-child(4){top:20vh;background:#202026}.project-layer img{width:100%;height:100%;object-fit:cover}.project-layer .project-copy{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(25px,4vw,58px)}.project-copy h3{font:clamp(42px,5.5vw,76px)/.88 var(--sc-font-display);margin:12px 0}.project-copy p{line-height:1.7;color:var(--muted);max-width:330px}.project-meta{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;font:11px 'DM Mono';color:var(--blue)}.testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:55px}.quote{border-top:1px solid #888;padding:24px 0}.quote p{font-size:20px;line-height:1.55;margin:0 0 25px}.quote b{font-size:13px}.quote small{color:var(--muted);display:block}.faq{max-width:830px}.faq details{border-top:1px solid var(--line);padding:22px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.faq summary::after{content:'+';color:var(--blue);font-size:24px}.faq p{color:var(--muted);line-height:1.7;max-width:670px}.contact-band{background:var(--paper);color:#141414;padding:clamp(76px,12vw,145px) 0}.contact-grid{display:grid;grid-template-columns:1fr .8fr;gap:70px}.contact-band .section-heading{font-size:clamp(76px,10vw,145px)}.contact-band .section-copy{color:#555}.form{display:grid;gap:12px;align-content:start}.form input,.form textarea,.form select{width:100%;border:0;border-bottom:1px solid #999;background:transparent;color:#151515;padding:15px 0;outline:none;font-size:14px}.form textarea{min-height:110px;resize:vertical}.submit{border:0;background:#151515;color:white;padding:15px 22px;border-radius:99px;cursor:pointer;width:max-content;margin-top:10px}.footer{padding:27px 0;color:#9e9e9e;font:11px 'DM Mono'}.footer .wrap{display:flex;justify-content:space-between;gap:20px}.page-hero{padding:185px 0 85px;min-height:56svh;display:flex;align-items:end;background:linear-gradient(180deg,#202020,#151515)}.page-hero h1{margin-bottom:0}.page-hero p{max-width:590px;color:var(--muted);line-height:1.75}.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px}.filter-row a{padding:9px 14px;border:1px solid #4b4b4b;border-radius:99px;font-size:12px}.filter-row a:hover{color:#101010;background:var(--blue);border-color:var(--blue)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project-card{position:relative;min-height:430px;background:#222;overflow:hidden;border:1px solid #3b3b3b}.project-card img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.6;transition:transform .6s var(--sc-ease-out),opacity .4s}.project-card:hover img{transform:scale(1.06);opacity:.4}.project-card .overlay{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(0deg,#101010eF,transparent 65%)}.project-card h2{font:46px/.9 var(--sc-font-display);margin:9px 0}.project-card p{font-size:13px;line-height:1.6;color:#d0d0d0;max-width:390px}.project-detail-hero{padding:165px 0 55px}.project-detail-hero .type{color:var(--blue);font:12px 'DM Mono'}.project-detail-hero h1{font:clamp(72px,11vw,150px)/.78 var(--sc-font-display);max-width:950px;margin:17px 0}.project-detail-hero p{max-width:670px;color:var(--muted);line-height:1.7}.detail-hero-image{width:100%;height:min(70vh,800px);object-fit:cover;filter:saturate(.8)}.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:28px 0;border-bottom:1px solid var(--line)}.detail-meta b{font:11px 'DM Mono';color:var(--blue);display:block;margin-bottom:8px}.detail-meta span{font-size:14px}.case-study{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;margin-top:90px}.case-study h2{font:56px/.85 var(--sc-font-display);margin:0}.case-study p{color:var(--muted);line-height:1.8;margin:0 0 29px}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:70px}.gallery img{width:100%;height:400px;object-fit:cover}.gallery img:first-child{grid-column:span 2;height:550px}.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.post-card{border-top:1px solid #777;padding:24px 0}.post-card h2{font:clamp(38px,4vw,62px)/.86 var(--sc-font-display);margin:12px 0}.post-card p,.article p{color:var(--muted);line-height:1.8}.article{width:min(800px,calc(100% - 48px));margin:0 auto;padding:165px 0 120px}.article h1{font:clamp(58px,8vw,108px)/.82 var(--sc-font-display);margin:18px 0 35px}.article h2{font:42px/.9 var(--sc-font-display);margin:60px 0 16px}.article .meta{font:12px 'DM Mono';color:var(--blue)}.article blockquote{font-size:26px;line-height:1.5;border-left:2px solid var(--blue);padding-left:25px;margin:35px 0}.timeline{border-left:1px solid var(--line);margin-top:35px}.timeline article{padding:0 0 34px 26px;position:relative}.timeline article:before{content:'';position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--blue)}.timeline small{color:var(--blue);font:12px 'DM Mono'}@keyframes portrait-in{from{opacity:0;transform:translateY(60px) rotate(4deg)}to{opacity:1;transform:none}}::view-transition-old(root){animation:fade-out .25s ease}::view-transition-new(root){animation:fade-in .45s ease}@keyframes fade-out{to{opacity:0;transform:translateY(-12px)}}@keyframes fade-in{from{opacity:0;transform:translateY(15px)}}
@media(max-width:760px){.site-nav{top:15px}.nav-links{display:none}.nav-contact{padding:9px 13px}.hero-grid,.about-split,.contact-grid,.case-study{grid-template-columns:1fr}.hero{min-height:780px}.hero h1{font-size:91px}.hero-portrait{width:68%;margin-top:-25px;justify-self:end}.hero-note{display:none}.service{grid-template-columns:36px 1fr;gap:8px}.service p{grid-column:2}.metrics{gap:5px}.reel{font-size:45px;height:45px}.reel .digit,.reel .strip span{height:45px;line-height:45px}.metric{min-height:100px}.project-layer{height:72vh;min-height:520px;display:flex;flex-direction:column}.project-layer img{height:48%;order:0}.project-layer .project-copy{height:52%;padding:25px}.project-copy h3{font-size:52px}.testimonials,.project-grid,.blog-grid{grid-template-columns:1fr}.detail-meta{grid-template-columns:repeat(2,1fr);row-gap:22px}.gallery{grid-template-columns:1fr}.gallery img,.gallery img:first-child{grid-column:span 1;height:330px}.footer .wrap{flex-direction:column}.page-hero{padding-top:150px}.project-detail-hero{padding-top:145px}.case-study{gap:30px}.cursor{display:none}}
@media(prefers-reduced-motion:reduce){*,*::after,*::before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.cursor{display:none}}
/* v2 — real-content page components */
.hero-contact{margin-top:26px;font:12px 'DM Mono';color:#d4d4d4;letter-spacing:.06em}
.case-study ul{color:var(--muted);line-height:1.8;margin:0 0 29px;padding-left:20px}
.case-study li{margin-bottom:10px}
.case-study p b{color:var(--ink)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.tool{border:1px solid #3b3b3b;background:#1d1d1d;padding:24px}
.tool img{height:44px;width:auto;max-width:120px;object-fit:contain;margin-bottom:18px;display:block;filter:grayscale(1) brightness(1.6)}
.tool h3{font-size:19px;margin:0 0 10px}
.tool p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.process-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,7vw,100px);align-items:center;margin-bottom:70px}
.process-photo{width:100%;max-height:520px;object-fit:cover;filter:grayscale(.4)}
.steps{display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:90px 1fr;gap:22px;padding:34px 0;border-bottom:1px solid var(--line)}
.step .n{font:15px 'DM Mono';color:var(--blue)}
.step h3{margin:0 0 12px;font-size:26px}
.step p{margin:0;color:var(--muted);line-height:1.75;max-width:720px}
.step-img{width:100%;max-height:300px;object-fit:cover;margin:0 0 18px;filter:saturate(.85)}
.article-cover{width:100%;height:min(52vh,480px);object-fit:cover;margin:0 0 35px}
.article-img{width:100%;max-height:430px;object-fit:cover;margin:14px 0 8px;filter:saturate(.9)}
.post-card img{width:100%;height:260px;object-fit:cover;margin:16px 0}
@media(max-width:900px){.tools{grid-template-columns:1fr}.process-split{grid-template-columns:1fr}.step{grid-template-columns:44px 1fr}}

/* v3 — live site showcase (browser mockup) */
.browser-frame{margin-top:56px;border:1px solid #3b3b3b;border-radius:14px;background:#1d1d1d;overflow:hidden;box-shadow:0 24px 70px #0007}
.frame-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#242424;border-bottom:1px solid #333}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#3f3f3f}
.dots i:first-child{background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:last-child{background:#28c840}
.frame-url{flex:1;text-align:center;font:12px 'DM Mono';color:#bdbdbd;background:#181818;border-radius:99px;padding:8px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-open{color:var(--blue);font-size:12px;font-weight:700;white-space:nowrap}
.device-row{display:flex;gap:6px;justify-content:center;padding:12px;background:#1a1a1a;border-bottom:1px solid #2c2c2c}
.device{border:1px solid #4b4b4b;background:transparent;color:#cfcfcf;font-size:11px;padding:7px 14px;border-radius:99px;cursor:pointer}
.device.is-active{background:var(--blue);border-color:var(--blue);color:#081116;font-weight:800}
.frame-stage{background:#101010;display:flex;justify-content:center;padding:18px;min-height:300px}
.frame-screen{max-width:100%;height:min(78vh,860px);transition:width .45s var(--sc-ease-out),max-width .45s var(--sc-ease-out);background:#fff;overflow:hidden}
.frame-screen iframe{width:100%;height:100%;border:0;display:block}
.frame-load{position:relative;width:100%;height:100%;min-height:420px;border:0;padding:0;cursor:pointer;background:#181818;display:block}
.frame-load img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.7)}
.frame-load span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;letter-spacing:.04em;background:#0e0e0e66}
.frame-load:hover img{opacity:.65}
@media(max-width:760px){.device-row{display:none}.frame-screen{width:100%!important;height:70vh}.frame-url{font-size:10px}}

/* v4 — interactions ported from project sites (scroll-appear blur, hover zooms, marquee, sweep buttons) */
[data-sc-in]{filter:blur(5px)}
[data-sc-in].sc-in{filter:blur(0)}
[data-sc-in]{transition:opacity 620ms var(--sc-ease-out),transform 620ms var(--sc-ease-out),filter 620ms var(--sc-ease-out)}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;background:#181818}
.marquee-track{display:flex;gap:56px;width:max-content;animation:marquee 30s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font:clamp(30px,4.2vw,58px)/1 var(--sc-font-display);letter-spacing:.05em;color:#4a4a4a;white-space:nowrap}
.marquee em{color:var(--blue);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.gallery img{transition:transform .7s var(--sc-ease-out),filter .7s var(--sc-ease-out);cursor:pointer}
.gallery img:hover{transform:scale(1.03);filter:saturate(1)}
.post-card img{transition:transform .7s var(--sc-ease-out),opacity .4s}
.post-card:hover img{transform:scale(1.04)}
.detail-hero-image{transition:filter .6s}
.button{position:relative;overflow:hidden;transition:transform .25s var(--sc-ease-out),box-shadow .25s}
.button::after{content:'';position:absolute;inset:0;background:#ffffff2e;transform:translateY(101%);transition:transform .35s var(--sc-ease-out)}
.button:hover::after{transform:translateY(0)}
.project-card{transition:box-shadow .4s,border-color .4s}
.project-card:hover{border-color:var(--blue);box-shadow:0 24px 60px #0009}
.tool,.service{position:relative;transition:border-color .35s}
.quote{transition:border-color .35s,transform .35s var(--sc-ease-out)}
.quote:hover{border-color:var(--blue);transform:translateY(-3px)}

/* v5 — dark/light theme system */
:root{--bg:#151515;--surface:#202020;--text-soft:#d4d4d4;--border:#484848;--border-strong:#8a8a8a;--dot:#4c4c4c;--nav-bg:#151515e6;--band-bg:#f5f3ee;--band-ink:#141414;--band-copy:#555}
html[data-theme=light]{--bg:#f3f1ea;--surface:#ffffff;--text-soft:#3f4249;--border:#dcd8ce;--border-strong:#b3aea2;--dot:#ccc8be;--nav-bg:#f3f1ead9;--ink:#191b20;--muted:#63666d;--band-bg:#151515;--band-ink:#f5f3ee;--band-copy:#b9b9b9;--sc-canvas:#f3f1ea;--sc-surface:#ffffff;--sc-ink:#191b20;--sc-ink-soft:#63666d}
html[data-theme=light] body{color:#191b20}
body{background-color:var(--bg);color:var(--ink);background-image:radial-gradient(var(--dot) .7px,transparent .8px);transition:background-color .25s,color .25s}
.site-nav{background:var(--nav-bg);border-color:var(--border);transition:background-color .25s,border-color .25s}
.nav-links a{color:var(--text-soft)}
html[data-theme=light] .nav-links a[aria-current=page]{color:#081116}
html[data-theme=light] .hero::before{background:linear-gradient(115deg,#ffffffc9,#f3f1ea80)}
.hero-desc,.hero-contact{color:var(--text-soft)}
html[data-theme=light] .button.alt{border-color:var(--border-strong)}
html[data-theme=light] .project-layer{border-color:var(--border);background:var(--surface)}
html[data-theme=light] .project-layer:nth-child(2),html[data-theme=light] .project-layer:nth-child(3),html[data-theme=light] .project-layer:nth-child(4){background:#fbfaf7}
html[data-theme=light] .quote{border-color:var(--border-strong)}
.page-hero{background:linear-gradient(180deg,var(--surface),var(--bg))}
html[data-theme=light] .filter-row a{border-color:var(--border)}
.filter-row a:hover{color:#101010}
html[data-theme=light] .project-card{background:var(--surface);border-color:var(--border)}
html[data-theme=light] .project-card p{color:var(--text-soft)}
html[data-theme=light] .post-card{border-color:var(--border-strong)}
html[data-theme=light] .tool{background:#ffffff;border-color:var(--border)}
.marquee{background:#181818;border-top-color:var(--line);border-bottom-color:var(--line)}
.marquee span{color:#4a4a4a}
html[data-theme=light] .marquee{background:#eae7de}
html[data-theme=light] .marquee span{color:#a8a396}
.footer{color:#9e9e9e}
html[data-theme=light] .footer{color:var(--muted)}
html[data-theme=light] .cursor{mix-blend-mode:exclusion}
html[data-theme=light] .contact-band{background:var(--band-bg);color:var(--band-ink)}
html[data-theme=light] .contact-band .section-copy{color:var(--band-copy)}
html[data-theme=light] .form input,html[data-theme=light] .form textarea,html[data-theme=light] .form select{color:#f5f3ee;border-bottom-color:#5a5a5a}
html[data-theme=light] .form select option{color:#151515}
html[data-theme=light] .submit{background:#f5f3ee;color:#151515}

/* mode switch pill */
.mode-switch{position:fixed;right:16px;bottom:16px;z-index:130;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;background:var(--nav-bg);backdrop-filter:blur(14px);border:1px solid var(--border);box-shadow:0 12px 28px #0005;cursor:pointer;transition:transform .18s var(--sc-ease-out),border-color .25s,background-color .25s}
.mode-switch:hover{transform:scale(1.05)}
.mode-switch:active{transform:scale(.94)}
.ms-opt{font-size:13px;line-height:1;opacity:.35;transition:opacity .25s}
.ms-track{width:36px;height:19px;border-radius:99px;background:var(--dot);position:relative;flex:none}
.ms-knob{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--blue);box-shadow:0 1px 4px #0006;transition:left .22s cubic-bezier(.34,1.56,.64,1)}
html[data-theme=light] .ms-knob{left:19px}
.ms-dark{opacity:.9}
html[data-theme=light] .ms-dark{opacity:.35}
html[data-theme=light] .ms-light{opacity:.9}

/* image bands — fill empty space with real work */
.img-band{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:min(1400px,calc(100% - 48px));margin-inline:auto}
.img-band img{width:100%;height:clamp(150px,20vw,290px);object-fit:cover;filter:saturate(.82);transition:transform .7s var(--sc-ease-out),filter .7s;will-change:transform}
.img-band img:hover{transform:scale(1.05);filter:saturate(1.08);position:relative;z-index:2}
.band-wrap{padding:clamp(26px,4vw,44px) 0;border-top:1px solid var(--line)}
.band-wrap .kicker{display:block;text-align:center;margin-bottom:18px}
@media(max-width:760px){.img-band{grid-template-columns:repeat(2,1fr)}.img-band img:nth-child(5){display:none}}
.post-card img{height:330px}

/* v6 — consistent large display type across all pages */
.page-hero h1 span,.project-detail-hero h1 span{display:block}
.article h1{font-size:clamp(64px,9vw,128px)}

/* v7 — cursor spotlight everywhere (dark mode only), inverted switch, nav pill polish */
html[data-theme=light] [data-sc-spotlight]::after{display:none}

.mode-switch{background:#f5f3ee;border-color:#00000024;box-shadow:0 12px 26px #00000038}
.mode-switch .ms-opt{color:#151515}
.mode-switch .ms-track{background:#ccc8bd}
html[data-theme=light] .mode-switch{background:#151515;border-color:#ffffff2e;box-shadow:0 12px 26px #00000030}
html[data-theme=light] .mode-switch .ms-opt{color:#f5f3ee}
html[data-theme=light] .mode-switch .ms-track{background:#3d3d3d}

.nav-links{gap:7px}
.nav-links a{padding:10px 17px;border-radius:999px}
.nav-contact{margin-left:12px}

/* v8 — narrative case study (brief→build, decisions, results, client note, next-case) */
.cs-problem{max-width:760px;color:var(--muted);line-height:1.7;font-size:clamp(15px,1.6vw,18px);margin-top:18px}
.cs-problem b{color:var(--blue);font-weight:700}
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 10px}
.cs-duo article{border:1px solid var(--border);border-radius:16px;padding:clamp(24px,3vw,34px);background:var(--surface);display:flex;flex-direction:column;gap:14px;transition:border-color .35s,transform .35s var(--sc-ease-out)}
.cs-duo article:hover{transform:translateY(-3px)}
.cs-duo .kicker{margin:0}
.cs-duo p{margin:0;color:var(--muted);line-height:1.75;font-size:14.5px;flex:1}
.cs-duo .after{background:var(--blue);border-color:var(--blue);box-shadow:0 26px 60px #09aef422}
.cs-duo .after .kicker{color:#083247}
.cs-duo .after p{color:#07222f;font-size:15px;font-weight:600}
@media(max-width:760px){.cs-duo{grid-template-columns:1fr}}
.cs-decisions-wrap{margin-top:56px}
.cs-decisions{border-top:1px solid var(--line)}
.cs-decisions article{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.cs-decisions .n{font:16px 'DM Mono';color:var(--blue);padding-top:4px}
.cs-decisions h3{font:700 19px Manrope;margin:0 0 8px;letter-spacing:-.01em}
.cs-decisions p{margin:0;color:var(--muted);line-height:1.72;font-size:14.5px;max-width:720px}
@media(max-width:620px){.cs-decisions article{grid-template-columns:1fr;gap:8px}}
.cs-results-wrap{margin-top:56px}
.cs-results{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.cs-results div{border:1px solid var(--border);border-radius:14px;padding:22px 20px;background:var(--surface);transition:border-color .3s,transform .3s var(--sc-ease-out)}
.cs-results div:hover{border-color:var(--blue);transform:translateY(-3px)}
.cs-results b{font:clamp(30px,4vw,46px)/1 var(--sc-font-display);color:var(--ink);display:block}
.cs-results small{color:var(--muted);font:11.5px/1.5 'DM Mono';margin-top:8px;display:block}
@media(max-width:860px){.cs-results{grid-template-columns:1fr 1fr}}
.cs-quote{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:clamp(30px,5vw,56px);margin:34px auto 0;max-width:1180px;width:calc(100% - 48px)}
.cs-quote p{font-size:clamp(19px,2.4vw,27px);line-height:1.5;margin:0 0 20px;letter-spacing:-.01em}
.cs-quote b{font-size:14px}
.cs-quote small{color:var(--muted);display:block;margin-top:2px;font-size:12.5px}
.cs-next{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.cs-next-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px;transition:border-color .35s,transform .35s var(--sc-ease-out),box-shadow .35s}
.cs-next-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 24px 60px #0009}
.cs-next-card h3{font:clamp(24px,3vw,34px)/.95 var(--sc-font-display);margin:0;letter-spacing:-.01em}
.cs-next-card:last-child{text-align:right;align-items:flex-end}
@media(max-width:680px){.cs-next{grid-template-columns:1fr}.cs-next-card:last-child{text-align:left;align-items:flex-start}}
.hero-cred{margin-top:22px;font:12px 'DM Mono';color:var(--blue);letter-spacing:.12em;text-transform:uppercase}

/* selected-projects index grid (projects page) */
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.index-card{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:12px;min-height:200px;transition:border-color .35s,transform .35s var(--sc-ease-out),box-shadow .35s}
.index-card:hover{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 24px 60px #0009}
.index-card .n{font:13px 'DM Mono';color:var(--blue)}
.index-card h3{font:700 26px Manrope;margin:0;letter-spacing:-.01em}
.index-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65;flex:1}
.index-card .tag{font:11px 'DM Mono';text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);border:1px solid var(--border);border-radius:99px;padding:5px 11px;align-self:flex-start;white-space:nowrap}
@media(max-width:900px){.index-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.index-grid{grid-template-columns:1fr}}

/* v9 — pinned process, card tactility */
.process-stage{min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.process-step{border:1px solid var(--border);border-radius:18px;background:var(--surface);padding:30px 28px;min-height:320px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 70px #0006;transition:border-color .35s}
.process-step:hover{border-color:var(--blue)}
.process-step:nth-child(1){transform:rotate(-2deg) translateY(12px)}
.process-step:nth-child(2){transform:rotate(1.4deg) translateY(-10px)}
.process-step:nth-child(3){transform:rotate(-1deg) translateY(16px)}
.process-step .pn{font:clamp(60px,7vw,104px)/.8 var(--sc-font-display);color:var(--blue)}
.process-step h3{font:700 20px Manrope;margin:0;letter-spacing:-.01em}
.process-step p{margin:0;color:var(--muted);font-size:14px;line-height:1.72;flex:1}
@media(max-width:860px){.process-steps{grid-template-columns:1fr}.process-step{transform:none!important;min-height:0}}

/* v10 — five-step pinned variant + card imagery */
.process-steps.five{grid-template-columns:repeat(5,1fr);gap:16px;margin-top:38px}
.process-steps.five .process-step{min-height:0;padding:22px 18px;box-shadow:0 20px 50px #0005}
.process-steps.five .process-step:nth-child(1){transform:rotate(-1.6deg) translateY(8px)}
.process-steps.five .process-step:nth-child(2){transform:rotate(1deg) translateY(-6px)}
.process-steps.five .process-step:nth-child(3){transform:rotate(-.8deg) translateY(10px)}
.process-steps.five .process-step:nth-child(4){transform:rotate(1.4deg) translateY(-4px)}
.process-steps.five .process-step:nth-child(5){transform:rotate(-1.2deg) translateY(12px)}
.process-steps.five .process-step .pn{font-size:clamp(36px,4vw,60px)}
.process-steps.five .process-step h3{font-size:15.5px}
.process-steps.five .process-step p{font-size:12.5px}
@media(max-width:1100px){.process-steps.five{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.process-steps.five{grid-template-columns:1fr}}
.index-card{min-height:0}
.index-card .ic-img{display:block;height:150px;border-radius:10px;overflow:hidden;margin:0 0 6px;background:#0e0e0e}
.index-card .ic-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .7s var(--sc-ease-out)}
.index-card:hover .ic-img img{transform:scale(1.06)}