/* Design tokens from the Figma file (Website) */
:root {
  --surface: #fafafa;
  --text: #000000;
  --text-muted: #767676;
  --point: #0cbcb0;
  --divider: #dfdfdf;
  --empty: #f1f1f1;
  --on-surface: #14181f;
  --surface-border: #b5b9bf;

  --font-display: "Figtree", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  --gutter: 40px;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.31;
  letter-spacing: -0.05em;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Type scale (Header 1–5, Paragraph) */
.h1 { font-family: var(--font-display); font-size: 64px; line-height: 1.1; letter-spacing: -0.05em; }
.h2 { font-size: 37px; line-height: 1.1; letter-spacing: -0.03em; }
.h3 { font-size: 30px; line-height: 1.3; letter-spacing: -0.02em; }
.h4 { font-size: 24px; line-height: 1; letter-spacing: -0.05em; }
.h5 { font-size: 16px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.body { font-size: 20px; line-height: 1.31; letter-spacing: -0.05em; }
.small { font-size: 16px; line-height: 1.2; letter-spacing: -0.03em; }
.muted { color: var(--text-muted); }
.point { color: var(--point); }

.home { --gutter: 48px; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 0 20px;
  background: rgba(250, 250, 250, 0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.nav__logo { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
.nav__links { display: flex; gap: 50px; }
.nav__links a { font-size: 20px; line-height: 1; letter-spacing: -0.05em; text-decoration: none; }
.nav__links a:hover { color: var(--point); }

/* Home intro */
.intro { padding-top: 60px; } /* 120px in Figma, minus the 60px nav */
.intro__inner { border-bottom: 1px solid var(--divider); padding: 10px 0 200px; }
.intro__title { max-width: 1080px; }
.intro__sub { max-width: 1080px; margin-top: 24px; }
.section-label { padding-top: 40px; }

/* Project cards (2-column grid) */
.works { padding-block: 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.card { display: flex; flex-direction: column; gap: 40px; text-decoration: none; }
.card__cover { height: 400px; border-radius: 20px; background: var(--empty); overflow: hidden; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card__cover img { transform: scale(1.02); }
.card__text { display: flex; flex-direction: column; gap: 8px; padding-bottom: 40px; }

/* About */
.divider { border: 0; border-top: 1px solid var(--divider); margin: 0 auto 80px; width: calc(100% - var(--gutter) * 2); max-width: var(--max); }
.about { display: flex; padding-bottom: 80px; }
.about__title { flex: 0 0 633px; padding-right: 40px; }
.about__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 80px; }
.exp { display: flex; flex-direction: column; gap: 24px; }
.exp__list { display: flex; flex-direction: column; gap: 40px; }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 40px; }
.acc summary::-webkit-details-marker { display: none; }
.acc__head { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.acc__icon { position: relative; flex: 0 0 64px; height: 64px; }
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.5px; background: var(--text);
  transform: translate(-50%, -50%); transition: transform .2s ease;
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__body { padding-top: 16px; max-width: 520px; }
.acc__body p + p { margin-top: 8px; }

/* Footer */
.footer { border-top: 1px solid var(--divider); padding-block: 40px; }
.footer__inner { display: flex; }
.footer__spacer { flex: 0 0 633px; }
.footer__cols { flex: 1 1 0; display: flex; justify-content: space-between; gap: 40px; letter-spacing: -0.05em; }
.footer__col { display: flex; flex-direction: column; gap: 30px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a:hover { color: var(--point); }

/* ---------- Project page ---------- */
.p-title { padding-top: 70px; padding-bottom: 70px; } /* 130px in Figma, minus the 60px nav */
.p-title__inner { display: flex; flex-direction: column; gap: 10px; max-width: 633px; }
.p-cover { height: 500px; background: var(--empty); overflow: hidden; }
.p-cover img { width: 100%; height: 100%; object-fit: cover; }

.p-summary { display: flex; gap: 80px; padding-top: 40px; padding-bottom: 99px; }
.p-summary__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.p-summary__text { display: flex; flex-direction: column; gap: 1.3em; font-size: 30px; }
.p-summary__meta { flex: 1 1 0; display: flex; flex-direction: column; gap: 40px; justify-content: flex-start; }
/* Line up the cap tops of the summary and the first meta label */
.p-summary__text > :first-child, .p-summary__meta > :first-child > :first-child { text-box: trim-start cap alphabetic; }
.p-summary__meta div { display: flex; flex-direction: column; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border: 1px solid var(--divider); border-radius: 999px;
  font-size: 16px; line-height: 1.2; letter-spacing: -0.03em;
}

/* Text section: title column + body column, divider on top */
.sec { padding: 0 var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.sec__inner { display: flex; gap: 80px; border-top: 1px solid var(--divider); padding-top: 40px; }
.sec__title { flex: 1 1 0; min-width: 0; font-size: 37px; line-height: 1.1; letter-spacing: -0.03em; }
.sec__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sec__body > * { max-width: 560px; }
.sec--key .sec__body { gap: 40px; }
.sec--pb40 { padding-bottom: 40px; }
.sec--pb80 { padding-bottom: 80px; }
.key { display: flex; flex-direction: column; gap: 8px; }

/* Media blocks (image frames exported from Figma) */
.media { padding: 120px var(--gutter); max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.media--tight { padding-top: 40px; padding-bottom: 40px; }
.media--diagram { padding-bottom: 40px; }
.frame {
  position: relative; border-radius: 40px; overflow: hidden; background: var(--empty);
  display: flex; align-items: center; justify-content: center;
}
.frame--auto { aspect-ratio: auto; }
.frame--white { background: #fff; }
.frame--square { aspect-ratio: 580 / 500; }
.frame img { width: 100%; height: auto; }
.split > .frame img, .frame--square img { height: 100%; object-fit: cover; }
.frame--auto img { height: auto; }
.frame[data-placeholder]:not(:has(img))::after {
  content: attr(data-placeholder); color: var(--text-muted);
  font-size: 16px; letter-spacing: -0.03em; padding: 0 24px; text-align: center;
}
.media__row { display: flex; gap: 40px; }
.media__row > .frame { flex: 1 1 0; min-width: 0; }
.media__item { flex: 1 1 0; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.media__item .caption { width: auto; }

/* Image + text side by side */
.split { display: flex; gap: 80px; align-items: flex-start; }
.split > .frame { flex: 1 1 0; min-width: 0; aspect-ratio: 580 / 500; }
.split__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.split__text > * { max-width: 520px; }

/* Chapters: one divider per chapter, title beside a short read */
.chapter { padding: 0 var(--gutter) 40px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.chapter__inner { display: flex; gap: 80px; border-top: 1px solid var(--divider); padding-top: 40px; }
.chapter__head { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.chapter__label { font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--text-muted); }
.chapter__title { font-family: var(--font-display); font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -0.05em; }
.chapter__body { flex: 1 1 0; min-width: 0; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; display: flex; flex-direction: column; gap: 1em; }

/* Captions under images */
.captions { display: flex; gap: 40px; padding: 24px var(--gutter) 0; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.caption { width: 560px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.captions--two .caption { width: 580px; }
.caption__title { font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.caption__body { font-size: 20px; line-height: 1.31; letter-spacing: -0.03em; color: var(--text-muted); }
.split > .caption { flex: 1 1 0; }

/* Results numbers */
.stats { padding: 60px var(--gutter) 80px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.stats__row { display: flex; gap: 40px; }
.stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.stat__num { font-family: var(--font-display); font-size: 64px; line-height: 1; letter-spacing: -0.05em; }
.stat__label { font-size: 20px; line-height: 1.31; letter-spacing: -0.03em; color: var(--text-muted); }
.stats__note { font-size: 16px; line-height: 1.2; letter-spacing: -0.03em; color: var(--text-muted); }

/* Spacing helpers taken from the Figma frames */
.pt40 { padding-top: 40px; } .pt80 { padding-top: 80px; } .pt120 { padding-top: 120px; }
.pb0 { padding-bottom: 0; } .pb40 { padding-bottom: 40px; } .pb120 { padding-bottom: 120px; }

/* Carousel */
.carousel { position: relative; }
.carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }
.carousel__nav { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.carousel__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--divider);
  background: transparent; cursor: pointer; font: inherit; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
}
.carousel__btn:hover:not(:disabled) { border-color: var(--text); }
.carousel__btn:disabled { opacity: .3; cursor: default; }
.carousel__count { font-size: 16px; letter-spacing: -0.03em; color: var(--text-muted); min-width: 40px; text-align: center; }

/* Before / after model diagram */
.models { background: var(--empty); border-radius: 40px; padding: 80px 40px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.model { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.model__label { font-size: 20px; color: var(--text-muted); letter-spacing: -0.03em; }
.model__row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.model__group { position: relative; border: 1.5px solid var(--surface-border); border-radius: 12px; padding: 32px 16px 16px; background: #fff; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.model__group--one { border-color: var(--point); }
.model__name {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  background: var(--on-surface); color: #fff; border-radius: 8px; padding: 6px 14px;
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap;
}
.model__group--one .model__name { background: var(--point); }
.step { padding: 12px 16px; border-radius: 8px; background: #eef0f2; font-size: 18px; letter-spacing: -0.02em; color: var(--on-surface); white-space: nowrap; }
.model__group--one .step { background: #e2f6f4; }

/* Other projects */
.others { padding: 40px var(--gutter) 80px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; }
.others__title { border-top: 1px solid var(--divider); padding-top: 29px; margin-bottom: 104px; }
.others__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.other { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.other__img { aspect-ratio: 407 / 389; background: var(--empty); overflow: hidden; }
.other__img img { width: 100%; height: 100%; object-fit: cover; }
.textlink { font-size: 16px; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-muted); }
.other:hover .textlink { color: var(--point); }

/* ---------- Interactions ---------- */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }
::selection { background: rgba(12, 188, 176, .2); }
:focus-visible { outline: 2px solid var(--point); outline-offset: 4px; border-radius: 4px; }

/* Nav: hides on scroll down, returns on scroll up, gets a hairline once scrolled */
.nav { transition: transform .35s var(--ease), box-shadow .3s ease; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--divider); }
.nav.is-hidden { transform: translateY(-100%); }

/* Animated underline for text links */
.nav__links a, .footer__col a, .nav__logo { position: relative; text-decoration: none; transition: color .2s ease; }
.nav__links a::after, .footer__col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav__links a:hover::after, .footer__col a:hover::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__logo:hover { color: var(--point); }

/* Project cards */
.card__cover { position: relative; transform: translateZ(0); }
.card__cover img { transition: transform .8s var(--ease); }
.card:hover .card__cover img { transform: scale(1.04); }
.card__cover::after {
  content: "View project →"; position: absolute; left: 24px; bottom: 24px;
  padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .92);
  font-size: 16px; font-weight: 500; letter-spacing: -0.03em; color: var(--text);
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--ease);
}
.card:hover .card__cover::after, .card:focus-visible .card__cover::after { opacity: 1; transform: none; }
.card .h5 { transition: color .2s ease; }
.card:hover .h5 { color: var(--point); }

/* Other projects */
.other__img img { transition: transform .8s var(--ease); }
.other:hover .other__img img { transform: scale(1.04); }
.textlink { display: inline-flex; gap: 4px; transition: color .2s ease; }
.textlink .arrow { display: inline-block; transition: transform .3s var(--ease); }
.other:hover .textlink .arrow { transform: translateX(4px); }

/* Accordion: height animated in main.js, icon turns plus into minus */
.acc summary { transition: opacity .2s ease; }
.acc summary:hover .acc__icon::before, .acc summary:hover .acc__icon::after { background: var(--point); }
.acc__icon::before, .acc__icon::after { transition: transform .3s var(--ease), background .2s ease; }
.acc__body { overflow: hidden; }
.acc__body > * { transition: opacity .3s ease .05s, transform .4s var(--ease) .05s; }
.acc:not([open]) .acc__body > *, .acc.is-closing .acc__body > * { opacity: 0; transform: translateY(-4px); }

/* Chips */
.chip { transition: border-color .2s ease, color .2s ease; }
.chip:hover { border-color: var(--point); color: var(--point); }

/* Carousel */
.carousel__btn { transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease; }
.carousel__btn:hover:not(:disabled) { background: var(--text); color: #fff; border-color: var(--text); }
.carousel__btn:active:not(:disabled) { transform: scale(.94); }
.carousel__track { cursor: grab; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__slide { transition: opacity .4s ease; }
.carousel__slide:not(.is-active) { opacity: .35; }
.carousel__bar { flex: 1 1 auto; max-width: 160px; height: 2px; background: var(--divider); border-radius: 2px; overflow: hidden; }
.carousel__bar span { display: block; height: 100%; background: var(--text); transition: width .4s var(--ease); }

/* Before / after diagram */
.model__group { transition: transform .4s var(--ease), box-shadow .4s ease; }
.model__group:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20, 24, 31, .08); }

/* Hero: words rise in on load */
.intro__title .w { display: inline-block; opacity: 0; transform: translateY(.4em); animation: rise .9s var(--ease) forwards; }
.intro__sub, .p-title__inner > * { opacity: 0; animation: rise .9s var(--ease) forwards; }
.intro__sub { animation-delay: .6s; }
.p-title__inner > :nth-child(2) { animation-delay: .1s; }
.p-title__inner > :nth-child(3) { animation-delay: .2s; }
.p-cover img { animation: settle 1.4s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Scroll reveal (class added by main.js, so content stays visible without JS) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Back to top */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 9; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--divider); background: rgba(250, 250, 250, .9); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: inherit; font-size: 18px; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .3s ease, transform .4s var(--ease), background .2s ease, color .2s ease;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--text); color: #fff; border-color: var(--text); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .intro__title .w, .intro__sub, .p-title__inner > *, .js .reveal { opacity: 1 !important; transform: none !important; }
}
@media (hover: none) {
  .card__cover::after { display: none; }
}

/* Tablet */
@media (max-width: 1100px) {
  .about__title, .footer__spacer { flex-basis: 40%; }
  .p-summary, .split { gap: 40px; }
}

/* Mobile */
@media (max-width: 800px) {
  :root, .home { --gutter: 20px; }
  body { font-size: 18px; }
  .h1 { font-size: 44px; }
  .h2, .sec__title { font-size: 30px; }
  .h3 { font-size: 24px; }
  .h4 { font-size: 20px; }
  .nav__links { gap: 24px; }
  .nav__links a { font-size: 17px; }
  .intro { padding-top: 64px; }
  .intro__inner { padding-bottom: 96px; }
  .works { padding-block: 64px; grid-template-columns: 1fr; }
  .card__cover { height: 260px; }
  .divider { margin: 0 20px 48px; }
  .about, .footer__inner, .p-summary, .sec__inner, .media__row, .split { flex-direction: column; }
  .about { gap: 40px; }
  .about__title { flex-basis: auto; }
  .footer__spacer { display: none; }
  .p-title { padding-top: 64px; padding-bottom: 32px; }
  .p-summary { padding-bottom: 48px; }
  .p-summary__text { font-size: 24px; }
  .sec--pb80 { padding-bottom: 48px; }
  .media--diagram { padding-bottom: 24px; }
  .p-cover { height: 280px; }
  .sec__inner { gap: 24px; }
  .media { padding-top: 48px; padding-bottom: 48px; }
  .frame, .models { border-radius: 20px; }
  .split > .frame { width: 100%; flex: none; }
  .split > .split__text, .media__row > .frame, .media__item, .sec__title, .sec__body, .p-summary__main, .p-summary__meta { flex: none; }
  .models { padding: 48px 16px; gap: 48px; }
  .step { font-size: 14px; padding: 8px 10px; }
  .model__name { font-size: 15px; }
  .others__grid { grid-template-columns: 1fr; gap: 32px; }
  .others__title { margin-bottom: 48px; }
  .chapter__inner, .stats__row, .captions { flex-direction: column; }
  .chapter__inner { gap: 24px; }
  .chapter__head, .chapter__body, .stat { flex: none; }
  .chapter__title, .stat__num { font-size: 44px; }
  .chapter__body { font-size: 20px; }
  .captions { gap: 24px; }
  .media__row:has(.media__item) { gap: 120px; }
  .caption, .captions--two .caption { width: 100%; }
  .caption__title { font-size: 20px; }
  .caption__body, .stat__label { font-size: 18px; }
  .stats { padding: 40px var(--gutter) 64px; }
  .stats__row { gap: 32px; }
  /* Keep the Figma rhythm on phones too: 40px inside a group, 120px between groups */
  .pt40 { padding-top: 40px; } .pt80 { padding-top: 80px; } .pt120 { padding-top: 120px; }
  .pb0 { padding-bottom: 0; } .pb40 { padding-bottom: 40px; } .pb120 { padding-bottom: 120px; }
  .split > .caption { flex: none; width: 100%; }
}