@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#101013;--panel:#19191f;--ink:#f1f0ed;--muted:#a8a7b1;--line:#333239;--accent:#b7a0ff;--mint:#d5edb0;--font:'DM Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--mint);outline-offset:6px}::selection{background:var(--accent);color:var(--bg)}body>header{min-height:104px;max-width:1600px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:700;letter-spacing:.07em}.brand small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-top:3px}.monogram{font:600 39px/1 var(--display);letter-spacing:-5px}.monogram span{font-size:26px;color:var(--accent);padding-left:7px}nav{display:flex;gap:32px}nav a{font-size:14px;color:var(--muted);padding:8px 0}nav a[aria-current=page]{color:var(--ink);border-bottom:2px solid var(--accent)}nav a:hover{color:var(--accent)}.header-contact{font-size:14px;border:1px solid #55515f;border-radius:99px;padding:10px 20px}.header-contact span{color:var(--mint);font-size:10px;margin-left:15px}.menu-toggle{display:none}.wrap{max-width:1400px;margin:auto;padding-left:5%;padding-right:5%}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:600;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';width:24px;height:1px;background:var(--accent)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.07;letter-spacing:-.045em}h1{font-size:clamp(52px,7.7vw,112px);margin:28px 0}h2{font-size:clamp(38px,4.3vw,62px)}h3{font-size:28px}.muted{color:var(--muted)}.accent{color:var(--accent)}.hero{padding-top:70px;padding-bottom:48px;position:relative}.hero-top{display:grid;grid-template-columns:1.5fr 1fr;gap:7%;align-items:end}.hero h1{max-width:900px}.hero h1 em{font-style:normal;color:var(--accent)}.intro-side{padding-bottom:32px;max-width:330px}.intro-side p{font-size:18px;color:var(--muted)}.intro-side strong{color:var(--ink);font-weight:500}.text-link{display:inline-block;border-bottom:1px solid var(--accent);padding:8px 0;font-size:14px}.hero-name{display:flex;gap:14px;align-items:center;margin:0 0 22px}.hero-name img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--panel)}.hero-name span{font-size:14px}.hero-name small{display:block;color:var(--muted);font-size:12px}.reel{position:relative;margin-top:26px;border:1px solid var(--line);background:#070708;border-radius:12px;overflow:hidden}.reel iframe{display:block;width:100%;aspect-ratio:16/7;border:0;min-height:300px}.reel-caption{display:flex;align-items:center;justify-content:space-between;padding:19px 25px;background:var(--panel);font-size:14px}.reel-caption span{color:var(--muted);font-size:12px}.reel-caption a{border-bottom:1px solid #777}.disciplines{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;color:var(--muted);font-size:12px;letter-spacing:.09em;padding:24px 0}.disciplines b{color:var(--accent);font-weight:400}.section{padding-top:90px;padding-bottom:80px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:42px}.section-head h2{margin:16px 0 0}.section-head p{max-width:350px;margin:0;color:var(--muted)}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 28px}.project-card{min-width:0}.project-media{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:16/10;position:relative}.project-media iframe{width:100%;height:100%;border:0}.card-info{padding:22px 0 0;display:flex;justify-content:space-between;align-items:start;gap:18px}.card-info h3{margin:8px 0 12px;font-size:26px;letter-spacing:-.035em}.card-info p{font-size:15px;color:var(--muted);max-width:470px;margin-bottom:12px}.card-number{font-size:13px;color:var(--muted);padding-top:6px}.tags{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.project-card a:hover h3{color:var(--accent)}.case-link{font-size:13px;display:inline-block;padding:8px 0;border-bottom:1px solid #514763}.tool-diagram{height:100%;padding:32px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#252330,#17151d);gap:22px}.tool-diagram .diagram-title{font-size:12px;color:var(--accent);letter-spacing:.12em}.flow{display:flex;align-items:center;gap:9px}.flow span{border:1px solid #685c80;border-radius:6px;background:#24202e;text-align:center;padding:16px 8px;flex:1;font:500 15px var(--display)}.flow i{width:12px;height:1px;background:var(--accent)}.diagram-label{color:var(--muted);font-size:12px}.code-lines{display:grid;gap:9px}.code-lines span{height:5px;border-radius:3px;background:#56416e}.code-lines span:nth-child(2){width:70%;background:#8c78b3}.code-lines span:nth-child(3){width:85%}.diagram-note{font-size:11px;color:var(--muted);position:absolute;bottom:16px;right:20px}.feature{display:grid;grid-template-columns:1fr 1.1fr;gap:8%;align-items:center}.feature p{color:var(--muted);max-width:540px}.feature h2{margin:24px 0}.feature .big-quote{font-size:clamp(35px,4.4vw,66px);line-height:1.18;letter-spacing:-.04em}.studio-panel{padding:36px;background:#1c1924;border:1px solid #4c415f;border-radius:12px}.studio-panel .studio-title{font:500 40px var(--display);letter-spacing:-.04em}.studio-panel small{display:block;color:var(--muted)}.tree{margin-top:30px;padding-left:22px;border-left:1px solid #685682}.tree-item{padding:14px 0}.tree-item a{color:var(--accent)}.tree-item p{font-size:14px;margin:6px 0}.tree-sub{margin-top:15px;padding:13px 20px;border-left:1px solid #685682}.quote-section{background:var(--accent);color:#17121f;padding:80px 7%;border-radius:12px;position:relative}.quote-section p{max-width:900px;font:500 clamp(36px,4.6vw,68px)/1.15 var(--display);letter-spacing:-.04em;margin:0 0 28px}.quote-section .text-link{border-color:#322940}.page-intro{padding-top:75px;padding-bottom:50px}.page-intro h1{font-size:clamp(52px,7vw,95px)}.page-intro .lead{max-width:650px;color:var(--muted);font-size:20px}.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 0 35px}.filter{background:transparent;border:1px solid var(--line);border-radius:99px;padding:10px 20px;font-size:14px}.filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#17121f}.filter:hover{border-color:var(--accent)}.results-note{color:var(--muted);font-size:13px;margin-bottom:24px}.work-section{padding-bottom:100px}.reading{max-width:760px;margin:auto;padding:20px 5% 80px}.reading p{color:#c4c2cb;font-size:19px;line-height:1.85}.reading h2{font-size:36px;margin:60px 0 22px}.reading blockquote{margin:45px 0;padding-left:26px;border-left:3px solid var(--accent);font:500 30px/1.4 var(--display)}.chapter{font-size:12px;color:var(--accent);display:block;margin-bottom:15px;letter-spacing:.15em}.about-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:10%;padding-bottom:90px}.about-layout p{color:var(--muted);font-size:19px}.about-portrait{width:100%;max-width:390px;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#251e35}.facts{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}.fact{padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:14px}.fact span{color:var(--muted)}.link-list{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.resource{display:block;border-top:1px solid var(--line);padding:25px 0}.resource h3{font-size:23px;margin-bottom:8px}.resource p{font-size:14px;color:var(--muted);margin:0}.resource:hover h3{color:var(--accent)}.detail-intro{max-width:900px}.detail-intro h1{font-size:clamp(42px,6.5vw,80px)}.detail-body{display:grid;grid-template-columns:250px 1fr;gap:80px;margin:60px 0 100px}.detail-body aside{font-size:14px}.detail-body aside div{padding:16px 0;border-top:1px solid var(--line)}.detail-body aside span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.detail-body article{max-width:740px}.detail-body h2{font-size:30px;margin-bottom:20px}.detail-body p{color:var(--muted);margin-bottom:36px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;background:var(--accent);color:#181121;padding:12px 22px;border-radius:99px;font-size:14px;font-weight:600;border:1px solid var(--accent)}.button:hover{background:#c9baff}.button.secondary{background:transparent;color:var(--ink);border-color:var(--line)}.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}.related-note{padding:24px;background:var(--panel);border-left:2px solid var(--accent)}footer{max-width:1400px;margin:auto;padding:60px 5% 25px;border-top:1px solid var(--line)}.footer-top p{font-size:12px;color:var(--muted);letter-spacing:.15em}.contact-title{display:flex;align-items:center;justify-content:space-between;font:500 clamp(34px,6vw,82px)/1.2 var(--display);letter-spacing:-.05em;margin-bottom:22px}.contact-title span{color:var(--accent)}.email{font-size:16px;color:var(--muted)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:60px;font-size:12px;color:var(--muted)}.footer-bottom div{display:flex;gap:23px}.footer-bottom a:hover{color:var(--accent)}.skip{position:fixed;top:-100px;left:20px;padding:15px;background:var(--accent);color:#111;z-index:30}.skip:focus{top:10px}.error-box{padding:100px 0}.fade-in{animation:appear .5s ease both}@keyframes appear{from{opacity:.1;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1500px){.hero{padding-top:100px}}@media(max-width:900px){body>header{gap:16px}.brand small{display:none}.header-contact{display:none}.hero-top{grid-template-columns:1fr}.intro-side{max-width:600px;padding:0}.hero h1{font-size:76px}.hero-name{margin-top:10px}.intro-side p{max-width:540px}.feature{gap:35px}.detail-body{gap:35px;grid-template-columns:190px 1fr}.reel iframe{aspect-ratio:16/9}.flow span{font-size:12px;padding:12px 5px}.tool-diagram{padding:22px}}@media(max-width:600px){body>header{padding:20px 6%;min-height:82px;flex-wrap:wrap}.brand{font-size:11px}.monogram{font-size:34px}.menu-toggle{display:block;border:1px solid var(--line);border-radius:99px;padding:8px 16px;background:transparent;font-size:14px}nav{display:none;flex-basis:100%;justify-content:space-between;gap:12px}nav.open{display:flex}.wrap{padding-left:6%;padding-right:6%}.hero{padding-top:40px}.hero h1{font-size:clamp(45px,11vw,68px)}.hero-top{gap:10px}.eyebrow{font-size:10px;letter-spacing:.08em}.intro-side p{font-size:16px}.reel iframe{min-height:0;aspect-ratio:16/10}.reel-caption{padding:15px;font-size:12px}.reel-caption span{display:none}.disciplines{font-size:10px;justify-content:flex-start;gap:15px}.section{padding-top:55px;padding-bottom:55px}.section-head{display:block;margin-bottom:30px}.section-head p{margin-top:20px}.section-head>.text-link{margin-top:18px}.project-grid,.feature,.about-layout,.link-list{grid-template-columns:1fr}.project-grid{gap:36px}.project-media{aspect-ratio:16/10}.card-info h3{font-size:25px}.feature{gap:30px}.studio-panel{padding:25px}.studio-panel .studio-title{font-size:32px}.quote-section{padding:40px 24px}.quote-section p{font-size:35px}.page-intro{padding-top:44px}.page-intro h1{font-size:52px}.page-intro .lead{font-size:18px}.reading{padding:0 6% 55px}.reading p{font-size:17px}.reading blockquote{font-size:25px}.detail-body{grid-template-columns:1fr;gap:35px;margin-top:35px}.detail-body aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}.about-layout{gap:25px}.about-portrait{max-width:260px}.footer-bottom{flex-direction:column;padding-top:40px;gap:18px}footer{padding-top:45px}.contact-title{font-size:38px}.filter{font-size:13px;padding:9px 14px}.facts{margin-top:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade-in{animation:none}}

