/* ---------- Tokens (light mode) ---------- */
:root {
  --bg: #ffffff;
  --bg-elev: #fafafa;
  --bg-elev-2: #f2f2f2;          /* matches original .section.gray */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --text: #1a1b1f;               /* matches original body color */
  --text-muted: #5f6066;
  --text-dim: #8a8b91;
  --accent: #4363f9;             /* original uzblue */
  /* The card fill and the NDA scrim painted over it have to stay the same
     colour, so they share a token. The scrim needs an alpha, hence the second
     form — change both together or the overlay stops matching the card. */
  --card-surface: #f5f5f5;
  --card-surface-rgb: 245, 245, 245;
  --max-w: 1000px;
  --radius: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* No CSS scroll-behavior: smooth here — it would make the browser's own
     hash-arrival jump animate too, racing the JS correction in script.js
     that repositions it under the sticky header. Nav clicks stay smooth via
     an explicit behavior: 'smooth' passed to scrollTo() in JS, which
     animates regardless of this property. */
  scroll-padding-top: 110px;   /* clears the taller sticky nav */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Layout shell ---------- */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 96px 24px;
}

/* Mono label with the rule running off to its right on the same line. */
.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 0 0 80px;
}

.section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}

/* ---------- Sticky header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 28px 24px 18px;    /* extra top padding drops the pill down the page */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.nav-list {
  display: flex;
  gap: 4px;
  list-style: none;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
}

.nav-link {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.nav-link:hover {
  color: var(--text);
}

.nav-link.is-active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 140px;
  padding-bottom: 160px;
}

/* Extra headroom so the first project logo starts below the fold —
   only the "Selected projects" label should be visible on landing. */
#projects {
  padding-top: 152px;
}

