:root{--bg:#07101f;--surface:#0d1729;--surface2:#101d33;--text:#f7f9fc;--muted:#9aa8bd;--line:rgba(255,255,255,.1);--blue:#2563eb;--sky:#38bdf8;--green:#22c55e;--radius:22px;--shadow:0 22px 65px rgba(0,0,0,.26);--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% 0,rgba(37,99,235,.16),transparent 26%),var(--bg);color:var(--text);line-height:1.65}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit}.container{width:min(var(--max),calc(100% - 36px));margin:auto}.progress{position:fixed;z-index:80;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--sky));width:0}.nav-wrap{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);background:rgba(7,16,31,.78);border-bottom:1px solid var(--line)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-weight:700}.brand img{width:34px;height:34px;object-fit:contain}.links{display:flex;gap:22px}.links a{font-size:13px;color:var(--muted);font-weight:600}.links a:hover{color:var(--text)}.nav-actions{display:flex;gap:8px}.icon-btn,.menu{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:10px;padding:9px 12px}.menu{display:none}.hero{min-height:720px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:64px;padding:86px 0 70px}.eyebrow,.section-head>span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);font-weight:700}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:9px;box-shadow:0 0 0 5px rgba(34,197,94,.12)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.06em;margin:24px 0 20px}.hero h1 span{color:#759bff}.role{font-size:17px;font-weight:600}.role b{color:var(--muted);padding:0 5px}.intro{max-width:650px;color:var(--muted);font-size:15px}.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 17px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);font-size:13px;font-weight:700}.btn.primary{background:var(--blue);border-color:var(--blue)}.social{display:flex;gap:10px;margin-top:20px}.social-icon{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.04)}.social-icon img{width:22px;height:22px}.hero-visual{position:relative;min-height:500px;display:grid;place-items:center}.portrait{width:min(330px,78vw);aspect-ratio:4/5;border-radius:38px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(145deg,#102342,#07101f)}.portrait img{width:100%;height:100%;object-fit:cover}.floating{position:absolute;padding:13px 15px;background:rgba(13,23,41,.9);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.floating strong{display:block;font-size:15px}.floating span{font-size:11px;color:var(--muted)}.f1{left:3%;top:23%}.f2{right:1%;bottom:24%}.ticker{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.025)}.ticker div{white-space:nowrap;padding:15px 0;text-align:center;color:#b9c5d7;font-size:12px;letter-spacing:.05em}.ticker i{color:var(--blue);font-style:normal;margin:0 18px}.section{padding:100px 0}.section-head{display:grid;grid-template-columns:1fr 1.35fr .85fr;gap:28px;align-items:end;margin-bottom:36px}.section-head h2{font-size:clamp(31px,4vw,48px);line-height:1.04;letter-spacing:-.05em;margin:0}.section-head p{font-size:12px;color:var(--muted);max-width:300px;margin:0}.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.about-main,.about-stats,.education,.bento-card,.job-panel,.project,.contact-inner{border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border-radius:var(--radius)}.about-main{padding:34px}.about-main h3{font-size:23px;max-width:650px}.about-main p{font-size:14px;color:var(--muted);max-width:720px}.about-stats{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.about-stats div{padding:19px;border-radius:15px;background:rgba(255,255,255,.04)}.about-stats strong{display:block;font-size:25px}.about-stats span{font-size:11px;color:var(--muted)}.education{display:flex;align-items:center;justify-content:space-between;padding:28px;margin-bottom:18px}.education span,.cert span,.bento-card>span,.project-info>span{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--sky);font-weight:700}.education h3{font-size:22px;margin:8px 0}.education p{font-size:12px;color:var(--muted);margin:0}.education>strong{font-size:44px;color:#678df3}.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cert{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.035)}.cert img{aspect-ratio:16/10;width:100%;object-fit:cover}.cert div{padding:18px}.cert h3{font-size:15px;margin:8px 0 3px}.cert small{font-size:11px;color:var(--muted)}.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.bento-card{padding:28px}.bento-card.wide{grid-column:1/-1}.bento-card h3{font-size:19px;margin:8px 0}.bento-card p{font-size:12px;color:var(--muted);margin:0}.logo-cloud{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}.tech-logo{min-height:92px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.tech-logo img{width:32px;height:32px}.tech-logo span{font-size:10px;color:#c7d2e3}.experience-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:16px}.experience-list{display:flex;flex-direction:column;gap:8px}.job{border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text);border-radius:14px;padding:17px;text-align:left;display:grid;grid-template-columns:66px 1fr;gap:12px;cursor:pointer}.job.active,.job:hover{border-color:rgba(56,189,248,.55);background:rgba(37,99,235,.13)}.job>span{font-size:10px;color:var(--sky)}.job strong{display:block;font-size:13px}.job small{color:var(--muted);font-size:10px}.job-panel{padding:30px;min-height:350px}.job-panel h3{font-size:25px;margin-bottom:4px}.job-panel .company{color:var(--sky);font-size:12px}.job-panel ul{padding-left:20px;margin:22px 0}.job-panel li{font-size:13px;color:var(--muted);margin:8px 0}.tag-row,.tags{display:flex;flex-wrap:wrap;gap:7px}.tag-row b,.tags b{font-size:9px;padding:6px 9px;border-radius:999px;background:rgba(37,99,235,.14);border:1px solid rgba(37,99,235,.28);color:#bdceff}.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project{overflow:hidden;transition:.25s transform,.25s border-color}.project:hover{transform:translateY(-5px);border-color:rgba(56,189,248,.45)}.project-image{aspect-ratio:16/9;overflow:hidden;background:#fff}.project-image img{width:100%;height:100%;object-fit:cover}.project-info{padding:20px}.project-info h3{font-size:18px;margin:8px 0}.project-info p{font-size:11px;color:var(--muted);min-height:38px}.project-info em{display:block;margin-top:16px;font-style:normal;font-size:11px;color:var(--sky);font-weight:700}.contact{padding:40px 0 100px}.contact-inner{text-align:center;padding:70px 20px}.contact-inner h2{font-size:clamp(34px,5vw,57px);letter-spacing:-.055em;line-height:1.02;margin:12px 0}.contact-inner p{font-size:12px;color:var(--muted)}.contact-inner .actions{justify-content:center}footer{display:flex;justify-content:space-between;padding:28px 0 38px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}footer div{display:flex;gap:18px}.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
/* Light case-study pages */
.case-page{background:#f6f8fc;color:#101827}.case-page .nav-wrap{background:rgba(255,255,255,.88);border-color:#dbe3ef}.case-page .brand,.case-page .links a,.case-page .icon-btn{color:#101827}.case-page .case-nav{height:66px}.case-main{padding:46px 0 90px}.case-cover{border-radius:24px;overflow:hidden;box-shadow:0 20px 55px rgba(24,40,72,.15);background:#fff}.case-cover img{width:100%;aspect-ratio:2/1;object-fit:cover}.case-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;padding:50px 0}.case-intro h1{font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.055em;margin-bottom:20px}.case-intro p{font-size:14px;color:#5c687b}.case-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px}.case-meta div{background:white;border:1px solid #e1e7f0;border-radius:16px;padding:18px}.case-meta span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#2563eb;font-weight:700}.case-meta strong{display:block;margin-top:6px;font-size:12px}.case-section{padding:54px 0;border-top:1px solid #dfe6ef}.case-section-head{display:grid;grid-template-columns:.35fr 1fr;gap:30px;margin-bottom:25px}.case-section-head span{font-size:10px;color:#2563eb;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.case-section-head h2{font-size:30px;letter-spacing:-.04em;margin:0}.case-copy{max-width:820px;color:#5c687b;font-size:13px}.case-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.case-list article{background:#fff;border:1px solid #e1e7f0;border-radius:16px;padding:20px}.case-list h3{font-size:14px;margin-bottom:7px}.case-list p{font-size:11px;color:#647086;margin:0}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.shot{background:#fff;border:1px solid #dde5ef;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(24,40,72,.08)}.shot img{width:100%;height:100%;object-fit:cover}.shot figcaption{padding:11px 14px;font-size:10px;color:#68758a}.case-footer{padding:34px 0;border-top:1px solid #dfe6ef;color:#68758a;font-size:10px;display:flex;justify-content:space-between}.light-btn{display:inline-flex;align-items:center;min-height:42px;padding:0 15px;border-radius:11px;background:#2563eb;color:white;font-size:11px;font-weight:700}.light-btn.secondary{background:#fff;color:#101827;border:1px solid #dbe3ef}
@media(max-width:900px){.links{display:none;position:absolute;top:72px;left:18px;right:18px;padding:16px;background:#0d1729;border:1px solid var(--line);border-radius:16px;flex-direction:column}.links.open{display:flex}.menu{display:block}.hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}.hero-visual{min-height:430px}.section-head{grid-template-columns:1fr;gap:8px}.about-grid,.experience-grid,.case-intro{grid-template-columns:1fr}.certs,.projects{grid-template-columns:1fr 1fr}.logo-cloud{grid-template-columns:repeat(3,1fr)}.case-list{grid-template-columns:1fr 1fr}.case-page .links{background:white}.case-page .links a{color:#101827}}
@media(max-width:620px){.container{width:min(100% - 24px,var(--max))}.hero h1{font-size:44px}.hero{gap:25px}.portrait{width:250px}.f1{left:0}.f2{right:0}.section{padding:76px 0}.section-head h2{font-size:34px}.about-stats,.bento,.certs,.projects,.gallery,.case-list{grid-template-columns:1fr}.education{align-items:flex-start}.education>strong{font-size:31px}.logo-cloud{grid-template-columns:repeat(2,1fr)}.job{grid-template-columns:55px 1fr}.contact-inner{padding:52px 16px}.case-main{padding-top:25px}.case-cover{border-radius:16px}.case-intro{padding:32px 0}.case-intro h1{font-size:39px}.case-section-head{grid-template-columns:1fr;gap:7px}.case-footer{flex-direction:column;gap:8px}.projects{gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.project{transition:none}}

/* 2026 light-first refresh */
.home-light{--bg:#f7f9fc;--surface:#fff;--surface2:#f1f5fb;--text:#0f172a;--muted:#64748b;--line:#dce4ef;--shadow:0 22px 60px rgba(30,64,175,.12);background:radial-gradient(circle at 15% 0,rgba(37,99,235,.10),transparent 28%),var(--bg);color:var(--text)}
.home-light.theme-dark{--bg:#07101f;--surface:#0d1729;--surface2:#101d33;--text:#f7f9fc;--muted:#9aa8bd;--line:rgba(255,255,255,.1);--shadow:0 22px 65px rgba(0,0,0,.26);background:radial-gradient(circle at 15% 0,rgba(37,99,235,.16),transparent 26%),var(--bg)}
.home-light .nav-wrap{background:rgba(247,249,252,.86)}.home-light.theme-dark .nav-wrap{background:rgba(7,16,31,.78)}
.home-light .icon-btn,.home-light .menu,.home-light .btn,.home-light .social-icon{background:rgba(255,255,255,.72)}
.home-light.theme-dark .icon-btn,.home-light.theme-dark .menu,.home-light.theme-dark .btn,.home-light.theme-dark .social-icon{background:rgba(255,255,255,.04)}
.home-light .btn.primary{color:#fff;background:var(--blue)}
.home-light .floating{background:rgba(255,255,255,.92)}.home-light.theme-dark .floating{background:rgba(13,23,41,.9)}
.home-light .ticker{background:rgba(255,255,255,.55)}.home-light .ticker div{color:#526176}.home-light.theme-dark .ticker{background:rgba(255,255,255,.025)}.home-light.theme-dark .ticker div{color:#b9c5d7}
.home-light .about-main,.home-light .about-stats,.home-light .education,.home-light .bento-card,.home-light .job-panel,.home-light .project,.home-light .contact-inner{background:linear-gradient(145deg,#fff,#f8faff)}
.home-light.theme-dark .about-main,.home-light.theme-dark .about-stats,.home-light.theme-dark .education,.home-light.theme-dark .bento-card,.home-light.theme-dark .job-panel,.home-light.theme-dark .project,.home-light.theme-dark .contact-inner{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}
.home-light .about-stats div,.home-light .tech-logo{background:#f5f8fc}.home-light.theme-dark .about-stats div,.home-light.theme-dark .tech-logo{background:rgba(255,255,255,.04)}
.home-light .tech-logo span{color:#334155}.home-light.theme-dark .tech-logo span{color:#c7d2e3}
.home-light .job{background:#fff;color:var(--text)}.home-light.theme-dark .job{background:rgba(255,255,255,.025)}
.home-light .tag-row b,.home-light .tags b{color:#1d4ed8}.home-light.theme-dark .tag-row b,.home-light.theme-dark .tags b{color:#bdceff}
.foundations-card{text-align:center}.foundations-card .logo-cloud{max-width:900px;margin:22px auto 0}.foundations-card>span,.foundations-card h3{display:block;text-align:center}
.projects{grid-template-columns:repeat(2,1fr)}
.back-to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#2563eb;color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.32);font-size:21px;font-weight:700;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s}
.back-to-top.visible{opacity:1;visibility:visible;transform:none}.back-to-top:hover{transform:translateY(-3px)}
.case-centered .case-intro{grid-template-columns:1fr;max-width:920px;margin:auto;text-align:center}.case-centered .case-intro .actions{justify-content:center}.case-centered .case-meta{max-width:760px;margin:10px auto 0}.case-centered .case-section-head{display:block;text-align:center}.case-centered .case-section-head span{display:block;margin-bottom:8px}.case-centered .case-copy{margin-left:auto;margin-right:auto;text-align:center}.case-centered .case-list{max-width:980px;margin-left:auto;margin-right:auto}.case-centered .gallery{max-width:1080px;margin-left:auto;margin-right:auto}.case-centered .case-cover{max-width:1080px;margin:auto}
.shot{cursor:zoom-in;transition:transform .2s,box-shadow .2s}.shot:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(24,40,72,.14)}
.image-modal{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:26px;background:rgba(15,23,42,.88);backdrop-filter:blur(8px)}.image-modal.open{display:grid}.image-modal-card{position:relative;width:min(1180px,96vw);max-height:92vh;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.45)}.image-modal-card img{width:100%;max-height:78vh;object-fit:contain;background:#edf2f7}.image-modal-caption{padding:16px 20px;color:#334155;font-size:13px;text-align:center}.image-modal-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(15,23,42,.85);color:#fff;font-size:22px;cursor:pointer}
@media(max-width:900px){.home-light .links{background:#fff}.home-light.theme-dark .links{background:#0d1729}.projects{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.projects{grid-template-columns:1fr}.back-to-top{right:14px;bottom:14px}.case-centered .case-meta{grid-template-columns:1fr 1fr}}

/* Compact work samples + company logos */
#work.section{padding-top:76px;padding-bottom:76px}
#work .section-head{margin-bottom:28px}
.projects{gap:14px}
.project{display:grid;grid-template-columns:42% 58%;min-height:230px}
.project-image{aspect-ratio:auto;min-height:230px}
.project-info{padding:18px}
.project-info h3{font-size:16px;margin:6px 0}
.project-info p{font-size:10px;line-height:1.55;min-height:auto;margin-bottom:10px}
.project-info em{margin-top:12px}
.job{grid-template-columns:54px 54px 1fr;align-items:center}
.company-logo{width:48px;height:34px;object-fit:contain;background:#fff;border-radius:8px;padding:5px;border:1px solid var(--line)}
.figma-callout .actions{justify-content:center;margin-top:18px}
@media(max-width:900px){.project{grid-template-columns:1fr}.project-image{min-height:190px}.job{grid-template-columns:46px 48px 1fr}}
@media(max-width:620px){#work.section{padding-top:58px;padding-bottom:58px}.project-image{min-height:160px}.project-info{padding:15px}.job{grid-template-columns:42px 44px 1fr}.company-logo{width:40px;height:30px}}

/* Final layout refinements */
.projects-centered{max-width:1060px;margin-inline:auto;justify-content:center}
.project,.about-main,.about-stats,.education,.cert,.bento-card,.job-panel,.contact-inner{box-shadow:0 18px 45px rgba(15,35,70,.12)}
.home-light .project,.home-light .about-main,.home-light .about-stats,.home-light .education,.home-light .cert,.home-light .bento-card,.home-light .job-panel,.home-light .contact-inner{box-shadow:0 18px 45px rgba(15,35,70,.11)}
.case-cover{box-shadow:0 24px 65px rgba(24,40,72,.18)}
.case-intro{align-items:center}
.case-section-head{grid-template-columns:.28fr 1fr;align-items:start}
.case-section-head h2{text-align:left}
.case-copy{margin-left:calc(28% + 8px)}
.case-list{margin-left:calc(28% + 8px)}
.case-list article,.case-meta div,.shot{box-shadow:0 13px 32px rgba(24,40,72,.09)}
.gallery{align-items:start}
.shot{cursor:zoom-in;transition:transform .22s ease,box-shadow .22s ease}
.shot:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(24,40,72,.16)}
.shot-media{display:grid;place-items:center;background:#f8fafc;padding:12px;min-height:250px}
.shot img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain}
.shot figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px}
.shot figcaption strong{font-size:11px;color:#172033}.shot figcaption span{font-size:9px;color:#7b8799}
.image-modal-card img{object-fit:contain;max-width:92vw;max-height:80vh}
@media(max-width:900px){.case-copy,.case-list{margin-left:0}.case-section-head{grid-template-columns:1fr}.case-section-head h2{text-align:left}.projects-centered{max-width:720px}}
@media(max-width:620px){.shot-media{min-height:180px;padding:8px}.shot figcaption{align-items:flex-start;flex-direction:column}.projects-centered{max-width:420px}}

/* Hero focus panel, Credly, and Figma live-prototype refinements */
.hero-focus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;max-width:620px}
.hero-focus>div{padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72);box-shadow:0 14px 34px rgba(15,35,70,.11)}
.hero-focus span{display:block;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:4px}
.hero-focus strong{display:block;font-size:12px;line-height:1.35}
.home-light.theme-dark .hero-focus>div{background:rgba(255,255,255,.045);box-shadow:0 18px 45px rgba(0,0,0,.24)}
.social-icon[aria-label="Credly badges"] img{width:23px;height:23px}
.prototype-callout{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:4px 0 46px;padding:24px 26px;background:linear-gradient(135deg,#fff,#f4f7ff);border:1px solid #dce5f4;border-radius:18px;box-shadow:0 18px 44px rgba(24,40,72,.11)}
.prototype-callout span{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#2563eb;font-weight:700}
.prototype-callout h2{font-size:22px;letter-spacing:-.035em;margin:5px 0 4px}
.prototype-callout p{margin:0;color:#647086;font-size:12px}
.figma-live{box-shadow:0 12px 28px rgba(37,99,235,.22)}
@media(max-width:620px){.hero-focus{grid-template-columns:1fr}.prototype-callout{align-items:flex-start;flex-direction:column}.prototype-callout .light-btn{width:100%;justify-content:center}}


/* Consistent work-sample media and portrait-overlay focus panel */
.projects-centered .project{
  display:flex;
  flex-direction:column;
  height:100%;
}
.projects-centered .project-image{
  width:100%;
  height:190px;
  aspect-ratio:auto;
  flex:0 0 190px;
}
.projects-centered .project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.projects-centered .project-info{
  display:flex;
  flex-direction:column;
  flex:1;
}
.projects-centered .project-info em{margin-top:auto;padding-top:16px}

.gallery{align-items:stretch}
.shot{
  display:flex;
  flex-direction:column;
  height:100%;
}
.shot-media{
  width:100%;
  aspect-ratio:16/10;
  min-height:0;
  height:auto;
  overflow:hidden;
  padding:12px;
  background:#f8fafc;
}
.shot-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.shot figcaption{
  min-height:68px;
  margin-top:auto;
}

.hero-visual{isolation:isolate}
.hero-focus.portrait-focus{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
  width:min(390px,calc(100% - 20px));
  max-width:none;
  margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.hero-focus.portrait-focus>div{
  padding:11px 12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(203,213,225,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 38px rgba(15,35,70,.18);
}
.home-light.theme-dark .hero-focus.portrait-focus>div{
  background:rgba(13,23,41,.9);
  border-color:rgba(255,255,255,.12);
}
.hero-visual .f1{left:-1%;top:17%}
.hero-visual .f2{right:-1%;top:33%;bottom:auto}

@media(max-width:900px){
  .hero-focus.portrait-focus{bottom:0;width:min(390px,calc(100% - 18px))}
  .projects-centered .project-image{height:180px;flex-basis:180px}
}
@media(max-width:620px){
  .hero-visual{padding-bottom:120px}
  .hero-focus.portrait-focus{
    bottom:12px;
    width:min(330px,calc(100% - 8px));
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hero-focus.portrait-focus>div{padding:10px}
  .hero-focus.portrait-focus strong{font-size:11px}
  .projects-centered .project-image{height:172px;flex-basis:172px}
  .shot-media{aspect-ratio:16/10;min-height:0;padding:8px}
  .shot figcaption{min-height:64px}
}


/* Hero simplification, elevated portrait and three-column work samples */
.hero-visual .portrait{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 34px 34px rgba(15,35,70,.22)) drop-shadow(0 12px 14px rgba(37,99,235,.16));
}
.hero-visual .portrait::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:8%;
  right:8%;
  bottom:-18px;
  height:44px;
  border-radius:50%;
  background:rgba(15,35,70,.22);
  filter:blur(22px);
}
.hero-visual .portrait img{
  box-shadow:0 30px 70px rgba(15,35,70,.24),0 12px 28px rgba(37,99,235,.16);
}
.hero-focus.portrait-focus{
  width:min(460px,calc(100% - 18px));
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.hero-focus.portrait-focus>div{
  min-width:0;
  text-align:left;
}
.hero-focus.portrait-focus strong{font-size:11px}
.hero-visual .floating{display:none!important}
.projects,
.projects-centered{
  width:100%;
  max-width:1180px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.projects-centered .project{min-width:0}
.projects-centered .project-image{height:180px;flex-basis:180px}
.project-info{padding:17px}
@media(max-width:980px){
  .projects,.projects-centered{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .hero-focus.portrait-focus{width:min(430px,calc(100% - 16px))}
}
@media(max-width:620px){
  .projects,.projects-centered{grid-template-columns:1fr;max-width:420px}
  .hero-focus.portrait-focus{
    width:min(350px,calc(100% - 8px));
    grid-template-columns:1fr;
    bottom:8px;
  }
  .hero-visual{padding-bottom:185px}
  .hero-focus.portrait-focus>div{padding:9px 11px}
  .hero-focus.portrait-focus span{margin-bottom:2px}
}

/* Reference-inspired portrait floats and expanded platform list */
.hero-visual{overflow:visible}
.hero-float{
  position:absolute;
  z-index:5;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(203,213,225,.92);
  border-radius:18px;
  padding:15px 17px;
  box-shadow:0 20px 48px rgba(15,35,70,.20),0 6px 16px rgba(37,99,235,.10);
  backdrop-filter:blur(16px);
  color:#0f172a;
}
.hero-float strong{display:block;font-size:14px;line-height:1.25}
.hero-float span{display:block;margin-top:3px;font-size:10px;color:#64748b;line-height:1.35}
.hero-float-left{left:-5%;top:24%;min-width:126px}
.hero-float-focus{left:4%;bottom:8%;min-width:245px}
.hero-float-focus>span{text-transform:uppercase;letter-spacing:.14em;font-size:9px;margin:0 0 7px;color:#64748b}
.hero-float-focus strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#0ea5e9;font-weight:600;white-space:nowrap}
.hero-float-right{right:-7%;top:48%;bottom:auto;transform:translateY(-50%);min-width:112px}
.home-light.theme-dark .hero-float{background:rgba(13,23,41,.92);border-color:rgba(255,255,255,.12);color:#f8fafc;box-shadow:0 22px 52px rgba(0,0,0,.38)}
.home-light.theme-dark .hero-float span{color:#94a3b8}
.home-light.theme-dark .hero-float-focus strong{color:#38bdf8}

.tool-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:20px auto 0;max-width:980px}
.tool-tags span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045);font-size:10px;color:#c7d2e3;box-shadow:0 6px 16px rgba(15,35,70,.06)}
.home-light .tool-tags span{background:#fff;color:#475569;border-color:#dbe3ef}

@media(max-width:900px){
  .hero-float-left{left:0;top:22%}
  .hero-float-right{right:0;top:48%;bottom:auto;transform:translateY(-50%)}
  .hero-float-focus{left:3%;bottom:9%}
}
@media(max-width:620px){
  .hero-visual{padding-bottom:100px}
  .hero-float{padding:12px 13px;border-radius:15px}
  .hero-float-left{left:-2%;top:20%;min-width:110px}
  .hero-float-focus{left:1%;bottom:30px;min-width:205px}
  .hero-float-focus strong{font-size:9px;white-space:normal}
  .hero-float-right{right:-2%;top:48%;bottom:auto;transform:translateY(-50%);min-width:98px}
  .tool-tags{gap:7px}
  .tool-tags span{font-size:9px;padding:7px 10px}
}

/* Experience placement and card sizing update */
#experience{padding-top:100px}
.experience-grid{grid-template-columns:.82fr 1.18fr;gap:22px;align-items:stretch}
.experience-list{gap:12px}
.job{min-height:92px;padding:20px 22px;grid-template-columns:72px 54px 1fr;align-items:center;gap:15px;border-radius:18px;box-shadow:0 12px 30px rgba(15,35,70,.08)}
.job .company-logo{width:50px;height:40px;padding:6px;border-radius:10px}
.job>span{font-size:11px}
.job strong{font-size:14px;line-height:1.35}
.job small{font-size:11px;display:block;margin-top:3px}
.job-panel{min-height:440px;padding:40px;border-radius:22px;box-shadow:0 20px 46px rgba(15,35,70,.11)}
.job-panel h3{font-size:29px}
.job-panel .company{font-size:13px}
.job-panel ul{margin:28px 0}
.job-panel li{font-size:14px;margin:11px 0;line-height:1.65}
@media(max-width:900px){.experience-grid{grid-template-columns:1fr}.job-panel{min-height:380px}.job{min-height:86px}}
@media(max-width:560px){.job{grid-template-columns:58px 44px 1fr;padding:17px 16px;gap:11px}.job .company-logo{width:42px;height:34px}.job-panel{padding:26px;min-height:350px}}

/* Strong, visible interaction states */
.interactive-card{
  position:relative;
  cursor:pointer;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background-color .24s ease,filter .24s ease;
  will-change:transform;
}
.interactive-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  box-shadow:0 0 0 2px rgba(37,99,235,.24),0 0 32px rgba(56,189,248,.22);
  transition:opacity .24s ease;
}
.interactive-card:hover,
.interactive-card:focus-visible{
  transform:translateY(-7px) scale(1.015);
  border-color:rgba(37,99,235,.72)!important;
  box-shadow:0 24px 58px rgba(15,35,70,.22),0 10px 24px rgba(37,99,235,.16)!important;
  outline:none;
}
.interactive-card:hover::after,
.interactive-card:focus-visible::after{opacity:1}
.interactive-card:focus-visible{outline:3px solid rgba(56,189,248,.42);outline-offset:4px}

/* Navigation and action buttons */
.links a{position:relative;transition:color .2s ease,transform .2s ease}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--sky));transition:right .24s ease}
.links a:hover,.links a:focus-visible{color:var(--blue);transform:translateY(-1px);outline:none}
.links a:hover::after,.links a:focus-visible::after{right:0}
.btn:hover,.btn:focus-visible{background:rgba(37,99,235,.10);color:var(--blue)}
.btn.primary:hover,.btn.primary:focus-visible{background:#1d4ed8;color:#fff;filter:saturate(1.08)}
.social-icon:hover img,.social-icon:focus-visible img{transform:scale(1.14) rotate(-2deg)}
.social-icon img{transition:transform .22s ease}

/* Hero floating cards are now clickable links */
.hero-float{display:block;color:inherit;text-decoration:none}
.hero-float:hover strong,.hero-float:focus-visible strong{color:var(--blue)}
.hero-float:hover span,.hero-float:focus-visible span{color:#334155}
.home-light.theme-dark .hero-float:hover span,.home-light.theme-dark .hero-float:focus-visible span{color:#cbd5e1}

/* Experience cards */
.job{overflow:hidden}
.job::before{content:"→";position:absolute;right:15px;top:50%;transform:translate(-8px,-50%);opacity:0;color:var(--blue);font-weight:800;font-size:18px;transition:opacity .22s ease,transform .22s ease}
.job:hover::before,.job:focus-visible::before,.job.active::before{opacity:1;transform:translate(0,-50%)}
.job:hover .company-logo,.job:focus-visible .company-logo{transform:scale(1.09)}
.company-logo{transition:transform .22s ease}
.job.active{box-shadow:0 18px 42px rgba(37,99,235,.17);border-color:rgba(37,99,235,.72)}

/* Certificate cards */
.cert{isolation:isolate}
.cert img{transition:transform .35s ease,filter .35s ease}
.cert:hover img,.cert:focus-visible img{transform:scale(1.045);filter:saturate(1.08) contrast(1.03)}
.cert .hover-cue,.project .hover-cue{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--blue);opacity:.68;transition:opacity .22s ease,transform .22s ease}
.cert .hover-cue::after,.project .hover-cue::after{content:"→";transition:transform .22s ease}
.cert:hover .hover-cue,.cert:focus-visible .hover-cue,.project:hover .hover-cue,.project:focus-visible .hover-cue{opacity:1;transform:translateX(2px)}
.cert:hover .hover-cue::after,.cert:focus-visible .hover-cue::after,.project:hover .hover-cue::after,.project:focus-visible .hover-cue::after{transform:translateX(5px)}

/* Work sample cards */
.project{isolation:isolate}
.project-image{position:relative}
.project-image::after{content:"View case study";position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(15,23,42,.06),rgba(15,23,42,.70));color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;opacity:0;transition:opacity .28s ease}
.project-image img{transition:transform .38s ease,filter .38s ease}
.project:hover .project-image::after,.project:focus-visible .project-image::after{opacity:1}
.project:hover .project-image img,.project:focus-visible .project-image img{transform:scale(1.055);filter:saturate(1.08)}

/* Case-study gallery thumbnails */
.shot{position:relative;cursor:zoom-in;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.shot::after{content:"Click to enlarge";position:absolute;inset:0 0 auto 0;height:56%;display:grid;place-items:center;background:rgba(15,23,42,.56);color:#fff;font-size:11px;font-weight:800;opacity:0;transition:opacity .24s ease;pointer-events:none}
.shot:hover,.shot:focus-visible{transform:translateY(-5px);border-color:#60a5fa;box-shadow:0 22px 45px rgba(30,64,175,.18);outline:none}
.shot:hover::after,.shot:focus-visible::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .interactive-card,.links a,.links a::after,.social-icon img,.company-logo,.cert img,.project-image img,.hover-cue,.hover-cue::after,.shot{transition:none!important}
  .interactive-card:hover,.interactive-card:focus-visible,.shot:hover,.shot:focus-visible{transform:none}
}

/* Hero overlay layout correction: keep cards around portrait without stacking */
.hero-visual{
  min-height:540px;
  isolation:isolate;
}
.hero-float-left{
  left:-4%;
  top:25%;
}
.hero-float-focus{
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
}
.hero-float-right{
  right:-5%;
  top:47%;
  bottom:auto;
  transform:none;
}
.hero-float-focus:hover,
.hero-float-focus:focus-visible{
  transform:translateX(-50%) translateY(-7px) scale(1.015);
}
.hero-float-right:hover,
.hero-float-right:focus-visible,
.hero-float-left:hover,
.hero-float-left:focus-visible{
  transform:translateY(-7px) scale(1.015);
}

@media(max-width:900px){
  .hero-visual{
    width:min(470px,100%);
    min-height:500px;
    margin-inline:auto;
    padding-bottom:0;
  }
  .hero-float-left{left:0;top:23%}
  .hero-float-focus{left:50%;bottom:4%}
  .hero-float-right{right:0;top:47%}
}

@media(max-width:620px){
  .hero-visual{
    width:min(360px,100%);
    min-height:400px;
    padding:0;
    margin:6px auto 0;
  }
  .hero-visual .portrait{
    width:min(270px,76vw);
    margin:auto;
  }
  .hero-float{
    padding:11px 13px;
    border-radius:14px;
  }
  .hero-float-left{
    left:0;
    top:21%;
    min-width:104px;
  }
  .hero-float-left strong{font-size:12px}
  .hero-float-focus{
    left:50%;
    bottom:0;
    min-width:min(230px,72vw);
    text-align:left;
  }
  .hero-float-focus strong{
    font-size:8.5px;
    white-space:normal;
  }
  .hero-float-right{
    right:0;
    top:49%;
    min-width:94px;
  }
  .hero-float-right strong{font-size:12px}
}

@media(max-width:390px){
  .hero-visual{min-height:380px}
  .hero-visual .portrait{width:min(250px,73vw)}
  .hero-float-left{left:-2%;top:20%}
  .hero-float-right{right:-2%;top:47%}
  .hero-float-focus{bottom:0;min-width:min(215px,74vw)}
}

/* Final hero composition fix: clickable cards must remain absolutely positioned. */
.hero-visual .hero-float.interactive-card{
  position:absolute;
  z-index:8;
}
.hero-visual .hero-float-left{
  left:-5%;
  top:58%;
}
.hero-visual .hero-float-focus{
  left:50%;
  bottom:2%;
  width:min(330px,78%);
  min-width:0;
  transform:translateX(-50%);
}
.hero-visual .hero-float-right{
  right:-5%;
  top:61%;
  bottom:auto;
  transform:none;
}
.hero-visual .hero-float-left:hover,
.hero-visual .hero-float-left:focus-visible,
.hero-visual .hero-float-right:hover,
.hero-visual .hero-float-right:focus-visible{
  transform:translateY(-7px) scale(1.015);
}
.hero-visual .hero-float-focus:hover,
.hero-visual .hero-float-focus:focus-visible{
  transform:translateX(-50%) translateY(-7px) scale(1.015);
}
@media(max-width:900px){
  .hero-visual .hero-float-left{left:-2%;top:56%}
  .hero-visual .hero-float-right{right:-2%;top:60%}
  .hero-visual .hero-float-focus{bottom:2%;width:min(320px,78%)}
}
@media(max-width:620px){
  .hero-visual{min-height:410px;padding-bottom:0}
  .hero-visual .hero-float-left{left:-1%;top:54%}
  .hero-visual .hero-float-right{right:-1%;top:59%}
  .hero-visual .hero-float-focus{bottom:1%;width:min(235px,72%)}
}

/* Clean hero portrait: no floating cards */
.hero-visual{padding-bottom:0!important;overflow:visible!important;min-height:500px!important}
.hero-visual .hero-float,.hero-visual .floating{display:none!important}
.hero-visual .portrait{
  position:relative;
  width:min(340px,78vw);
  aspect-ratio:4/5;
  border:1px solid rgba(37,99,235,.28)!important;
  border-radius:32px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 20px 48px rgba(15,23,42,.14),0 38px 90px rgba(37,99,235,.16)!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.hero-visual .portrait:hover{
  transform:translateY(-4px);
  border-color:rgba(37,99,235,.48)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.95),0 26px 58px rgba(15,23,42,.17),0 44px 100px rgba(37,99,235,.20)!important;
}
.hero-visual .portrait img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hero-visual{min-height:430px!important;padding-bottom:0!important}}
@media(max-width:560px){.hero-visual{min-height:370px!important}.hero-visual .portrait{width:min(280px,78vw);border-radius:26px}}

/* Light and dark theme support for all case-study subpages */
.case-page{
  --case-bg:#f6f8fc;
  --case-surface:#ffffff;
  --case-surface-soft:#f8fafc;
  --case-text:#101827;
  --case-muted:#5c687b;
  --case-line:#dfe6ef;
  --case-nav:rgba(255,255,255,.88);
  --case-shadow:0 13px 32px rgba(24,40,72,.09);
  background:var(--case-bg);
  color:var(--case-text);
  transition:background-color .28s ease,color .28s ease;
}
.case-page.theme-dark{
  --case-bg:#07101f;
  --case-surface:#0d1729;
  --case-surface-soft:#101d33;
  --case-text:#f7f9fc;
  --case-muted:#a6b3c7;
  --case-line:rgba(255,255,255,.11);
  --case-nav:rgba(7,16,31,.86);
  --case-shadow:0 18px 42px rgba(0,0,0,.28);
  background:radial-gradient(circle at 15% 0,rgba(37,99,235,.14),transparent 28%),var(--case-bg);
}
.case-page .nav-wrap{background:var(--case-nav);border-color:var(--case-line)}
.case-page .brand,.case-page .links a,.case-page .icon-btn,.case-page .menu{color:var(--case-text)}
.case-page .case-cover,
.case-page .case-meta div,
.case-page .case-list article,
.case-page .shot,
.case-page .light-btn.secondary{background:var(--case-surface);border-color:var(--case-line);color:var(--case-text)}
.case-page .case-cover,
.case-page .case-meta div,
.case-page .case-list article,
.case-page .shot{box-shadow:var(--case-shadow)}
.case-page .case-section,.case-page .case-footer{border-color:var(--case-line)}
.case-page .case-intro p,
.case-page .case-copy,
.case-page .case-list p,
.case-page .shot figcaption,
.case-page .case-footer{color:var(--case-muted)}
.case-page .case-meta strong,
.case-page .case-section-head h2,
.case-page h1,
.case-page h3{color:var(--case-text)}
.case-page .case-theme-toggle{
  flex:0 0 auto;
  cursor:pointer;
  border:1px solid var(--case-line);
  background:var(--case-surface);
  color:var(--case-text);
  box-shadow:0 8px 22px rgba(15,35,70,.08);
}
.case-page .case-theme-toggle:hover,
.case-page .case-theme-toggle:focus-visible{
  transform:translateY(-2px);
  border-color:#60a5fa;
  box-shadow:0 14px 30px rgba(37,99,235,.18);
  outline:3px solid rgba(56,189,248,.28);
  outline-offset:2px;
}
.case-page.theme-dark .case-theme-toggle{box-shadow:0 10px 26px rgba(0,0,0,.24)}
.case-page.theme-dark .light-btn.secondary:hover,
.case-page.theme-dark .light-btn.secondary:focus-visible{background:#14223a;color:#fff;border-color:#60a5fa}
.case-page.theme-dark .image-modal-card{background:#0d1729;color:#f7f9fc;border-color:rgba(255,255,255,.12)}
.case-page.theme-dark .image-modal{background:rgba(2,6,23,.88)}
@media(max-width:900px){
  .case-page .links{background:var(--case-surface)}
  .case-page .links a{color:var(--case-text)}
}

/* =========================================================
   Mobile-first optimisation pass
   ========================================================= */
html{scroll-padding-top:78px;overflow-x:hidden}
body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,.btn,.icon-btn,.menu,.social-icon,.job,.cert,.project,.back-to-top{touch-action:manipulation}

/* More reliable touch targets */
.icon-btn,.menu,.social-icon,.back-to-top{min-width:44px;min-height:44px}
.btn{min-height:46px}
.links a{min-height:44px;display:flex;align-items:center}

/* Mobile navigation drawer */
@media(max-width:900px){
  .nav-wrap{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
  .nav{min-height:68px}
  .menu{display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:12px}
  .links{
    position:fixed!important;
    inset:68px 12px auto 12px;
    z-index:1000;
    display:grid!important;
    gap:4px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.96);
    box-shadow:0 24px 60px rgba(15,23,42,.18);
    backdrop-filter:blur(18px);
    transform:translateY(-12px) scale(.98);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }
  body.theme-dark .links{background:rgba(7,16,31,.96);border-color:rgba(255,255,255,.12)}
  .links.open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .links a{width:100%;padding:11px 14px;border-radius:11px;justify-content:center;font-size:14px}
  .links a:hover,.links a:focus-visible{background:rgba(37,99,235,.10)}
}

/* Tablet */
@media(max-width:900px){
  .container{width:min(100% - 40px,1120px)}
  .hero{grid-template-columns:1fr;gap:36px;padding-top:112px;padding-bottom:74px;text-align:center}
  .hero-copy{max-width:700px;margin-inline:auto}
  .hero h1{font-size:clamp(48px,9vw,72px);line-height:.98}
  .hero .intro{max-width:620px;margin-inline:auto}
  .hero .actions,.hero .social{justify-content:center}
  .hero-visual{order:-1;min-height:0!important;display:grid;place-items:center}
  .hero-visual .portrait{width:min(300px,56vw)}
  .about-grid,.experience-grid{grid-template-columns:1fr}
  .experience-list{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .job-panel{min-height:0}
  .certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .wide{grid-column:1/-1}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-inner{padding:64px 36px}
  .case-intro,.case-overview,.case-list{grid-template-columns:1fr!important}
  .case-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .case-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Phones */
@media(max-width:620px){
  :root{--mobile-pad:18px}
  html{scroll-padding-top:72px}
  .container{width:calc(100% - (var(--mobile-pad) * 2))}
  .nav{min-height:64px}
  .brand span{display:none}
  .brand img{width:34px;height:34px}
  .nav-actions{gap:8px}
  .icon-btn,.menu{border-radius:11px}
  .links{inset:64px var(--mobile-pad) auto var(--mobile-pad)}

  .hero{padding-top:92px;padding-bottom:52px;gap:28px}
  .hero-visual .portrait{width:min(238px,72vw);border-radius:24px}
  .hero h1{font-size:clamp(40px,12vw,56px);letter-spacing:-.055em}
  .hero .role{font-size:15px;line-height:1.55}
  .hero .intro{font-size:15px;line-height:1.65}
  .eyebrow{font-size:10px;justify-content:center}
  .actions{display:grid!important;grid-template-columns:1fr;width:100%;gap:10px}
  .actions .btn{width:100%;justify-content:center;padding:12px 16px}
  .social{gap:10px}
  .social-icon{width:46px;height:46px}
  .ticker{font-size:11px;white-space:nowrap;overflow:hidden}

  .section{padding-block:72px}
  .section-head{margin-bottom:30px;text-align:left}
  .section-head h2{font-size:clamp(34px,10vw,46px);line-height:1.02}
  .section-head p{font-size:14px;line-height:1.6;max-width:34ch}
  .about-main{padding:24px}
  .about-main h3{font-size:22px}
  .about-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .about-stats>div{min-height:112px;padding:18px 14px}
  .about-stats strong{font-size:24px}

  .experience-list{grid-template-columns:1fr;gap:10px}
  .job{min-height:92px;padding:16px;grid-template-columns:54px 44px 1fr;gap:10px;text-align:left}
  .job span{font-size:10px}
  .company-logo{width:40px;height:40px;object-fit:contain}
  .job strong{font-size:14px}
  .job small{font-size:11px}
  .job-panel{padding:24px}
  .job-panel h3{font-size:24px}
  .job-panel li{font-size:13px;line-height:1.55}
  .tag-row,.tags,.tool-tags{gap:7px}
  .tag-row b,.tags b,.tool-tags span{font-size:10px;padding:7px 9px}

  .education{padding:24px;align-items:flex-start;gap:16px}
  .education strong{font-size:34px}
  .certs{grid-template-columns:1fr;gap:14px}
  .cert{grid-template-columns:112px 1fr;min-height:150px}
  .cert img{height:100%;object-fit:cover}
  .cert h3{font-size:16px}
  .cert .hover-cue{font-size:10px}

  .bento{grid-template-columns:1fr;gap:14px}
  .bento-card,.bento .wide{grid-column:auto;padding:24px}
  .logo-cloud{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tech-logo{min-height:92px;padding:12px 8px}
  .tech-logo img{width:30px;height:30px}
  .tech-logo span{font-size:10px}

  .projects{grid-template-columns:1fr!important;gap:18px}
  .project-image{height:210px!important}
  .project-info{padding:21px}
  .project-info h3{font-size:21px}
  .project-info p{font-size:13px;line-height:1.55}
  .project-image::after{display:none}
  .project:hover .project-image img,.project:focus-visible .project-image img{transform:none}

  .contact{padding-block:72px}
  .contact-inner{padding:38px 22px;border-radius:24px;text-align:center}
  .contact-inner h2{font-size:clamp(34px,10vw,48px)}
  .contact-inner .actions{margin-top:24px}
  footer{flex-direction:column;align-items:center;text-align:center;gap:12px;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  footer div{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .back-to-top{right:max(14px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:48px;height:48px}

  /* Case-study pages */
  .case-page .nav{min-height:64px}
  .case-page .case-hero{padding-top:94px!important;padding-bottom:42px!important}
  .case-page h1{font-size:clamp(36px,11vw,52px)!important;line-height:1.02!important}
  .case-page .case-intro{gap:24px!important}
  .case-page .case-meta{grid-template-columns:1fr!important;gap:10px!important}
  .case-page .case-meta div{padding:17px!important}
  .case-page .case-section{padding-block:56px!important}
  .case-page .case-section-head{margin-bottom:24px!important}
  .case-page .case-section-head h2{font-size:30px!important}
  .case-page .case-list{gap:12px!important}
  .case-page .case-list article{padding:21px!important}
  .case-page .case-gallery{grid-template-columns:1fr!important;gap:16px!important}
  .case-page .shot{border-radius:17px!important}
  .case-page .shot img{aspect-ratio:16/10!important;object-fit:contain!important;background:var(--case-surface-soft)}
  .case-page .shot::after{display:none}
  .case-page .case-footer{padding-bottom:calc(26px + env(safe-area-inset-bottom))!important}
  .image-modal{padding:12px!important}
  .image-modal-card{max-height:92vh!important;border-radius:18px!important}
  .image-modal-card img{max-height:72vh!important}
}

/* Small phones */
@media(max-width:390px){
  :root{--mobile-pad:14px}
  .hero{padding-top:84px}
  .hero-visual .portrait{width:min(216px,70vw)}
  .hero h1{font-size:39px}
  .hero .role{font-size:14px}
  .about-stats{grid-template-columns:1fr}
  .about-stats>div{min-height:92px}
  .job{grid-template-columns:48px 38px 1fr;padding:14px}
  .company-logo{width:34px;height:34px}
  .cert{grid-template-columns:96px 1fr}
  .logo-cloud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-image{height:190px!important}
}

/* Hover styles should not stick on touch devices */
@media(hover:none){
  .interactive-card:hover,.portrait:hover,.shot:hover{transform:none!important}
  .project-image::after,.shot::after{display:none!important}
}
@media(max-width:900px){body.menu-open{overflow:hidden}}


/* Mobile ticker and stacked experience details */
.ticker-track{display:flex;justify-content:center;min-width:max-content}
.ticker-track span{display:block;white-space:nowrap;padding:15px 0;color:#526176;font-size:12px;letter-spacing:.05em}
.ticker-track span+span{display:none}
body.theme-dark .ticker-track span{color:#b9c5d7}

@keyframes mobileTickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media(max-width:620px){
  .ticker{overflow:hidden;width:100%}
  .ticker-track{
    width:max-content;
    justify-content:flex-start;
    will-change:transform;
    animation:mobileTickerScroll 20s linear infinite;
  }
  .ticker-track span{display:block;padding:13px 26px 13px 0;font-size:11px}
  .ticker-track span+span{display:block}
  .ticker-track i{margin:0 14px}

  /* On phones, the selected role summary sits immediately below that role. */
  .experience-list{display:flex!important;flex-direction:column}
  .experience-list .job-panel{
    order:initial;
    width:100%;
    margin:2px 0 10px;
    border-radius:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none!important;transform:none!important}
  .ticker-track span+span{display:none!important}
}

/* Fixed, steady navigation and animated hamburger */
body{padding-top:72px}
.nav-wrap{
  position:fixed!important;
  inset:0 0 auto 0;
  width:100%;
  z-index:1000;
  transition:box-shadow .25s ease,background-color .25s ease,border-color .25s ease;
}
.nav-wrap.scrolled{box-shadow:0 10px 30px rgba(15,23,42,.12)}
.home-light .nav-wrap{background:rgba(255,255,255,.84)}
.home-light.theme-dark .nav-wrap{background:rgba(7,16,31,.84)}
.menu{
  width:44px;
  height:44px;
  padding:0!important;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.menu span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease,width .25s ease;
  transform-origin:center;
}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0;width:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .menu{display:inline-flex!important}
  .links{
    position:fixed!important;
    top:72px!important;
    left:auto!important;
    right:0!important;
    bottom:0!important;
    width:min(340px,88vw)!important;
    padding:24px!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    transform:translateX(105%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .28s ease,opacity .22s ease,visibility .22s ease;
    box-shadow:-18px 0 45px rgba(15,23,42,.18);
    overflow-y:auto;
  }
  .links.open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .links a{min-height:48px;display:flex;align-items:center;padding:0 14px;border-radius:12px}
  .links a:hover,.links a:focus-visible{background:rgba(37,99,235,.10)}
  body.menu-open::after{
    content:"";
    position:fixed;
    inset:72px 0 0;
    z-index:900;
    background:rgba(15,23,42,.42);
    backdrop-filter:blur(2px);
  }
  .nav-wrap{z-index:1001}
}
@media(prefers-reduced-motion:reduce){.menu span,.links{transition:none!important}}

/* Strong, visible interactions on case-study pages */
.case-page .light-btn,
.case-page .case-meta > div,
.case-page .case-list article,
.case-page .shot,
.case-page .case-footer a,
.case-page .links a,
.case-page .brand,
.case-page .icon-btn,
.case-page .menu{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease,color .22s ease,opacity .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .case-page .light-btn:hover,
  .case-page .case-footer a:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(37,99,235,.24);
  }
  .case-page .light-btn.secondary:hover{
    border-color:#2563eb;
    color:#2563eb;
    background:#eff6ff;
  }
  .case-page .case-meta > div:hover,
  .case-page .case-list article:hover{
    transform:translateY(-5px);
    border-color:rgba(37,99,235,.55);
    box-shadow:0 18px 38px rgba(15,23,42,.14);
  }
  .case-page .shot:hover{
    transform:translateY(-6px);
    border-color:rgba(37,99,235,.62);
    box-shadow:0 22px 48px rgba(15,23,42,.18);
  }
  .case-page .shot:hover .shot-media img{transform:scale(1.035)}
  .case-page .links a:hover{color:#2563eb;transform:translateY(-1px)}
  .case-page .brand:hover{transform:translateY(-2px)}
  .case-page .icon-btn:hover,.case-page .menu:hover{
    transform:translateY(-2px);
    border-color:#2563eb;
    box-shadow:0 10px 24px rgba(37,99,235,.18);
  }
}
.case-page .shot-media{position:relative;overflow:hidden}
.case-page .shot-media img{transition:transform .28s ease}
.case-page .shot-media::after{
  content:'View larger';
  position:absolute;
  inset:auto 12px 12px auto;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.82);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  opacity:0;
  transform:translateY(5px);
  transition:.22s ease;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){.case-page .shot:hover .shot-media::after{opacity:1;transform:none}}
.case-page a:focus-visible,
.case-page button:focus-visible,
.case-page [role="button"]:focus-visible{
  outline:3px solid rgba(37,99,235,.42);
  outline-offset:4px;
}
.case-page .shot:active,
.case-page .light-btn:active{transform:translateY(0) scale(.985)}

/* Mobile menu closes on page movement and never stays expanded while scrolling. */
@media(max-width:900px){
  body.menu-open{overflow:hidden}
  .case-page .case-nav{position:relative}
}

/* Mobile navigation rebuild: viewport-wide off-canvas panel */
@media (max-width:900px){
  body.menu-open{overflow:hidden;touch-action:none}
  .nav-wrap{z-index:1200!important}
  .nav{height:72px}
  .brand{position:relative;z-index:1202;min-width:44px}
  .brand img{display:none!important}
  .brand span{display:block!important;font-size:18px;letter-spacing:-.04em;color:var(--text)}
  .home-light .brand span{color:#0f172a}
  .home-light.theme-dark .brand span,.case-page.theme-dark .brand span{color:#f8fafc}
  .menu,.icon-btn{position:relative;z-index:1202}
  .case-nav>.light-btn{display:none!important}

  body>.links.mobile-portal{
    position:fixed!important;
    inset:72px 0 0 0!important;
    width:100vw!important;
    max-width:none!important;
    height:calc(100dvh - 72px)!important;
    min-height:calc(100vh - 72px)!important;
    margin:0!important;
    padding:max(34px,env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:8px!important;
    background:rgba(255,255,255,.985)!important;
    color:#0f172a!important;
    box-shadow:none!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    transform:translateX(100%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    z-index:1190!important;
    transition:transform .3s cubic-bezier(.22,.8,.22,1),opacity .2s ease,visibility .2s ease!important;
  }
  body.theme-dark>.links.mobile-portal,
  body.home-light.theme-dark>.links.mobile-portal,
  body.case-page.theme-dark>.links.mobile-portal{
    background:rgba(7,16,31,.985)!important;
    color:#f8fafc!important;
  }
  body>.links.mobile-portal.open{
    transform:translateX(0)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  body>.links.mobile-portal a{
    width:100%;
    min-height:58px!important;
    padding:0 18px!important;
    display:flex!important;
    align-items:center!important;
    border:1px solid rgba(148,163,184,.22);
    border-radius:15px!important;
    color:inherit!important;
    background:rgba(248,250,252,.82);
    font-size:15px!important;
    font-weight:700!important;
    transform:none!important;
  }
  body.theme-dark>.links.mobile-portal a,
  body.home-light.theme-dark>.links.mobile-portal a,
  body.case-page.theme-dark>.links.mobile-portal a{
    background:rgba(255,255,255,.045);
    border-color:rgba(255,255,255,.1);
  }
  body>.links.mobile-portal a::after{display:none!important}
  body>.links.mobile-portal a:hover,
  body>.links.mobile-portal a:focus-visible,
  body>.links.mobile-portal a:active{
    background:rgba(37,99,235,.11)!important;
    border-color:rgba(37,99,235,.45)!important;
    color:#2563eb!important;
    outline:none;
  }
  body.menu-open::after{display:none!important}
}

/* Static case-study cards should not suggest clickability. */
.case-page .case-meta > div,
.case-page .case-list article{
  cursor:default;
  transform:none!important;
}
@media (hover:hover) and (pointer:fine){
  .case-page .case-meta > div:hover,
  .case-page .case-list article:hover{
    transform:none!important;
    border-color:var(--case-line)!important;
    box-shadow:var(--case-shadow)!important;
  }
}