/* Design system (Figma "Max портфолио", page "New").
   Sizes are rem of a fluid root: 1rem = 16px at the 1440px desktop frame and at the 390px phone frame,
   so the layout scales with the viewport like the original site. Figma px / 16 = rem. */

@font-face {
  font-family: "Display";
  src: url("/fonts/display.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0d0d;
  --surface: #151515;
  --cover: #181818;
  --cover-hover: #1f1f1f;
  --line: #262626;
  --line-strong: #3a3a3a;
  --text: #f2f2f2;
  --text-2: #a3a3a3;
  --text-3: #7a7a7a;
  --accent: #136cde;
  --accent-hover: #2a7ce6;

  --display: "Display", "Times New Roman", serif;
  --sans: "nimbus-sans-condensed", "Arial Narrow", Arial, sans-serif;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --radius: .25rem;

  --sidebar: 27.5rem;      /* 440 */
  --content-left: 35rem;   /* 560 */
  --column: 50rem;         /* 800 */
  --gutter: 1.25rem;       /* phone side padding, 20 */

  font-size: min(calc(100vw / 90), 20px);
}

@media (max-width: 767px) {
  :root { font-size: min(calc(100vw / 24.375), 20px); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.75rem;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a, button, .case-card, .case-card__name a::after { cursor: pointer; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Type ---------- */
.t-label {
  font-family: var(--sans); font-size: .75rem; line-height: .875rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
}
.page-title {
  font-family: var(--display); font-weight: 400;
  font-size: 4rem; line-height: 4rem; letter-spacing: -.08rem;
  text-wrap: balance;
}
.block-heading {
  font-family: var(--display); font-weight: 400;
  font-size: 2.75rem; line-height: 3rem; letter-spacing: -.0375rem;
  text-wrap: balance;
}
.prose { color: var(--text-2); text-wrap: pretty; }
.prose > * + * { margin-top: .875rem; }
.block--essay { max-width: 38rem; font-size: 1rem; line-height: 1.625rem; }
.block--essay > * + * { margin-top: 1rem; }
.block--essay blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--accent); font-family: var(--display); font-size: 1.5rem; line-height: 1.875rem; letter-spacing: -.02rem; color: var(--text); }
.prose ul { padding: 0; list-style: none; }
.prose li + li { margin-top: .625rem; }
.prose a { text-underline-offset: .15em; }
.prose strong, .prose b { font-weight: 700; color: var(--text); }

.tags { display: flex; flex-wrap: wrap; gap: .375rem .75rem; padding: 0; list-style: none; }
.tags li { font-size: .75rem; line-height: .875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }

.icon { flex: none; }
.icon--arrow { width: 2.75rem; height: auto; color: var(--text-2); transition: transform .4s var(--ease-out), color .2s ease; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1.25rem;
  border: 1px solid transparent; border-radius: 0;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.button--primary { background: var(--accent); color: var(--text); }
.button--ghost { border-color: var(--line-strong); color: var(--text-2); }
.button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .button--primary:hover { background: var(--accent-hover); }
  .button--ghost:hover { border-color: var(--text-2); color: var(--text); }
}

/* ---------- Sidebar (desktop) / menu (phone) ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 10; width: var(--sidebar);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 3rem; overflow-y: auto;
  background: var(--surface); border-right: 1px solid var(--line);
}
.sidebar__name {
  font-family: var(--display); font-size: 4rem; line-height: 4rem; letter-spacing: -.08rem;
  text-decoration: none; white-space: nowrap;
}
.sidebar__tagline { margin-top: .5rem; font-size: .8125rem; line-height: 1rem; }
.sidebar__buttons { display: flex; gap: .5rem; margin-top: 1.5rem; }
.sidebar__cases { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.case-menu {
  display: grid; grid-template-columns: 11rem 1fr; gap: 0;
  margin-top: 1rem; padding: 0; list-style: none;
}
.case-menu a {
  display: inline-block; padding: .5rem 0; font-family: var(--display); font-size: 2.125rem; line-height: 2.5rem; letter-spacing: -.03rem;
  color: var(--text-2); text-decoration: none; transition: color .2s ease;
}
.case-menu a[aria-current="page"], .case-menu a.is-linked { color: var(--text); }
.case-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.sidebar__about { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.about-link { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; text-decoration: none; transition: opacity .2s var(--ease-out); }
.about-link__text { display: flex; flex-direction: column; gap: .25rem; }
.about-link__title { font-family: var(--display); font-size: 1.625rem; line-height: 1.875rem; letter-spacing: -.02rem; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.about-link__caption { font-size: .875rem; line-height: 1.125rem; color: var(--text-3); }
@media (hover: hover) and (pointer: fine) {
  .case-menu a:hover { color: var(--text); }
  .about-link:hover { opacity: .6; }
}
.topbar, .menu-toggle { display: none; }

/* ---------- Main column ---------- */
.main {
  position: relative; isolation: isolate;
  width: var(--column); margin-left: var(--content-left); padding: 3rem 0 10rem; /* titles line up with the sidebar name */
}
/* Soft light behind the top of the content. */
.main::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -8.75rem; top: -16.25rem; width: min(68.75rem, calc(100vw - var(--content-left))); height: 43.75rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .045), transparent);
}