/* Type scale mirrors the reference site: 72 / 32 / 20 at weight 500-400 */
.eyebrow {
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.hero-title {
  font-size: clamp(2.75rem, 6vw, 4.5rem);   /* up to 72px */
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  max-width: 24ch;
  text-wrap: balance;                       /* evens the line lengths */
}

/* Keeps "in Italy." on one line so the phrase never splits across a break. */
.nowrap {
  white-space: nowrap;
}

/* Waving hand — one 2s greeting on load: scales up while already waving,
   keeps waving, then scales back down to nothing. The wrapper owns the
   scale and the img owns the rotation, so the two run independently.
   It sits at the end of its own line, so the space it leaves behind
   once it has shrunk away is invisible. */
.wave {
  display: inline-block;
  width: 3em;
  margin-left: 0.8em;
  vertical-align: -0.56em;
  transform: scale(0);
  animation: wave-pop 2s var(--ease) 0.25s forwards;
}

.wave img {
  width: 100%;
  height: auto;
  transform-origin: 75% 85%;   /* pivots at the wrist, not the image centre */
  animation: wave-swing 0.4s ease-in-out 0.25s 5;
}

@keyframes wave-pop {
  0%   { transform: scale(0); }
  18%  { transform: scale(1.12); }
  28%  { transform: scale(1); }
  80%  { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes wave-swing {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(16deg); }
}

/* Decorative only — skip it entirely when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .wave {
    display: none;
  }
}

.accent {
  font-weight: 500;
  color: var(--accent);
}

.hero-sub {
  font-size: 1.375rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  max-width: 68ch;
  margin: 0;
}

.inline-link {
  color: var(--text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.inline-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Click-to-copy email — a pill floats above the link on success. */
.copy-email {
  position: relative;
  cursor: pointer;
}

.copy-email::after {
  content: attr(data-copied-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--text);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.copy-email.is-copied::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Projects ---------- */
/* Projects — header sits above the card, card holds tags + full-bleed image */
.project-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}

/* Wordmark logos stand in for the project name. The source files are all
   ~40px tall natively, so a shared height keeps their optical weight even. */
.project-logo {
  height: 32px;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}

/* Fallback for projects with no client wordmark. */
.project-title {
  font-size: 1.5rem;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.project-date {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-dim);
  white-space: nowrap;
}

.project-tagline {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1.42;
  letter-spacing: -0.005em;
}

/* The mockups are transparent PNGs with their drop shadow already rendered,
   so the card supplies the surface they sit on — a light grey that lifts them
   off the white section without competing with the shadow. */
.project-card {
  display: block;
  position: relative;
  border-radius: var(--radius);
  background: var(--card-surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
}

/* Lascaux is a <button>, not a link — reset the UA form-control styling
   so it reads identically to the anchor-based project cards. */
button.project-card {
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  text-align: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;                /* lets the row wrap instead of overflowing */
  z-index: 2;
}

/* White, not the grey elevation token: the card surface is already #f5f5f5, so
   a grey pill on it differs by three points and only the border separates the
   two. White is the same idiom as the active nav pill and the pager links. */
.tag {
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
}

/* The mockups are already cropped at the bottom in the source PNG, so the
   whole image is shown and pinned to the lower edge — the cut lands exactly on
   the card border and reads as a bleed. Scaling by height leaves the grey
   surface visible either side, which is what separates the card from the
   white section. */
.project-media {
  position: relative;         /* anchors the locked overlay on the Lascaux card */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

/* Flex, not block: <picture> is the flex item, so it has to pass the parent's
   bottom alignment down to the <img> itself — left in normal flow, an
   inline-level img sits at the top of whatever space is left over. */
.project-media picture {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

.project-media img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
}

/* Per-mockup nudge — the source PNGs aren't perfectly uniform, so this one
   needs a small manual correction to sit right in the card. */
.project-media-img--nudge-down {
  transform: translateY(16px);
}

/* The Lascaux mockup is blurred at the source, so the card can show the real
   screen without disclosing anything. The full label sits on it at all times
   — no click required to learn why there's no case study — and clicking still
   shakes the card and deepens the wash behind the label for a bit of delight.
   Deliberately not pill-shaped — a chip here would read as a fourth entry in
   the tag row, which is project taxonomy, not access state. */
.project-locked-veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 32px;
  text-align: center;
  background: rgba(var(--card-surface-rgb), 0.45);
  transition: background-color 0.3s var(--ease);
}

.project-locked-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: 1.125rem;
  /* #535459 chosen directly against the darkest pixel actually beneath the
     label (not the darkest in the whole band, which is the saturated button
     elsewhere in the mockup) — clears AA over both the resting 45% wash and
     the clicked 95% fill. */
  color: #535459;
}

.project-locked-icon {
  width: 20px;
  height: 20px;
  transform: scale(0.82);
  transition: transform 0.3s var(--ease);
}

.project-card--locked.is-locked .project-locked-veil {
  background: rgba(var(--card-surface-rgb), 0.95);
}

.project-card--locked.is-locked .project-locked-icon {
  transform: scale(1);
}

.project-card--locked.is-locked .project-media {
  animation: card-shake 0.4s var(--ease);
}

@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .project-card--locked.is-locked .project-media {
    animation: none;
  }
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

.about-photo {
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-elev);
  aspect-ratio: 1 / 1;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-copy p {
  margin: 0 0 20px;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.7;
}

.about-lead {
  color: var(--text) !important;
  font-size: 1.75rem !important;
  line-height: 1.35 !important;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 28px !important;
}

.about-cta {
  margin-top: 28px !important;
  color: var(--text-dim) !important;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem !important;
}

.about-cta .inline-link {
  border-bottom: none;
}

/* ---------- Case study page ---------- */
.case-study main.case {
  padding-bottom: 80px;
}

.case-container {
  max-width: 1140px;          /* matches original .container */
  margin: 0 auto;
  padding: 0 24px;
}

.case-container--narrow {
  max-width: 720px;
}

/* Inside the wide container, text + figures are centered at content width */
.case-container > .case-eyebrow,
.case-container > .case-title,
.case-container > .case-meta-title,
.case-container > .case-body,
.case-container > .case-list,
.case-container > .case-step-title,
.case-container > .case-small,
.case-container > .case-meta-grid {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.case-hero {
  padding: 140px 0 64px;
}

.case-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 16px;
}

.case-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 48px;
  color: var(--text);
}

/* 800px so the hero lines up edge-to-edge with the content column below it
   rather than sitting narrower than its own text. */
.case-hero-image {
  max-width: 800px;
  margin: 0 auto 64px;
}

.case-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.case-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

.case-meta-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0 0 16px;
  opacity: 0.85;
}

.case-meta-title--centered {
  text-align: center;
}

/* Starts a new subsection inside a section. Adjacent vertical margins
   collapse, so this has to clear .case-figure's 64px on its own — at the old
   48px an image followed by a new heading got the same 64px gap as the image's
   own breathing room, and the section change didn't read. */
.case-meta-title--mt {
  margin-top: 96px;
}

.case-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 20px;
  max-width: 760px;
}

.case-body--centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.case-list {
  list-style: none;
  margin: 24px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.case-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  line-height: 1.75;
  font-size: 1rem;
}

.case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.6;
}

.case-small {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: -6px 0 24px;
}

.case-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 40px 0 10px;
  letter-spacing: 0;
}

/* Inner-scroll gallery — original .div-block.v-scroll pattern.
   Wrapper holds top/bottom fade indicators that stay fixed while content scrolls. */
.case-scroll-gallery-wrap {
  position: relative;
  max-width: 680px;
  margin: 60px auto;
}

