:root {
  --bg: #f2f0ea;
  --surface: #e8e5dd;
  --ink: #171714;
  --muted: #68675f;
  --line: rgba(23, 23, 20, .17);
  --accent: #ff5c35;
  --lime: #c9f04a;
  --blue: #7ca4ff;
  --display: "Manrope", sans-serif;
  --body: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--body); transition: background .3s, color .3s; overflow-x: hidden; isolation: isolate; }
body.dark { --bg: #161614; --surface: #23231f; --ink: #f2f0e9; --muted: #aaa89e; --line: rgba(255,255,255,.16); }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.animated-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); transition: background .3s; }
.ambient-orb { --parallax-x: 0px; --parallax-y: 0px; position: absolute; border-radius: 50%; filter: blur(12px); opacity: .16; }
.ambient-orb-one { width: 48vw; height: 48vw; min-width: 420px; min-height: 420px; top: -20vw; right: -12vw; background: radial-gradient(circle at 35% 35%, var(--accent), transparent 68%); animation: float-one 17s ease-in-out infinite alternate; }
.ambient-orb-two { width: 42vw; height: 42vw; min-width: 360px; min-height: 360px; left: -16vw; top: 38vh; background: radial-gradient(circle at center, var(--lime), transparent 68%); animation: float-two 21s ease-in-out infinite alternate; }
.ambient-orb-three { width: 36vw; height: 36vw; min-width: 320px; min-height: 320px; right: 8vw; bottom: -18vw; background: radial-gradient(circle at center, var(--blue), transparent 68%); animation: float-three 19s ease-in-out infinite alternate; }
.ambient-orb-one, .ambient-orb-two, .ambient-orb-three,
.work::before, .experience::before, .project-image-shine { animation: none; }
.ambient-grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.site-header, main, footer { position: relative; z-index: 1; }
@keyframes float-one { to { transform: translate(calc(-8vw + var(--parallax-x)), calc(15vh + var(--parallax-y))) scale(1.12); } }
@keyframes float-two { to { transform: translate(calc(16vw + var(--parallax-x)), calc(-10vh + var(--parallax-y))) scale(.9); } }
@keyframes float-three { to { transform: translate(calc(-12vw + var(--parallax-x)), calc(-12vh + var(--parallax-y))) scale(1.18); } }
@keyframes grid-drift { to { background-position: 72px 72px; } }
.site-header { height: 88px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: absolute; z-index: 10; width: 100%; }
.logo { width: 66px; height: 42px; display: grid; place-items: center; color: var(--ink); transition: transform .25s ease, color .3s; }
.logo:hover { transform: translateY(-2px) scale(1.04); }
.logo svg { width: 58px; height: auto; display: block; fill: currentColor; }
body.dark .logo { color: #f2f0ea; }
em { color: var(--accent); font-style: normal; }
.nav { display: flex; gap: 34px; font-size: 14px; }
.nav a, .socials a { position: relative; }
.nav a::after, .socials a::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -5px; background: currentColor; transition: right .25s; }
.nav a:hover::after, .socials a:hover::after { right: 0; }
.header-actions { display: flex; gap: 12px; }
.theme-toggle, .menu-toggle { background: transparent; border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.menu-toggle { display: none; padding: 12px 9px; }
.menu-toggle span { display: block; height: 1px; margin: 5px 0; background: currentColor; }
.section { padding: 120px 7vw; }
.hero { min-height: 100vh; padding-top: 170px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; }
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--lime) 22%, transparent); }
h1, h2 { font-family: var(--display); letter-spacing: -.065em; line-height: .96; margin: 25px 0; }
h1 { font-size: clamp(54px, 7vw, 104px); }
h2 { font-size: clamp(44px, 5.5vw, 76px); }
h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.06em; }
.hero-intro { max-width: 540px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 35px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 16px 22px; border-radius: 2px; font-size: 14px; font-weight: 600; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--ink); color: var(--bg); }
.button-outline { border: 1px solid var(--line); }
.text-link { font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); padding: 8px 0; }
.text-link span { margin-left: 12px; }
.hero-visual { min-height: 610px; position: relative; display: grid; place-items: center; }
.portrait-card { width: min(360px, 72%); height: 480px; background: #d7d1c7; position: relative; overflow: hidden; transform: rotate(3deg); box-shadow: 0 35px 80px rgba(0,0,0,.12); }
.portrait-shape { position: absolute; width: 250px; height: 380px; border-radius: 50% 50% 10% 10%; background: #262a38; left: 55px; top: 92px; }
.portrait-shape::before { content: ""; position: absolute; width: 130px; height: 160px; border-radius: 48% 52% 46% 54%; background: #b7775d; left: 58px; top: -65px; box-shadow: -18px -25px 0 5px #3a2a28; }
.portrait-shape::after { content: ""; position: absolute; width: 240px; height: 80px; background: var(--accent); border-radius: 50%; left: 5px; bottom: -44px; }
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; display: block; }
.portrait-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; }
.portrait-illustrated { width: min(480px, 88%); height: 480px; background: #fff; transform: rotate(1.5deg); border-radius: 32px; box-shadow: 0 35px 80px rgba(0,0,0,.12); }
.portrait-illustrated img { object-fit: contain; object-position: center; transform: scale(1.01); }
.portrait-illustrated::after { height: 20%; background: linear-gradient(transparent, rgba(0,0,0,.34)); }
.portrait-illustrated .portrait-caption { z-index: 3; }
.portrait-original { background: #eef7ff; isolation: isolate; }
.portrait-original .portrait-brush { position: absolute; z-index: 0; width: 85%; height: 72%; left: 7%; top: 10%; background: #acdafa; border-radius: 42% 58% 48% 52% / 38% 42% 58% 62%; transform: rotate(-7deg); }
.portrait-original .portrait-brush::before, .portrait-original .portrait-brush::after { content: ""; position: absolute; height: 22%; background: #acdafa; border-radius: 999px; transform: rotate(-17deg); }
.portrait-original .portrait-brush::before { width: 112%; left: -8%; top: 15%; box-shadow: 10px 82px 0 #acdafa, -2px 160px 0 #acdafa; }
.portrait-original .portrait-brush::after { width: 82%; right: -5%; top: 48%; box-shadow: -55px 82px 0 #acdafa; }
.portrait-original img { position: relative; z-index: 1; width: 72%; height: 92%; margin: 8% auto 0; object-fit: cover; object-position: center 40%; clip-path: polygon(13% 0, 88% 0, 100% 88%, 76% 100%, 25% 98%, 0 87%); border-radius: 46% 46% 18% 18%; }
.portrait-card.portrait-final { width: min(540px, 96%); height: auto; aspect-ratio: 1; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; transform: none; }
.portrait-final img { width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; transform: none; clip-path: none; border-radius: 50%; }
.portrait-final::after { display: none; }
.portrait-final .portrait-caption { display: none; }
.portrait-caption { position: absolute; z-index: 2; bottom: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; font: 600 9px var(--body); text-transform: uppercase; letter-spacing: .12em; color: #fff; }
.orbit { border: 1px solid var(--line); position: absolute; border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; }
.orbit-two { width: 620px; height: 300px; transform: rotate(-30deg); }
.floating-note { position: absolute; right: 0; bottom: 70px; background: var(--lime); color: #171714; padding: 22px 28px; font-family: var(--display); transform: rotate(-4deg); }
.scroll-cue { position: absolute; bottom: 35px; left: 7vw; text-transform: uppercase; letter-spacing: .16em; font-size: 9px; writing-mode: vertical-rl; }
.scroll-cue span { margin-top: 12px; }
.work, .experience { background: #171714; color: #f2f0ea; position: relative; overflow: hidden; }
.work::before, .experience::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px), radial-gradient(circle at 18% 18%, var(--accent), transparent 25%), radial-gradient(circle at 82% 74%, var(--blue), transparent 20%); background-size: 90px 90px, 90px 90px, 100% 100%, 100% 100%; animation: dark-background-drift 24s linear infinite alternate; }
.work > *, .experience > * { position: relative; z-index: 1; }
@keyframes dark-background-drift { to { background-position: 90px 90px, -90px 90px, 8vw 5vh, -7vw -5vh; } }
.work { --line: rgba(242,240,234,.2); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 80px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { width: 360px; color: color-mix(in srgb, currentColor 60%, transparent); line-height: 1.7; }
.project-image { min-height: 590px; position: relative; overflow: hidden; display: grid; place-items: center; }
.project-coral { background: var(--accent); }
.browser-mockup { width: 72%; aspect-ratio: 16/10; background: #fff; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.2); transform: rotate(-2deg); transition: transform .5s; }
.project-image:hover .browser-mockup { transform: rotate(0) scale(1.02); }
.browser-top { height: 25px; display: flex; gap: 5px; }.browser-top i { width: 6px; height: 6px; border-radius: 50%; background: #bbb; }
.dashboard { height: calc(100% - 25px); display: grid; grid-template-columns: 20% 80%; background: #f0efe9; }.dash-sidebar { background: #20211d; }.dash-main { padding: 12%; }.dash-main span { display: block; height: 8px; background: #ccc; margin-bottom: 13px; }.dash-main span:nth-child(2) { width: 72%; }.chart { height: 45%; margin-top: 15%; background: linear-gradient(135deg, transparent 48%, #ff5c35 49%, #ff5c35 52%, transparent 53%); border-bottom: 1px solid #aaa; }
.view-project { position: absolute; right: 22px; bottom: 22px; background: var(--ink); color: var(--bg); padding: 13px 18px; font-size: 12px; transform: translateY(80px); transition: transform .25s; }
.project-image:hover .view-project { transform: translateY(0); }
.project-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; padding: 28px 0 80px; border-bottom: 1px solid var(--line); position: relative; }
.project-info > div { display: flex; align-items: baseline; gap: 20px; }.project-number { font-size: 11px; color: var(--accent); }.project-info h3 { font: 700 33px var(--display); margin: 0; }.project-info p { color: color-mix(in srgb, currentColor 60%, transparent); margin: 6px 0; line-height: 1.6; }
.tags { grid-column: 2; list-style: none; padding: 0; display: flex; gap: 9px; margin: 0; }.tags li { border: 1px solid var(--line); border-radius: 20px; padding: 6px 10px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; margin-top: 110px; }.project-grid .project-image { min-height: 520px; }.project-offset { margin-top: 160px; }.project-lime { background: var(--lime); }.project-blue { background: var(--blue); }
.phone-mockup { width: 240px; height: 460px; border: 8px solid #1c1c19; border-radius: 36px; background: #eee9df; padding: 8px; transform: rotate(5deg); box-shadow: 20px 25px 40px rgba(0,0,0,.2); }.phone-screen { color: #171714; height: 100%; border-radius: 22px; padding: 20px; position: relative; overflow: hidden; }.phone-screen b { font: 700 20px var(--display); }.product-orb { width: 190px; height: 230px; border-radius: 50%; background: linear-gradient(145deg, #7a421d, #e9a96c); position: absolute; top: 105px; left: 14px; }.phone-screen small { position: absolute; bottom: 25px; font-weight: 700; letter-spacing: .12em; }
.editorial-mockup { width: 68%; height: 380px; background: #f2eee4; color: #171714; padding: 35px; position: relative; transform: rotate(-4deg); box-shadow: 0 25px 50px rgba(0,0,0,.18); }.editorial-mockup span { font-size: 9px; letter-spacing: .15em; }.editorial-mockup strong { display: block; position: relative; z-index: 2; margin-top: 55px; font: 700 35px/1.05 var(--display); }.editorial-mockup i { position: absolute; width: 55%; height: 100%; right: 0; top: 0; background: linear-gradient(145deg, #142f39, #839e83); clip-path: polygon(34% 0,100% 0,100% 100%,0 100%); }
.compact { display: block; }.compact > div { margin-bottom: 18px; }.compact .tags { margin-top: 20px; }
.assignment-paper { height: calc(100% - 25px); padding: 9% 10%; color: #171714; background: #f4f1e9; position: relative; }.assignment-paper span { font-size: 9px; letter-spacing: .15em; }.assignment-paper b { display: block; font: 700 28px var(--display); margin: 12px 0 30px; }.assignment-paper div { height: 8px; background: #c8c6bf; margin: 13px 0; }.assignment-paper div:nth-of-type(2) { width: 82%; }.assignment-paper strong { display: inline-block; margin-top: 28px; color: var(--accent); font: 700 20px var(--display); }
.project-visual-ai { isolation: isolate; padding: clamp(22px, 5vw, 80px); }
.evaluator-graphic { display: block; width: min(100%, 980px); height: auto; filter: drop-shadow(0 30px 35px rgba(0,0,0,.25)); transform: rotate(-1deg); transition: transform .5s ease; }
.project-visual-ai:hover .evaluator-graphic { transform: rotate(0) scale(1.01); }
.evaluator-device { width: min(100%, 980px); aspect-ratio: 16/9; background: #f7f5ef; color: #171714; border: 10px solid #242420; border-radius: 18px; box-shadow: 0 35px 80px rgba(0,0,0,.28); transform: rotate(-1.5deg); overflow: hidden; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.project-visual-ai:hover .evaluator-device { transform: rotate(0) scale(1.015); }
.evaluator-toolbar { height: 54px; padding: 0 20px; display: flex; align-items: center; gap: 7px; background: #242420; color: #f2f0ea; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.evaluator-toolbar i { width: 8px; height: 8px; border-radius: 50%; background: #6b6a63; }.evaluator-toolbar i:first-child { background: var(--accent); }.evaluator-toolbar span { margin-left: 15px; }
.evaluator-layout { height: calc(100% - 54px); padding: 5%; display: grid; grid-template-columns: 1.35fr .65fr; gap: 5%; background: linear-gradient(135deg, #f7f5ef, #e7e3d9); }
.scan-panel { position: relative; padding: 9%; background: #fff; box-shadow: 0 12px 30px rgba(23,23,20,.08); overflow: hidden; }
.scan-label, .result-panel > span { font-size: 8px; font-weight: 700; letter-spacing: .17em; color: #77756e; }
.handwriting { margin-top: 16%; color: #46658c; font: italic clamp(16px, 2.1vw, 31px)/1.55 Georgia, serif; transform: rotate(-2deg); }
.scan-line { position: absolute; left: 5%; right: 5%; top: 48%; height: 2px; background: var(--accent); box-shadow: 0 0 18px 4px rgba(255,92,53,.45); animation: scan-document 3.2s ease-in-out infinite alternate; }
.scan-corners::before, .scan-corners::after { content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--accent); border-style: solid; }.scan-corners::before { top: 22px; left: 22px; border-width: 2px 0 0 2px; }.scan-corners::after { right: 22px; bottom: 22px; border-width: 0 2px 2px 0; }
.result-panel { display: flex; flex-direction: column; justify-content: center; }
.score-ring { width: clamp(90px, 10vw, 145px); height: clamp(90px, 10vw, 145px); margin: 12% auto; display: grid; place-content: center; border-radius: 50%; background: radial-gradient(circle at center, #f7f5ef 59%, transparent 60%), conic-gradient(var(--accent) 0 86%, #d7d3c9 86%); text-align: center; }.score-ring strong { font: 800 clamp(28px, 3.5vw, 50px)/.9 var(--display); }.score-ring small { color: #77756e; }
.result-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #d6d2c8; font-size: clamp(8px, 1vw, 12px); }.result-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }.result-row em { color: #77756e; font-family: var(--body); }
@keyframes scan-document { from { transform: translateY(-70px); } to { transform: translateY(75px); } }
.project-image-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.2) 43%, transparent 58%); transform: translateX(-120%); animation: image-shine 7s ease-in-out infinite; }
@keyframes image-shine { 0%, 65% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.sensor-card { width: 68%; height: 370px; padding: 35px; color: #f2f0ea; background: #171714; position: relative; transform: rotate(4deg); box-shadow: 20px 25px 40px rgba(0,0,0,.2); overflow: hidden; }.sensor-card span { font-size: 9px; letter-spacing: .16em; }.sensor-card strong { display: block; font: 800 48px/.9 var(--display); margin-top: 70px; }.sensor-card small { position: absolute; bottom: 30px; line-height: 1.6; color: #c9f04a; }.signal { position: absolute; border: 2px solid var(--lime); border-radius: 50%; right: -80px; top: 45px; }.signal-one { width: 230px; height: 230px; }.signal-two { width: 310px; height: 310px; right: -120px; top: 5px; }
.highlight-card { padding: 50px; border: 1px solid var(--line); min-height: 520px; display: flex; flex-direction: column; justify-content: center; }.highlight-card strong { font: 800 clamp(70px,10vw,140px)/1 var(--display); color: var(--lime); }.highlight-card h3 { font: 600 27px/1.25 var(--display); max-width: 430px; }.highlight-card > p:last-child { color: color-mix(in srgb, currentColor 60%, transparent); line-height: 1.7; max-width: 430px; }
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8vw; align-items: center; }.about-copy { font-size: 18px; color: var(--muted); line-height: 1.7; }.about-copy p:first-child { color: var(--ink); font-size: 23px; }.about-copy .text-link { display: inline-block; margin-top: 20px; color: var(--ink); }
.stats { margin-top: 100px; padding-top: 45px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); }.stats div { border-right: 1px solid var(--line); padding-left: 30px; }.stats div:first-child { padding-left: 0; }.stats div:last-child { border: 0; }.stats strong { font: 700 48px var(--display); display: block; }.stats span { font-size: 12px; color: var(--muted); }
.experience { --line: rgba(242,240,234,.2); }.timeline { border-top: 1px solid var(--line); }.role { display: grid; grid-template-columns: .7fr 1.2fr 1.5fr .7fr; align-items: center; gap: 25px; padding: 35px 0; border-bottom: 1px solid var(--line); }.role span, .role p, .role b { font-size: 12px; }.role span, .role p { color: color-mix(in srgb, currentColor 55%, transparent); }.role h3 { font: 600 22px var(--display); margin: 0; }.role b { text-align: right; }.skills { display: grid; grid-template-columns: .7fr 3.4fr; margin-top: 80px; }.skills p { text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }.skills div { display: flex; flex-wrap: wrap; gap: 12px; }.skills span { border: 1px solid var(--line); padding: 12px 18px; border-radius: 30px; font-size: 13px; }
.credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; margin-top: 90px; padding-top: 55px; border-top: 1px solid var(--line); }.credentials > div > p:not(.kicker) { color: color-mix(in srgb, currentColor 70%, transparent); padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); line-height: 1.5; font-size: 13px; }
.contact { padding-bottom: 55px; }.contact-inner { padding-top: 30px; }.contact h2 { font-size: clamp(48px, 7vw, 100px); }.contact-email { display: flex; justify-content: space-between; align-items: center; padding: 25px 0; border-bottom: 2px solid var(--ink); font: 600 clamp(20px,3vw,38px) var(--display); }.contact-email span { font-size: 40px; color: var(--accent); }.contact-footer { display: flex; justify-content: space-between; align-items: end; margin-top: 65px; }.contact-footer p { color: var(--muted); line-height: 1.6; }.socials { display: flex; gap: 25px; font-size: 13px; }
footer { display: flex; justify-content: space-between; padding: 25px 7vw; border-top: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .75s ease, transform .75s ease; }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .nav { position: fixed; inset: 0; background: var(--bg); z-index: -1; flex-direction: column; align-items: center; justify-content: center; font: 700 36px var(--display); opacity: 0; pointer-events: none; transition: opacity .25s; }.nav.open { opacity: 1; pointer-events: auto; }.menu-toggle { display: block; position: relative; z-index: 2; }
  .hero { grid-template-columns: 1fr; padding-top: 140px; }.hero-visual { min-height: 540px; }.scroll-cue { display: none; }.section { padding: 90px 6vw; }.section-heading, .contact-footer { align-items: flex-start; gap: 35px; flex-direction: column; }.section-heading > p { width: auto; }.project-grid { grid-template-columns: 1fr; }.project-offset { margin-top: 30px; }.about-grid { grid-template-columns: 1fr; }.stats { grid-template-columns: 1fr 1fr; gap: 35px 0; }.stats div:nth-child(2) { border: 0; }.role { grid-template-columns: 1fr 2fr; }.role p { display: none; }.skills { grid-template-columns: 1fr; }.contact-footer { align-items: flex-start; }
  .credentials { grid-template-columns: 1fr; }
}

/* Lightweight project hover effects for mouse and trackpad users. */
@media (hover: hover) and (pointer: fine) {
  .project {
    position: relative;
    transition: transform .38s cubic-bezier(.2,.75,.25,1);
  }
  .project:hover { transform: translateY(-10px); }
  .project-image {
    isolation: isolate;
    transition: transform .45s cubic-bezier(.2,.75,.25,1), box-shadow .45s ease;
  }
  .project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(125deg, rgba(255,255,255,.20), transparent 42%);
    transition: opacity .35s ease;
  }
  .project:hover .project-image {
    transform: scale(1.025);
    box-shadow: 0 24px 55px rgba(0,0,0,.24);
  }
  .project:hover .project-image::after { opacity: 1; }
  .evaluator-graphic, .sensor-card {
    transition: transform .5s cubic-bezier(.2,.75,.25,1);
  }
  .project:hover .evaluator-graphic { transform: rotate(0) scale(1.035); }
  .project:hover .sensor-card { transform: rotate(1deg) scale(1.045); }
  .project-info h3 {
    transition: color .25s ease, transform .3s ease;
  }
  .project:hover .project-info h3 {
    color: var(--lime);
    transform: translateX(7px);
  }
  .tags li {
    transition: background .25s ease, color .25s ease, transform .25s ease;
  }
  .project:hover .tags li {
    background: var(--lime);
    border-color: var(--lime);
    color: #171714;
    transform: translateY(-3px);
  }
  .project:hover .tags li:nth-child(2) { transition-delay: .04s; }
  .project:hover .tags li:nth-child(3) { transition-delay: .08s; }
  .highlight-card {
    transition: transform .4s cubic-bezier(.2,.75,.25,1), border-color .3s ease, background .3s ease;
  }
  .project-highlight:hover .highlight-card {
    transform: scale(1.025);
    border-color: var(--lime);
    background: rgba(201,240,74,.06);
  }
}
@media (max-width: 560px) {
  html { scroll-behavior: auto; }
  .site-header { height: 72px; }.logo { width: 54px; }.logo svg { width: 50px; }.hero { padding-top: 115px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }.hero-visual { min-height: 410px; }.portrait-card { height: 390px; }.portrait-illustrated { width: min(350px, 94%); height: 350px; border-radius: 24px; transform: rotate(1deg); }.portrait-card.portrait-final { width: min(390px, 100%); height: auto; border-radius: 0; background: transparent; box-shadow: none; transform: none; }.portrait-final img { transform: none; clip-path: none; border-radius: 0; }.portrait-shape { left: 25px; top: 75px; }.floating-note { right: 0; bottom: -4px; }.orbit-one { width: 400px; height: 400px; }.orbit-two { width: 430px; }.work .section-heading h2 { font-size: clamp(40px, 12vw, 58px); line-height: 1.02; }.work .section-heading > p { color: #aaa89e; font-size: 15px; }.project-image, .project-grid .project-image { min-height: 300px; }.project-visual-ai { padding: 12px; }.evaluator-graphic { width: 100%; transform: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.2)); }.project-info { display: block; }.project-info h3 { font-size: 29px; }.project-info p { margin: 20px 0; }.tags { margin-top: 20px; }.editorial-mockup { width: 82%; }.stats { grid-template-columns: 1fr 1fr; }.stats strong { font-size: 38px; }.stats div { padding-left: 16px; }.role { grid-template-columns: 1fr; gap: 8px; }.role b { text-align: left; }.contact-email { font-size: 17px; }.socials { flex-wrap: wrap; } footer { gap: 18px; flex-direction: column; }
  .animated-background { position: absolute; }
  .ambient-orb { filter: none; opacity: .1; animation: none; }
  .ambient-grid, .noise, .work::before, .experience::before, .project-image-shine { animation: none; }
  .noise { display: none; }
  .work::before, .experience::before { opacity: .08; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 90px 90px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .ambient-orb, .ambient-grid, .work::before, .experience::before, .project-image-shine, .scan-line { animation: none; } }

/* Lightweight rendering for smooth scrolling on mobile and desktop. */
body {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 92, 53, .12), transparent 30rem),
    radial-gradient(circle at 10% 48%, rgba(201, 240, 74, .10), transparent 27rem),
    var(--bg);
  transition: none;
}
.noise, .animated-background { display: none !important; }
.reveal, .reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.scan-line, .project-image-shine { display: none !important; }
.work::before, .experience::before {
  animation: none !important;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
  background-size: 90px 90px !important;
  opacity: .09 !important;
}
.evaluator-graphic { filter: none; transition: none; }
.project-visual-ai:hover .evaluator-graphic { transform: rotate(-1deg); }
.project-image, .highlight-card, .timeline, .skills, .credentials, .contact-inner {
  contain: layout paint;
}
@media (max-width: 900px) {
  body { background: var(--bg); }
  .orbit { display: none; }
  .evaluator-graphic { filter: none !important; transform: none !important; }
  .project-image, .highlight-card, .timeline, .skills, .credentials, .contact-inner {
    contain: paint;
  }
}