/* Ahmed’s supplied brand identity */
.brand-slogan{font-size:clamp(42px,6.3vw,90px);letter-spacing:-.055em}.brand-art{margin:36px 0 30px;border:1px solid #35314a;border-radius:12px;overflow:hidden;background:#030918}.brand-art img{display:block;width:100%;height:auto}.footer-identity{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--line)}.footer-name{font:600 28px var(--display);letter-spacing:.03em}.footer-slogan{color:var(--accent);font:500 19px var(--display);margin:12px 0}.footer-description{max-width:620px;color:var(--muted);font-size:16px;line-height:1.75;margin-bottom:0}@media(max-width:900px){.hero .brand-slogan{font-size:clamp(42px,8vw,76px)}}@media(max-width:600px){.hero .brand-slogan{font-size:clamp(34px,8.6vw,51px)}.brand-art{margin-top:25px;border-radius:8px}.footer-name{font-size:24px}.footer-description{font-size:15px}}

.detail-body article{min-width:0}pre{max-width:100%;overflow:auto;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:13px}img{max-width:100%}.essay-container{max-width:800px;margin:70px auto;padding:0 6% 80px}.essay-container header{display:block;text-align:left;margin-bottom:50px}.essay-container h1{font-size:clamp(46px,7vw,82px)}.essay-container h2{font-size:34px;margin:56px 0 24px}.essay-container p{color:#c4c2cb;font-size:18px;line-height:1.85}.essay-container .fancy,.essay-container strong{color:var(--ink)}.essay-container a{color:var(--accent);text-decoration:underline}.essay-lead-quote, .essay-container blockquote{margin:35px 0;padding:20px 25px;border-left:3px solid var(--accent);background:var(--panel)}.journey-flow-strip{padding:25px;border:1px solid var(--line);border-radius:12px}.flow-step{display:flex;gap:16px;margin:14px 0}.flow-step-icon{color:var(--accent)}.section-eyebrow,.essay-container .chapter-number{font-size:12px;letter-spacing:.1em;color:var(--accent)}.essay-container li{color:var(--muted);margin:12px 0}.essay-container hr{border:0;border-top:1px solid var(--line);margin:40px 0}.essay-container .essay-section{margin-top:48px}

/* UI UX Pro Max: readable hierarchy, touch targets, and restrained feedback. */
:root{--space-section:80px;--radius-card:14px;--surface-raised:#201d29;--focus:#d5edb0}
body{font-size:17px}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}body>header{gap:24px}nav{gap:20px}nav a{min-height:44px;display:inline-flex;align-items:center;padding:10px 4px}nav a[href="cv.html"]{padding:10px 18px;border:1px solid var(--line);border-radius:30px;color:var(--ink)}
.hero{padding-top:56px}.hero-top{gap:6%;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center}.hero .brand-slogan{font-size:clamp(42px,6.1vw,86px);line-height:1.03}.intro-side{max-width:390px;padding-bottom:0}.hero .reel{margin-top:36px}.reel iframe{aspect-ratio:16/9;min-height:0}.hero>.reel{max-width:1100px;margin-left:auto;margin-right:auto}.eyebrow{line-height:1.7}.tags,.diagram-note,.brand small{font-size:12px}.tags{letter-spacing:.05em}.section{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.project-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel);overflow:hidden}.project-card .project-media{border:0;border-bottom:1px solid var(--line);border-radius:0}.card-info{padding:24px}.case-link,.text-link{min-height:44px;display:inline-flex;align-items:center}.project-card:focus-within{border-color:var(--accent)}.resource{padding:26px 12px;border-radius:6px}.resource[hidden]{display:none}.resource p{font-size:16px;line-height:1.65}.resource h3{line-height:1.2}.resource:hover{background:var(--panel)}
.archive-search{max-width:620px;margin-bottom:30px}.archive-search label{display:block;margin-bottom:10px;font-size:14px;font-weight:600}.archive-search input{width:100%;min-height:48px;padding:12px 16px;background:var(--panel);color:var(--ink);border:1px solid #696473;border-radius:8px;font:inherit}.archive-search input::placeholder{color:var(--muted)}.archive-search .results-note{margin-top:12px}
a,button,input{transition:background-color .18s ease,color .18s ease,border-color .18s ease}input:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.button:hover{border-color:var(--ink)}.button.secondary:hover{background:var(--surface-raised);color:var(--ink)}.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}.footer-bottom div{flex-wrap:wrap;gap:8px 24px}.detail-body p{font-size:18px;line-height:1.8}.detail-body aside{align-self:start}.reading,.essay-container{overflow-wrap:break-word}
@media(max-width:1000px){body>header{flex-wrap:wrap}.header-contact{display:none}.hero-top{grid-template-columns:1fr}.intro-side{max-width:660px}.hero .brand-slogan{font-size:clamp(42px,8vw,76px)}.hero-name{margin-top:0}}
@media(max-width:600px){:root{--space-section:48px}.hero{padding-top:32px}.hero .brand-slogan{font-size:clamp(34px,8.6vw,51px)}.hero>.eyebrow{font-size:12px;letter-spacing:.035em}.hero-top{gap:8px}.hero .reel{margin-top:28px}.card-info{padding:20px}.tags{font-size:12px}.menu-toggle{min-height:44px}nav.open{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;padding-top:12px}nav a{justify-content:center;border-radius:8px}nav a[aria-current=page]{background:var(--surface-raised)}.page-intro h1{font-size:clamp(38px,10vw,52px)}.reel-caption{flex-wrap:wrap;gap:10px}.reel-caption a{min-height:44px;display:inline-flex;align-items:center}.disciplines{font-size:12px;letter-spacing:0}.flow{gap:5px}.flow span{font-size:12px}.tool-diagram{padding:18px}.diagram-note{position:static}.diagram-label{font-size:12px}.email{overflow-wrap:anywhere}.detail-body aside{grid-template-columns:1fr}.about-layout{padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Work and Journey: shared editorial hierarchy. */
.work-page .page-intro{padding-bottom:40px;max-width:1060px}.work-page .page-intro h1{font-size:clamp(42px,5.7vw,80px)}.work-page .page-intro .lead{max-width:610px}.work-section .section-head h2{font-size:36px}.filter-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}.work-page .filters{padding-bottom:20px}.work-page .work-section{padding-top:32px}.work-page .results-note{margin:12px 0 28px}.work-page .project-media{aspect-ratio:16/9}.experiment-grid{gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}.experiment-grid .resource{padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;align-items:flex-start;gap:16px}.experiment-grid .resource[hidden]{display:none}.experiment-grid h3{font-size:25px;margin:0}.experiment-grid p{font-size:15px;line-height:1.65;margin:0}.experiment-grid .case-link{margin-top:auto}.experiment-status{color:var(--accent);line-height:1.6}.experiment-grid .resource:hover{border-color:var(--accent);background:var(--surface-raised)}
.journey-layout{max-width:1300px;margin:0 auto;padding:60px 5% 90px;display:grid;grid-template-columns:250px minmax(0,740px);gap:70px;align-items:start}.journey-index{position:sticky;top:28px}.journey-index ol{list-style:none;padding:0;margin:24px 0}.journey-index li{border-bottom:1px solid var(--line)}.journey-index li a{display:flex;gap:14px;min-height:48px;padding:14px 0;font-size:14px;line-height:1.5;color:var(--muted)}.journey-index li a:hover{color:var(--ink)}.journey-index li span{color:var(--accent);font-size:12px}.journey-page .essay-container{max-width:none;margin:0;padding:0;min-width:0}.journey-page .essay-container header{margin-bottom:40px}.journey-page .essay-container h1{font-size:clamp(48px,5.8vw,82px);margin-top:22px}.journey-page .essay-container h2{font-size:clamp(30px,3vw,42px);line-height:1.15;margin-top:64px;border-top:1px solid var(--line);padding-top:36px;scroll-margin-top:28px}.essay-section-num{display:block;font:600 12px/1.5 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}.journey-page .essay-container p{font-size:18px;line-height:1.9;margin-bottom:24px}.journey-page .essay-container h3{font-size:25px;line-height:1.25;margin:35px 0 18px}.journey-page .journey-flow-strip{display:none}.journey-page .essay-lead-quote,.journey-page blockquote{border-radius:0 12px 12px 0;padding:26px;background:var(--panel)}.journey-page blockquote p{font:500 26px/1.45 var(--display);color:var(--ink);margin-bottom:16px}.journey-page blockquote small{display:block;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:1050px){.experiment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.journey-layout{grid-template-columns:200px minmax(0,1fr);gap:36px}}
@media(max-width:760px){.journey-layout{display:block;padding-top:32px}.journey-index{position:static;margin-bottom:42px;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.journey-index ol{margin:16px 0}.journey-index li a{font-size:14px}.journey-page .essay-container p{font-size:17px;line-height:1.8}.journey-page .essay-container h2{margin-top:42px}.experiment-grid{grid-template-columns:1fr}.work-page .page-intro h1{font-size:clamp(37px,9vw,58px)}.work-page .section-head h2{font-size:34px}}