:root { --navy:#162c46; --teal:#0c8791; --ink:#26384a; --muted:#627284; --line:#dfe8eb; --soft:#f4f8f9; --white:#fff; --font-geist-sans:Arial; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--font-geist-sans),Arial,Helvetica,sans-serif; }
a { color:inherit; }
.site-header { width:min(1120px,calc(100% - 40px)); min-height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.nameplate { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:white; font-size:13px; font-weight:800; text-decoration:none; }
nav { display:flex; align-items:center; gap:24px; font-size:14px; font-weight:650; } nav a { text-decoration:none; }
nav a:hover,nav a:focus-visible,.text-link:hover,.footer-links a:hover { color:var(--teal); }
.resume-link,.primary-button { border-radius:7px; background:var(--navy); color:white; padding:11px 16px; }
.resume-link:hover,.resume-link:focus-visible,.primary-button:hover,.primary-button:focus-visible { background:var(--teal); color:white; }
.hero,.work,.expertise,footer { width:min(1040px,calc(100% - 40px)); margin-inline:auto; }
.hero { padding:96px 0 104px; }
.eyebrow { margin:0 0 13px; color:var(--teal); font-size:12px; line-height:1.4; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:22px; color:var(--navy); font-size:clamp(54px,9vw,88px); line-height:.96; letter-spacing:-.055em; }
.intro { max-width:760px; margin-bottom:30px; font-size:clamp(20px,3vw,27px); line-height:1.42; letter-spacing:-.02em; }
.hero-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .primary-button { display:inline-block; text-decoration:none; font-weight:750; }
.text-link { color:var(--navy); font-weight:650; text-underline-offset:4px; }
.work { padding-bottom:90px; } .section-heading { display:grid; grid-template-columns:1fr 1fr; gap:8px 48px; margin-bottom:34px; }
.section-heading .eyebrow { grid-column:1/-1; margin-bottom:0; }
.section-heading h2,.expertise h2 { margin:0; color:var(--navy); font-size:clamp(29px,4vw,40px); letter-spacing:-.035em; }
.section-heading>p:last-child { margin:2px 0 0; color:var(--muted); line-height:1.6; }
.project-list { display:grid; gap:22px; } .project-card { display:grid; grid-template-columns:minmax(260px,36%) 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; }
.project-image-link { min-height:100%; background:var(--soft); display:grid; place-items:center; overflow:hidden; } .project-card img { width:100%; height:100%; min-height:250px; object-fit:contain; display:block; }
.project-content { padding:28px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.project-content h3 { margin-bottom:6px; color:var(--navy); font-size:clamp(23px,3vw,31px); line-height:1.1; letter-spacing:-.025em; }
.project-meta { margin-bottom:20px; color:var(--teal); font-size:13px; line-height:1.5; font-weight:750; } .project-meta span { color:#a2adb7; margin:0 4px; }
.project-details { display:grid; gap:3px; margin:10px 0 20px; font-size:13px; line-height:1.45; }
.project-details p { margin:0; color:var(--muted); font-weight:650; }
.project-details p:first-child { color:var(--teal); font-weight:800; }
.project-description { margin-bottom:18px; line-height:1.65; }
.focus-list { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px; padding:0; list-style:none; }
.focus-list li { padding:6px 9px; border-radius:5px; background:var(--soft); color:var(--muted); font-size:12px; font-weight:650; }
.store-link { margin-top:auto; color:var(--navy); font-size:13px; font-weight:800; text-decoration-color:var(--teal); text-underline-offset:4px; }
.store-link:hover,.store-link:focus-visible { color:var(--teal); }
.expertise { margin-bottom:92px; padding:48px; border-radius:12px; background:var(--navy); color:white; }
.expertise .eyebrow { color:#65d1d8; } .expertise h2 { color:white; margin-bottom:18px; }
.expertise>p:last-child { max-width:850px; margin-bottom:0; line-height:1.8; color:#dce7ef; }
footer { min-height:112px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); font-size:14px; }
footer>div:first-child { display:flex; flex-direction:column; gap:5px; } footer span { color:var(--muted); }
.footer-links { display:flex; gap:22px; font-weight:650; } .footer-links a { text-underline-offset:4px; }
:focus-visible { outline:3px solid rgba(12,135,145,.35); outline-offset:3px; }
@media(max-width:720px){ .site-header{min-height:68px} nav{gap:16px} nav>a:first-child{display:none}.resume-link{padding:9px 12px}.hero{padding:70px 0 76px}.section-heading{grid-template-columns:1fr}.section-heading .eyebrow{grid-column:auto}.project-card{grid-template-columns:1fr}.project-image-link{aspect-ratio:460/180}.project-card img{min-height:0}.project-content{padding:24px 22px}.expertise{padding:34px 25px}footer{padding:28px 0;align-items:flex-start;gap:24px;flex-direction:column} }
@media(max-width:430px){ .site-header,.hero,.work,.expertise,footer{width:min(100% - 28px,1040px)}nav>a:nth-child(2){display:none}.hero-actions{align-items:flex-start;flex-direction:column}.text-link{font-size:14px}.project-content h3{font-size:24px}.footer-links{flex-direction:column;gap:10px} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}