/* YASSIR PORTFOLIO v2 | no frameworks, no external fonts, deploy anywhere */
:root{color-scheme:dark;--bg:#090b0e;--surface:#111419;--panel:#161a20;--text:#f4f5f7;--sub:#969da7;--dim:#69717c;--border:rgba(233,239,248,.14);--accent:#8afbcd;--pad:clamp(22px,5.15vw,96px);--ease:cubic-bezier(.16,1,.3,1);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}::selection{background:#e0e6e8;color:#08090c}:focus-visible{outline:2px solid #94f5d2;outline-offset:5px}.wrap{width:100%;max-width:1850px;margin-inline:auto;padding-inline:var(--pad)}.section-space{padding-block:clamp(110px,12vw,190px)}.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;background:#fff;color:#000;padding:12px 20px}.skip-link:focus{top:12px}.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:105;pointer-events:none}.brand{font-weight:850;letter-spacing:-.075em;line-height:1;font-size:31px;white-space:nowrap}.brand span{color:#9fa4ac}.site-header{height:98px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);z-index:60;border-bottom:1px solid transparent}.site-header .brand{position:relative;z-index:70}.main-nav{display:flex;align-items:center;gap:clamp(18px,2.7vw,47px);position:absolute;left:50%;transform:translateX(-50%)}.nav-link{font-size:12px;color:#a5aab3;transition:color .2s;white-space:nowrap}.nav-link:hover,.nav-link.is-active{color:#fff}.header-right{display:flex;align-items:center;gap:16px}.availability{font-size:12px;padding:11px 16px;border:1px solid #30363d;border-radius:50px;display:flex;align-items:center;gap:10px;white-space:nowrap;background:#0c1013b8;color:#d1d6dc}.status-dot,.dot{display:inline-block;flex:none;width:7px;height:7px;background:#4be1ac;border-radius:50%;box-shadow:0 0 13px #3dedad65}.menu-button,.mobile-nav-extra{display:none}
/* home / cinematic hero */
.hero{position:relative;isolation:isolate;min-height:850px;height:calc(100svh - 98px);max-height:1100px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 55% 25%,#1a1e24 0%,#111419 42%,#090b0e 80%)}.hero-noise{position:absolute;inset:0;opacity:.17;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}.hero-halo{position:absolute;width:65vw;height:45vw;top:-5%;left:20%;background:radial-gradient(circle,rgba(121,137,154,.11),transparent 67%);z-index:-1;transform:translate3d(calc(var(--cursor-x,0)*12px),calc(var(--cursor-y,0)*12px),0);transition:transform .6s var(--ease);pointer-events:none}.hero-meta{position:relative;padding:27px var(--pad) 0;min-height:151px;z-index:3;display:flex;justify-content:space-between}.hero-roles{color:#bcc0ca;line-height:1.6;letter-spacing:.13em;font-size:clamp(10px,.76vw,12px);font-weight:600}.hero-meta-right{display:flex;gap:45px;color:#aab0b9}.hero-meta-right p{font-size:clamp(11px,.95vw,14px);line-height:1.55}.hero-scroll{height:86px;border-right:1px solid #757c85;display:flex;align-items:flex-end;gap:20px;padding-right:11px;transition:transform .3s}.hero-scroll:hover{transform:translateY(10px)}.hero-scroll span:first-child{writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em;opacity:.6}.hero-scroll span:last-child{font-size:31px}.hero-word-wrap{position:relative;z-index:1;margin:0 var(--pad) 0 calc(var(--pad) - .01em);white-space:nowrap;width:calc(100% - var(--pad)*2);overflow:visible}.hero-word{display:flex;align-items:baseline;margin:0;font-family:"Arial Black",Inter,Arial,sans-serif;font-size:clamp(110px,21.8vw,375px);letter-spacing:-.105em;line-height:.98;font-weight:900;transform:scaleX(1.04);transform-origin:left center;color:#fff}.letter-clip{display:inline-block;overflow:hidden;padding:0 .015em .06em 0;margin-right:-.015em;vertical-align:bottom}.letter-clip>span{display:block;transform:translateY(120%) rotate(5deg);opacity:0;animation:letterRise 1.1s var(--ease) forwards;animation-delay:calc(.13s + var(--i)*.095s);background:linear-gradient(180deg,#fff 10%,#fff 38%,#cfd1d5 70%,#5f646e 99%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 23px #ffffff0d)}.letter-clip:last-child>span{background:linear-gradient(180deg,#fff,#707780);-webkit-background-clip:text;background-clip:text}.hero-word:hover .letter-clip:nth-child(2)>span,.hero-word:hover .letter-clip:nth-child(4)>span{filter:drop-shadow(0 0 18px #ffffff42)}@keyframes letterRise{0%{transform:translateY(125%) rotate(5deg);opacity:0;filter:blur(9px)}55%{opacity:1}100%{transform:translateY(0) rotate(0);opacity:1;filter:blur(0)}}
[data-intro]{animation:introFade 1s var(--ease) .3s both}@keyframes introFade{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.deck-outer{position:relative;z-index:4;width:100%;flex:1;min-height:335px;margin-top:clamp(-9px,-.7vw,0px)}.deck{height:100%;width:calc(100% + 9vw);margin-left:-4.5vw;padding:0 0 15px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;perspective:1400px}.deck-slot{min-width:0;min-height:0;animation:cardArrival 1.1s var(--ease) both,cardFloat 6s ease-in-out infinite;animation-delay:calc(.65s + var(--n)*.12s),calc(2s + var(--n)*.5s);transform-origin:center bottom}.deck-motion{--angle:8deg;--rise:22px}.deck-web{--angle:6deg;--rise:4px}.deck-video{--angle:-5deg;--rise:10px}.deck-software{--angle:-8deg;--rise:0px}@keyframes cardArrival{from{opacity:0;transform:translateY(110px) rotate(0deg) scale(.9)}to{opacity:1;transform:translateY(var(--rise)) rotate(var(--angle)) scale(1)}}@keyframes cardFloat{0%,100%{transform:translateY(var(--rise)) rotate(var(--angle))}50%{transform:translateY(calc(var(--rise) - 14px)) rotate(calc(var(--angle) + .5deg))}}.deck-card{height:min(370px,40vh);min-height:300px;display:flex;flex-direction:column;position:relative;border:1px solid #6c74812b;border-radius:20px;background:linear-gradient(145deg,#191e26,#090b0f);overflow:hidden;box-shadow:0 25px 60px #0009,inset 0 1px 0 #ffffff16;transition:transform .55s var(--ease),border-color .3s,box-shadow .5s}.deck-slot:hover{z-index:15;animation-play-state:paused}.deck-slot:hover .deck-card{transform:translateY(-22px) scale(1.035);border-color:#8f9da47a;box-shadow:0 40px 80px #000b}.deck-visual{height:69%;position:relative;overflow:hidden;flex:none}.deck-visual img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.73);transition:transform .8s var(--ease),filter .6s}.deck-slot:hover .deck-visual img{transform:scale(1.1);filter:brightness(.95) saturate(1)}.deck-image-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#080a0c 96%)}.deck-content{padding:5px clamp(15px,1.5vw,29px) 20px;display:flex;flex-direction:column;gap:7px}.deck-tag{color:#87929f;font-size:10px}.deck-content strong{font-size:clamp(15px,1.45vw,22px);font-weight:650;letter-spacing:-.045em}.deck-view{margin-top:7px;display:inline-flex;width:max-content;align-items:center;gap:29px;border:1px solid #3d4651;padding:9px 14px;font-size:11px;color:#e4e9ed;border-radius:5px;transition:background .2s}.deck-slot:hover .deck-view{background:#f2f4f5;color:#101215}.deck-num{position:absolute;right:23px;bottom:22px;color:#767e8a;font-size:10px}.hero-baseline{padding:0 var(--pad) 24px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.2em;color:#626c77;z-index:5}.marquee-band{overflow:hidden;background:#15191f;border-block:1px solid #ffffff11;padding-block:19px}.marquee-track{display:flex;width:max-content;animation:marqueeMove 26s linear infinite}.marquee-set{flex:none;display:flex;gap:48px;align-items:center;padding-right:48px;font-size:clamp(13px,1.2vw,17px);font-weight:750;letter-spacing:.12em;white-space:nowrap;color:#dddfe2}.marquee-set span{font-size:17px;color:#657781;font-weight:500}@keyframes marqueeMove{to{transform:translateX(-50%)}}
/* common sections */
.section-kicker,.eyebrow{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.19em;font-weight:650;color:#9ca5ad}.section-kicker .dot{width:6px;height:6px}.split-heading{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end;margin:42px 0 55px}.split-heading h2,.feature-heading h2,.short-about h2,.callout h2{font-size:clamp(58px,7.3vw,125px);font-weight:690;letter-spacing:-.088em;line-height:1.02;margin:0}.split-heading h2 span,.feature-heading h2 span{color:#7b828d}.split-heading>p{max-width:330px;color:#a2a9b2;font-size:15px;line-height:1.85;margin:0 0 9px}.discipline-list{border-top:1px solid #41464d}.discipline-row{min-height:122px;display:grid;grid-template-columns:92px minmax(0,1.5fr) minmax(0,1fr) 56px;align-items:center;gap:20px;border-bottom:1px solid #41464d;transition:padding .4s var(--ease),background .3s}.discipline-row:hover{padding-left:15px;background:#ffffff05}.discipline-no{font-size:12px;color:#8a929c}.discipline-title{font-size:clamp(28px,3.4vw,58px);font-weight:550;letter-spacing:-.055em}.discipline-copy{font-size:13px;color:#929ba6}.discipline-arrow{display:grid;place-items:center;border:1px solid #454c56;border-radius:50%;width:49px;height:49px;font-size:23px;transition:background .3s,color .3s,transform .3s}.discipline-row:hover .discipline-arrow{background:#f1f3f3;color:#08090b;transform:rotate(45deg)}.feature-section{background:radial-gradient(ellipse at 75% 50%,#191f26,#0d0f12 68%);border-block:1px solid #20262c}.feature-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:70px}.feature-heading h2{margin-top:29px}.feature-heading>p{max-width:300px;font-size:15px;line-height:1.8;color:#a0a7b0}.feature-showcase{display:block;position:relative;border:1px solid #414851;border-radius:24px;background:#161b20;overflow:hidden;transition:border-color .25s}.feature-showcase:hover{border-color:#8d969e}.feature-window{height:clamp(250px,48vw,720px);overflow:hidden;position:relative}.feature-window img{height:100%;width:100%;object-fit:cover;object-position:center top;transition:transform .9s var(--ease),filter .7s;filter:brightness(.85)}.feature-showcase:hover .feature-window img{transform:scale(1.04);filter:brightness(1)}.demo-label{position:absolute;top:22px;right:22px;background:#0b0e11d6;padding:11px 15px;border-radius:30px;border:1px solid #ffffff29;color:#cdd5dc;font-size:10px;letter-spacing:.12em;backdrop-filter:blur(12px)}.feature-overlay{position:absolute;inset:auto 0 0;display:flex;align-items:end;justify-content:space-between;padding:40px;background:linear-gradient(180deg,transparent,#080a0dec)}.feature-overlay>div{display:flex;flex-direction:column;gap:12px}.feature-overlay>div span{font-size:10px;letter-spacing:.17em}.feature-overlay strong{font-size:clamp(35px,5vw,78px);letter-spacing:-.065em;line-height:1}.feature-circle{border-radius:50%;width:72px;height:72px;display:grid;place-items:center;background:#fff;color:#101215;font-size:29px;transition:transform .3s}.feature-showcase:hover .feature-circle{transform:rotate(45deg)}.content-note{font-size:12px;color:#828a95;line-height:1.7;margin:26px 0 0}.content-note code,.contact-not-configured code{color:#d3d8df;background:#22272c;padding:3px 5px;border-radius:3px}.short-about-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:80px;align-items:end;margin-top:48px}.short-about h2{font-size:clamp(55px,6.1vw,98px)}.short-about h2 em,.callout h2 em{font-style:normal;color:#828a95}.short-about-grid>div p{color:#a5acb4;font-size:17px;line-height:1.8;margin-bottom:33px}.inline-link{display:inline-flex;gap:35px;align-items:center;padding-bottom:11px;border-bottom:1px solid #a1a8b2;font-size:14px;transition:gap .3s}.inline-link:hover{gap:54px}.callout{background:#e3e5e4;color:#111418}.callout .section-kicker{color:#575d62}.callout h2{margin:30px 0 60px;font-size:clamp(70px,9vw,145px)}.callout h2 em{color:#91979b}.big-pill{display:inline-flex;justify-content:space-between;align-items:center;gap:70px;background:#101317;color:#fff;border:1px solid #111;border-radius:50px;padding:22px 27px;font-size:15px;transition:transform .3s,background .3s}.big-pill span{font-size:22px}.big-pill:hover{background:#303740;transform:translateY(-3px)}
/* category landing */
.page-breadcrumb{display:flex;align-items:center;gap:13px;color:#858e99;font-size:11px;padding-top:25px}.page-breadcrumb a:hover{color:#fff}.page-breadcrumb span:nth-child(2),.page-breadcrumb span:nth-child(4){color:#424b56}.category-hero{padding-top:55px}.category-meta{display:flex;justify-content:space-between;border-bottom:1px solid #2f353c;padding-bottom:20px;margin-top:70px;color:#808995;font-size:11px;letter-spacing:.16em}.category-title-row{display:flex;align-items:end;justify-content:space-between;gap:45px;padding:60px 0 58px}.category-title-row .eyebrow{margin-bottom:25px}.page-title{font-size:clamp(70px,10vw,175px);letter-spacing:-.095em;line-height:.86;font-weight:780;margin:0;white-space:nowrap}.page-title em{font-style:normal;color:#868e99}.category-description{font-size:15px;line-height:1.8;color:#abb2bb;max-width:285px;margin:0 0 4px}.category-cover{position:relative;overflow:hidden;height:clamp(260px,40vw,580px);border-radius:16px;background:#161b20;border:1px solid #30363c}.category-cover>img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.72) brightness(.65);transition:transform 1s var(--ease)}.category-cover:hover>img{transform:scale(1.035)}.category-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,#06090cb8)}.cover-caption{position:absolute;bottom:26px;left:27px;right:27px;display:flex;justify-content:space-between;z-index:1;letter-spacing:.2em;font-size:10px;color:#fff}.gallery-header{display:flex;align-items:end;justify-content:space-between;margin-bottom:53px;gap:40px}.gallery-header h2{font-size:clamp(45px,6vw,91px);font-weight:650;letter-spacing:-.08em;line-height:1;margin:28px 0 0}.gallery-header h2 .dim{font-size:.42em;vertical-align:top;color:#828995}.gallery-header>p{max-width:310px;color:#9ea6b0;line-height:1.7;font-size:14px;margin:0}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 25px}.gallery-grid.website-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-card{min-width:0}.gallery-image{display:block;position:relative;overflow:hidden;aspect-ratio:1.47;border-radius:13px;border:1px solid #353d47;background:#151a20}.gallery-image img{height:100%;width:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s;filter:brightness(.95)}.gallery-image:hover img{transform:scale(1.045);filter:brightness(1.08)}.gallery-image .demo-label{top:15px;right:15px;font-size:9px}.gallery-image .round-arrow{position:absolute;bottom:17px;right:17px;display:grid;place-items:center;border-radius:50%;background:#f2f4f4;color:#101216;width:51px;height:51px;font-size:24px;transition:transform .3s}.gallery-image:hover .round-arrow{transform:rotate(45deg)}.gallery-body{padding:18px 4px 0;display:flex;justify-content:space-between;gap:20px}.gallery-body h3{font-size:clamp(20px,2.2vw,32px);font-weight:630;letter-spacing:-.06em;margin:0 0 8px}.gallery-body p{color:#8c949f;font-size:12px;line-height:1.6;margin:0}.gallery-number{font-size:12px;color:#767f8b}.gallery-body .gallery-domain{margin-top:8px;color:#b2e6d5;font-size:12px}.gallery-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:17px 0 0}.gallery-actions a{font-size:12px;color:#dce1e7;border-bottom:1px solid #737c86;padding-bottom:7px}.gallery-actions a:hover{color:#fff;border-color:#fff}.gallery-actions .no-url{color:#737b86;font-size:11px}.category-next{padding-block:30px 110px}.category-next>span{font-size:11px;letter-spacing:.16em;color:#84909d}.next-category-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.next-category-links a{padding:13px 18px;border:1px solid #454c54;border-radius:50px;font-size:12px;transition:background .25s}.next-category-links a:hover{background:#242a30}
/* case studies */
.case-section{padding-top:48px;padding-bottom:120px}.case-intro{padding:100px 0 55px}.case-intro h1{font-size:clamp(66px,9vw,165px);letter-spacing:-.09em;line-height:.97;font-weight:740;margin:21px 0 43px;max-width:1300px}.case-top-bottom{display:flex;align-items:end;justify-content:space-between;border-top:1px solid #353d45;padding-top:18px;gap:30px}.case-top-bottom p{font-size:18px;color:#a7afb9;margin:0}.case-top-bottom span{font-size:12px;color:#77818c}.case-preview{position:relative;background:#171b20;border:1px solid #3b424a;border-radius:16px;overflow:hidden}.case-image-frame{position:relative}.case-image-frame>img{width:100%;max-height:820px;object-fit:cover}.case-info{display:grid;grid-template-columns:.9fr 1.1fr;gap:10%;padding:95px 0;border-bottom:1px solid #353a42}.case-info h2{font-size:clamp(38px,4vw,68px);line-height:1.05;letter-spacing:-.07em;font-weight:640;margin:35px 0}.case-info>div>p:not(.section-kicker){font-size:17px;line-height:1.85;color:#a9b0ba;max-width:670px}.detail-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}.detail-tags span{border:1px solid #3c444d;border-radius:50px;padding:10px 15px;font-size:11px;color:#a5adb8}.case-actions{margin-top:45px}.dark-pill{border:1px solid #ccc}.case-domain{margin:15px 0 0;font-size:12px;color:#9aa4af}.no-live-link{font-size:12px;padding:13px 17px;border:1px dashed #454d54;color:#89919a;border-radius:50px}.case-end{display:flex;justify-content:space-between;gap:30px;padding-top:35px}
/* about, contact, private profile */
.editorial-hero{padding-top:64px;min-height:610px}.editorial-hero>.eyebrow{margin:110px 0 25px}.editorial-hero h1{font-size:clamp(105px,15vw,250px);line-height:.88;letter-spacing:-.1em;font-weight:780;margin:0}.editorial-hero h1 em{font-style:normal;color:#808893}.editorial-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:55px;gap:40px;border-bottom:1px solid #393f47}.editorial-bottom>p{font-size:19px;line-height:1.8;max-width:680px;color:#a8afb9;padding-bottom:50px}.outline-monogram{font-family:"Arial Black",Arial,sans-serif;font-size:clamp(155px,25vw,350px);font-weight:900;line-height:.7;color:#1d2329;letter-spacing:-.15em;align-self:end}.about-columns{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;border-top:0}.about-columns h2{font-size:clamp(44px,5.4vw,82px);letter-spacing:-.075em;font-weight:650;line-height:1.1;margin:0 0 38px}.about-columns h2 span{color:#7e8791}.about-columns>div>p{font-size:16px;line-height:1.9;color:#aab1ba;max-width:640px}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;margin:35px 0 48px}.tag-cloud span{border:1px solid #3b424b;border-radius:40px;padding:12px 17px;font-size:12px;color:#aeb6bf}.contact-hero{min-height:calc(100svh - 98px)}.contact-hero h1{font-size:clamp(90px,13vw,215px)}.contact-grid{border-top:1px solid #353a43;display:grid;grid-template-columns:1fr 1fr;gap:8%;padding-top:50px;margin-top:70px}.contact-grid>div:first-child>p{font-size:21px;line-height:1.7;color:#c7cbd0;max-width:500px}.contact-grid .minor{font-size:12px;color:#747c88}.contact-methods{display:flex;align-items:start;flex-direction:column;gap:25px}.contact-email-btn{display:flex;justify-content:space-between;align-items:center;width:min(100%,450px);padding:25px 30px;border-radius:50px;background:#f1f3f4;color:#141719;font-weight:650;font-size:21px;transition:transform .3s,background .3s}.contact-email-btn:hover{transform:translateY(-3px);background:#c8d1d2}.contact-email-btn.is-disabled{opacity:.6;cursor:default}.contact-not-configured{font-size:12px;color:#89929d;line-height:1.7}.social-links{display:flex;flex-wrap:wrap;gap:18px}.social-links a{font-size:13px;color:#c0c8d1;border-bottom:1px solid #646e79;padding-bottom:7px}.profile-hero{min-height:0;padding-bottom:70px;border-bottom:1px solid #353b42}.profile-hero h1{font-size:clamp(85px,14vw,220px)}.profile-subtitle{margin:40px 0 0;color:#aab3bd;font-size:20px}.profile-subtitle strong{color:white}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 90px}.profile-grid article{border-top:1px solid #373e47;padding-top:28px}.profile-index{color:#87919d;font-size:12px}.profile-grid article h2{font-size:33px;letter-spacing:-.06em;margin:30px 0 20px}.profile-grid article p{font-size:16px;color:#aab3bf;line-height:1.85;max-width:450px}.profile-grid article .inline-link{margin-top:20px}.privacy-note{font-size:12px;color:#77818c;padding-bottom:100px;line-height:1.8}
/* footer & reveals */
.site-footer{padding:60px var(--pad) 35px;background:#0b0e11;border-top:1px solid #20252b}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-bottom:65px}.footer-top>span{color:#747e8b;font-size:12px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2d343c;padding-top:27px;gap:20px}.footer-bottom>span,.to-top{font-size:11px;color:#808b96}.footer-links{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,29px)}.footer-links a{font-size:11px;color:#9ca6b0;transition:color .2s}.footer-links a:hover,.to-top:hover{color:#fff}.footer-links .employer-link{color:#828b97}body.js-ready [data-reveal]{opacity:0;transform:translateY(35px);transition:transform .9s var(--ease),opacity .85s ease}body.js-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
/* tablet */
@media(max-width:1100px){.site-header{height:85px}.main-nav{gap:19px}.availability{font-size:10px;padding:10px}.hero{height:780px;min-height:780px}.hero-meta{min-height:150px}.hero-word{font-size:21.6vw}.deck-card{height:315px;min-height:0}.deck-content{padding:0 13px 15px}.deck-content strong{font-size:15px}.deck-tag{font-size:9px}.deck-view{font-size:10px;padding:8px}.deck-num{right:12px;bottom:17px}.hero-baseline{padding-bottom:18px}.split-heading h2{font-size:7.1vw}.discipline-row{grid-template-columns:65px minmax(0,1.5fr) minmax(0,.8fr) 50px}.category-title-row{align-items:start;flex-direction:column}.category-description{max-width:540px}.page-title{font-size:11vw}.editorial-hero h1{font-size:16vw}}
/* mobile / touch-first */
@media(max-width:720px){:root{--pad:20px}.site-header{height:72px}.brand{font-size:29px}.availability{display:none}.header-right{position:relative;z-index:70}.menu-button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;width:46px;height:44px;background:#141920;border:1px solid #3e464f;border-radius:10px}.menu-button span{height:1.5px;width:21px;background:#fff;transition:transform .25s}.menu-button[aria-expanded=true] span:first-child{transform:translateY(4.25px) rotate(45deg)}.menu-button[aria-expanded=true] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}.main-nav{display:none;position:absolute;inset:72px 12px auto;z-index:65;transform:none;background:#171d23;box-shadow:0 22px 65px #000c;border:1px solid #3b434d;border-radius:15px;padding:12px 18px 18px;flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.nav-link,.mobile-nav-extra{display:block;font-size:17px;padding:15px 7px;border-bottom:1px solid #37404a;color:#d1d7dd}.mobile-nav-extra:last-child{border:0}.hero{min-height:0;height:auto;max-height:none;padding-bottom:0}.hero-meta{min-height:130px;padding:33px var(--pad) 0}.hero-roles{font-size:9px;letter-spacing:.095em}.hero-meta-right{display:block}.hero-meta-right p{font-size:10px;margin:0;text-align:right}.hero-scroll{display:none}.hero-word-wrap{margin:7px 0 0 10px;width:calc(100% - 25px)}.hero-word{font-size:22.5vw;letter-spacing:-.099em;transform:scaleX(1.01);line-height:1}.letter-clip{padding-bottom:.07em}.deck-outer{min-height:0;height:360px;flex:none;margin-top:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}.deck-outer::-webkit-scrollbar{display:none}.deck{width:max-content;min-width:100%;display:flex;gap:14px;height:340px;margin-left:0;padding:12px var(--pad) 23px;perspective:none}.deck-slot{flex:0 0 clamp(222px,69vw,290px);height:314px;scroll-snap-align:center;animation:cardArrivalMobile .85s var(--ease) both;animation-delay:calc(.4s + var(--n)*.1s)}@keyframes cardArrivalMobile{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.deck-card{height:310px;min-height:0;border-radius:16px}.deck-slot:hover .deck-card{transform:none}.deck-visual{height:66%}.deck-content{padding:8px 18px 20px}.deck-content strong{font-size:20px}.deck-tag{font-size:10px}.deck-view{font-size:11px}.deck-num{bottom:21px;right:19px}.hero-baseline{margin-top:5px;padding:0 var(--pad) 23px;font-size:9px}.hero-baseline span:first-child{display:none}.hero-baseline span:nth-child(2)::after{content:'  •  SWIPE CARDS →';white-space:nowrap}.marquee-band{padding-block:16px}.marquee-set{font-size:12px;gap:22px;padding-right:22px}.section-space{padding-block:90px}.split-heading{grid-template-columns:1fr;gap:25px;margin:37px 0 40px}.split-heading h2{font-size:clamp(56px,10vw,80px)}.split-heading>p{font-size:14px;max-width:100%}.discipline-row{grid-template-columns:32px minmax(0,1fr) 38px;gap:8px;min-height:91px}.discipline-no{font-size:10px}.discipline-title{font-size:clamp(25px,6.6vw,41px)}.discipline-copy{display:none}.discipline-arrow{width:36px;height:36px;font-size:19px}.feature-heading{display:block;margin-bottom:35px}.feature-heading h2{font-size:clamp(60px,11vw,90px)}.feature-heading>p{margin:25px 0 0;font-size:14px;max-width:100%}.feature-showcase{border-radius:12px}.feature-window{height:270px}.feature-window img{object-fit:cover}.feature-overlay{padding:23px}.feature-overlay strong{font-size:40px}.feature-overlay>div span{font-size:9px}.feature-circle{width:47px;height:47px;font-size:23px}.demo-label{top:10px;right:10px;font-size:8px;padding:8px 11px}.short-about-grid{grid-template-columns:1fr;gap:25px;margin-top:38px}.short-about h2{font-size:clamp(49px,10vw,77px)}.short-about-grid>div p{font-size:16px}.callout h2{font-size:clamp(63px,12vw,108px)}.big-pill{padding:19px 23px;gap:38px}.footer-top{align-items:start;flex-direction:column;gap:18px;padding-bottom:42px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:23px}.footer-links{gap:15px 19px}.category-hero{padding-top:26px}.page-breadcrumb{padding-top:15px}.category-meta{margin-top:55px;font-size:9px}.category-title-row{padding:48px 0 35px;gap:25px}.category-title-row .eyebrow{font-size:9px}.page-title{font-size:clamp(62px,12vw,103px);line-height:.95;white-space:normal}.category-description{font-size:14px}.category-cover{height:290px;border-radius:9px}.cover-caption{font-size:8px;left:14px;right:14px;bottom:14px}.gallery-header{display:block;margin-bottom:35px}.gallery-header h2{font-size:56px}.gallery-header>p{margin-top:25px;font-size:13px}.gallery-grid,.gallery-grid.website-gallery{grid-template-columns:1fr;gap:44px}.gallery-image{border-radius:10px}.gallery-body h3{font-size:25px}.gallery-actions{margin-top:15px}.category-next{padding-bottom:80px}.case-section{padding-top:20px;padding-bottom:90px}.case-intro{padding:67px 0 30px}.case-intro h1{font-size:clamp(56px,11vw,100px);margin:23px 0 30px}.case-top-bottom p{font-size:14px}.case-preview{border-radius:9px}.case-info{padding:70px 0;grid-template-columns:1fr;gap:12px}.case-info h2{font-size:45px}.case-info>div>p:not(.section-kicker){font-size:15px}.case-end{align-items:start;flex-direction:column}.editorial-hero{padding-top:35px;min-height:0}.editorial-hero>.eyebrow{margin:100px 0 25px}.editorial-hero h1{font-size:clamp(80px,15vw,145px)}.editorial-bottom{display:block;margin-top:50px}.editorial-bottom>p{font-size:16px;padding-bottom:30px}.outline-monogram{display:none}.about-columns{grid-template-columns:1fr;gap:45px}.about-columns h2{font-size:clamp(44px,10vw,70px)}.contact-hero{min-height:calc(100svh - 72px)}.contact-hero h1{font-size:clamp(69px,13vw,130px)}.contact-grid{grid-template-columns:1fr;gap:35px;margin-top:50px;padding:35px 0 80px}.contact-grid>div:first-child>p{font-size:17px}.contact-email-btn{font-size:18px;padding:20px 23px}.profile-hero h1{font-size:clamp(72px,13.3vw,130px)}.profile-subtitle{font-size:16px}.profile-grid{grid-template-columns:1fr;gap:40px}.profile-grid article h2{font-size:29px}.privacy-note{font-size:11px}}
@media(max-width:375px){:root{--pad:16px}.hero-word{font-size:22.3vw}.hero-meta{padding-top:24px;min-height:113px}.deck-outer{height:338px}.deck{height:320px}.deck-slot{height:294px;flex-basis:244px}.deck-card{height:290px}.hero-baseline{font-size:8px}.page-title{font-size:12vw}.editorial-hero h1{font-size:14vw}}
@media(hover:none){.deck-slot:hover .deck-card{transform:none}.discipline-row:hover{padding-left:0;background:transparent}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.letter-clip>span{transform:none;opacity:1}.deck-slot{transform:none!important}body.js-ready [data-reveal]{opacity:1;transform:none}}

/* V3 — actual project galleries, featured editing, mobile refinements */
.visual-label{background:#0c1317df!important;border:1px solid #ffffff38;color:#e4efef!important;letter-spacing:.12em}
.gallery-grid.website-gallery{row-gap:70px}.gallery-image img{object-position:top center}.gallery-actions a:last-child{color:#b7eadb;border-color:#5d9e8d}.gallery-actions a:last-child:hover{color:#fff}
.gallery-card:has(.gallery-domain) .gallery-body{min-height:93px}
.gallery-image:focus-visible,.gallery-actions a:focus-visible,.spotlight-visual:focus-visible{outline:2px solid #b6eed9;outline-offset:4px}
.case-preview{min-height:220px}.case-preview .case-image-frame img{display:block;min-height:230px;object-fit:cover}.case-illustration-note{position:absolute;left:15px;bottom:15px;padding:9px 12px;background:#0b0f11e8;color:#e5eaee;border:1px solid #ffffff30;font-size:11px;border-radius:10px;max-width:calc(100% - 30px)}
.youtube-play-panel{display:flex;justify-content:center;align-items:center;background:#0b0f12;padding:34px 14px;min-height:130px}.video-play-button{background:#f1f2f0;color:#0b0c0e;font:inherit;font-size:15px;font-weight:600;border:none;border-radius:999px;padding:19px 28px;cursor:pointer;transition:transform .2s,background .2s}.video-play-button:hover{transform:translateY(-3px);background:#b9f1df}.youtube-embed{height:min(79vh,710px);width:min(390px,95%);aspect-ratio:9/16;border:0;border-radius:12px;background:black}
.editing-spotlight{background:#0c1216;border-top:1px solid #2a363d;border-bottom:1px solid #2a363d;overflow:hidden}.spotlight-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:6%;align-items:center}.spotlight-label{font-size:12px;color:#6ad9b8;letter-spacing:.17em;margin:65px 0 24px}.spotlight-grid h2{font-size:clamp(56px,7.3vw,115px);line-height:1;letter-spacing:-.085em;font-weight:710;margin:0}.spotlight-grid h2 em{color:#8a959b;font-style:normal}.spotlight-copy{color:#9faaaf;font-size:16px;line-height:1.9;max-width:565px;margin:35px 0}.spotlight-buttons{display:flex;flex-wrap:wrap;gap:25px;align-items:center}.spotlight-buttons .big-pill{background:#def1e9;color:#0c1915;border:0;padding:18px 24px;gap:32px}.spotlight-buttons .big-pill:hover{background:#fff}.spotlight-visual{display:block;position:relative;transform:rotate(2deg);border-radius:17px;overflow:hidden;border:1px solid #4d695f;box-shadow:0 20px 65px #0008;transition:transform .6s var(--ease)}.spotlight-visual:hover{transform:rotate(0) translateY(-8px)}.spotlight-visual img{width:100%;display:block;aspect-ratio:1.12;object-fit:cover}.spotlight-sticker{position:absolute;left:18px;top:18px;padding:10px 13px;background:#0b1413de;border-radius:6px;font-size:10px;letter-spacing:.12em;color:#b4f7de}.spotlight-visual-label{position:absolute;bottom:20px;right:20px;padding:13px 16px;border-radius:30px;background:#e8f5ee;color:#0a1a13;font-size:12px;font-weight:700}
.extra-shorts{border-top:1px solid #3d4348;margin-top:75px;padding-top:45px;display:flex;justify-content:space-between;gap:32px;align-items:center}.extra-shorts h3{font-size:clamp(32px,4vw,58px);letter-spacing:-.06em;margin:22px 0 10px}.extra-shorts p{max-width:490px;font-size:14px;line-height:1.8;color:#a0a9b1}.extra-shorts-links{display:flex;flex-direction:column;gap:13px}.extra-shorts-links a{border:1px solid #57605f;border-radius:999px;padding:14px 20px;white-space:nowrap;font-size:13px}.extra-shorts-links a:hover{background:#1d3732}
@media(max-width:760px){.spotlight-grid{grid-template-columns:1fr;gap:48px}.spotlight-label{margin-top:35px}.spotlight-grid h2{font-size:clamp(53px,13vw,86px)}.spotlight-copy{font-size:14px}.spotlight-visual{transform:none}.spotlight-buttons .big-pill{width:100%}.extra-shorts{flex-direction:column;align-items:stretch}.extra-shorts-links a{white-space:normal}.gallery-grid.website-gallery{row-gap:40px}.gallery-image{aspect-ratio:1.35}.case-illustration-note{font-size:10px}.visual-label{font-size:8px!important}}
@media(max-width:430px){.gallery-actions{gap:13px}.gallery-actions a{font-size:11px}.spotlight-label{font-size:9px}.spotlight-buttons{gap:21px}.spotlight-visual-label{bottom:12px;right:11px;font-size:10px}.visual-label{max-width:175px;text-align:center}}

.collection-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 30px}.collection-filter{border:1px solid #3d4851;border-radius:30px;background:#11161c;color:#b7c2cc;padding:12px 16px;font:inherit;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:16px;transition:background .3s,border-color .3s}.collection-filter span{color:#78918b}.collection-filter.active{color:#101815;background:#e2f0e9;border-color:#e2f0e9}.collection-filter.active span{color:#4c7063}.collection-filter:hover:not(.active){background:#242f34}.gallery-card[hidden]{display:none!important}
@media(max-width:430px){.collection-filters{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:7px;scrollbar-width:none}.collection-filter{white-space:nowrap;flex:none;scroll-snap-align:start;padding:11px 14px}}

/* Desktop hero deck: three cards fit inside the screen, no edge bleed or cut-off titles */
@media(min-width:1101px){
.hero{min-height:620px}
.hero-word{font-size:min(21.8vw,375px,31vh)}
.deck-outer{min-height:0;display:flex;align-items:flex-start}
.deck{width:100%;height:auto;margin-left:0;padding:22px var(--pad) 26px;gap:clamp(18px,2.2vw,40px)}
.deck-card{height:clamp(270px,33vh,360px);min-height:0}
.deck-web{--angle:-3deg;--rise:10px}
.deck-video{--angle:1.5deg;--rise:0px}
.deck-software{--angle:3.5deg;--rise:12px}
}
@media(min-width:1101px) and (max-height:940px){
.hero-meta{min-height:112px}
.hero-word{font-size:min(21.8vw,26vh)}
.deck{padding-top:16px;padding-bottom:18px}
.deck-card{height:max(230px,30vh)}
.deck-visual{height:58%}
}