*{box-sizing:border-box}body{margin:0;background:#fff;color:#111827;font-family:Inter,Arial,sans-serif}h1,h2,h3,p{margin:0}h1,h2,h3,.brand{font-family:'Times New Roman',serif;font-weight:400}header{display:flex;align-items:center;justify-content:space-between;padding:20px 80px;border-bottom:0.5px solid #f0f0f0}.brand{display:flex;align-items:center;gap:12px;font-size:24px}.status{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle,#22c55e 0 27%,#d9fbe5 30% 55%,#f0fdf4 57%)}nav,.social{display:flex;gap:12px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;padding:8px 12px;background:#f3f4f6;border-radius:100px;font-size:14px;line-height:1.4;white-space:nowrap}main{max-width:1440px;margin:auto}.hero,.tasks,.projects,.articles{padding-left:max(40px,calc((100% - 1110px)/2));padding-right:max(40px,calc((100% - 1110px)/2))}.hero{display:flex;gap:64px;padding-top:80px;padding-bottom:60px}.hero h1{font-size:40px;line-height:1.3;flex:1}.expertise{width:400px;flex-shrink:0;padding:20px 44px}.expertise p{font-size:17px;line-height:1.4;margin-top:10px}.muted,.meta{color:#9ca3af}.small{font-size:12px}.dot{display:inline-block;width:10px;height:10px;border-radius:3px;background:#3b82f6;margin-right:8px}.tasks{padding-top:40px;padding-bottom:60px}.tasks>h2,.articles>h2{font-size:32px;line-height:1.4;margin-bottom:32px}.task-card,.project,.article{border:0.5px solid #e8e8e8;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px rgba(18,70,115,.08)}.task-card{padding:32px 40px;display:flex;gap:16px;flex-direction:column}.task-card h3{font-size:24px}.meta{font-size:14px;line-height:1.4;margin-top:4px}.description{font-size:16px;line-height:1.6;color:#6b7280}.task-card .description{font-size:14px}.projects{display:flex;flex-direction:column;gap:32px;padding-top:40px;padding-bottom:60px}.project{display:flex;min-height:336px}.project-copy{flex:1;min-width:0;padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:35px}.tag{display:inline-flex;align-self:flex-start;padding:8px 16px;border:0.5px solid #e5e7eb;border-radius:100px;background:#f3f4f6;font-size:14px;line-height:1.4}.project h2{font-size:36px;line-height:1.2}.project .description{margin-top:16px}.visual{width:50%;min-height:336px;background:#f6f7f8;display:flex;align-items:center;justify-content:center;overflow:hidden}.visual.hiking{background:#0c304e;padding:24px}.visual img{max-width:100%;max-height:100%;object-fit:contain;border-radius:16px}.articles{padding-top:40px;padding-bottom:80px}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.article{padding:32px;min-height:250px}.article h3{font-size:28px;margin-top:24px}.article .description{margin-top:12px}footer{display:flex;justify-content:space-between;align-items:center;padding:32px max(40px,calc((100% - 1110px)/2));border-top:0.5px solid #f0f0f0}footer p{color:#4a5568;font-size:16px}@media(max-width:1000px){header{padding:20px 40px}.hero,.tasks,.projects,.articles{padding-left:40px;padding-right:40px}.hero{flex-direction:column;gap:24px;padding-top:48px;padding-bottom:32px}.hero h1{font-size:36px}.expertise{width:100%;padding:20px}.project{flex-direction:column}.project-copy{padding:32px;gap:24px}.project h2{font-size:32px}.visual{width:100%;height:320px;min-height:320px}.tasks{padding-top:32px;padding-bottom:32px}.projects{padding-top:32px;gap:32px}footer{padding:32px 40px}}@media(max-width:600px){header{padding:20px 16px;display:flex;align-items:flex-start;flex-direction:column;gap:16px}.brand{font-size:20px}.status{width:16px;height:16px}nav .pill,.social .pill{font-size:12px}.hero,.tasks,.projects,.articles{padding-left:16px;padding-right:16px}.hero{padding-top:32px;padding-bottom:32px}.hero h1{font-size:28px;line-height:1.3}.expertise{border-radius:24px;padding:20px}.expertise p{font-size:14px;line-height:1.6}.tasks>h2,.articles>h2{font-size:24px;line-height:1.3;margin-bottom:20px}.task-card{padding:24px;gap:16px}.task-card h3{font-size:20px}.meta{font-size:12px}.project-copy{padding:24px;gap:16px}.project h2{font-size:24px;line-height:1.3}.project .description,.description{font-size:14px}.tag{font-size:12px}.visual{height:240px;min-height:240px}.visual.hiking{padding:16px}.projects{padding-bottom:32px}.article-grid{grid-template-columns:1fr}.article{padding:24px;min-height:190px}.article h3{font-size:24px}footer{padding:40px 16px;align-items:flex-start;flex-direction:column;gap:24px}footer p{font-size:14px}}
/* Shared components and interaction states from the Figma component variants */
a{color:inherit;text-decoration:none}.brand{color:#111827}.pill{transition:background-color .18s ease}.pill:hover,a.pill:hover{background:#e2e4e9}.project,.article{transition:background-color .18s ease}.project:hover,.article:hover{background:#f3f4f6}.project-link{cursor:pointer}.project-link:focus-visible,.back:focus-visible,a.pill:focus-visible{outline:3px solid #3b82f6;outline-offset:3px}.visual.insurance{background:#f8f6fa}.visual.insurance img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0}.visual.grocery{background:#c6ebd1}.visual.grocery img{height:100%;max-height:none;width:auto;object-fit:cover;object-position:top}.visual.hiking img{width:100%;max-height:100%;object-fit:contain}.article-feature{display:flex;min-height:320px}.article-art{width:40%;background:#f2f2f5;display:flex;align-items:center;justify-content:center;padding:24px}.article-art img{display:block;width:100%;max-width:420px;border-radius:12px}.article-copy{flex:1;padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.article-copy h3{margin-top:18px}.article-copy .description{margin-top:16px}.case-study{padding:48px max(40px,calc((100% - 1110px)/2)) 120px}.back{display:inline-flex;align-items:center;gap:4px;color:#67707f;font-size:24px;line-height:1.4;margin-bottom:72px}.back:hover{color:#111827}.back span{font-size:28px}.case-intro h1{font-size:64px;line-height:1.2}.case-intro>p{font-size:24px;line-height:1.4;color:#67707f;margin-top:24px;max-width:900px}.case-meta{display:flex;gap:90px;margin:36px 0 56px}.case-meta>div{display:flex;gap:8px;font-size:20px}.case-meta b{font-weight:500}.case-hero-image{width:100%;background:#f6f3f8;border-radius:24px;overflow:hidden}.case-hero-image img{display:block;width:100%;height:auto}.case-section{padding-top:100px;display:flex;flex-direction:column;gap:60px}.case-section h2{font-size:44px;line-height:1.4;letter-spacing:-.02em}.case-row{display:grid;grid-template-columns:40% 1fr;gap:32px;align-items:start}.case-row h3{font-size:32px;line-height:1.4;letter-spacing:-.02em}.case-row p{font-size:24px;line-height:1.4;color:#67707f}@media(max-width:1000px){.article-feature{flex-direction:column}.article-art{width:100%;min-height:280px}.article-copy{padding:32px}.case-study{padding:40px 40px 100px}.case-intro h1{font-size:48px}.case-section{gap:40px}.case-row p{font-size:20px}}@media(max-width:600px){.visual.grocery img{height:100%;max-width:none}.article-art{min-height:230px;padding:16px}.article-copy{padding:24px}.case-study{padding:32px 16px 80px}.back{font-size:18px;margin-bottom:48px}.case-intro h1{font-size:36px}.case-intro>p{font-size:16px}.case-meta{gap:20px;flex-direction:column;margin:28px 0 32px}.case-meta>div{font-size:14px}.case-hero-image{border-radius:16px}.case-section{padding-top:64px;gap:24px}.case-section h2{font-size:32px}.case-row{grid-template-columns:1fr;gap:12px;padding:20px 0}.case-row h3{font-size:24px}.case-row p{font-size:16px}}

/* Keep the supplied landscape grocery artwork fully visible. */
.visual.grocery img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain}
.article-link{cursor:pointer}.article-link:focus-visible{outline:3px solid #3b82f6;outline-offset:4px}

/* Article card geometry from Figma 1186:41205 and 1205:32767. */
.article-feature{padding:0;min-height:257px;align-items:stretch;box-shadow:0 0 0 1px rgba(18,70,115,.15)}
.article-feature .article-art{width:444px;flex:0 0 444px;padding:0;min-height:257px;overflow:hidden;background:#f2f2f5}
.article-feature .article-art img{width:444px;max-width:100%;height:auto;border-radius:0;display:block}
.article-feature .article-copy{padding:32px 40px;gap:16px;justify-content:flex-start;min-width:0}
.article-feature .article-copy h3{font-size:24px;line-height:1.2;margin:0 0 -12px}
.article-feature .article-copy .meta{font-size:14px;line-height:1.4;margin:0}
.article-feature .article-copy .description{font-size:14px;line-height:1.6;margin:0}
.cv-pill{gap:4px}.cv-pill img{display:block;flex-shrink:0}
@media(max-width:1000px){.article-feature{flex-direction:column}.article-feature .article-art{width:100%;flex:0 0 auto}.article-feature .article-art img{width:444px}.article-feature .article-copy{padding:32px}}
@media(max-width:600px){.article-feature .article-art{min-height:0}.article-feature .article-copy{padding:24px}.article-feature .article-copy h3{font-size:24px}}

.contact-menu{position:relative}.contact-menu summary{list-style:none;cursor:pointer}.contact-menu summary::-webkit-details-marker{display:none}
.contact-menu summary:focus-visible,.contact-options a:focus-visible,.contact-options button:focus-visible{outline:3px solid #3b82f6;outline-offset:3px}
.contact-options{position:absolute;top:calc(100% + 8px);right:0;z-index:10;width:240px;padding:8px;background:#fff;border:0.5px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 28px #11182720}
.contact-options a,.contact-options button{display:flex;justify-content:space-between;width:100%;padding:12px;border:0;background:none;border-radius:8px;font:inherit;font-size:14px;text-align:left;color:#111827;cursor:pointer}
.contact-options a:hover,.contact-options button:hover{background:#f3f4f6}.copy-status{display:block;font-size:12px;color:#4b5563;padding:0 12px}.copy-status:empty{display:none}
@media(max-width:600px){.contact-options{left:0;right:auto}}

/* Consistent half-pixel interface strokes. */
.task-card,.project,.article{box-shadow:none;border-width:.5px}
.tag,.contact-options,header,footer{border-width:.5px}
.case-meta,.case-meta b,.case-meta span{color:#67707f}
.case-hero-image video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#f6f3f8}
.visual.grocery{background:#c6eace}.visual.grocery img{border-radius:0;width:100%;height:auto;object-fit:contain}

/* Preserve the top of the chatbot preview; crop only below it. */
.visual.insurance{position:relative}.visual.insurance img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
/* Card outlines and the more subtle video corner treatment. */
.task-card,.project,.article,.portfolio-card{border:1px solid #e8e8e8;box-shadow:none}
.case-hero-image,.case-hero-image video{border:0;outline:0;box-shadow:none;border-radius:4px}
.portfolio{padding:40px max(40px,calc((100% - 1110px)/2))}
.portfolio>h2{font-size:32px;line-height:1.4;margin-bottom:32px}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.portfolio-card{display:block;position:relative;overflow:hidden;border-radius:32px;aspect-ratio:534/371;background:#f3f4f6;transition:filter .18s ease}
.portfolio-card img{display:block;width:100%;height:100%;object-fit:contain}
.portfolio-card:hover{filter:brightness(.96)}.portfolio-card:focus-visible{outline:3px solid #3b82f6;outline-offset:4px}
@media(max-width:600px){.portfolio{padding:32px 16px 40px}.portfolio>h2{font-size:24px;margin-bottom:20px}.portfolio-grid{grid-template-columns:1fr}.portfolio-card{border-radius:24px}}

.portfolio-card{border:0;box-shadow:none}

/* Regular-weight case-study copy on desktop and tablet. */
@media(min-width:601px){
.case-study .case-section h2,.case-study .case-section h3,.case-study .case-section p{font-weight:400;font-synthesis:none;text-shadow:none;-webkit-text-stroke:0}
}

/* E-grocery tablet and mobile image fill, matching Figma. */
@media(max-width:1000px){
.visual.grocery{position:relative;flex:0 0 320px;width:100%;height:320px;min-height:320px;padding:0;background:#c6eace;border-top:1px solid #e5e7eb}
.visual.grocery img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:0}
}
@media(max-width:600px){.visual.grocery{flex-basis:240px;height:240px;min-height:240px}}

.projects>h2{font-size:32px;line-height:1.4;margin:0}
.task-list{margin:0;padding-left:20px}.task-list li+li{margin-top:8px}
@media(max-width:600px){.projects>h2{font-size:24px;line-height:1.3;margin-bottom:-12px}}

.visual-filters{position:absolute;pointer-events:none;overflow:hidden}.portfolio-card img.portfolio-medical-visual{filter:url(#portfolio-sharpen)}

@media(max-width:1000px){.hero .expertise{padding-left:0;padding-right:0}}

/* Match the E-grocery introduction metadata alignment. */
.project-intro-details{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin:24px 0 56px;color:#67707f}
.project-intro-details>p{max-width:542px;font-size:24px;line-height:1.4;font-weight:400;min-width:0}
.project-intro-details dl{display:flex;gap:64px;margin:0;font-size:20px;line-height:1.4;font-weight:400;flex-shrink:0}
.project-intro-details dt,.project-intro-details dd{margin:0;font-weight:400}
@media(max-width:1000px){.project-intro-details{flex-direction:column;gap:24px}.project-intro-details>p{max-width:none;font-size:16px;line-height:1.5}.project-intro-details dl{font-size:14px;gap:32px}}
@media(max-width:600px){.project-intro-details{gap:16px;margin:24px 0 32px}.project-intro-details>p{font-size:14px;line-height:1.45}.project-intro-details dl{font-size:12px;gap:32px}}

/* Consistent secondary copy on tablet and mobile case pages. */
@media(max-width:1000px){.case-intro>p,.case-row p,.case-meta,.case-meta b,.case-meta span,.project-intro-details{color:#6b7280}}

.brand-logo{display:block;width:32px;height:36px;object-fit:contain;flex-shrink:0}

/* Featured and article card states from Figma. */
.project,.article{background:#f3f4f6}.project:hover,.article:hover,.project:focus-visible,.article:focus-visible{background:#e8eaee}.project .tag{background:#fff;transition:background-color .18s ease}.project:hover .tag,.project:focus-visible .tag{background:#f3f4f6}

.task-card,.task-card:hover{background:#f3f4f6}

.article-feature .tag{background:#fff}

/* Card lift matches the reference site's 8px, 200ms hover motion. */
.project-link,.article-feature,.portfolio-card{transition:transform 200ms ease,background-color 200ms ease;transform:translateY(0)}
.portfolio-card:hover{filter:none}
@media(hover:hover) and (pointer:fine){.project-link:hover,.article-feature:hover,.portfolio-card:hover{transform:translateY(-8px)}}
.project-link:focus-visible,.article-feature:focus-visible,.portfolio-card:focus-visible{transform:translateY(-8px)}
@media(prefers-reduced-motion:reduce){.project-link,.article-feature,.portfolio-card{transition:none}.project-link:hover,.article-feature:hover,.portfolio-card:hover,.project-link:focus-visible,.article-feature:focus-visible,.portfolio-card:focus-visible{transform:none}}

/* Shared neutral surface for header pills and default cards. */
:root{--surface-muted:#f3f4f6}
.pill,.task-card,.project,.article,.weather-stat{background-color:var(--surface-muted)}
.reading-progress{position:fixed;inset:0 auto auto 0;width:100%;height:8px;background:#008FF0;transform:scaleX(0);transform-origin:left center;z-index:1000;pointer-events:none}
@media(max-width:600px){.reading-progress{height:7px}}