:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --blue: #0071e3;
  --paper: #fff;
  --surface: #f5f5f7;
  --line: #d2d2d7;
  --nav-height: 60px;
  --card-width: min(1120px, calc(100vw - 128px));
  --gutter: max(64px, calc((100vw - 1120px) / 2));
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: var(--nav-height); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #cde4ff; color: #1d1d1f; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #1687f5; outline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: -.045em; font-weight: 650; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.wrap { width: min(1120px, calc(100% - 128px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 14px 20px; background: #fff; border-radius: 12px; }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; background: #ffffffdc; backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid #1d1d1f12; transition: background .3s, border-color .3s; }
.site-header.is-dark { color: #f5f5f7; background: #111113db; border-color: #ffffff1c; }
.nav { height: var(--nav-height); display: flex; align-items: center; gap: 28px; }
.brand { font-size: 21px; font-weight: 650; letter-spacing: -.8px; }
.nav-links { margin-left: auto; display: flex; gap: 29px; font-size: 12px; }
.nav-links a { color: #6e6e73; transition: color .2s; padding-block: 20px; }
.nav-links a:hover, .nav-links a.active { color: #1d1d1f; }
.is-dark .nav-links a { color: #a1a1a6; }
.is-dark .nav-links a:hover, .is-dark .nav-links a.active { color: #fff; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; border-radius: 999px; color: #fff; background: var(--blue); padding: 13px 23px; font-size: 16px; font-weight: 400; transition: background .2s, transform .25s var(--ease), box-shadow .25s; }
.button:hover { background: #0077ed; box-shadow: 0 5px 18px #0071e31a; }
.button:active { transform: scale(.97); }
.nav-contact { padding: 8px 16px; font-size: 12px; }
.menu-toggle { display: none; }
.text-link { color: #06c; display: inline-flex; gap: 5px; align-items: center; font-size: 17px; line-height: 1.5; }
.text-link svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
/* A single restrained product composition, driven by scroll. */
.hero { background: linear-gradient(#fff 35%, #f5f5f7); padding-top: var(--nav-height); --hero-p: 0; }
.hero-sticky { position: relative; height: 880px; max-height: 1100px; overflow: hidden; isolation: isolate; }
.hero-copy { text-align: center; padding: 65px 24px 0; position: relative; z-index: 2; }
.hero-kicker { font-size: 20px; font-weight: 550; letter-spacing: -.4px; margin-bottom: 21px; }
.hero h1 { font-size: clamp(65px, 7.2vw, 100px); line-height: 1.015; letter-spacing: -.065em; font-weight: 700; }
.hero h1 span { color: #75757b; }
.hero-description { font-size: 21px; letter-spacing: -.45px; color: var(--muted); margin-top: 25px; }
.hero-cta { margin-top: 15px; }
.hero-product { position: absolute; width: min(1000px, 85vw); left: 50%; top: 490px; transform: translateX(-50%); perspective: 1500px; }
.hero-device { position: relative; transform-origin: 50% 90%; transform: rotateX(17deg) rotateY(-7deg); }
.device-display { border: 8px solid #29292d; border-top-width: 13px; border-radius: 21px 21px 9px 9px; overflow: hidden; background: #1d1d1f; box-shadow: inset 0 0 0 1px #707076, 0 1px 1px #0006; position: relative; }
.device-camera { position: absolute; z-index: 1; top: -10px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #71717a; }
.device-display img { width: 100%; }
.device-base { position: relative; margin-left: -4%; width: 108%; height: 13px; border-radius: 1px 1px 50% 50% / 1px 1px 100% 100%; background: linear-gradient(#d6d6db, #a7a7ae 35%, #d5d5dc 60%, #85858b); box-shadow: 0 2px 1px #0002; }
.device-base span { position: absolute; top: 0; left: 43%; width: 14%; height: 5px; background: #929298; border-radius: 0 0 8px 8px; }
.device-shadow { position: absolute; inset: auto -5% -35px; height: 60px; border-radius: 50%; background: radial-gradient(ellipse, #1d1d1f38, transparent 68%); filter: blur(15px); }
.cinematic .hero { height: 157svh; min-height: 1100px; }
.cinematic .hero-sticky { position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); max-height: none; }
.cinematic .hero-copy { padding-top: clamp(40px, 6svh, 80px); transform: translate3d(0, calc(var(--hero-p) * -88px), 0); opacity: calc(1 - var(--hero-p) * .85); will-change: transform, opacity; }
.cinematic .hero-product { top: 57%; transform: translate3d(-50%, calc(var(--hero-p) * -145px), 0) scale(calc(1 + var(--hero-p) * .19)); will-change: transform; }
.cinematic .hero-device { transform: rotateX(calc(17deg - var(--hero-p) * 17deg)) rotateY(calc(-7deg + var(--hero-p) * 7deg)); will-change: transform; }
.motion .hero-copy > * { animation: arrive .95s var(--ease) both; }
.motion .hero h1 { animation-delay: .07s; }
.motion .hero-description { animation-delay: .14s; }
.motion .hero-cta { animation-delay: .2s; }
@keyframes arrive { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Vertical scroll drives the project sequence at desktop and mobile sizes. */
.work { background: #fff; padding: 105px 0 95px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 45px; }
.section-heading h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.08; letter-spacing: -.045em; }
.work-counter { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-bottom: 5px; }
.work-counter > span:last-child { color: #86868b; margin-left: 7px; }
.gallery-viewport { height: 650px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; gap: 24px; width: max-content; height: 100%; padding-inline: var(--gutter); }
.project { width: var(--card-width); flex: 0 0 var(--card-width); height: 100%; border-radius: 28px; position: relative; overflow: hidden; isolation: isolate; scroll-snap-align: start; --drift: 0; }
.project-copy { position: relative; z-index: 2; padding: 46px 50px; pointer-events: none; }
.project-label { font-size: 17px; font-weight: 550; margin-bottom: 17px; letter-spacing: -.3px; }
.project h3 { font-size: clamp(37px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.project-description { font-size: 17px; line-height: 1.45; margin-top: 20px; letter-spacing: -.2px; }
.project-omni { background: #f0f3f8; }
.project-omni .project-description { color: #6e7480; }
.omni-showcase { position: absolute; width: 77%; right: -4%; bottom: 25px; perspective: 1500px; transform: translate3d(calc(var(--drift) * 25px), 0, 0); }
.browser-window { overflow: hidden; background: #fff; border-radius: 13px; border: 1px solid #b9c1cf; box-shadow: -15px 30px 60px #2636552e; transform: perspective(1500px) rotateY(-11deg) rotateX(4deg) rotateZ(-3deg); transform-origin: center; }
.browser-window img { width: 100%; }
.browser-toolbar { height: 36px; display: flex; align-items: center; justify-content: space-between; background: #fafbfe; padding: 0 13px; border-bottom: 1px solid #dbe0e8; color: #7d8695; font-size: 10px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { height: 6px; width: 6px; border-radius: 50%; background: #d3d7df; }
.address { width: 40%; padding: 4px; border-radius: 4px; background: #edf0f5; text-align: center; }
.toolbar-icon { font-size: 13px; }
.project-more { position: absolute; z-index: 5; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 13px; padding: 5px 5px 5px 17px; border-radius: 40px; background: #ffffffdf; color: #1d1d1f; box-shadow: 0 2px 12px #00000005; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-size: 12px; font-weight: 500; transition: background .3s, transform .3s var(--ease); }
.project-more:hover { background: #fff; transform: scale(1.025); }
.project-more i { font-style: normal; font-size: 23px; font-weight: 300; border-radius: 50%; display: grid; place-items: center; width: 34px; height: 34px; background: #1d1d1f; color: #fff; line-height: 1; }
.project-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07) translate3d(calc(var(--drift) * 20px), 0, 0); }
.project-krushal { background: #224d33; color: #fff; }
.project-krushal:after, .project-ezscm:after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #03170bba 0%, #07170d3d 58%, #07170d00), linear-gradient(0deg, #03170b55, transparent 40%); }
.project-krushal .project-photo img { object-position: 60% 53%; }
.project-krushal .project-description { color: #ffffffe0; }
.project-caption { position: absolute; bottom: 40px; left: 50px; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.status-orbit { border: 1px solid #e0f8daaa; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; }
.status-orbit:after { content: ''; width: 5px; height: 5px; background: #c7f8be; border-radius: 50%; }
.project-ezscm { color: #fff; background: #101b22; }
.project-ezscm:after { background: linear-gradient(90deg, #07101ce8 0%, #07101c9c 40%, #07101c25 100%); }
.project-ezscm .project-photo img { object-position: 70% center; }
.project-ezscm .project-copy { max-width: 760px; }
.project-ezscm .project-description { color: #d3dbe6; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.gallery-arrow { width: 42px; height: 42px; border-radius: 50%; background: #e8e8ed; color: #414145; display: grid; place-items: center; flex-shrink: 0; transition: background .2s, opacity .2s; }
.gallery-arrow:hover:not(:disabled) { background: #dedee4; }
.gallery-arrow:disabled { opacity: .35; }
.project-chapters { display: flex; align-items: center; gap: 20px; background: #e8e8edb8; border: 1px solid #f6f6f8; padding: 12px 23px 13px; border-radius: 50px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.project-chapters button { background: none; padding: 0; width: 72px; color: #6e6e73; font-size: 10px; letter-spacing: -.1px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
.project-chapters button[aria-current] { color: #1d1d1f; }
.chapter-line { display: block; width: 100%; height: 3px; border-radius: 3px; background: #c8c8cf; overflow: hidden; }
.chapter-line i { display: block; width: 100%; height: 100%; background: #45454a; border-radius: inherit; transform: scaleX(var(--fill, 0)); transform-origin: left center; }
.project-sequence .work { height: 350svh; padding: 0; }
.project-sequence .work-sticky { position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); padding: 38px 0 24px; display: flex; flex-direction: column; }
.project-sequence .work .section-heading { flex-shrink: 0; margin-bottom: 30px; }
.project-sequence .work .section-heading h2 { font-size: clamp(36px, 3.8vw, 50px); }
.project-sequence .gallery-viewport { flex: 1; min-height: 0; height: auto; overflow: hidden; }
.project-sequence .gallery-track { will-change: transform; }
.project-sequence .gallery-controls { flex-shrink: 0; margin-top: 24px; }
.project-sequence .project-photo img, .project-sequence .omni-showcase { will-change: transform; }
/* A quiet dark chapter with light revealing the typography. */
.about { background: #080809; color: #f5f5f7; --about-p: 1; }
.about-sticky { padding-block: 115px; }
.eyebrow { font-size: 19px; font-weight: 550; letter-spacing: -.4px; margin-bottom: 25px; }
.about .eyebrow { color: #a1a1a6; }
.about h2 { font-size: clamp(80px, 10.7vw, 144px); line-height: 1.02; font-weight: 650; letter-spacing: -.065em; }
.about-line { display: block; width: max-content; max-width: 100%; }
.about-bottom { display: flex; align-items: center; justify-content: space-between; gap: 70px; margin-top: 58px; }
.about-bio { max-width: 565px; }
.bio-lead { font-size: 25px; font-weight: 550; line-height: 1.25; letter-spacing: -.55px; }
.bio-body { color: #a1a1a6; font-size: 21px; line-height: 1.5; letter-spacing: -.4px; margin-top: 13px; max-width: 540px; }
.tech-list { display: flex; flex-wrap: wrap; gap: 23px; color: #a1a1a6; font-size: 12px; margin: 28px 0; }
.about .text-link { color: #2997ff; font-size: 16px; }
.portrait { flex-shrink: 0; width: 210px; height: 230px; border-radius: 22px; overflow: hidden; transform: translateY(calc((1 - var(--about-p)) * 22px)); }
.portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.cinematic .about { height: 165svh; }
.cinematic .about-sticky { position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); display: flex; flex-direction: column; justify-content: center; padding-block: 40px; }
.motion .about-line { background-image: linear-gradient(90deg, #f5f5f7 0%, #f5f5f7 var(--light, 100%), #909098 calc(var(--light, 100%) + 15%), #909098 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
/* A continuous career chapter. Education uses the same rhythm and hierarchy. */
.section { padding: 120px 0; }
.experience { background: #f5f5f7; }
.career-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 100px; align-items: start; }
.career-intro { position: sticky; top: calc(var(--nav-height) + 95px); padding-block: 16px; }
.career-intro .eyebrow { color: #6e6e73; font-size: 16px; margin-bottom: 24px; }
.career-intro h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.08; letter-spacing: -.052em; }
.career-intro h2 span { color: #86868b; }
.career-intro > p:not(.eyebrow) { color: #6e6e73; font-size: 19px; line-height: 1.5; margin-top: 25px; max-width: 330px; }
.career-intro .text-link { margin-top: 28px; font-size: 16px; }
.career-history { position: relative; padding-left: 72px; --career-progress: 0; }
.career-track { position: absolute; top: 20px; height: var(--career-length, 0px); width: 1px; left: 20px; background: #d9d9df; }
.career-track i { display: block; height: 100%; width: 100%; background: #0071e3; transform-origin: top; transform: scaleY(var(--career-progress)); }
.career-entry { position: relative; padding: 16px 0 42px; margin-bottom: 34px; border-bottom: 1px solid #dedee4; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.career-entry:last-child { margin: 0; padding-bottom: 12px; border: 0; }
.career-node { position: absolute; left: -72px; top: 11px; width: 41px; height: 41px; display: grid; place-items: center; border-radius: 50%; background: #f5f5f7; border: 1px solid #d9d9df; color: #86868b; font-size: 11px; font-variant-numeric: tabular-nums; transition: color .4s, border-color .4s, background .4s; }
.is-passed .career-node { background: #e4effb; border-color: #e4effb; color: #06c; }
.career-meta { min-height: 21px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: #86868b; margin-bottom: 20px; }
.career-meta > span:not(.current-badge) { color: #06c; }
.current-badge { display: inline-flex; align-items: center; gap: 7px; color: #34744e; }
.current-badge i { width: 6px; height: 6px; background: #38a267; border-radius: 50%; }
.career-entry h3 { font-size: 38px; letter-spacing: -.045em; line-height: 1.07; }
.role { font-size: 16px; color: #1d1d1f; margin-top: 13px; line-height: 1.5; }
.role span { display: block; color: #86868b; font-size: 12px; margin-top: 3px; }
.career-summary { color: #6e6e73; font-size: 17px; line-height: 1.5; margin-top: 13px; max-width: 370px; }
.career-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.career-tags span { font-size: 10px; color: #6e6e73; padding: 7px 11px; background: #e9e9ee; border-radius: 20px; }
.motion [data-reveal]:not(.is-visible) { transform: translate3d(0, 22px, 0); opacity: .6; }
/* The final call to action has room to breathe. */
.contact { padding-bottom: 0; background: #fff; }
.contact-content { text-align: center; padding-block: 15px 70px; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.contact .eyebrow { color: #6e6e73; }
.contact h2 { font-size: clamp(64px, 7vw, 96px); line-height: 1.04; letter-spacing: -.06em; }
.contact h2 span { color: #86868b; }
.contact-cta { margin-top: 38px; padding: 14px 25px; }
.contact-cta svg { width: 16px; height: 16px; }
footer { display: flex; align-items: center; gap: 28px; padding-block: 24px; border-top: 1px solid #d2d2d780; color: #6e6e73; font-size: 12px; }
.socials { display: flex; gap: 23px; margin-left: auto; }
.socials a:hover { color: #1d1d1f; }
.back-top { width: 32px; height: 32px; background: #f5f5f7; border-radius: 50%; display: grid; place-items: center; }
.back-top svg { width: 16px; height: 16px; }
/* Focus-trapped project details. */
dialog { width: min(880px, calc(100% - 48px)); max-height: 90svh; padding: 0; border: 0; border-radius: 26px; background: #fff; color: #1d1d1f; box-shadow: 0 25px 100px #0003; overscroll-behavior: contain; }
dialog::backdrop { background: #0007; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dialog-close { position: sticky; top: 18px; float: right; margin: 18px 18px -54px 0; z-index: 5; background: #e8e8edeb; border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; color: #4a4a50; }
.dialog-close:hover { background: #dcdce2; }
.dialog-image { width: 100%; max-height: 330px; object-fit: cover; }
.dialog-text { padding: 44px 55px 50px; }
.dialog-text .eyebrow { font-size: 12px; letter-spacing: .3px; color: #6e6e73; margin-bottom: 12px; }
.dialog-text h2 { font-size: 48px; margin-bottom: 23px; }
.dialog-text p { color: #6e6e73; font-size: 17px; line-height: 1.6; }
.dialog-text h3 { font-size: 23px; letter-spacing: -.7px; margin-top: 30px; }
.dialog-text ul { padding-left: 21px; margin: 15px 0 24px; }
.dialog-text li { font-size: 15px; line-height: 1.6; color: #6e6e73; padding-left: 3px; margin: 8px 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.tags span { background: #f5f5f7; border-radius: 6px; padding: 7px 10px; color: #6e6e73; font-size: 11px; }
.dialog-text .button { margin-top: 8px; font-size: 14px; }
.dialog-open { overflow: hidden; }
/* Laptop-height screens retain a complete composition above the controls. */
@media (min-width: 901px) and (max-height: 800px) {
  .hero h1 { font-size: clamp(64px, 6vw, 84px); }
  .hero-kicker { font-size: 17px; margin-bottom: 16px; }
  .hero-description { font-size: 18px; margin-top: 20px; }
  .cinematic .hero-copy { padding-top: 32px; }
  .cinematic .hero-product { top: 58%; width: min(890px, 78vw); }
  .project-sequence .work-sticky { padding-top: 28px; padding-bottom: 20px; }
  .project-sequence .work .section-heading { margin-bottom: 23px; }
  .project-sequence .work .section-heading h2 { font-size: 40px; }
  .project-copy { padding: 34px 40px; }
  .project h3 { font-size: 43px; }
  .project-description { font-size: 15px; margin-top: 16px; }
  .omni-showcase { width: 69%; bottom: 15px; }
  .cinematic .about h2 { font-size: 105px; }
  .cinematic .about-bottom { margin-top: 32px; }
  .bio-lead { font-size: 22px; }.bio-body { font-size: 18px; }
  .portrait { width: 180px; height: 200px; }
}
@media (max-width: 1100px) {
  :root { --card-width: calc(100vw - 96px); --gutter: 48px; }
  .wrap { width: calc(100% - 96px); }
  .hero-product { width: 86vw; }
  .project-copy { padding: 38px; }
  .project h3 { font-size: 44px; }
  .project-description { font-size: 16px; }
  .project-caption { left: 38px; }
}
@media (max-width: 900px) {
  :root { --card-width: calc(100vw - 80px); --gutter: 40px; }
  .wrap { width: calc(100% - 80px); }
  .hero-sticky { height: 810px; }
  .hero-copy { padding-top: 70px; }
  .hero h1 { font-size: clamp(55px, 8.8vw, 76px); }
  .hero-description { font-size: 19px; }
  .hero-product { top: 450px; }
  .work { padding-block: 80px; }
  .gallery-viewport { height: 600px; }
  .section-heading h2 { font-size: 40px; }
  .project-copy { padding: 35px; }
  .project h3 { font-size: 40px; }
  .omni-showcase { width: 100%; right: -14%; bottom: 70px; }
  .project-description { font-size: 16px; }
  .project-caption { bottom: 95px; left: 35px; }
  .about-sticky { padding-block: 85px; }
  .about h2 { font-size: 92px; }
  .about-bottom { gap: 45px; }
  .bio-lead { font-size: 22px; }
  .bio-body { font-size: 18px; }
  .portrait { width: 170px; height: 190px; }
  .tech-list { gap: 15px; font-size: 11px; }
  .section { padding-top: 85px; }
  .experience { padding-bottom: 80px; }
}
@media (max-width: 650px) {
  :root { --nav-height: 58px; --card-width: calc(100vw - 40px); --gutter: 20px; }
  html { scroll-padding-top: var(--nav-height); }
  .wrap { width: calc(100% - 40px); }
  .nav { gap: 19px; }
  .brand { font-size: 20px; }
  .nav-contact { margin-left: auto; padding: 7px 13px; font-size: 11px; }
  .menu-toggle { display: flex; width: 24px; height: 28px; padding: 7px 1px; flex-direction: column; justify-content: center; gap: 5px; background: none; }
  .menu-toggle span { width: 20px; height: 1px; background: currentColor; transition: transform .25s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: var(--nav-height); margin: 0; padding: 12px 25px 22px; flex-direction: column; gap: 0; background: #fffffff5; border-bottom: 1px solid #d2d2d7; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 18px; }
  .is-dark .nav-links { background: #121214fa; border-color: #333; }
  .hero-sticky { height: 690px; height: clamp(550px, 74svh, 630px); max-height: none; }
  .hero-copy { padding: 62px 15px 0; }
  .hero-kicker { font-size: 15px; margin-bottom: 20px; }
  .hero h1 { font-size: clamp(38px, 10.7vw, 65px); letter-spacing: -.06em; line-height: 1.06; }
  .hero-description { font-size: 15px; margin-top: 22px; letter-spacing: -.25px; }
  .hero-cta { font-size: 15px; margin-top: 16px; }
  .hero-product { top: 345px; width: 92%; }
  .hero-device { transform: rotateX(8deg) rotateY(-8deg); }
  .device-display { border-width: 5px; border-top-width: 9px; border-radius: 12px 12px 5px 5px; }
  .device-base { height: 8px; }
  .device-base span { height: 3px; }
  .device-shadow { bottom: -24px; }
  .work { padding: 60px 0; }
  .section-heading { margin-bottom: 30px; align-items: center; }
  .section-heading h2 { font-size: 32px; line-height: 1.08; max-width: 270px; }
  .work-counter { font-size: 11px; padding: 0; }
  .work-counter > span:last-child { margin-left: 3px; }
  .gallery-viewport { height: 540px; }
  .gallery-track { gap: 16px; }
  .project { border-radius: 22px; }
  .project-copy { padding: 30px 25px; }
  .project-label { font-size: 12px; letter-spacing: -.1px; margin-bottom: 15px; }
  .project h3 { font-size: clamp(30px, 8.8vw, 42px); line-height: 1.06; }
  .project-description { font-size: 14px; line-height: 1.5; margin-top: 17px; }
  .omni-showcase { width: 145%; right: -47%; bottom: 115px; }
  .browser-window { border-radius: 8px; transform: perspective(900px) rotateY(-14deg) rotateZ(-4deg); }
  .browser-toolbar { height: 24px; font-size: 7px; padding-inline: 8px; }
  .window-dots { gap: 3px; }.window-dots i { width: 4px; height: 4px; }
  .project-more { bottom: 19px; right: 19px; font-size: 11px; padding-left: 14px; gap: 10px; }
  .project-more i { width: 31px; height: 31px; }
  .project-krushal .project-photo img { object-position: 61% center; }
  .project-krushal:after { background: linear-gradient(180deg, #001c10bf, #001c1030 65%, #001c1075); }
  .project-ezscm:after { background: linear-gradient(180deg, #07101ce0, #07101c6b 60%, #07101c6b); }
  .project-ezscm .project-photo img { object-position: 68% center; }
  .project-caption { font-size: 11px; left: 25px; bottom: 86px; }
  .gallery-controls { gap: 8px; margin-top: 22px; padding-inline: 16px; }
  .gallery-arrow { width: 34px; height: 34px; }
  .gallery-arrow svg { width: 17px; height: 17px; }
  .project-chapters { padding: 11px 16px 12px; gap: 12px; }
  .project-chapters button { width: 53px; font-size: 9px; gap: 6px; }
  .chapter-line { height: 2px; }
  .about-sticky { padding-block: 70px; }
  .eyebrow { font-size: 15px; margin-bottom: 22px; }
  .about h2 { font-size: clamp(58px, 16vw, 100px); letter-spacing: -.065em; }
  .about-bottom { margin-top: 38px; flex-direction: column-reverse; align-items: start; gap: 28px; }
  .portrait { width: 100px; height: 110px; border-radius: 15px; }
  .bio-lead { font-size: 21px; max-width: 320px; }
  .bio-body { font-size: 17px; max-width: 340px; }
  .tech-list { font-size: 11px; gap: 19px; margin-block: 23px; }
  .about .text-link { font-size: 15px; }
  .section { padding-top: 65px; }
  .experience { padding-bottom: 60px; }
  .experience .section-heading { margin-bottom: 30px; }
  .role { font-size: 14px; margin-top: 9px; }
  .contact-content { padding-top: 5px; padding-bottom: 45px; }
  .contact h2 { font-size: clamp(42px, 11.1vw, 64px); line-height: 1.08; letter-spacing: -.055em; }
  .contact-cta { font-size: 15px; margin-top: 30px; padding: 12px 22px; }
  footer { gap: 17px; font-size: 10px; padding-block: 20px; flex-wrap: wrap; }
  .socials { gap: 17px; }.back-top { width: 28px; height: 28px; }
  dialog { width: calc(100% - 24px); max-height: 90svh; border-radius: 22px; }
  .dialog-image { max-height: 220px; min-height: 150px; }
  .dialog-text { padding: 29px 27px 34px; }.dialog-text h2 { font-size: 37px; }.dialog-text p { font-size: 15px; }.dialog-text li { font-size: 14px; }
}
@media (max-width: 360px) {
  .brand { font-size: 18px; }.nav { gap: 14px; }.hero h1 { font-size: 36px; }.hero-description { font-size: 14px; }.project-chapters { gap: 9px; padding-inline: 13px; }.project-chapters button { width: 48px; }
}
html.reduced-motion { scroll-behavior: auto; }
.reduced-motion *, .reduced-motion *:before, .reduced-motion *:after { animation: none !important; transition: none !important; }
.reduced-motion .hero-device { transform: none; }
.reduced-motion .portrait { transform: none; }
.reduced-motion .project-photo img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}

/* Touch layouts keep the complete image and copy in a single, stable viewport. */
@media (max-width: 900px) {
  .career-layout { grid-template-columns: 1fr; gap: 45px; }
  .career-intro { position: static; padding: 0; }
  .career-intro h2 { font-size: 49px; }
  .career-intro > p:not(.eyebrow) { max-width: 450px; }
  .career-history { max-width: 600px; }
  .project-sequence .work { height: 330svh; padding: 0; }
  .project-sequence .work-sticky { padding: 26px 0 18px; }
  .project-sequence .work .section-heading { margin-bottom: 22px; }
  .project-sequence .work .section-heading h2 { font-size: 34px; }
  .project-sequence .gallery-controls { margin-top: 17px; }
  .project-sequence .gallery-viewport { touch-action: pan-y; }
  .project-copy { padding: 30px; }
  .project h3 { font-size: 36px; }
  .project-krushal { background: #eaf0eb; color: #1c3429; }
  .project-ezscm { background: #eaf0f6; color: #1e3043; }
  .project-krushal .project-description, .project-ezscm .project-description { color: #5d6d69; }
  .project-krushal:after, .project-ezscm:after { display: none; }
  .project-photo { inset: 47% 18px 72px; z-index: 0; border-radius: 14px; }
  .project-photo img { transform: scale(1.04) translate3d(calc(var(--drift) * 8px), 0, 0); }
  .project-krushal .project-photo img { object-position: 50% 53%; }
  .project-ezscm .project-photo img { object-position: 65% 45%; }
  .omni-showcase { width: calc(100% - 36px); top: 47%; bottom: 72px; right: 18px; display: flex; align-items: center; }
  .browser-window { width: 100%; transform: none; border-radius: 8px; box-shadow: 0 12px 25px #2636551a; }
  .browser-window img { width: 100%; }
  .browser-toolbar { height: 28px; }
  .project-caption { display: none; }
  .project-more { bottom: 16px; right: 18px; }
}
@media (max-width: 650px) {
  .project-sequence .work { height: 320svh; }
  .project-sequence .work-sticky { padding-top: 21px; padding-bottom: 15px; }
  .project-sequence .work .section-heading { margin-bottom: 20px; }
  .project-sequence .work .section-heading h2 { font-size: 29px; max-width: 260px; }
  .project-copy { padding: 26px 23px 0; }
  .project h3 { font-size: clamp(27px, 8vw, 36px); }
  .project-label { margin-bottom: 13px; font-size: 11px; }
  .project-description { font-size: 13px; margin-top: 16px; }
  .project-photo { top: 40%; bottom: 72px; }
  .omni-showcase { top: 40%; bottom: 72px; }
  .project-omni .omni-showcase { background: #dfe7f2; padding: 20px 12px; border-radius: 14px; }
  .browser-toolbar { height: 22px; font-size: 6px; }
  .project-chapters { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .project-more { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .career-layout { gap: 40px; }
  .career-intro .eyebrow { font-size: 13px; margin-bottom: 18px; }
  .career-intro h2 { font-size: 38px; }
  .career-intro > p:not(.eyebrow) { font-size: 16px; margin-top: 20px; }
  .career-intro .text-link { margin-top: 20px; font-size: 14px; }
  .career-history { padding-left: 54px; }
  .career-track { left: 15px; }
  .career-node { width: 32px; height: 32px; left: -54px; top: 11px; font-size: 9px; }
  .career-entry { margin-bottom: 24px; padding-bottom: 30px; }
  .career-entry h3 { font-size: 31px; }
  .career-meta { font-size: 11px; margin-bottom: 15px; }
  .career-summary { font-size: 15px; }
  .role { font-size: 14px; }
  .career-tags { margin-top: 18px; }
}
@media (max-width: 900px) and (max-height: 740px) {
  .project-sequence .work-sticky { padding-top: 16px; padding-bottom: 12px; }
  .project-sequence .work .section-heading { margin-bottom: 16px; }
  .project-sequence .work .section-heading h2 { font-size: 25px; }
  .project-copy { padding-top: 20px; }
  .project h3 { font-size: 26px; }
  .project-label { font-size: 10px; margin-bottom: 10px; }
  .project-description { font-size: 12px; margin-top: 11px; }
  .project-photo, .omni-showcase { top: 50%; bottom: 61px; }
  .project-more { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .career-intro { position: static; }
  .career-track i { transform: none; }
}

/* Official identity marks, with a timeline that ends at the final node. */
.career-brand { display: flex; gap: 16px; align-items: center; min-height: 48px; }
.career-brand > img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; }
.university-brand { gap: 18px; }
.university-brand > img { flex-basis: 72px; width: 72px; height: 72px; }
@media (max-width: 900px) {
  .project-omni .omni-showcase { padding: 0; overflow: hidden; border-radius: 14px; background: #e5ebf3; }
  .project-omni .browser-window { height: 100%; border: 0; border-radius: inherit; box-shadow: none; transform: none; }
  .project-omni .browser-toolbar { display: none; }
  .project-omni .browser-window img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
}
@media (max-width: 650px) {
  .hero-product { display: none; }
  .hero-sticky { height: auto; min-height: 0; }
  .hero-copy { padding: 62px 15px 58px; }
  .work-counter, .gallery-controls { display: none; }
  .project-sequence .gallery-controls { display: none; }
  .career-brand { gap: 12px; }
  .career-brand > img { width: 40px; height: 40px; flex-basis: 40px; }
  .career-brand h3 { font-size: 28px; }
  .university-brand { align-items: flex-start; flex-direction: column; gap: 15px; }
  .university-brand > img { width: 64px; height: 64px; flex-basis: 64px; }
}
/* Refined mobile hero: a compact typographic composition, without a device mockup. */
.hero-heading-desktop { color: var(--ink) !important; }
.hero-heading-mobile, .hero-mobile-description, .hero-mobile-cta { display: none; }
/* Image-led project compositions. Content and media share one continuous card. */
.project { display: grid; grid-template-columns: 43% 57%; }
.project-copy { grid-column: 1; align-self: center; padding: 38px 36px 100px 42px; max-width: none !important; }
.project h3 { font-size: clamp(34px, 3.3vw, 46px); line-height: 1.06; }
.project-description { font-size: 16px; line-height: 1.5; }
.project-label { font-size: 13px; margin-bottom: 20px; }
.project-photo { inset: 0 0 0 43%; z-index: 0; }
.project-photo img { transform: scale(1.04) translate3d(calc(var(--drift) * 8px),0,0); }
.project-krushal:after, .project-ezscm:after { display: none; }
.project-krushal { background: #edf2ed; color: #20382a; }
.project-ezscm { background: #eaf0f6; color: #1e3043; }
.project-krushal .project-description, .project-ezscm .project-description { color: #5a6868; }
.project-caption { display: none; }
.omni-showcase { width: 57%; inset: 0 0 0 auto; display: block; perspective: none; transform: none; overflow: hidden; }
.browser-window { height: 100%; width: 100%; transform: none; border: 0; border-radius: 0; box-shadow: none; background: #e5ebf3; }
.browser-toolbar { display: none; }
.browser-window img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.project-more { right: auto; left: 42px; bottom: 40px; background: white; backdrop-filter: none; -webkit-backdrop-filter: none; }
.project-sequence .work { height: 310svh; }
.project-sequence .work-sticky { padding: 32px 0; }
.project-sequence .work .section-heading { margin-bottom: 28px; }
.project-sequence .work .section-heading h2 { font-size: 48px; }
/* The identity mark is the timeline marker. */
.career-history { padding-left: 84px; }
.career-track { left: 26px; }
.career-node { width: 54px; height: 54px; left: -84px; top: 0; background: #fff; border: 1px solid #e5e5eb; padding: 10px; }
.career-node img { width: 100%; height: 100%; object-fit: contain; }
.is-passed .career-node { background: #fff; border-color: #b5d7fb; box-shadow: 0 0 0 5px #0071e308; }
.career-meta { padding-top: 3px; }
.career-points { list-style: none; margin: 23px 0 0; padding: 0; display: grid; gap: 14px; }
.career-points li { position: relative; padding-left: 15px; color: #6e6e73; font-size: 15px; line-height: 1.6; }
.career-points li:before { content: ''; position: absolute; left: 0; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: #a1a1a6; }
.career-points strong { color: #1d1d1f; font-weight: 600; }
.career-focus-label { display: block; font-size: 11px; color: #86868b; margin-top: 22px; }
.career-focus-label + .career-points { margin-top: 12px; }
/* A considered enquiry flow. */
.contact { padding-top: 110px; }
.contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: start; padding-bottom: 100px; }
.contact-intro { padding-top: 25px; }
.contact h2 { font-size: clamp(44px, 4.5vw, 64px); line-height: 1.06; }
.contact-intro > p:not(.eyebrow) { font-size: 18px; line-height: 1.55; color: #6e6e73; margin-top: 28px; }
.contact .eyebrow { font-size: 14px; margin-bottom: 22px; }
.contact-services { display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: #6e6e73; margin-top: 36px; }
.contact-services span:before { content: '↗'; color: #06c; margin-right: 11px; }
.contact-form { padding: 36px; border-radius: 26px; background: #f5f5f7; min-width: 0; }
.form-heading h3 { font-size: 30px; }
.form-heading p { color: #6e6e73; font-size: 14px; margin-top: 8px; margin-bottom: 30px; }
.contact-form label { display: flex; flex-direction: column; gap: 9px; font-size: 12px; font-weight: 500; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form input:not([type=radio]), .contact-form textarea { width: 100%; border: 1px solid #d8d8de; border-radius: 11px; padding: 14px; background: #fff; font: inherit; font-size: 15px; color: #1d1d1f; transition: border-color .2s, box-shadow .2s; }
.contact-form textarea { resize: vertical; min-height: 135px; line-height: 1.5; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #0071e3; box-shadow: 0 0 0 3px #0071e31a; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #929298; }
.reason-field { border: 0; padding: 0; margin: 25px 0; min-width: 0; }
.reason-field legend { font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.reason-options { display: flex; gap: 8px; flex-wrap: wrap; }
.reason-options label { position: relative; display: block; cursor: pointer; }
.reason-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reason-options span { display: block; border: 1px solid #d7d7de; background: #fff; color: #6e6e73; padding: 10px 13px; border-radius: 20px; font-size: 11px; transition: .2s; }
.reason-options input:checked + span { border-color: #0071e3; background: #e8f2ff; color: #06c; }
.reason-options input:focus-visible + span { outline: 3px solid #0071e340; outline-offset: 3px; }
.form-submit-row { margin-top: 25px; display: flex; align-items: center; gap: 18px; }
.form-submit { font-size: 14px; flex-shrink: 0; padding: 13px 21px; }
.form-submit:disabled { opacity: .55; }
#form-delivery-note { font-size: 11px; line-height: 1.5; color: #86868b; }
.form-status { margin-top: 16px; font-size: 13px; line-height: 1.5; color: #446b52; }
.form-status:empty { display: none; }
.form-status.is-error { color: #b32924; }
.contact-email-fallback { display: inline-block; margin-top: 12px; color: #06c; font-size: 13px; }
.contact-email-fallback[hidden] { display: none; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1100px) { .contact-layout { gap: 45px; }.contact-form { padding: 28px; }.form-row { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
 .project { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 22px; padding: 26px; }
 .project-copy { grid-row: 1; grid-column: 1; padding: 0; align-self: start; }
 .project-label { font-size: 12px; margin-bottom: 13px; }
 .project h3 { font-size: 35px; line-height: 1.05; }
 .project-description { font-size: 14px; margin-top: 15px; }
 .project-photo, .project-omni .omni-showcase { grid-row: 2; grid-column: 1; position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; border-radius: 15px; padding: 0; }
 .project-more { grid-row: 3; grid-column: 1; position: relative; inset: auto; justify-self: end; align-self: end; width: max-content; }
 .project-sequence .work { height: 290svh; }
 .project-sequence .work-sticky { padding: 22px 0; }
 .project-sequence .work .section-heading { margin-bottom: 22px; }
 .project-sequence .work .section-heading h2 { font-size: 36px; }
 .career-layout { gap: 42px; }
 .contact-layout { grid-template-columns: 1fr; gap: 35px; padding-bottom: 65px; }
 .contact-intro { padding: 0; }
 .contact h2 { font-size: 58px; }
 .contact-services { flex-direction: row; flex-wrap: wrap; gap: 15px; margin-top: 25px; }
 .form-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
 .hero { background: linear-gradient(180deg,#fff 30%,#f7f8fa); }
 .hero-copy { padding: 45px 20px 46px; text-align: center; }
 .hero-heading-desktop, .hero-description { display: none; }
 .hero-heading-mobile { display: block; color: #1d1d1f !important; }
 .hero h1 { font-size: clamp(43px, 12.5vw, 67px); line-height: 1; letter-spacing: -.065em; }
 .hero-heading-mobile > span { color: #86868b; }
 .hero-kicker { font-size: 13px; margin-bottom: 20px; }
 .hero-mobile-description { display: block; font-size: 15px; line-height: 1.5; color: #6e6e73; margin: 22px 0; letter-spacing: -.2px; }
 .hero-mobile-cta { display: inline-flex; font-size: 13px; padding: 12px 19px; gap: 18px; }
 .hero-cta { display: flex; width: max-content; margin: 18px auto 0; font-size: 13px; }
 .work { padding-block: 42px; }
 .project-sequence .work-sticky { padding: 18px 0; }
 .project-sequence .work .section-heading { margin-bottom: 18px; }
 .project-sequence .work .section-heading h2 { font-size: 30px; }
 .project { padding: 24px 20px 18px; gap: 20px; border-radius: 24px; }
 .project h3 { font-size: clamp(27px, 8.3vw, 35px); }
 .project-label { font-size: 11px; margin-bottom: 12px; }
 .project-description { font-size: 13px; margin-top: 13px; }
 .project-photo, .project-omni .omni-showcase { border-radius: 13px; }
 .project-more { font-size: 11px; padding: 5px 5px 5px 15px; }
 .project-more i { width: 30px; height: 30px; }
 .career-history { padding-left: 68px; }
 .career-node { left: -68px; width: 46px; height: 46px; padding: 8px; top: 0; }
 .career-track { left: 23px; }
 .career-entry h3 { font-size: 29px; }
 .career-points { gap: 13px; margin-top: 20px; }
 .career-points li { font-size: 14px; line-height: 1.55; padding-left: 12px; }
 .role { font-size: 13px; }
 .contact { padding-top: 65px; }
 .contact h2 { font-size: clamp(40px, 11.5vw, 58px); }
 .contact-intro > p:not(.eyebrow) { font-size: 16px; margin-top: 22px; }
 .contact-services { flex-direction: column; gap: 12px; font-size: 12px; }
 .contact-form { padding: 26px 21px; border-radius: 22px; }
 .form-row { grid-template-columns: 1fr; gap: 18px; }
 .contact-form input:not([type=radio]), .contact-form textarea { font-size: 16px; }
 .form-submit-row { flex-direction: column; align-items: start; gap: 13px; }
 .form-submit { width: 100%; }
 .reason-options span { font-size: 11px; padding: 9px 12px; }
}
@media (max-width: 900px) and (max-height: 740px) {
 .project { gap: 15px; padding-top: 20px; }
 .project h3 { font-size: 27px; }
 .project-label { margin-bottom: 10px; }
 .project-description { font-size: 12px; margin-top: 10px; }
 .project-sequence .work .section-heading h2 { font-size: 27px; }
 .project-sequence .work .section-heading { margin-bottom: 14px; }
}
/* A lighter contact composition: three fields, one action. */
.contact-form { background: linear-gradient(145deg,#f6f6f8,#fafafa); border: 1px solid #eeeef1; padding: 36px; }
.form-heading h3 { font-size: 28px; letter-spacing: -.045em; margin-bottom: 28px; }
.message-field { margin-top: 24px; }
.contact-form textarea { min-height: 108px; }
.form-submit-row { margin-top: 22px; flex-wrap: wrap; gap: 12px; }
#form-delivery-note { max-width: 205px; }
.project-ambient { display: none; }
@media (max-width: 900px) {
 .work { --compact-card: clamp(370px, 52svh, 420px); }
 .project-sequence .work { height: calc(var(--compact-card) + 92px + 120svh); }
 .project-sequence .work-sticky { height: calc(var(--compact-card) + 92px); padding: 20px 0 24px; }
 .gallery-viewport, .project-sequence .gallery-viewport { height: var(--compact-card); flex: 0 0 var(--compact-card); }
 .project-sequence .work .section-heading { margin-bottom: 18px; }
 .project-sequence .work .section-heading h2 { font-size: 30px; }
 .gallery-track { gap: 16px; }
 .project { grid-template-rows: auto minmax(0,1fr) 38px; padding: 25px 24px 18px; gap: 16px; background: #f3f5f7; border: 1px solid #e8ebef; }
 .project-ambient { display: block; position: absolute; inset: 25% -35px -35px; z-index: -1; background-size: cover; background-position: center; filter: blur(32px); opacity: .23; transform: scale(1.2); mask-image: linear-gradient(transparent,#000 45%); -webkit-mask-image: linear-gradient(transparent,#000 45%); }
 .project-krushal { background: #eef3ee; }
 .project-ezscm { background: #edf1f6; }
 .project-copy { padding: 0; }
 .project h3 { font-size: clamp(27px,7.8vw,35px); line-height: 1.05; }
 .project-label { margin-bottom: 10px; font-size: 11px; }
 .project-description { margin-top: 12px; font-size: 13px; }
 .project-photo, .project-omni .omni-showcase { border-radius: 14px; background: transparent; transform: translate3d(calc(var(--drift) * 9px),0,0) scale(calc(1 - var(--defocus,0) * .035)); filter: blur(calc(var(--defocus,0) * 3px)); }
 .project-omni .omni-showcase { display: flex; align-items: center; overflow: visible; }
 .project-omni .browser-window { height: auto; width: 100%; border: 1px solid #ffffffbb; border-radius: 10px; box-shadow: 0 14px 30px -12px #233c5b55; background: #fff; }
 .project-omni .browser-window img { display: block; width: 100%; height: auto; object-fit: contain; }
 .project-photo img { transform: none; }
 .project-photo:after { content: ''; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent,#ffffff38); pointer-events: none; }
 .project-more { background: #ffffffbf; border: 1px solid #ffffffc9; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 3px 14px #34424d08; padding: 4px 4px 4px 15px; font-size: 11px; }
 .project-more i { width: 28px; height: 28px; font-size: 22px; }
}
@media (max-width: 650px) {
 .hero .hero-cta, .hero-mobile-cta { display: none; }
 .hero-copy { padding: 46px 20px 38px; }
 .hero-mobile-description { margin: 22px 0 0; }
 .hero { background: linear-gradient(180deg,#fff 55%,#f7f8fa); }
 .project { padding: 23px 20px 17px; gap: 14px; }
 .project-description { font-size: 12px; }
 .contact-form { padding: 27px 22px; }
 .form-heading h3 { font-size: 26px; margin-bottom: 24px; }
 .contact-layout { gap: 28px; }
 .contact-intro > p:not(.eyebrow) { margin-top: 18px; }
 .contact h2 { font-size: 42px; }
 .form-row { gap: 16px; }
 .message-field { margin-top: 18px; }
 .contact-form textarea { min-height: 100px; }
 .form-submit-row { gap: 11px; }
 #form-delivery-note { max-width: none; }
}
/* Mobile uses a natural vertical stack, eliminating the slider's empty scroll stage. */
@media (max-width: 900px) {
 .work, .project-sequence .work { height: auto; padding: 27px 0 46px; }
 .work-sticky, .project-sequence .work-sticky { position: static; height: auto; display: block; padding: 0; }
 .work .section-heading { margin-bottom: 22px; }
 .work .section-heading h2 { font-size: 30px; }
 .gallery-viewport, .project-sequence .gallery-viewport { height: auto; overflow: visible; scroll-snap-type: none; }
 .gallery-track { display: block; width: 100%; height: auto; transform: none !important; }
 .project { position: sticky; top: calc(var(--nav-height) + 24px); width: 100%; height: var(--compact-card); margin-bottom: 22px; transform-origin: center top; transform: scale(calc(1 - var(--stack,0) * .045)); filter: blur(calc(var(--stack,0) * 2.5px)); }
 .project:last-child { margin-bottom: 0; }
 .reduced-motion .project { position: relative; top: auto; transform: none; filter: none; }
}
/* Draw a geometric plus so font baselines cannot shift its visual center. */
.project-more i {
 position: relative;
 display: block;
 flex-shrink: 0;
 align-self: center;
 font-size: 0;
}
.project-more i::before,
.project-more i::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 14px;
 height: 2px;
 border-radius: 1px;
 background: currentColor;
 transform: translate(-50%, -50%);
}
.project-more i::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Accessibility: maintain readable text through reveal and scroll effects. */
.career-meta, .career-focus-label, .role span { color: #626268; }
.career-intro h2 span, .contact h2 span, .hero-heading-mobile > span { color: #707076; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #6b6b72; }
.motion [data-reveal]:not(.is-visible) { opacity: 1; }
.motion .hero-copy > * { animation: none; }
.cinematic .hero-copy { opacity: 1; }
.button:hover { background: #0066cc; }
.about .text-link { color: #69b0ff; }
.project-description, .project-omni .project-description { color: #505862; }
.nav-contact, .project-more, .menu-toggle, .dialog-close, .back-top { min-height: 44px; min-width: 44px; }
.socials a { display: inline-flex; min-height: 44px; align-items: center; }
.project:focus-within { filter: none !important; }
@media (max-width:900px) {
 .project { filter: none; grid-template-rows: auto minmax(0,1fr) 44px; }
 .project-photo, .project-omni .omni-showcase { filter: blur(calc(var(--stack,0) * 2px)); }
}
@media (prefers-reduced-motion: reduce) {
 html, body { scroll-behavior: auto !important; }
 .project, .project-photo, .project-omni .omni-showcase { filter: none !important; }
}