/* Apple-style progressive blur at the bottom of the viewport (desktop content area).
   Stacked backdrop blurs doubling in strength, each masked to an overlapping band, so the blur grows
   smoothly toward the edge; a faint fade to the page color hides edge shimmer while scrolling.
   Technique: kennethnym.com/blog/progressive-blur-in-css */
.bottom-blur { position: fixed; left: var(--sidebar); right: 0; bottom: 0; z-index: 5; height: 8.75rem; pointer-events: none; }
.bottom-blur i, .bottom-blur::after { position: absolute; inset: 0; }
.bottom-blur i:nth-child(1) { -webkit-backdrop-filter: blur(1px);  backdrop-filter: blur(1px);  -webkit-mask: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.bottom-blur i:nth-child(2) { -webkit-backdrop-filter: blur(2px);  backdrop-filter: blur(2px);  -webkit-mask: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.bottom-blur i:nth-child(3) { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  -webkit-mask: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.bottom-blur i:nth-child(4) { -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);  -webkit-mask: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.bottom-blur i:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.bottom-blur i:nth-child(6) { -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); -webkit-mask: linear-gradient(transparent 62.5%, #000 75%); mask: linear-gradient(transparent 62.5%, #000 75%); }
.bottom-blur::after { content: ""; background: linear-gradient(to bottom, rgba(13, 13, 13, 0) 40%, rgba(13, 13, 13, .55)); }
@media (prefers-reduced-transparency: reduce) {
  .bottom-blur i { display: none; }
  .bottom-blur::after { background: linear-gradient(to bottom, rgba(13, 13, 13, 0), var(--bg)); }
}

.page-head { margin-bottom: 4.5rem; }
.page-head:has(.badge) { margin-bottom: 2.25rem; }
.home-cases .page-title { white-space: nowrap; text-wrap: nowrap; } /* "Case Studies" is one line at every width and font state */
.page-head__subtitle { margin-top: 1rem; font-size: 1.125rem; line-height: 1.5rem; color: var(--text-2); max-width: 40rem; }
.badge { position: relative; display: inline-block; margin-top: .25rem; } /* centre lines up with the sidebar tagline */
.badge__trigger { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; line-height: 1.25rem; color: var(--text); cursor: default; outline-offset: 4px; }
.badge__icon { width: auto; height: 1.5rem; flex: none; }
.badge__label { font-weight: 700; }
/* Tooltip above the badge; padding-bottom bridges the gap so the pointer can reach "Learn more". */
.badge__tip {
  position: absolute; left: -.75rem; bottom: 100%; z-index: 5; width: 20rem; padding: 1rem 1.25rem 1.75rem;
  font-size: .9375rem; line-height: 1.375rem; color: var(--text-2);
  opacity: 0; visibility: hidden; transform: translateY(4px); transform-origin: bottom left;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s linear .2s;
  /* Own compositing layer: keeps background and text fading as one piece on mobile Safari. */
  isolation: isolate; will-change: opacity, transform;
}
.badge__tip::before { content: ""; position: absolute; inset: 0 0 .75rem; z-index: -1; background: #1f1f1f; border: 1px solid var(--line-strong); border-radius: .75rem; }
/* Speech-bubble tail pointing at the badge icon. */
.badge__tip::after { content: ""; position: absolute; left: calc(1.5rem - 6px); bottom: calc(.75rem - 6px); z-index: -1; width: 12px; height: 12px; background: #1f1f1f; border: solid var(--line-strong); border-width: 0 1px 1px 0; transform: rotate(45deg); }
.badge__tip strong { font-weight: 700; color: var(--text); }
.badge__tip a { color: var(--text); text-underline-offset: .15em; }
.badge:hover .badge__tip, .badge:focus-within .badge__tip { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .badge__tip { transform: none; } }
.page-head__title { display: flex; align-items: center; gap: 1.25rem; }
.page-head__logo { width: 4rem; height: 4rem; object-fit: contain; border-radius: var(--radius); }
.page-head--case .page-head__subtitle { margin-top: 1.25rem; font-size: 1.375rem; line-height: 1.875rem; }
.page-head--case .tags { margin-top: 1.25rem; }

/* ---------- Home ---------- */
.home-hero { display: none; }
.case-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem 2.5rem;
  padding: 0; list-style: none;
}
.case-card { position: relative; transition: opacity .4s var(--ease-out); }
.case-card__cover {
  position: relative; display: grid; place-items: center; overflow: hidden;
  --aspect: 380 / 214;
  aspect-ratio: var(--aspect);
  background: var(--cover); border: 1px solid var(--line); border-radius: var(--radius);
  transition: background-color .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* Every logo gets the same optical area relative to the cover height (width = sqrt(area * ratio)),
   capped so tall marks and long wordmarks stay inside. Same look on every cover size. */
.case-card__logo {
  --w: calc(min(calc(.44 * var(--sqrt-ratio) * 100% / (var(--aspect))), calc(.4 * var(--ratio) * 100% / (var(--aspect))), calc(1.1 * 100% / (var(--aspect)))) / var(--ink, 1)); /* fallback when no logo width is set */
  display: block; width: var(--w); aspect-ratio: var(--ratio);
  background: var(--logo) center / contain no-repeat; /* the logo file in its own brand colors */
  transition: transform .4s var(--ease-out);
}
/* The text spans the full card width; "Take a look" sits at the top right, on the name row, so the tags keep one line. */
.case-card__meta { position: relative; padding-top: 1rem; }
.case-card__text { min-width: 0; }
.case-card .tags { flex-wrap: nowrap; white-space: nowrap; }
.case-card .view-link { position: absolute; right: 0; top: 1.5rem; }
.case-card__name {
  font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 2.125rem; letter-spacing: -.025rem;
}
.case-card__name a { text-decoration: none; }
.case-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card is clickable */
.case-card__result { margin-top: .375rem; font-size: 1.0625rem; line-height: 1.375rem; color: rgba(242, 242, 242, .85); }
.case-card .tags { margin-top: .75rem; }
.view-link {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; line-height: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
  transition: color .2s ease;
}
.view-link__arrow { display: inline-block; }

@media (hover: hover) and (pointer: fine) {
  .case-card:hover .case-card__cover, .case-card.is-linked .case-card__cover {
    background: var(--cover-hover); border-color: var(--line-strong);
    box-shadow: 0 1.5rem 3rem -.75rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .case-card:hover .case-card__logo, .case-card.is-linked .case-card__logo {
    transform: scale(1.03);
  }
  .case-card:hover .view-link, .case-card.is-linked .view-link { color: var(--text); }
  .case-card:hover .view-link__arrow, .case-card.is-linked .view-link__arrow { animation: nudge .6s var(--ease-in-out) infinite alternate; }
  .case-grid:has(.case-card:hover) .case-card:not(:hover),
  .case-grid.is-linking .case-card:not(.is-linked) { opacity: .6; }
}
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(.375rem); } }

/* ---------- Blocks ---------- */
.block + .block { margin-top: 6rem; }
.block + .block--image, .block + .block--cards, .block + .block--text,
.block + .block--gallery, .block + .block--video, .block + .block--metrics, .block + .block--before-after { margin-top: 2.5rem; }
.block + .block--step { margin-top: 4.5rem; }
.block--section-heading + .block--step { margin-top: 3rem; }
.block > .block-heading { margin-bottom: 1.25rem; }
.block--section .prose, .block--step .prose, .block--text { font-size: 1.125rem; line-height: 1.75rem; }
.block-note { margin-top: 1.25rem; font-size: .9375rem; line-height: 1.25rem; color: var(--text-3); text-transform: uppercase; }

/* Rows: capability lists, languages, certifications. */
.list-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 2rem; }
.list-columns ul, .block--rows .prose ul { padding: 0; list-style: none; }
.list-columns .row { position: relative; padding-left: 1.25rem; }
.list-columns .row::before { content: "·"; position: absolute; left: .125rem; color: var(--text-2); font-weight: 700; }
.row { padding: .875rem 0; border-top: 1px solid var(--line); font-size: 1.125rem; line-height: 1.5rem; color: var(--text); }
.prose li.row + li.row { margin-top: 0; }
.block--rows .block-heading { margin-bottom: 2rem; }
.row--pair { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.row__value { font-size: .9375rem; line-height: 1.25rem; color: var(--text-3); }
.row--link { padding: 0; }
.row--link a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .875rem 0; text-decoration: none; color: var(--text); text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.row--link .icon { width: .75rem; height: .75rem; color: var(--text-2); transition: transform .2s var(--ease-out), color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .row--link a:hover span { text-decoration: underline; }
  .row--link a:hover .icon { color: var(--text); transform: translate(.125rem, -.125rem); }
}
/* Case "Role" list (has an intro paragraph) */
.block--section .prose p + ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin-top: 1.5rem; }
.block--section .prose p + ul li { margin: 0; padding: .875rem 0; border-top: 1px solid var(--line); color: var(--text); }
.block-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.block-pair > .block { margin: 0; }
.block-pair .block-heading { font-size: 2.75rem; }

/* Steps */
.block--step {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 2.5rem;
  padding-top: 2rem; border-top: 1px solid var(--line-strong);
}
.step-number { font-family: var(--display); font-size: 3.5rem; line-height: 3.5rem; color: var(--text-3); }
.step-heading { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 2.25rem; letter-spacing: -.025rem; text-wrap: balance; }
.step-content .prose { margin-top: .875rem; }

/* Figures */
.figure { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cover); }
.figure img { width: 100%; height: auto; }
.figure figcaption { padding: .75rem 1rem; font-size: .8125rem; line-height: 1.125rem; color: var(--text-3); text-align: center; border-top: 1px solid var(--line); }
.figure figcaption a { color: var(--text-2); }

/* Persona / small cards */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.card { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.card__image { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius); margin-bottom: 1.25rem; }
.card .prose { font-size: 1rem; line-height: 1.5rem; }
.card .prose strong { display: block; margin-bottom: .375rem; font-weight: 400; font-size: .75rem; line-height: 1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.card .prose p:first-child { font-family: var(--display); font-size: 1.375rem; line-height: 1.75rem; color: var(--text); }
.card .prose p:first-child strong { font-family: var(--sans); }
.card .prose p + p { margin-top: 1.25rem; }
.card .prose em { font-style: italic; }

/* Before / after, metrics, gallery, video */
.before-after { display: grid; grid-template-columns: 10rem 1fr; gap: 2.25rem 1.25rem; align-items: start; }
.period + .period { margin-top: 1.5rem; }
.period .t-label { color: var(--text-2); }
.period p:nth-child(2) { margin: .375rem 0 .75rem; font-size: .8125rem; color: var(--text-3); }
.period ul { padding: 0; list-style: none; color: var(--text); }
.metrics { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 2.5rem 1.75rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.metric { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.metric__value { font-family: var(--display); font-size: 2.25rem; line-height: 2.75rem; letter-spacing: -.05rem; }
.metric__label { margin-top: .5rem; font-size: .9375rem; line-height: 1.25rem; color: var(--text-2); }
.gallery { position: relative; }
.gallery__item { position: absolute; overflow: hidden; border-radius: var(--radius); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; height: 100%; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: .75rem; display: flex; justify-content: center; gap: .5rem; }
.carousel__dots button { width: .625rem; height: .625rem; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.carousel__dots button[aria-current="true"] { background: #fff; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.block--heading { font-family: var(--display); font-weight: 400; font-size: 2rem; line-height: 2.25rem; }

/* Experience */
.experience { padding: 0; list-style: none; margin-top: 3rem; }
.job {
  display: grid; grid-template-columns: 15rem 1fr; gap: 2.5rem;
  padding-top: 2rem; border-top: 1px solid var(--line-strong);
}
.job + .job { margin-top: 4.5rem; }
.job__logo { height: 1.625rem; width: auto; max-width: 11.25rem; margin-bottom: 1rem; }
.job__logo--square { height: 2.5rem; border-radius: .375rem; }
.job__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; font-family: var(--display); font-size: 1.5rem; line-height: 1; letter-spacing: -.025rem; color: var(--text); }
.job__brand .job__logo { margin-bottom: 0; }
.job__dates { font-size: .75rem; line-height: 1rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.job__location { margin-top: .25rem; font-size: .875rem; line-height: 1.125rem; color: var(--text-3); }
.job__role { font-family: var(--display); font-weight: 400; font-size: 1.875rem; line-height: 2.125rem; letter-spacing: -.025rem; text-wrap: balance; }
.job__summary { margin-top: .625rem; font-size: 1rem; line-height: 1.375rem; color: var(--text-2); }
.job__body { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.625rem; }
.job__body li { position: relative; padding-left: 1.25rem; }
.job__body li::before { content: ">"; position: absolute; left: 0; color: var(--text-3); }

/* CTA */
.block--cta { padding-top: 3rem; border-top: 1px solid var(--line); }
.block--cta .block-heading { margin-bottom: 0; }
.block--cta__text { margin-top: 1.5rem; max-width: 40rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--text-2); }
.block--cta__buttons { display: flex; gap: .5rem; margin-top: 1.5rem; }

/* Next case */
.next-case { margin-top: 6rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.next-case a { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: .875rem; text-decoration: none; }
.next-case__text { display: flex; flex-direction: column; gap: .5rem; }
.next-case__title { font-family: var(--display); font-size: 3.5rem; line-height: 3.75rem; letter-spacing: -.0625rem; }
.next-case .icon--arrow { margin-bottom: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .next-case a:hover .icon--arrow { transform: translateX(.375rem); color: var(--text); }
}

/* ---------- 404 ---------- */
.not-found { min-height: calc(100vh - 15rem); display: flex; flex-direction: column; justify-content: center; }
.not-found__code { font-family: var(--display); font-size: 12.5rem; line-height: 11.25rem; letter-spacing: -.375rem; color: var(--text-3); }
.not-found .page-head { margin: 1.5rem 0 2.5rem; }
.button__ext { text-transform: none; }
.not-found .button { align-self: flex-start; }

.label-mobile { display: none; }

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .label-desktop { display: none; }
  .label-mobile { display: inline; }
  body { font-size: 1.0625rem; line-height: 1.625rem; }
  .bottom-blur { display: none; }

  /* The top bar stays above the menu; its burger turns into a cross. */
  .topbar {
    position: sticky; top: 0; z-index: 11; display: flex; align-items: center; justify-content: space-between;
    height: 4rem; padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line);
    transition: background-color .4s var(--ease-drawer);
  }
  .menu-open .topbar { background: var(--surface); }
  .topbar__name { font-family: var(--display); font-size: 2.3rem; line-height: 2.625rem; letter-spacing: -.04rem; text-decoration: none; }
  .menu-toggle {
    position: relative; display: block; width: 2.75rem; height: 2.75rem; margin-right: -.6875rem;
    padding: 0; background: none; border: 0; color: var(--text); cursor: pointer;
  }
  .menu-icon i {
    position: absolute; left: 50%; top: 50%; width: 1.375rem; height: 1.2px; margin: -.6px 0 0 -.6875rem; background: currentColor;
    transition: transform .4s var(--ease-drawer);
  }
  .menu-icon i:first-child { transform: translateY(-.25rem); }
  .menu-icon i:last-child { transform: translateY(.25rem); }
  .menu-open .menu-icon i:first-child { transform: rotate(45deg); }
  .menu-open .menu-icon i:last-child { transform: rotate(-45deg); }

  /* The sidebar becomes the full-screen menu, starting under the top bar. */
  .sidebar {
    inset: 0; width: auto; gap: 0; padding: 4rem var(--gutter) 2rem; border-right: 0;
    justify-content: flex-start;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .4s var(--ease-drawer), visibility 0s linear .4s;
  }
  .menu-open .sidebar { transform: none; visibility: visible; transition: transform .4s var(--ease-drawer); }
  .menu-open { overflow: hidden; }
  .sidebar__identity { display: contents; }
  .sidebar__tagline, .sidebar__head { display: none; }
  /* Figma "Mobile menu (open)": case index in two columns, About with its caption, then the buttons. */
  .sidebar__cases { order: 1; padding-top: 2.5rem; border-top: 0; }
  .sidebar__cases .t-label { margin-bottom: 1.25rem; }
  .case-menu { grid-template-columns: 1fr 1fr; gap: .625rem 0; margin-top: 0; }
  .case-menu a { padding: 0; font-size: 2.625rem; line-height: 2.625rem; letter-spacing: -.019rem; color: var(--text-2); }
  .case-menu a[aria-current="page"] { color: var(--text); }
  .sidebar__about { order: 2; margin-top: auto; padding: 1.25rem 0 0; }
  .about-link__title, .sidebar .about-link[aria-current="page"] .about-link__title { font-size: 2.625rem; line-height: 1.1; letter-spacing: -.019rem; text-decoration: none; }
  .about-link__caption { font-size: .875rem; line-height: 1.125rem; }
  .sidebar__buttons { order: 3; margin-top: 1.75rem; }
  .sidebar__buttons .button { flex: 1; height: 3rem; }
  .home-hero__buttons .button, .block--cta__buttons .button { flex: 1; height: 3rem; }
  .button { border-radius: 2px; }

  .main { width: auto; margin: 0; padding: 2.5rem var(--gutter) 6rem; }
  .main::before { left: calc(-1 * var(--gutter)); top: -9rem; width: 100vw; height: 26.25rem; background: radial-gradient(17.5rem 13.125rem at 10rem 50%, rgba(255, 255, 255, .06), transparent); }

  .page-title { font-size: 3.5rem; line-height: 3.5rem; letter-spacing: -.07rem; }
  .block-heading, .block-pair .block-heading { font-size: 2.125rem; line-height: 2.375rem; }
  .page-head { margin-bottom: 3rem; }
  .page-head:has(.badge) { margin-bottom: 1.5rem; }
  .badge { margin-top: 1.25rem; }
  .page-head__subtitle { font-size: 1.0625rem; line-height: 1.5rem; }
  .page-head--case .page-head__subtitle { font-size: 1.1875rem; line-height: 1.625rem; }
  .page-head__logo { width: 3rem; height: 3rem; }

  /* Home: intro on top, then the case list. */
  /* Closing call to action under the last case (phone only). */
  .home-hero { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
  .home-hero__text { display: none; }
  .home-hero__title { font-family: var(--display); font-size: 4rem; line-height: 3.875rem; letter-spacing: -.0875rem; }
  .home-hero__buttons { display: flex; gap: .5rem; padding-top: .5rem; }
  .home-cases { scroll-margin-top: 4rem; } /* below the sticky topbar */
  .home-cases .page-title { font-size: 2.125rem; line-height: 2.375rem; letter-spacing: -.1rem; }
  .home-cases .page-head { margin-bottom: 2rem; }

  .case-grid { grid-template-columns: 1fr; row-gap: 3.5rem; }
  .case-card__cover { --aspect: 350 / 214; }
  .tags li { letter-spacing: .05em; }

  .block + .block { margin-top: 4rem; }
  .block + .block--step { margin-top: 3.5rem; }
  .block--section .prose, .block--step .prose, .block--text { font-size: 1.0625rem; line-height: 1.625rem; }
  .block--section .prose p + ul, .block-pair, .cards { grid-template-columns: 1fr; }
  /* About expertise: two columns filled top-to-bottom; rows are shared so wrapped items stay aligned. */
  .list-columns { grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; gap: 0 1rem; margin-top: 1.5rem; }
  .list-columns ul { display: contents; }
  .list-columns .row { padding: .75rem 1.5rem .75rem 1rem; font-size: .9375rem; line-height: 1.25rem; text-wrap: balance; }
  .block-pair { gap: 4rem; }
  .block--step { display: block; padding-top: 1.5rem; }
  .step-number { font-size: 2.5rem; line-height: 2.75rem; margin-bottom: .75rem; }
  .step-heading { font-size: 1.625rem; line-height: 1.875rem; }
  .job { display: block; padding-top: 1.75rem; }
  .job + .job { margin-top: 3.5rem; }
  .job__content { margin-top: 1.25rem; }
  .job__role { font-size: 1.625rem; line-height: 1.875rem; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .before-after { grid-template-columns: 1fr 1fr; }
  .before-after .figure { grid-column: 1 / -1; grid-row: 1; }
  .next-case__title { font-size: 2.5rem; line-height: 2.75rem; }
  .next-case .icon--arrow { margin-bottom: .5rem; }
  .not-found { min-height: calc(100vh - 14rem); }
  .not-found__code { font-size: 8.75rem; line-height: 7.875rem; letter-spacing: -.25rem; }
}

/* ---------- Motion ---------- */
/* Reveal targets are hidden until GSAP has applied its start state (no flash of content). If the scripts
   fail to load, the fallback animation shows everything after 2.5s. */
.js [data-reveal] { visibility: hidden; animation: reveal-fallback 0s linear 2.5s forwards; }
.js.reveal-ready [data-reveal] { animation: none; visibility: visible; }
@keyframes reveal-fallback { to { visibility: visible; } }
.reveal-line { padding-bottom: .08em; margin-bottom: -.08em; } /* keep descenders inside the line mask */

@media (prefers-reduced-motion: reduce) {
  .sidebar, .menu-open .sidebar { transition: none; }
  .case-card__logo, .view-link__arrow, .icon--arrow { animation: none !important; transition: none !important; }
}