@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  background: var(--page-gradient);
  font-synthesis: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  --ink: #101220;
  --muted: #bcbdc6;
  --red: #b21c35;
  --page-gradient: linear-gradient(98.129874deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%);
  --header-inset: 30px;
  --page-inset: 40px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { display: flow-root; min-width: 320px; margin: 0; background: var(--page-gradient); }
body.menu-open { overflow: hidden; padding-right: var(--menu-scrollbar-width, 0px); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
.site-header {
  position: sticky; z-index: 2; top: var(--header-inset);
  width: min(calc(100% - 2 * var(--page-inset)), 1320px);
  height: 88px; margin: var(--header-inset) auto calc(-88px - var(--header-inset));
  padding: 20px 24px; display: flex; align-items: center; gap: 32px;
  border-radius: 1000px; background: rgb(16 18 32 / 30%); backdrop-filter: blur(5px);
}
.identity { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; font-size: 15px; line-height: 24px; white-space: nowrap; }
.identity img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.main-nav { display: contents; }
.main-nav a { font-size: 15px; line-height: 24px; white-space: nowrap; }
.nav-pages { display: flex; align-items: center; gap: 37px; flex: none; }
.nav-pages a { width: 120px; text-align: center; }
.nav-actions { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 16px; }
.nav-cv, .nav-contact { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 100px; }
.nav-cv { background: var(--ink); }
.nav-contact { background: var(--red); }
.download-icon { position: relative; width: 20px; height: 20px; flex: none; }
.download-icon img { position: absolute; left: 9.38%; top: 11.46%; width: 81.25%; height: 77.08%; }
.menu-toggle { display: none; }
.menu-overlay[hidden] { display: none; }
.menu-overlay { position: fixed; z-index: 20; inset: 0; display: grid; padding: 0; opacity: 0; pointer-events: none; background: url('/assets/menu-background.webp') center / cover no-repeat; transition: opacity 180ms ease; }
.menu-overlay.is-visible { opacity: 1; pointer-events: auto; }
.menu-surface { position: relative; isolation: isolate; width: 100%; height: 100dvh; padding: calc(var(--menu-header-top, var(--header-inset)) + 20px) 0 20px; display: flex; flex-direction: column; gap: 32px; overflow: auto; color: #fff; }
.menu-top { width: var(--menu-header-width, min(calc(100% - 2 * var(--page-inset)), 1320px)); margin: 0 auto; margin-left: var(--menu-header-left, auto); padding: 0 24px; height: 48px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu-close { position: relative; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--ink); cursor: pointer; }
.menu-close img { position: absolute; left: 17.516px; top: 18px; width: 12.001px; height: 12px; }
.menu-links { width: calc(100% - 48px); max-width: 1320px; align-self: center; flex: 1; min-height: 288px; padding: clamp(56px, 15.625vh, 160px) 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 24px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); background: rgb(16 18 32 / 30%); backdrop-filter: blur(7.5px); }
.menu-links a { font-size: 40px; line-height: 48px; }
.menu-links a:hover { color: #e5e5e9; }
.menu-contact { width: calc(100% - 48px); max-width: 1320px; align-self: center; flex: none; padding: 40px 32px; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 24px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); background: rgb(16 18 32 / 30%); backdrop-filter: blur(7.5px); }
.menu-contact h2 { grid-column: 1; margin: 0; font-size: 24px; font-weight: 400; line-height: 32px; text-transform: capitalize; }
.menu-email { grid-column: 1; font-size: 24px; line-height: 32px; white-space: nowrap; }
.menu-social-links { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 24px; }
.menu-social-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 24px; }
.menu-social-links img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.menu-download { display: none; }
.menu-toggle:focus-visible, .menu-close:focus-visible, .menu-links a:focus-visible, .menu-download:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.page-shell { width: min(calc(100% - 2 * var(--page-inset)), 1360px); margin: 0 auto; padding: 148px 0 40px; display: flex; flex-direction: column; gap: 48px; }
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-top: 1px; overflow: hidden; border-radius: 40px; background: var(--ink); }
.hero-info { min-width: 0; padding: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; }
.hero-heading { display: flex; width: 100%; flex-direction: column; gap: 16px; }
.eyebrow { margin: 0; color: var(--red); font-size: 15px; line-height: 24px; text-transform: uppercase; }
h1 { margin: 0; font-size: 48px; font-weight: 400; line-height: 56px; }
.highlights { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; list-style: none; color: var(--muted); font-size: 15px; line-height: 24px; text-transform: uppercase; }
.hero-actions { display: flex; gap: 16px; align-items: center; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 100px; font-size: 15px; line-height: 24px; white-space: nowrap; }
.button-primary { background: var(--red); }
.button-dark { background: #282935; }
.hero-actions .button-dark { min-width: 161px; }
.button:hover, .nav-cv:hover, .nav-contact:hover { filter: brightness(1.12); }
.hero-image { min-width: 0; height: 488px; }
.hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; overflow: hidden; border-radius: 40px; background: var(--ink); }
.skill-card { min-width: 0; padding: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center; }
.skill-icon { position: relative; width: 124px; height: 124px; flex: none; }
.skill-icon img { position: absolute; left: 0; top: 0; width: 124px; height: 124px; }
.skill-card:nth-child(2) .skill-icon img { width: 127.376px; }
.skill-card:nth-child(3) .skill-icon img { left: -3.376px; width: 127.376px; height: 127.376px; }
.skill-card h2, .project-copy h2, .experience h2, .contact h2 { margin: 0; font-size: 24px; font-weight: 400; line-height: 32px; text-transform: capitalize; }
.skill-card p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 24px; }
.projects { display: flex; flex-direction: column; gap: 48px; scroll-margin-top: 148px; }
.project-card { padding: 16px; display: flex; align-items: center; gap: 16px; overflow: hidden; border-radius: 40px; background: var(--ink); }
.project-card:nth-child(4) { margin-top: 1px; }
.project-image { flex: 0 0 calc((100% - 16px) * 0.6571180556); min-width: 0; height: 568px; overflow: hidden; border-radius: 32px; }
.project-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-copy { flex: 1; min-width: 0; height: 568px; padding: 64px 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.project-description { display: flex; flex-direction: column; gap: 24px; color: var(--muted); font-size: 15px; line-height: 24px; }
.project-description p { margin: 0; }
.project-reverse .project-description { gap: 15px; }
.project-reverse .project-image { order: 2; }
.project-reverse .project-copy { order: 1; }
.arrow-link { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.arrow-link img:first-child { position: absolute; left: -4px; top: 0; width: 56px; height: 56px; }
.arrow-link img:last-child { position: absolute; width: 24px; height: 24px; }
.arrow-link:hover { background: var(--red); }
.arrow-link:hover img:first-child { opacity: 0; }
.experience { margin-top: 1px; padding: 64px; overflow: hidden; border-radius: 40px; background: var(--ink); scroll-margin-top: 148px; }
.experience-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; margin-bottom: 48px; }
.experience-heading > div p { margin: 16px 0 0; color: #68686d; font-size: 15px; line-height: 24px; }
.experience-heading > a { color: var(--muted); font-size: 15px; line-height: 24px; }
.experience-list { position: relative; display: flex; flex-direction: column; gap: 48px; }
.experience-list::before { position: absolute; content: ''; left: 50%; top: 0; width: 312px; height: 1px; background: url('/assets/timeline-line.svg') center / 312px 1px no-repeat; transform: rotate(90deg); transform-origin: left center; pointer-events: none; }
.experience-item { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.experience-item::before { position: absolute; content: ''; left: calc(50% - 4px); top: 0; width: 8px; height: 8px; background: url('/assets/timeline-dot.svg') center / contain no-repeat; }
.role h3 { margin: 0; font-weight: 400; font-size: 24px; line-height: 32px; text-transform: capitalize; }
.role p { margin: 16px 0 0; color: #68686d; font-size: 15px; line-height: 24px; }
.dates { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; color: var(--muted); font-size: 15px; line-height: 24px; }
.contact { padding: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; border-radius: 40px; background: linear-gradient(90deg, var(--ink) 0%, var(--red) 100%); scroll-margin-top: 148px; }
.contact-copy { width: 379px; display: flex; flex-direction: column; gap: 32px; }
.contact-copy a { font-size: 24px; line-height: 32px; }
.social-links { display: flex; gap: 32px; align-items: center; }
.social-links a { display: inline-flex; gap: 8px; align-items: center; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 24px; }
.social-links img { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  :root { --header-inset: 24px; --page-inset: 24px; --page-gradient: linear-gradient(93.421558deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .nav-pages { display: none; }
  .menu-toggle { position: relative; width: 48px; height: 48px; flex: none; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--red); cursor: pointer; }
  .menu-toggle img { position: absolute; left: 15.6667px; top: 18.1665px; width: 16.6667px; height: 11.6667px; }
  .page-shell { padding-top: 136px; gap: 40px; }
  .hero { display: flex; flex-direction: column-reverse; }
  .hero-image { flex: none; width: 100%; height: 540px; }
  .hero-info { gap: 48px; padding: 48px; }
  .skills { grid-template-columns: 1fr; }
  .skill-card { padding: 40px 64px; gap: 32px; }
  .projects { gap: 40px; }
  .project-card { flex-direction: column; align-items: stretch; }
  .project-image, .project-copy { flex: none; width: 100%; }
  .project-image { height: auto; aspect-ratio: 4 / 3; border-radius: 24px; }
  .project-copy, .project-reverse .project-copy { order: 2; height: auto; padding: 32px; gap: 32px; }
  .project-reverse .project-image { order: 1; }
  .project-description, .project-reverse .project-description { gap: 24px; }
  .experience { padding: 48px; }
  .contact { padding: 48px; align-items: flex-start; border-radius: 24px; }
}

@media (max-width: 640px) {
  :root { --header-inset: 16px; --page-inset: 16px; --page-gradient: linear-gradient(92.003168deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .nav-actions { flex: none; }
  .nav-actions .nav-cv, .nav-actions .nav-contact { display: none; }
  .page-shell { padding-top: 120px; gap: 16px; }
  .hero-image { height: 240px; }
  .hero-info { gap: 28px; padding: 24px; }
  .hero-heading { gap: 8px; }
  h1 { font-size: 32px; line-height: 40px; }
  .highlights { gap: 16px; }
  .hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .skill-card { padding: 32px 16px; gap: 16px; }
  .projects { gap: 16px; }
  .project-image { height: 240px; aspect-ratio: auto; border-radius: 24px; }
  .project-copy, .project-reverse .project-copy { padding: 16px 8px 8px; gap: 24px; }
  .experience { padding: 32px 24px; }
  .experience-heading { flex-direction: column; gap: 24px; }
  .experience-heading > div p { margin-top: 8px; }
  .experience-item { align-items: center; flex-direction: column; gap: 16px; text-align: center; }
  .experience-item::before, .experience-list::before { display: none; }
  .dates { flex-direction: row; align-items: center; justify-content: center; }
  .contact { padding: 40px 24px; flex-direction: column; align-items: center; gap: 32px; border-radius: 16px; text-align: center; }
  .contact-copy { width: 100%; align-items: center; }
  .contact-copy a { font-size: 18px; line-height: 24px; white-space: nowrap; }
  .menu-surface { height: auto; max-height: 100dvh; align-self: start; padding-bottom: 24px; gap: 24px; }
  .menu-links { min-height: 0; flex: none; padding: 32px 0 36px; gap: 40px; justify-content: flex-start; }
  .menu-links a { font-size: 24px; line-height: 32px; }
  .menu-contact { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
  .menu-email { font-size: 16px; line-height: 24px; }
  .menu-social-links { justify-content: center; gap: 32px; }
  .menu-download { width: calc(100% - 48px); align-self: center; min-height: 48px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 100px; background: var(--red); font-size: 15px; line-height: 24px; }
  .menu-download img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
}

@media (max-width: 360px) {
  .site-header { gap: 16px; padding-right: 16px; padding-left: 16px; }
  .menu-top { gap: 16px; padding-right: 16px; padding-left: 16px; }
  .hero-info { padding: 24px 20px; }
  .contact-copy a { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu-toggle span { transition: none; }
  .menu-overlay { transition: none; }
}

/* Reclaim project case study */
.case-page-shell { width: min(calc(100% - 80px), 1200px); margin: 0 auto; padding: 148px 0 40px; display: flex; flex-direction: column; gap: 48px; }
.case-intro { display: flex; flex-direction: column; gap: 48px; }
.case-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 342px; align-items: end; gap: 48px; }
.case-intro-copy { min-width: 0; }
.case-intro h1 { margin: 0 0 24px; font-size: 32px; line-height: 40px; text-transform: capitalize; }
.case-body { width: 100%; max-width: 1000px; color: var(--muted); font-size: 15px; line-height: 24px; }
.case-body p { margin: 0 0 8px; }
.case-body p:last-child { margin-bottom: 0; }
.case-body strong, .case-numbered-list strong { color: #fff; font-weight: 500; }
.case-body ul { margin: 0 0 8px; padding-left: 22.5px; }
.case-body li { margin-bottom: 8px; }
.case-tags { margin: 0; padding: 8px 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 12px; list-style: none; }
.case-tags li { min-height: 40px; padding: 8px 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--ink); box-shadow: inset 0 0 3px rgb(0 0 0 / 25%); color: var(--muted); font-size: 15px; line-height: 24px; white-space: nowrap; }
.case-visual { width: 100%; margin: 0; overflow: hidden; border-radius: 40px; }
.case-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.case-hero-visual img { aspect-ratio: 4 / 3; }
.case-section { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.case-section h2 { width: 100%; margin: 0; color: #fff; font-size: 24px; font-weight: 400; line-height: 32px; text-transform: capitalize; }
.case-numbered-list { max-width: 1000px; margin: 0; padding-left: 22.5px; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 24px; }
.case-numbered-list li { margin-bottom: 8px; padding-left: 2px; }
.case-numbered-list li:last-child { margin-bottom: 0; }
.case-numbered-list li > strong { display: block; }
.case-numbered-list li > span { display: block; }
.case-numbered-list b { color: #fff; font-weight: 500; }
.challenge-list li > strong { display: block; }
.case-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.case-project-nav { display: flex; align-items: center; justify-content: center; gap: 48px; }
.case-arrow { position: relative; width: 48px; height: 48px; display: grid; place-items: center; flex: none; border: 0; border-radius: 50%; background: transparent; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.case-arrow::before { position: absolute; content: ""; left: -4px; top: 0; width: 56px; height: 56px; background: url("/assets/project-arrow-ring.webp") center / contain no-repeat; pointer-events: none; }
.case-arrow img { position: relative; width: 24px; height: 24px; }
.case-arrow-back img { transform: rotate(180deg); }
.case-arrow:hover, .case-arrow:focus-visible { background: var(--red); }
.case-arrow:hover::before, .case-arrow:focus-visible::before { opacity: 0; }
.case-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.case-footer { padding: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); border-radius: 40px; background: rgb(16 18 32 / 30%); backdrop-filter: blur(7.5px); }
.case-footer-copy { width: min(100%, 379px); display: flex; flex-direction: column; gap: 32px; }
.case-footer-copy h2 { margin: 0; font-size: 24px; font-weight: 400; line-height: 32px; text-transform: capitalize; }
.case-footer-copy > a { color: #fff; font-size: 24px; line-height: 32px; text-decoration: none; overflow-wrap: anywhere; }
.case-footer-social { display: flex; align-items: center; gap: 32px; }
.case-footer-social a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 500; line-height: 24px; }
.case-footer-social img { width: 24px; height: 24px; filter: brightness(0) invert(1); }

/* WatchBetter project case study */
.watchbetter-page { background-image: linear-gradient(96.4187deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
.watch-page-shell { gap: 48px; }
.watch-intro { display: grid; grid-template-columns: minmax(0, 1fr) 342px; align-items: end; gap: 48px; }
.watch-intro-copy { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.watch-intro h1 { margin: 0; font-size: 32px; font-weight: 400; line-height: 40px; text-transform: capitalize; }
.watch-section { gap: 24px; }
.watch-list { max-width: 1000px; margin: 0; padding-left: 22.5px; color: var(--muted); font-size: 15px; line-height: 24px; }
.watch-list li { margin-bottom: 8px; }
.watch-list li:last-child { margin-bottom: 0; }
.watch-list strong, .watch-two-column strong { color: #fff; font-weight: 500; }
.watch-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.watch-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; max-width: none; }
.watch-two-column > div { min-width: 0; }
.watch-two-column p { margin: 0 0 8px; }
.watch-two-column p:last-child { margin-bottom: 0; }
.watch-two-column ul { margin: 0; padding-left: 22.5px; }
.watch-two-column li { margin-bottom: 8px; }
.watch-two-column li:last-child { margin-bottom: 0; }
.watch-journey-copy { max-width: 1000px; }
.watch-performance-visual img { aspect-ratio: 3 / 2; }
.watch-footer { padding: 64px; }
.watch-project-nav { gap: 48px; }
.watch-project-nav .case-arrow { position: relative; width: 48px; height: 48px; }
.watch-project-nav .case-arrow img { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .watchbetter-page { background-image: linear-gradient(93.7597deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .watch-visual img { aspect-ratio: 752 / 540; }
  .watch-hero-visual img, .watch-performance-visual img { aspect-ratio: 720 / 540; }
  .watch-page-shell { gap: 40px; }
  .watch-intro { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .watch-intro-copy { gap: 24px; }
  .watch-intro h1 { font-size: 32px; line-height: 40px; }
  .watch-section { gap: 24px; }
  .watch-pair { grid-template-columns: 1fr; gap: 40px; }
  .watch-two-column { grid-template-columns: 1fr; gap: 48px; }
  .watch-project-nav { gap: 40px; }
  .watch-footer { padding: 40px 32px; }
}

@media (max-width: 640px) {
  .watchbetter-page { background-image: linear-gradient(92.111deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .watch-visual img { aspect-ratio: 343 / 258; }
  .watch-page-shell { gap: 24px; padding-bottom: 40px; }
  .watch-intro { gap: 16px; }
  .watch-intro-copy { gap: 16px; }
  .watch-intro h1 { font-size: 24px; line-height: 32px; }
  .watch-section { gap: 24px; }
  .watch-list { padding-left: 22.5px; }
  .watch-pair { gap: 24px; }
  .watch-two-column { gap: 24px; }
  .watch-two-column ul { padding-left: 22.5px; }
  .watch-performance-visual img { aspect-ratio: 343 / 245.25; }
  .watch-project-nav { gap: 24px; }
  .watch-footer { padding: 40px 24px; }
}

@media (max-width: 1100px) {
  .case-page-shell { width: calc(100% - 48px); padding-top: 136px; gap: 40px; }
  .case-intro { gap: 40px; }
  .case-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .case-tags { justify-content: flex-start; }
  .case-visual { border-radius: 24px; }
  .case-section { gap: 24px; }
  .case-gallery { grid-template-columns: 1fr; gap: 48px; }
  .case-project-nav { gap: 40px; padding: 8px 0; }
  .case-footer { padding: 40px 32px; align-items: flex-start; border-radius: 24px; }
  .case-footer-copy { gap: 24px; }
  .case-footer-social { gap: 24px; }
}

@media (max-width: 640px) {
  .case-page-shell { width: calc(100% - 32px); padding-top: 128px; padding-bottom: 32px; gap: 32px; }
  .case-intro { gap: 32px; }
  .case-intro-grid { gap: 16px; }
  .case-intro h1 { margin-bottom: 16px; font-size: 24px; line-height: 32px; }
  .case-body { font-size: 15px; line-height: 24px; }
  .case-body p { margin-bottom: 8px; }
  .case-body ul { padding-left: 22.5px; }
  .case-tags { padding: 0; gap: 12px 8px; }
  .case-tags li { min-height: 40px; padding: 7px 16px; font-size: 15px; line-height: 24px; }
  .case-visual { border-radius: 16px; }
  .case-section { gap: 24px; }
  .case-section h2 { font-size: 24px; line-height: 32px; }
  .case-numbered-list { padding-left: 22.5px; font-size: 15px; line-height: 24px; }
  .case-numbered-list li { padding-left: 0; margin-bottom: 8px; }
  .case-gallery { grid-template-columns: 1fr; gap: 48px; }
  .case-project-nav { gap: 32px; padding: 16px 0; }
  .case-arrow { position: relative; width: 48px; height: 48px; }
  .case-arrow img { width: 24px; height: 24px; }
  .case-footer { padding: 40px 24px; flex-direction: column; align-items: center; gap: 32px; border-radius: 24px; }
  .case-footer-copy { width: 100%; align-items: center; gap: 32px; text-align: center; }
  .case-footer-copy h2 { font-size: 24px; line-height: 32px; }
  .case-footer-copy > a { font-size: 16px; line-height: 24px; white-space: nowrap; }
  .case-footer-social { justify-content: center; gap: 32px; }
  .case-footer-social a { font-size: 15px; line-height: 24px; }
}

/* Wine store and tasting platform case study */
.wine-page { background-image: linear-gradient(99.4179deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
.wine-page-shell { gap: 48px; }
.wine-intro { display: grid; grid-template-columns: minmax(0, 1fr) 342px; align-items: end; gap: 48px; }
.wine-intro-copy { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.wine-intro h1 { margin: 0; font-size: 32px; font-weight: 400; line-height: 40px; text-transform: capitalize; }
.wine-visual img { display: block; width: 100%; height: auto; object-fit: cover; }
.wine-hero img { aspect-ratio: 4 / 3; }
.wine-section { gap: 24px; }
.wine-section h2 { text-transform: none; }
.wine-section .case-body { width: 100%; max-width: 1000px; }
.wine-approach-list, .wine-challenge-list { margin: 8px 0 0; padding-left: 22.5px; }
.wine-approach-list li, .wine-challenge-list li { margin-bottom: 8px; }
.wine-approach-list li:last-child, .wine-challenge-list li:last-child { margin-bottom: 0; }
.wine-approach-list strong, .wine-challenge-list strong { color: #fff; font-weight: 500; }
.wine-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.wine-gallery-brand .wine-visual img { aspect-ratio: 1152 / 1072; }
.wine-feature-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.wine-feature-copy > article { min-width: 0; }
.wine-gallery-mobile .wine-visual img { aspect-ratio: 864 / 807; }
.wine-unrounded { border-radius: 0; }
.wine-tasting-session img { aspect-ratio: 1200 / 620; }
.wine-responsive-copy { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.wine-project-nav { gap: 48px; }
.wine-project-nav .case-arrow { position: relative; width: 48px; height: 48px; }
.wine-project-nav .case-arrow img { width: 24px; height: 24px; }
.wine-footer { padding: 64px; }

@media (max-width: 1100px) {
  .wine-page { background-image: linear-gradient(94.5252deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .wine-page-shell { gap: 40px; }
  .wine-intro { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .wine-intro-copy { gap: 24px; }
  .wine-intro h1 { font-size: 32px; line-height: 40px; }
  .wine-section { gap: 24px; }
  .wine-gallery-brand { grid-template-columns: 1fr; gap: 40px; }
  .wine-feature-copy { grid-template-columns: 1fr; gap: 24px; }
  .wine-gallery-mobile { grid-template-columns: 1fr; gap: 48px; padding: 0 40px; }
  .wine-responsive-copy { grid-template-columns: 1fr; gap: 16px; }
  .wine-project-nav { gap: 40px; }
  .wine-footer { width: min(100%, 720px); align-self: center; padding: 40px 32px; }
}

@media (max-width: 640px) {
  .wine-page { background-image: linear-gradient(92.563deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .wine-page-shell { padding-top: 132px; padding-bottom: 40px; gap: 24px; }
  .wine-intro { gap: 16px; }
  .wine-intro-copy { gap: 16px; }
  .wine-intro h1 { font-size: 24px; line-height: 32px; }
  .wine-section { gap: 16px; }
  .wine-gallery-brand { gap: 24px; }
  .wine-feature-copy { gap: 16px; }
  .wine-gallery-mobile { gap: 24px; padding: 0; }
  .wine-tasting-session img { aspect-ratio: 343 / 177.22; }
  .wine-responsive-copy { gap: 16px; }
  .wine-project-nav { gap: 32px; padding: 16px 0; }
  .wine-footer { width: min(100%, 327px); padding: 40px 24px; }
}

/* That Cook food creator ecosystem case study */
.food-page { background-image: linear-gradient(94.9109deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
.food-page-shell { gap: 48px; padding-bottom: 40px; }
.food-intro { display: grid; grid-template-columns: minmax(0, 1fr) 342px; align-items: end; gap: 48px; }
.food-intro-copy { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.food-intro h1 { margin: 0; font-size: 32px; font-weight: 400; line-height: 40px; text-transform: capitalize; }
.food-body { max-width: 1000px; }
.food-visual img { display: block; width: 100%; height: auto; object-fit: cover; }
.food-hero img { aspect-ratio: 3200 / 2401; }
.food-section h2 { text-transform: none; }
.food-blogger-section { gap: 24px; }
.food-blogger-section .food-body > p { margin-bottom: 8px; }
.food-blogger-section .food-body ul, .food-blogger-section .food-body ol { margin: 0 0 8px; padding-left: 22.5px; }
.food-blogger-section .food-body li { margin-bottom: 8px; }
.food-blogger-section .food-body li:last-child { margin-bottom: 0; }
.food-layered-visual { position: relative; aspect-ratio: 757 / 568; border-radius: 32px; }
.food-layered-visual img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.food-customer-section { gap: 24px; }
.food-customer-visual img { aspect-ratio: 2400 / 1801; }
.food-challenge-grid { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.food-challenge-grid article { min-width: 0; }
.food-challenge-grid h3, .food-capability-copy h3 { margin: 0 0 8px; color: #fff; font-size: 15px; font-weight: 500; line-height: 24px; }
.food-challenge-grid ul, .food-capability-copy ul { margin: 0 0 8px; padding-left: 22.5px; }
.food-challenge-grid li { margin-bottom: 16px; }
.food-challenge-grid li:last-child { margin-bottom: 0; }
.food-challenge-grid article + article li { margin-bottom: 8px; }
.food-challenge-grid article + article li:last-child { margin-bottom: 0; }
.food-challenge-grid strong, .food-capability-copy strong { color: #fff; font-weight: 500; }
.food-challenge-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.food-challenge-gallery img { aspect-ratio: 4 / 3; }
.food-tasting-interface img { aspect-ratio: 4 / 3; }
.food-ai-section { gap: 24px; }
.food-ai-visual img { aspect-ratio: 1200 / 898; }
.food-capability-copy { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.food-capability-copy article { min-width: 0; }
.food-capability-copy li { margin-bottom: 8px; }
.food-capability-copy li:last-child { margin-bottom: 0; }
.food-capability-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.food-capability-gallery img { aspect-ratio: 4 / 3; }
.food-project-nav { gap: 48px; }
.food-project-nav .case-arrow { position: relative; width: 48px; height: 48px; }
.food-project-nav .case-arrow img { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .food-page { background-image: linear-gradient(92.8174deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .food-page-shell { gap: 40px; }
  .food-intro { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .food-intro-copy { gap: 24px; }
  .food-intro h1 { font-size: 32px; line-height: 40px; }
  .food-tags { justify-content: flex-start; padding: 0; }
  .food-blogger-section { gap: 16px; }
  .food-layered-visual { border-radius: 24px; }
  .food-customer-section { max-width: 720px; gap: 24px; }
  .food-customer-visual img { aspect-ratio: 2400 / 1801; }
  .food-challenge-grid { grid-template-columns: 1fr; gap: 24px; }
  .food-challenge-gallery { grid-template-columns: 1fr; gap: 40px; }
  .food-capability-copy { grid-template-columns: 1fr; gap: 32px; }
  .food-capability-gallery { grid-template-columns: 1fr; gap: 40px; }
  .food-project-nav { gap: 40px; padding: 8px 0; }
  .food-page-shell { padding-bottom: 24px; }
  .food-footer { padding: 40px 32px; align-items: flex-start; }
}

@media (max-width: 640px) {
  .food-page { background-image: linear-gradient(91.737deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .food-page-shell { padding-top: 132px; padding-bottom: 16px; gap: 24px; }
  .food-intro { gap: 16px; }
  .food-intro-copy { gap: 16px; }
  .food-intro h1 { font-size: 24px; line-height: 32px; }
  .food-tags { padding: 8px 0; gap: 12px 8px; }
  .food-blogger-section { gap: 16px; }
  .food-blogger-section, .food-customer-section { max-width: 327px; }
  .food-customer-section .case-body, .food-ai-section .case-body { max-width: 327px; }
  .food-blogger-section .food-body ul, .food-blogger-section .food-body ol { padding-left: 22.5px; }
  .food-layered-visual { border-radius: 16px; }
  .food-customer-section { gap: 16px; }
  .food-section:not(.food-blogger-section, .food-customer-section, .food-ai-section) { gap: 16px; }
  .food-challenge-grid { gap: 24px; }
  .food-challenge-grid ul, .food-capability-copy ul { padding-left: 22.5px; }
  .food-challenge-gallery { gap: 24px; }
  .food-tasting-interface img { aspect-ratio: 343 / 257; }
  .food-ai-section { gap: 16px; }
  .food-ai-section .case-body ul { padding-left: 22.5px; }
  .food-ai-visual img { aspect-ratio: 343 / 257; }
  .food-capability-copy { gap: 24px; }
  .food-capability-gallery { gap: 24px; }
  .food-project-nav { gap: 32px; padding: 16px 0; }
  .food-footer { padding: 40px 24px; }
}

/* Internet banking ecosystem case study */
.banking-page { background-image: linear-gradient(95.8444deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
.banking-page-shell { gap: 48px; padding-bottom: 40px; }
.banking-intro { display: grid; grid-template-columns: minmax(0, 1fr) 342px; align-items: end; gap: 48px; }
.banking-intro-copy { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.banking-intro h1 { margin: 0; font-size: 32px; font-weight: 400; line-height: 40px; text-transform: capitalize; }
.banking-body { max-width: 1000px; }
.banking-section { gap: 24px; }
.banking-section h2 { text-transform: none; }
.banking-visual img { display: block; width: 100%; height: auto; object-fit: cover; }
.banking-hero img { aspect-ratio: 3000 / 2250; }
.banking-mobile-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.banking-mobile-gallery img { aspect-ratio: 4 / 3; }
.banking-list { margin: 0; padding-left: 22.5px; }
.banking-list li { margin-bottom: 8px; }
.banking-list li:last-child { margin-bottom: 0; }
.banking-list strong, .banking-two-column strong { color: #fff; font-weight: 500; }
.banking-mobile-detail img { aspect-ratio: 4 / 3; }
.banking-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; max-width: none; }
.banking-two-column > div { min-width: 0; }
.banking-two-column p { margin: 0 0 8px; }
.banking-two-column p:last-child { margin-bottom: 0; }
.banking-two-column ul { margin: 0; padding-left: 22.5px; }
.banking-two-column li { margin-bottom: 8px; }
.banking-two-column li:last-child { margin-bottom: 0; }
.banking-web-visual img { aspect-ratio: 4096 / 3264; }
.banking-corporate-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 48px; }
.banking-corporate-gallery > figure:first-child img { aspect-ratio: 4 / 3; }
.banking-corporate-layered { position: relative; aspect-ratio: 4 / 3; }
.banking-corporate-layered img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.banking-outcome-copy { max-width: 1000px; }
.banking-project-nav { gap: 48px; }
.banking-project-nav .case-arrow { position: relative; width: 48px; height: 48px; }
.banking-project-nav .case-arrow img { width: 24px; height: 24px; }

@media (max-width: 1100px) {
  .banking-page { background-image: linear-gradient(94.0704deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .banking-page-shell { gap: 40px; padding-bottom: 40px; }
  .banking-intro { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
  .banking-intro-copy { width: 100%; gap: 24px; }
  .banking-intro h1 { font-size: 32px; line-height: 40px; }
  .banking-tags { width: 100%; justify-content: flex-start; padding: 0; }
  .banking-mobile-gallery { gap: 24px; }
  .banking-two-column { grid-template-columns: 1fr; gap: 24px; }
  .banking-corporate-gallery { grid-template-columns: 1fr; gap: 24px; }
  .banking-project-nav { gap: 48px; }
  .banking-footer { padding: 40px 32px; align-items: flex-start; }
}

@media (max-width: 640px) {
  .banking-page { background-image: linear-gradient(91.991deg, #0c0c1a 5.6226%, #2e2f3c 47.901%, #171925 88.521%); }
  .banking-page-shell { padding-top: 128px; padding-bottom: 32px; gap: 32px; }
  .banking-intro { gap: 24px; }
  .banking-intro-copy { gap: 24px; }
  .banking-intro h1 { font-size: 24px; line-height: 32px; }
  .banking-tags { padding: 0; gap: 12px 8px; }
  .banking-section { gap: 24px; }
  .banking-body ul, .banking-two-column ul { padding-left: 22.5px; }
  .banking-mobile-gallery { grid-template-columns: 1fr; gap: 16px; }
  .banking-list { padding-left: 22.5px; }
  .banking-two-column { gap: 24px; }
  .banking-corporate-gallery { gap: 16px; }
  .banking-project-nav { gap: 48px; }
  .banking-footer { padding: 40px 24px; }
}

/* Page-specific responsive spacing follows each corresponding Figma frame. */
@media (max-width: 1100px) {
  .watchbetter-page .watch-page-shell { gap: 40px; }
  .watch-project-nav { padding: 8px 0; }
  .case-tags { gap: 12px 8px; }
  .watch-tags, .wine-tags { padding: 0; }
  .food-customer-section { align-self: center; }
  .banking-project-nav { padding: 0; }
}
@media (max-width: 640px) {
  .watchbetter-page .watch-page-shell { padding-top: 132px; gap: 24px; }
  .watch-two-column { gap: 24px; }
  .watch-project-nav { gap: 32px; padding: 16px 0; }
  .wine-feature-copy { gap: 24px; }
  .wine-feature-copy .case-section { gap: 16px; }
  .food-blogger-section { align-self: center; }
  .banking-project-nav { padding: 0; }
}

/* Rich text keeps Figma's paragraph breaks, list spacing, and emphasis. */
.figma-copy { display: flex; flex-direction: column; gap: 8px; }
.figma-copy p, .figma-copy ul, .figma-copy ol { margin: 0 !important; }
.figma-copy p, .figma-copy li { white-space: pre-wrap; }
.figma-copy li { margin: 0 0 var(--list-gap, 8px) !important; }
.figma-copy li:last-child, .figma-copy .compact-list li { margin-bottom: 0 !important; }
.figma-copy ul, .figma-copy ol { padding-left: 22.5px; }
.figma-copy strong { color: #fff; font-weight: 500; }
.figma-copy .semibold { font-weight: 600; }
.text-white { color: #fff; }
.reclaim-challenges li::marker { color: #fff; font-weight: 500; }
.case-numbered-list li::marker { color: #fff; font-weight: 500; }
.case-visual img[src="/assets/reclaim/outcome-laptop.webp"] { aspect-ratio: 1200 / 898; }
.wine-section .wine-responsive-copy { max-width: none; }
.wine-responsive-copy p { margin: 0; }
.food-hero img { aspect-ratio: 4 / 3; }
.food-customer-visual img { aspect-ratio: 4 / 3; }
@media (max-width: 1100px) {
  .reclaim-outcome-copy { max-width: 720px; }
  .case-visual img[src="/assets/reclaim/product-goals.webp"],
  .case-visual img[src="/assets/cook-that/bloggers-screen-a.webp"],
  .case-visual img[src="/assets/reclaim/discovery-b.webp"],
  .case-gallery .case-visual img { aspect-ratio: 752 / 564.235; }
  .watch-creator-pair > figure:last-child img { aspect-ratio: 752 / 540; }
}
@media (max-width: 640px) {
  .case-intro .case-intro-copy h1 { margin-bottom: 24px; }
  .case-intro .case-tags { padding: 8px 0; }
  .reclaim-outcome-copy { max-width: 295px; }
  .watch-intro .case-tags { row-gap: 8px; }
  .wine-intro .case-tags, .banking-intro .case-tags { row-gap: 8px; }
  .watch-creator-pair > figure:last-child img { aspect-ratio: 343 / 257; }
  .food-hero img { aspect-ratio: 3200 / 2401; }
  .food-customer-visual img { aspect-ratio: 2400 / 1801; }
}

@media (max-width: 1100px) {
  .food-tags { row-gap: 8px; }
  .food-hero img { aspect-ratio: 752 / 564.23; }
  .food-customer-visual img { aspect-ratio: 752 / 564.3133; }
}
@media (max-width: 640px) {
  .case-intro .case-tags { row-gap: 8px; }
  .watchbetter-page .watch-page-shell { padding-bottom: 40px; }
  .food-hero img { aspect-ratio: 343 / 257.36; }
}

.food-challenge-grid .figma-copy:first-child li { margin-bottom: 16px !important; }
.food-challenge-grid .figma-copy:first-child li:last-child { margin-bottom: 0 !important; }
.food-challenge-grid .figma-copy:last-child ul:last-child { padding-left: 45px; }

.reclaim-layered { position: relative; }
.reclaim-layered img + img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 1101px) {
  .food-layered-visual { aspect-ratio: 4 / 3; }
  .banking-web-visual img { aspect-ratio: 1200 / 956; }
}

@media (max-width: 760px) and (min-width: 641px) {
  .contact, .case-footer { flex-direction: column; align-items: center; padding: 40px 24px; gap: 32px; text-align: center; }
  .contact-copy, .case-footer-copy { width: 100%; align-items: center; }
  .menu-contact { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
  .menu-social-links { justify-content: center; }
}
@media (max-width: 640px) {
  .contact { background: linear-gradient(180deg, var(--ink) 0%, var(--red) 100%); }
  .case-tags li { max-width: 100%; white-space: normal; }
  .case-project-nav, .watch-project-nav, .wine-project-nav, .food-project-nav { gap: clamp(16px, calc((100vw - 279px) / 2), 32px); }
  .banking-project-nav { gap: clamp(16px, calc((100vw - 279px) / 2), 48px); }
}

.reclaim-features li::marker { color: #fff; font-weight: 500; }
.banking-corporate-list { max-width: none; }

#about, #projects, #experience, #contact { scroll-margin-top: calc(88px + 2 * var(--header-inset)); }

/* Preserve the image crop and text emphasis used in the Figma variants. */
.wine-tasting-session img { object-position: 50% 100.62%; }
@media (max-width: 1100px) {
  #banking-approach-title + .case-body strong { color: inherit; font-weight: 400; }
}