.case-scroll-gallery-wrap::before,
.case-scroll-gallery-wrap::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 11px;                 /* leave the scrollbar visible on the right */
  height: 48px;
  pointer-events: none;
  z-index: 2;
}

.case-scroll-gallery-wrap::before {
  top: 1px;
  background: linear-gradient(to bottom, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
  border-radius: 10px 10px 0 0;
}

.case-scroll-gallery-wrap::after {
  bottom: 1px;
  background: linear-gradient(to top, #fafafa 0%, rgba(250, 250, 250, 0) 100%);
  border-radius: 0 0 10px 10px;
}

.case-scroll-gallery {
  height: 540px;               /* fixed: predictable on any viewport */
  padding: 28px 24px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.case-scroll-gallery::-webkit-scrollbar { width: 8px; }
.case-scroll-gallery::-webkit-scrollbar-track { background: transparent; }
.case-scroll-gallery::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.case-scroll-gallery::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

.case-scroll-gallery img {
  display: block;
  width: 100%;
  max-width: 600px;            /* matches original 70ch */
  height: auto;
  margin: 28px auto;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.43);  /* matches original */
  border-radius: 6px;
}

.case-scroll-gallery img:first-child { margin-top: 0; }
.case-scroll-gallery img:last-child  { margin-bottom: 0; }

.case-section {
  padding: 100px 0;           /* matches original .container vertical padding */
}

.case-section--alt {
  background: var(--bg-elev-2);   /* original .section.gray */
}

/* Dark sections — original .section.dark. Used by case studies whose screens
   are themselves dark (Hexabot), so image backgrounds blend into the section. */
.case-section--dark,
.case-hero--dark {
  background: #000000;
}

.case-section--dark .case-title,
.case-hero--dark .case-title,
.case-section--dark .case-meta-title,
.case-hero--dark .case-meta-title {
  color: #ffffff;            /* original .paragraph-title.dark */
}

.case-section--dark .case-body,
.case-hero--dark .case-body,
.case-section--dark .case-list li,
.case-hero--dark .case-list li,
.case-section--dark .case-small,
.case-hero--dark .case-small {
  color: #b4b4b8;
}

.case-section--dark .case-eyebrow,
.case-hero--dark .case-eyebrow {
  color: #8a8a90;
}

.case-section--dark .case-list li::before,
.case-hero--dark .case-list li::before {
  background: #ffffff;
}

.case-section--dark em,
.case-hero--dark em {
  color: #d4d4d8;
}

/* Full-page dark mode — Hexabot only. Every section on that page already
   carries a --dark modifier, so this just covers the chrome those modifiers
   don't reach: the shared sticky header, the body behind the sections, and
   the pager. Scoped to .case-study--dark so no other case study is affected. */
.case-study--dark {
  background: #000000;
}

.case-study--dark .site-header {
  background: rgba(0, 0, 0, 0.75);
  border-bottom-color: transparent;
}

.case-study--dark .site-header.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.case-study--dark .nav-list {
  background: #1a1a1d;
  border-color: rgba(255, 255, 255, 0.12);
}

.case-study--dark .nav-link {
  color: #8a8a90;
}

.case-study--dark .nav-link:hover {
  color: #ffffff;
}

.case-study--dark .nav-link.is-active {
  background: #000000;
  color: #ffffff;
  box-shadow: none;
}

.case-study--dark .case-pager {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.case-study--dark .case-pager-link {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
  background: #0a0a0c;
}

.case-study--dark .case-pager-link:hover {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.case-study--dark .case-pager-arrow {
  color: #ffffff;
}

/* Mockup screens read large at full size — scaled to 80% on this page only. */
.case-study--dark .case-hero-image {
  max-width: 560px;
}

/* Every section here shares the same black, so a section boundary has no
   background change to justify its size: at the shared 100px padding the
   200-260px gaps read as dead space rather than structure. Pulling them near
   the 96px subsection break restores the rhythm the light pages get for free
   from their alternating backgrounds. */
.case-study--dark .case-section {
  padding: 48px 0;
}

.case-study--dark .case-section--conclusion {
  padding: 96px 0;
}

/* Final-designs grid — six screens in two rows of three. At two columns the
   pairing read as three separate groups rather than one set, and the mockups
   were large enough to dominate the section. */
.case-grid-designs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 40px;
  place-items: center;
  max-width: 880px;
  margin: 64px auto 0;
}

.case-grid-designs img {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
}

.case-section--floating {
  position: relative;
  overflow: hidden;
}

.case-decoration {
  position: absolute;
  right: 0;
  top: 60px;
  width: 300px;               /* matches original .floating */
  max-width: 32vw;
  pointer-events: none;
}

.case-section--conclusion {
  padding: 120px 0;           /* matches original .section.conclusions */
}

/* Figures centered, transparent so image bg blends with section bg.
   Size modifiers mirror the Webflow .image.* widths from the original. */
.case-figure {
  max-width: 800px;           /* .image.large default */
  margin: 64px auto;
  background: transparent;
}

/* Interaction recordings are <video> rather than animated GIF (same visual
   result, a fraction of the weight), so they need the same sizing as images. */
.case-figure img,
.case-figure video {
  width: 100%;
  height: auto;
  display: block;
}

/* Width modifiers only — .case-figure already supplies the centring and the
   transparent background, so these never need to repeat them. */
.case-figure--xl     { max-width: 1000px; }   /* .image.large.xl  (onboarding flow) */
.case-figure--fixed  { max-width: 900px;  }   /* .image.large.fixed (desktop-screens) */
.case-figure--medium { max-width: 640px;  }   /* desktop screens — 480 left them unreadable */
.case-figure--mobile { max-width: 320px;  }   /* .mobile-mockup */

.case-figure--outlined img {
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
}

.case-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 60px auto;
  justify-items: center;
}

.case-trio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.case-trio-icon {
  width: 64px;                /* matches original .gridicon */
  height: 64px;
}

.case-trio-mockup {
  width: 100%;
  max-width: 300px;           /* matches .mobile-mockup.nopadding */
  height: auto;
  display: block;             /* video is inline by default — avoids a baseline gap */
}

/* Two mobile mockups side by side, below a shared block of text. */
.case-duo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 760px;
  margin: 60px auto 0;
}

.case-duo .case-figure {
  margin: 0;
}

.case-pager {
  max-width: 1080px;
  margin: 80px auto 0;
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
}

.case-pager-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.case-pager-link:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.case-pager-arrow {
  font-size: 1.05rem;
  color: var(--text);
}

/* No italics anywhere — emphasis is carried by weight instead. */
em {
  font-style: normal;
  font-weight: 600;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .section {
    padding: 64px 20px;
  }

  .hero {
    padding-top: 110px;
    padding-bottom: 40px;
  }

  .nav {
    padding: 14px 20px;
  }

  /* Keep the pill visually compact but give the tap area the 44px minimum
     recommended for touch (Apple HIG). The extra height is padding, so the
     pill's own painted box stays the same size. */
  .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.8125rem;
  }

  .project-list {
    gap: 64px;
  }

  .project-card {
    min-height: 0;
    border-radius: 20px;
  }

  /* The mobile art direction is a single upright device, so the box turns
     portrait to match instead of cropping most of the screen away. */
  .project-media {
    aspect-ratio: 9 / 10;
  }

  .project-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .project-title {
    font-size: 1.625rem;
  }

  .project-tagline {
    font-size: 1.125rem;
    margin-bottom: 20px;
  }

  /* Tags rejoin the normal flow above the image. Floating them over the
     mockup only works while they fit on one line — on a narrow card the row
     wraps and would sit on top of the screens. */
  .tag-list {
    position: static;
    padding: 16px 16px 0;
    gap: 6px;
  }

  .tag {
    font-size: 0.8125rem;
    padding: 6px 12px;
  }

  .eyebrow {
    font-size: 1.25rem;
  }

  .hero-sub {
    font-size: 1.1875rem;
  }

  /* Font size is inherited: the title is a small mono label at every width. */
  .section-title {
    margin-bottom: 32px;
  }

  .about-lead {
    font-size: 1.375rem !important;
  }

  .about-copy p {
    font-size: 1.0625rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-photo {
    max-width: 180px;
  }

  /* Case study responsive */
  .case-hero {
    padding: 110px 0 40px;
  }
  .case-title {
    margin-bottom: 32px;
  }
  .case-hero-image {
    margin-bottom: 40px;
  }
  .case-meta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .case-section {
    padding: 56px 0;
  }
  .case-section--conclusion {
    padding: 64px 0;
  }
  .case-trio {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .case-decoration {
    width: 160px;
    opacity: 0.2;
    top: 20px;
    right: -40px;
  }
  .case-pager {
    margin-top: 56px;
    padding: 24px 20px;
  }
  .case-pager-link {
    font-size: 0.85rem;
    padding: 8px 14px;
  }

  .case-scroll-gallery-wrap {
    margin: 40px auto;
  }
  .case-scroll-gallery {
    height: 440px;
    padding: 20px 16px;
  }
  .case-scroll-gallery img {
    max-width: 100%;
    margin: 20px auto;
  }

  .case-grid-designs {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
    margin-top: 44px;
  }

  /* Scale the vertical rhythm down with the section padding, keeping the
     figure < subsection-break hierarchy intact. */
  .case-figure {
    margin: 44px auto;
  }
  .case-meta-title--mt {
    margin-top: 64px;
  }
  .case-step-title {
    margin: 32px 0 10px;
  }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}