/* =========================================================
   Shiri Meron – Portfolio
   Tokens (brief section 2) + all styles
   ========================================================= */

:root {
  /* Purple – primary accent */
  --purple-25: #FAFAFF;
  --purple-50: #F4F3FF;
  --purple-100: #EBE9FE;
  --purple-200: #D9D6FE;
  --purple-300: #BDB4FE;
  --purple-400: #9B8AFB;
  --purple-500: #7A5AF8;
  --purple-600: #6938EF;
  --purple-700: #5925DC;
  --purple-800: #4A1FB8;
  --purple-900: #3E1C96;

  /* Indigo – secondary */
  --indigo-25: #F5F8FF;
  --indigo-50: #EEF4FF;
  --indigo-100: #E0EAFF;
  --indigo-200: #C7D7FE;
  --indigo-300: #A4BCFD;
  --indigo-400: #8098F9;
  --indigo-500: #6172F3;
  --indigo-600: #444CE7;
  --indigo-700: #3538CD;
  --indigo-800: #2D31A6;
  --indigo-900: #2D3282;

  /* Neutral */
  --neutral-0: #FFFFFF;
  --neutral-50: #F6F8FC;
  --neutral-100: #F1F4F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD4E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #27364B;
  --neutral-800: #1E2A3B;
  --neutral-900: #0F1A2A;

  /* Roles */
  --bg: var(--neutral-0);
  --bg-alt: var(--neutral-50);
  --text: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-400);
  --border: var(--neutral-200);
  --link: var(--purple-600);
  --link-hover: var(--purple-700);

  /* TODO: exact stops from Figma "grad main primary" / "hover gradiant button" / "gradiant click 1" */
  --grad-primary: linear-gradient(45deg, var(--purple-600), var(--purple-700));
  --grad-primary-hover: linear-gradient(45deg, var(--purple-700), var(--purple-800));
  --grad-primary-active: linear-gradient(45deg, var(--purple-800), var(--purple-900));
  /* buttons: the same purple-to-indigo range as the gradient headline in the case study footer */
  --grad-brand: linear-gradient(100deg, var(--purple-700), var(--purple-500) 55%, var(--indigo-500));
  --grad-brand-active: linear-gradient(100deg, var(--purple-800), var(--purple-600) 55%, var(--indigo-600));

  /* the screen shadow on avivzommer.com (0 24px 48px -12px), in neutral-900: on every homepage screen and on a card on hover */
  --shadow-work: 0 24px 48px -12px rgb(15 26 42 / 0.18);
  --shadow-lg: 0 4px 6px -2px #0A0D1208, 0 12px 16px -4px #0A0D1214;

  /* Type */
  --font: Inter, -apple-system, system-ui, "Segoe UI", sans-serif;
  --fs-h1: 56px;
  --fs-h2: 34px;
  --fs-h3: 22px;
  --fs-body: 17px;
  --lh-body: 1.7;
  --fs-small: 14px;
  --fs-label: 13px;

  /* Layout */
  --max: 1200px;
  --gutter: 40px;
  --section: 120px;
  --radius-card: 20px;
  --radius-chip: 8px;
  --radius-pill: 999px;
  --header-h: 72px;
}

@media (max-width: 1024px) {
  :root { --gutter: 24px; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --section: 80px;
    --fs-h1: 40px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-body: 16px;
    --lh-body: 1.65;
    --fs-label: 12px;
    --header-h: 64px;
  }
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3 { margin: 0; color: var(--text); }
h1 { font-size: var(--fs-h1); line-height: 1.12; font-weight: 500; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; font-weight: 500; letter-spacing: -0.04em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; }
p { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

:focus-visible {
  outline: 2px solid var(--purple-600);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 8px 16px;
  background: var(--neutral-900);
  color: var(--neutral-0);
  border-radius: var(--radius-chip);
}
.skip-link:focus { top: 16px; color: var(--neutral-0); }

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

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-800);
  margin-bottom: 24px;
}

/* ---------- Buttons ----------
   One size everywhere, in the proportions of the case study footer (after luma.com): 38px pill, 16px text.
   Primary: a thin gradient ring with gradient text on a clear background; on hover it fills with the gradient and the text turns white.
   Secondary: light purple, one shade darker on hover and two on press. */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 19px;
  font: 500 16px/24px var(--font);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--purple-600);
}
.btn--primary::before, .btn--primary::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad-brand);
}
/* the ring: the gradient with its inside cut out */
.btn--primary::before {
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the fill, shown on hover */
.btn--primary::after { opacity: 0; transition: opacity 0.2s ease; }
.btn--primary:hover, .btn--primary:active { -webkit-text-fill-color: var(--neutral-0); color: var(--neutral-0); }
.btn--primary:hover::after, .btn--primary:active::after { opacity: 1; }
.btn--primary:active::after { background: var(--grad-brand-active); }

.btn--secondary { background: var(--purple-100); color: var(--purple-800); }
.btn--secondary:hover { background: var(--purple-200); color: var(--purple-800); }
.btn--secondary:active { background: var(--purple-300); }

.text-link { font-weight: 500; }

/* ---------- Chips ---------- */

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  background: var(--purple-50);
  color: var(--purple-800);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Transparent at the top so the page gradient shows through; frosted once the page scrolls */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
}
.site-header.is-scrolled {
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 500;
  font-size: 16px;
  justify-self: start;
}
.brand:hover { color: var(--text); }

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--purple-100);
  object-fit: cover;
}

.main-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--neutral-0);
  box-shadow: var(--shadow-lg);
}
.main-nav a {
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  color: var(--neutral-600);
  font-size: 16px;
}
.main-nav a:hover { color: var(--neutral-900); background: var(--neutral-100); }

.header-actions {
  display: flex;
  gap: 8px;
  justify-self: end;
}

/* Hamburger and menu, after avivzommer.com: three 18px lines in a bare 34px button that turn into an X,
   and a panel under the header with 15px rows and hairline dividers. The page you are on is purple. */
.menu-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 34px; height: 34px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle span {
  display: block;
  width: 18px; height: 1.5px; border-radius: 1px;
  background: var(--neutral-900);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  display: flex;
  flex-direction: column;
  padding: 4px 16px 12px;
  background: rgb(255 255 255 / 0.98);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu > a {
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--neutral-900);
  font-size: 15px;
  font-weight: 400;
}
.mobile-menu > a:last-of-type { border-bottom: 0; }
.mobile-menu a[aria-current="page"] { color: var(--purple-800); font-weight: 500; }

@media (max-width: 720px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; gap: 12px; }
  .menu-toggle { display: flex; }
  .main-nav, .header-cv { display: none; }
  .brand { justify-self: start; }
}
@media (min-width: 721px) {
  .mobile-menu { display: none !important; }
}

/* ---------- Hero ---------- */

/* The hero (and the About hero) slide up under the transparent header so the gradient starts at the very top */
.hero,
.about-hero { margin-top: calc(var(--header-h) * -1); }

.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-top: calc(96px + var(--header-h));
  padding-bottom: 24px;
  text-align: center;
}
/* a soft glow centred behind the text, like avivzommer.com (900×620, fading out by 78%),
   in purple with a ring of indigo from the portfolio palette */
.hero::before,
.ab-hero::before {
  content: "";
  position: absolute;
  top: calc(50% + var(--header-h) / 2);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  max-width: 150%;
  height: 620px;
  /* closest-side so it fades out fully inside the box, with no edge */
  background: radial-gradient(closest-side, rgb(217 214 254 / 0.6) 0%, rgb(199 215 254 / 0.4) 45%, rgb(235 233 254 / 0.3) 75%, rgb(255 255 255 / 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.hero__title { margin: 0 auto; }
/* Marker draws in from left to right, like the reference (background-size 0 → 100%) */
.marker {
  background-color: transparent; /* <mark> is yellow by default */
  background-image: linear-gradient(transparent 52%, var(--purple-200) 52%, var(--purple-200) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  color: inherit;
  padding: 0 0.04em;
}
/* Only hide-then-draw when JS is running (html.js is set inline in <head>) */
.js .marker {
  background-size: 0% 100%;
  transition: background-size 0.85s cubic-bezier(0.7, 0.05, 0.35, 1) 0.25s;
}
.js .marker.is-drawn { background-size: 100% 100%; }
.hero__line {
  max-width: 560px;
  margin: 24px auto 0;
  color: var(--text-secondary);
}

/* Entry cards */
.entry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: calc(960px + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: left;
}
.entry-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 28px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  color: var(--text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.entry-card:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.entry-card--work { background: var(--purple-50); border-color: var(--purple-100); }
.entry-card--about { background: var(--indigo-50); border-color: var(--indigo-100); }
.entry-card--contact { background: var(--neutral-50); }
.entry-card__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0; line-height: 1.3; margin-top: auto; }
.entry-card__text { margin-top: 8px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.entry-card__cta { margin-top: 24px; color: var(--purple-700); font-size: var(--fs-small); font-weight: 500; }
.entry-card__cta::after { content: " →"; }

@media (max-width: 720px) {
  .entry-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .entry-cards::-webkit-scrollbar { display: none; }
  .entry-card {
    flex: 0 0 78%;
    min-height: 260px;
    scroll-snap-align: start;
  }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(56px + var(--header-h)); }
}

/* ---------- Sections ---------- */

.section { padding: var(--section) 0; }
.section--tight-top { padding-top: 0; }
.section--alt { background: var(--bg-alt); }
.section--entry { padding-top: 0; }

.section-intro { max-width: 640px; margin-bottom: 40px; }
.section-intro p { margin-top: 16px; color: var(--text-secondary); }
/* Homepage work groups, after avivzommer.com: the last card, 44px, a line, 28px, the label.
   The line is purple-300, like the footer line. */
.section--work { padding-bottom: 0; }
.section--concept { padding-top: 0; padding-bottom: 0; }
.work-divider { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--purple-300); }
h2.eyebrow { line-height: normal; }
/* the gap between the last project and the closing section: half of what it was (120 + 112 → 116; mobile 80 + 88 → 84) */
.case-end.case-end--home { padding-top: 116px; }
@media (max-width: 640px) { .case-end.case-end--home { padding-top: 84px; } }

/* ---------- Project cards ---------- */

.project-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--neutral-0);
  overflow: hidden;
  color: var(--text);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.project-card__head { padding: 28px 28px 24px; }
.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
}
.project-card__label { font-size: var(--fs-small); font-weight: 500; color: var(--text-secondary); }
.project-card__title { max-width: 820px; }
.project-card__cta:not(.btn) {
  display: inline-block;
  margin-top: 16px;
  color: var(--purple-600);
  font-size: var(--fs-small);
  font-weight: 500;
}
.project-card:hover .project-card__cta:not(.btn) { color: var(--purple-700); }

.project-card__media {
  margin-top: auto;
  padding: 0 28px 28px;
}
.project-card__media > * {
  border-radius: 12px;
  transition: transform 0.4s ease;
  transform-origin: center;
}
.project-card:hover .project-card__media > * { transform: scale(1.02); }
.project-card__img {
  width: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.project-card { background: var(--purple-25); border-color: var(--purple-100); }
.project-card--featured .project-card__head { padding: 40px 40px 32px; }
.project-card--featured .project-card__title { font-size: var(--fs-h2); font-weight: 500; line-height: 1.12; letter-spacing: -0.04em; }
.project-card--featured .project-card__media { padding: 0 40px 40px; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.project-grid .project-card__img { border: 0; box-shadow: none; border-radius: 0; }

/* Homepage project cards: the avivzommer.com work cards in the portfolio colors.
   Outlined tags, a large title, "Read case study" with Aviv's highlighter line and diagonal arrow, then the screen.
   Aviv's sand surface is purple-50, his border purple-200, his yellow highlighter purple-200 (the site's marker color).
   The screens stay still. */
.container--work { max-width: calc(1064px + var(--gutter) * 2); }
.work-list { display: flex; flex-direction: column; gap: 20px; }
.work-card {
  display: block;
  padding: 48px;
  border-radius: 20px;
  background: var(--purple-50);
  color: var(--neutral-900);
}
.work-card { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.work-card:hover { color: var(--neutral-900); transform: translateY(-4px); box-shadow: var(--shadow-work); }
.work-card:active { transform: translateY(-4px) scale(0.998); }
/* the screens grow a little with the card */
.work-card__media > * { transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) { .work-card:hover .work-card__media > * { transform: scale(1.02); } }

.work-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.work-card__chips .chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 100px;
  border: 1px solid var(--purple-200);
  background: transparent;
  color: var(--neutral-600);
  font-size: 12px; font-weight: 400; letter-spacing: -0.01em;
}
.work-card__title { max-width: 80%; margin: 0 0 20px; font-size: 36px; font-weight: 500; line-height: 1.08; letter-spacing: -0.04em; }
.work-card__cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 32px -6px;
  padding: 2px 6px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--neutral-900);
  /* the highlighter line: a band from 62% to 96% of the text height that sweeps in from the left */
  background-image: linear-gradient(transparent 62%, var(--purple-200) 62%, var(--purple-200) 96%, transparent 96%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.5s cubic-bezier(0.7, 0.05, 0.35, 1);
}
.work-card__cta svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-card__cta { background-size: 100% 100%; }
  .work-card:hover .work-card__cta svg { transform: translate(3px, -3px); }
}
.work-card__media > img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-work); }
/* Travel UP: three screens at the case study phone size (238px), Figma's 80/375 gap between them,
   corners cut to the screens' 60px (at 2x) radius so the canvas grey never shows */
.work-card__phones { display: grid; grid-template-columns: repeat(3, minmax(0, 238px)); justify-content: center; column-gap: 5.3%; }
.work-card__phones img { display: block; width: 100%; height: auto; border-radius: 8.4% / 3.9%; box-shadow: var(--shadow-work); }
@media (max-width: 720px) {
  .work-card { padding: 24px; border-radius: 14px; }
  .work-card__chips { display: none; }
  .work-card__title { max-width: 100%; font-size: clamp(20px, 5.8vw, 26px); margin-bottom: 16px; }
  .work-card__cta { font-size: 14px; margin-bottom: 20px; }
  .work-card__media > img { border-radius: 8px; }
}
/* touch screens: the same hover state, played while the card is in the middle of the screen (main.js adds .is-inview) */
@media (hover: none) {
  .work-card.is-inview, .js-reveal .work-card.reveal.in.is-inview { transform: translateY(-4px); box-shadow: var(--shadow-work); }
  .work-card.is-inview .work-card__media > * { transform: scale(1.02); }
  .work-card.is-inview .work-card__cta { background-size: 100% 100%; }
  .work-card.is-inview .work-card__cta svg { transform: translate(3px, -3px); }
}
@media (prefers-reduced-motion: reduce) {
  .work-card, .work-card__cta, .work-card__cta svg, .work-card__media > * { transition: none !important; }
}
/* covers with their own transparent background: no button frame */
.shot.shot--bare { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.project-card__img--crop { aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% top; }

/* Neutral placeholder (TODO images) */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--neutral-100);
  border: 1px solid var(--border);
  border-bottom: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
}
.placeholder--wide { aspect-ratio: 16 / 9; }

@media (max-width: 720px) {
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-card__head,
  .project-card--featured .project-card__head { padding: 24px 20px 20px; }
  .project-card__media,
  .project-card--featured .project-card__media { padding: 0 20px 20px; }
  .project-card--featured .project-card__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
}

/* ---------- Short About ---------- */

.about-short {
  display: grid;
  /* portrait column ~28% narrower than the reference (was 5fr / 7fr) */
  grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr);
  gap: 64px;
  align-items: center;
}
.about-short__portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  background: var(--purple-100);
  color: var(--purple-800);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.about-short__portrait,
.about-hero__portrait {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 30%;
}

.about-short__body p { margin-top: 16px; color: var(--text-secondary); }
.about-short__body h2 + p { margin-top: 24px; }
.about-short__body .tags { margin-top: 28px; }
.about-short__body .text-link { display: inline-block; margin-top: 28px; }

@media (max-width: 720px) {
  .about-short { grid-template-columns: 1fr; gap: 32px; }
  .about-short__portrait { aspect-ratio: 1 / 1; width: 72%; max-width: 300px; }
}

/* ---------- Contact ---------- */

.contact__inner { text-align: center; max-width: 720px; }
.contact__inner p { margin: 20px auto 0; color: var(--text-secondary); }
.contact__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 640px) {
  .contact__links { flex-direction: column; align-items: stretch; }
}

/* ---------- Footer ---------- */

/* after avivzommer.com: name over a one-line description on the left, small links on the right, a full-width line above */
.site-footer {
  position: relative;
  border-top: 1px solid var(--purple-300);
  padding: 44px 0;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.site-footer__id { display: flex; flex-direction: column; }
.site-footer__id strong { margin-bottom: 5px; font-size: 14px; font-weight: 500; line-height: normal; color: var(--neutral-900); }
.site-footer__id span { font-size: 12.5px; line-height: 20px; color: var(--neutral-400); }
.site-footer__links { display: flex; gap: 24px; }
.site-footer__links a { font-size: 13px; font-weight: 400; color: var(--neutral-500); }
.site-footer__links a:hover { color: var(--purple-700); }

@media (max-width: 640px) {
  .site-footer { padding: 32px 0; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-footer__links { gap: 14px; }
}

/* ---------- About page ---------- */

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

.main-nav a[aria-current="page"] { color: var(--neutral-900); background: var(--purple-50); }

.about-hero {
  padding: calc(80px + var(--header-h)) 0 80px;
  background: radial-gradient(60% 60% at 80% 0%, var(--purple-50) 0%, transparent 100%);
}
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr);
  gap: 64px;
  align-items: center;
}
.about-hero__portrait {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  background: var(--purple-100);
  color: var(--purple-800);
  font-size: 48px;
  font-weight: 600;
}
.about-hero__body p { margin-top: 20px; color: var(--text-secondary); }
.about-hero__body h1 + p { margin-top: 28px; }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}
.stat {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--neutral-0);
}
.stat__value {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--purple-800);
}
.stat__label { margin: 8px 0 0; color: var(--text-secondary); font-size: 15px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.timeline__item:last-child { border-bottom: 1px solid var(--border); }
.timeline__years {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--purple-800);
  padding-top: 3px;
}
.timeline__body ul { margin: 12px 0 0; padding-left: 20px; color: var(--text-secondary); }
.timeline__body li + li { margin-top: 6px; }

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.plain-list li:first-child { border-top: 1px solid var(--border); }
.plain-list__meta { flex-shrink: 0; color: var(--text-muted); font-size: var(--fs-small); font-weight: 500; }

.closing-line {
  font-size: var(--fs-h3);
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
}
.contact__inner .closing-line { margin-top: 0; color: var(--text); }

@media (max-width: 720px) {
  .about-hero { padding: calc(40px + var(--header-h)) 0 64px; }
  .about-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .about-hero__portrait { aspect-ratio: 1 / 1; width: 72%; max-width: 300px; }
  .timeline__item { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .two-col { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .stat { padding: 20px; }
  .stat__value { font-size: 26px; }
  .about-hero__actions .btn { flex: 1 1 auto; }
}

/* ---------- Case study ---------- */

.case-header { padding: 56px 0 48px; }
.back-link {
  display: inline-block;
  margin-bottom: 32px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
}
.back-link:hover { color: var(--purple-700); }
.case-header .eyebrow { margin-bottom: 16px; }
.case-header__title { max-width: 900px; }
.case-header__summary { max-width: 760px; margin-top: 24px; color: var(--text-secondary); }
.case-header .tags { margin-top: 24px; }

/* Screenshot button (opens lightbox) */
.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--neutral-0);
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s ease;
}
.shot:hover { transform: translateY(-2px); }
.shot img { width: 100%; height: auto; }
.shot--hero { margin-top: 48px; border-radius: 16px; }
.shot--flat { margin-top: 24px; box-shadow: none; }
.shot--crop { aspect-ratio: 2880 / 1996; }
.shot--crop img { height: 100%; object-fit: cover; object-position: top; }

/* Metadata */
.meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.meta__item dt {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.meta__item dd { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.meta__note { display: block; margin-top: 8px; font-size: 13px; font-style: italic; color: var(--text-muted); }

/* Section nav */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin-top: 40px;
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.section-nav__inner {
  display: flex;
  gap: 4px;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 10px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav a {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
}
.section-nav a:hover { color: var(--text); background: var(--neutral-100); }
.section-nav a.is-active { color: var(--purple-700); background: var(--purple-50); }

.case { --nav-offset: calc(var(--header-h) + 56px); }
html:has(.section-nav) { scroll-padding-top: calc(var(--header-h) + 72px); }

/* Sections */
.case-section { padding: var(--section) 0; }
.case-section--alt { background: var(--bg-alt); }
.case-section h2 { margin-bottom: 32px; }
.prose { max-width: 760px; }
.container.prose { max-width: calc(760px + var(--gutter) * 2); margin-left: auto; margin-right: auto; }
.prose p { color: var(--text-secondary); }
.prose p + p { margin-top: 16px; }
.sub-title { margin: 64px 0 20px; }
.small-note { margin-top: 16px; font-size: var(--fs-small); color: var(--text-muted); }

/* Stat blocks */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 40px;
}
.stat-block {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--neutral-0);
}
.stat-block dt {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--purple-800);
}
.stat-block dd { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* Numbered steps */
.steps {
  list-style: none;
  counter-reset: step;
  max-width: 760px;
  margin: 32px 0 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 16px 0 16px 56px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}
.steps li:last-child { border-bottom: 1px solid var(--border); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--purple-600);
}
.steps strong { color: var(--text); font-weight: 600; }

/* Reference cards / rule cards */
.ref-grid, .rule-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ref-card, .rule-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--neutral-0);
}
.ref-card strong, .rule-card strong { font-weight: 600; color: var(--text); }
.ref-card span, .rule-card span { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.rule-card { padding: 24px; }

/* Solution modules */
.module {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
  padding: 72px 0;
  border-top: 1px solid var(--border);
}
.module:first-of-type { border-top: 0; padding-top: 16px; }
.module__text { position: sticky; top: calc(var(--nav-offset) + 24px); }
.module__num {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-800);
  margin-bottom: 12px;
}
.module__text > p:not(.module__num) { margin-top: 16px; color: var(--text-secondary); }
.callout {
  margin-top: 24px;
  padding: 20px;
  border-radius: 16px;
  background: var(--purple-25);
  border: 1px solid var(--purple-100);
}
.callout__label {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-800);
}
.callout p + p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text); }

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.shots .shot--main { grid-column: 1 / -1; }
.shots .shot:only-child { grid-column: 1 / -1; }

/* Phone screens: 3 side by side on desktop, swipe strip if more */
.phones {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 8px;
}
.phone {
  flex: 0 0 calc((100% - 32px) / 3);
  aspect-ratio: 375 / 790;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--neutral-0);
  cursor: zoom-in;
  scroll-snap-align: start;
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }


/* Self-initiated case studies */
.meta.meta--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.placeholder--hero { margin-top: 48px; aspect-ratio: 16 / 9; border-radius: 16px; border-bottom: 1px solid var(--border); }
.placeholder--block { margin-top: 24px; border-radius: 12px; border-bottom: 1px solid var(--border); }
.sub-title--first { margin-top: 0; }

.persona {
  max-width: 860px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--neutral-0);
}
.persona__head { display: flex; align-items: center; gap: 16px; }
.persona__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--purple-100);
  color: var(--purple-800);
  font-weight: 600;
}
.persona__who { font-weight: 500; color: var(--text); }
.persona__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.persona__label, .bridge__label {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-800);
}
.persona ul { margin: 10px 0 0; padding-left: 20px; color: var(--text-secondary); font-size: 15px; }
.persona li + li { margin-top: 6px; }

.bridge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.bridge__card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--neutral-0);
}
.bridge__card p:not(.bridge__label) { margin-top: 6px; color: var(--text); }
.bridge__card p:not(.bridge__label):first-of-type { color: var(--text-secondary); }
.bridge__card .bridge__label:not(:first-child) {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--purple-200);
}

.stages {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px 32px;
}
.stage h3 { font-size: 18px; }
.stage p:not(.module__num) { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.stage .module__num { margin-bottom: 8px; }

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  counter-reset: none;
}
.flow__step {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--neutral-0);
}
.flow__step p { margin-top: 12px; color: var(--text); font-size: 15px; line-height: 1.6; }
.flow__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--neutral-0);
  font-size: 14px;
  font-weight: 600;
}
.flow__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--purple-50);
  color: var(--purple-800);
  font-size: 13px;
}

.phone--placeholder {
  display: grid;
  place-items: center;
  background: var(--neutral-100);
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: default;
}

@media (max-width: 1024px) {
  .meta.meta--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .placeholder--hero { margin-top: 32px; aspect-ratio: 4 / 3; }
  .persona { padding: 20px; }
  .persona__cols { grid-template-columns: 1fr; gap: 20px; }
  .bridge, .flow { grid-template-columns: 1fr; gap: 12px; }
  .flow__step:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -18px;
    transform: translateX(-50%);
  }
  .stages { grid-template-columns: 1fr; gap: 24px; }
}

.shots--spaced { margin-top: 24px; }

/* ---------- Case study template blocks ---------- */

.case-section .eyebrow { margin-bottom: 12px; }
/* section labels ("01 — Context") are always dark purple, also inside .prose */
.eyebrow, .prose .eyebrow { color: var(--purple-800); }

/* Every section starts at the same left edge; text columns keep a readable width */
.container.prose { max-width: calc(var(--max) + var(--gutter) * 2); }
.container.prose > * { max-width: 760px; }

/* Case study header, like ofralbo.com: wide text, then the Overview, then the image */
.case-header { padding: 56px 0 32px; }
.case-header__title { max-width: 1040px; }
.case-header__summary { max-width: 1000px; font-size: 22px; line-height: 1.5; color: var(--text-secondary); }
/* Overview row, sized like ofralbo.com: items spread across the row, Tools last on the right, purple dividers */
.case-overview .meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 0;
  padding: 28px 0;
  border-top: 1px solid var(--purple-200);
  border-bottom: 1px solid var(--purple-200);
}
.case-overview .meta__item { flex: 0 1 auto; min-width: 0; }
.case .case-overview .meta__item dt { font-size: 10px; line-height: 1.4; letter-spacing: 0.16em; }
.case .case-overview .meta__item dd { margin-top: 8px; font-size: 15px; line-height: 1.45; }
.case-overview .tool-icons { margin-top: 2px; }
@media (max-width: 720px) {
  .case-overview .meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 0; }
}

/* Case study type scale, matched to avivzommer.com (desktop / ≤640px) */
.case {
  --cs-h1: 52px;
  --cs-h2: 32px;
  --cs-h3: 22px;
  --cs-h4: 18px;
  --cs-sub: 17px;
  --cs-body: 16px;
  --cs-label: 10.5px;
}
@media (max-width: 640px) {
  .case { --cs-h1: 32px; --cs-h2: 24px; --cs-h3: 18px; --cs-h4: 17px; }
}
.case h1, .case .case-header__title { font-size: var(--cs-h1); line-height: 1.1; font-weight: 500; letter-spacing: -0.04em; }
.case h2 { font-size: var(--cs-h2); line-height: 1.18; font-weight: 500; letter-spacing: -0.035em; }
.case h3, .case .sub-title, .case .module h3 { font-size: var(--cs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.03em; }
.case h4, .case .insight h4, .case .stage h3 { font-size: var(--cs-h4); line-height: 1.3; font-weight: 500; letter-spacing: -0.025em; }
.case .case-header__summary { font-size: var(--cs-sub); line-height: 1.72; }
.case p, .case li, .case .steps li { font-size: var(--cs-body); line-height: 1.82; }
.case .eyebrow,
.case .goal-card__label,
.case .insight__num,
.case .insight__led span,
.case .callout__label,
.case .module__num,
.case .bridge__label,
.case .persona__label,
.case .meta__item dt {
  font-size: var(--cs-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* small print and chips keep their own sizes */
.case .small-note, .case .chip, .case .fc-node, .case .ref-card span, .case .method-card span,
.case .rule-card span, .case .role-grid li, .case .meta__item dd { line-height: 1.55; }
.case .chip { font-size: 13px; }
.case .small-note { font-size: 14px; }

/* One ~1000px column for the whole case study, like ofralbo.com: wider text, less scrolling */
.case .container,
.case .section-nav__inner { max-width: calc(1000px + var(--gutter) * 2); }
.case .container.prose > *,
.case .prose:not(.container) { max-width: none; }
.case-hero .shot--hero { margin-top: 40px; }
@media (max-width: 720px) {
  .case-header { padding: 32px 0 24px; }
  .case-header__summary { font-size: 18px; }
  .case-hero .shot--hero { margin-top: 28px; }
}

/* Competitor logos on reference cards */
.ref-logos { display: flex; gap: 8px; margin-bottom: 6px; }
.ref-logos img { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; }

/* Tools as logos (like ofralbo.com) */
.tool-icons { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.tool-icons img { height: 28px; width: auto; display: block; }

/* Goals / tension: two labeled cards */
.goal-grid, .tension-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.goal-card, .tension {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--neutral-0);
}
.goal-card__label {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-800);
  margin-bottom: 8px;
}
.goal-card p:not(.goal-card__label), .tension p:not(.goal-card__label) { color: var(--text-secondary); }

/* Research methods */
.method-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.method-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  border-radius: 16px;
  background: var(--purple-25);
  border: 1px solid var(--purple-100);
}
.method-card strong { font-weight: 600; }
.method-card span { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* Users / roles */
.role-grid { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.role-grid li {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: var(--neutral-0);
  font-size: 15px;
  font-weight: 500;
}

/* Insights: insight + what it led to */
.insight-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.insight {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--neutral-0);
}
.insight__num { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--purple-800); }
.insight h4 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; }
.insight > p:not(.insight__num):not(.insight__led) { color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.insight__led {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--purple-200);
  font-size: 15px;
  line-height: 1.6;
}
.insight__led span { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--purple-800); margin-bottom: 2px; }

.stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Flowchart: one structure for every project, colors set per project.
   Same visual language as the Insights illustrations: lavender box, white shapes with thin dark outlines,
   rounded corners, one purple accent and one quiet motion (a data packet running down the wires). */
.flowchart {
  --fc-accent: var(--purple-500);
  --fc-bg: var(--purple-100);
  --fc-core: var(--purple-600);
  --fc-glyph: var(--purple-200);
  --fc-line: var(--neutral-900);
  margin: 32px 0 0;
}
.flowchart--construction { --fc-accent: var(--purple-500); --fc-bg: var(--purple-100); --fc-core: var(--purple-600); --fc-glyph: var(--purple-200); }
.flowchart__scroll {
  overflow-x: auto;
  padding: 40px 24px;
  border-radius: 16px;
  background: var(--fc-bg);
}
.flowchart__tree {
  min-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* screens: white, thin outline, readable text */
.fc-node {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgb(15 26 42 / 0.28);
  border-radius: 10px;
  background: var(--neutral-0);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--neutral-700);
  white-space: nowrap;
}
.fc-node--entry { border-color: var(--fc-line); color: var(--neutral-900); }
/* the hub, like "One platform" in the Insights card */
.fc-node--core {
  padding: 14px 64px;
  border: 1px solid var(--fc-line);
  border-radius: 12px;
  background: var(--fc-core);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral-0);
}
/* products: the same boxes as the Insights modules, a still glyph on top and a small label below */
.fc-node--mod {
  position: relative;
  width: 112px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--fc-line);
  text-align: left;
}
.fc-node--mod b {
  position: absolute; left: 8px; right: 6px; bottom: 6px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-500);
}
.fc-node--mod .g-lines, .fc-node--mod .g-folders, .fc-node--mod .g-sheet, .fc-node--mod .g-bars,
.fc-node--mod .g-map, .fc-node--mod .g-toggles { position: absolute; left: 8px; right: 8px; top: 9px; }
.fc-node--mod i { animation: none !important; }
.fc-node--mod .g-bars { height: 22px; }
.fc-node--mod .g-bars i:nth-child(1) { height: 13px; }
.fc-node--mod .g-bars i:nth-child(2) { height: 22px; }
.fc-node--mod .g-bars i:nth-child(3) { height: 10px; }
.g-map { height: 24px; border-radius: 4px; background: var(--fc-glyph); }
.g-map i { position: absolute; left: 58%; top: 5px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--fc-accent); }
.g-toggles { display: grid; gap: 5px; }
.g-toggles i { position: relative; display: block; width: 26px; height: 9px; border-radius: 5px; background: var(--fc-glyph); }
.g-toggles i::after { content: ""; position: absolute; top: 1px; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--neutral-0); }
.g-toggles i:first-child { background: var(--fc-accent); }
.g-toggles i:first-child::after { left: 18px; }

/* wires */
.fc-line { position: relative; display: block; width: 1px; height: 20px; background: var(--fc-line); overflow: hidden; }
.fc-branches { display: flex; width: 100%; }
.fc-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 20px;
}
/* horizontal rail across the columns + a stub down to each column */
.fc-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--fc-line);
}
.fc-col:first-child::before { left: 50%; border-left: 1px solid var(--fc-line); border-top-left-radius: 10px; height: 20px; }
.fc-col:last-child::before { right: 50%; border-right: 1px solid var(--fc-line); border-top-right-radius: 10px; height: 20px; }
.fc-col:not(:first-child):not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  height: 20px;
  background: var(--fc-line);
}
/* the one motion: a packet runs down the trunk, then into each product in turn */
.flowchart__tree > .fc-line::after,
.fc-col > .fc-line:nth-child(2)::after {
  content: ""; position: absolute; left: -1px; top: -40%; width: 3px; height: 40%;
  border-radius: 2px; background: var(--fc-accent);
  animation: fc-packet 6s linear infinite;
}
.flowchart__tree > .fc-line:nth-child(4)::after { animation-delay: 0.3s; }
.fc-col:nth-child(1) > .fc-line:nth-child(2)::after { animation-delay: 0.7s; }
.fc-col:nth-child(2) > .fc-line:nth-child(2)::after { animation-delay: 1.4s; }
.fc-col:nth-child(3) > .fc-line:nth-child(2)::after { animation-delay: 2.1s; }
.fc-col:nth-child(4) > .fc-line:nth-child(2)::after { animation-delay: 2.8s; }
.fc-col:nth-child(5) > .fc-line:nth-child(2)::after { animation-delay: 3.5s; }
.fc-col:nth-child(6) > .fc-line:nth-child(2)::after { animation-delay: 4.2s; }
@keyframes fc-packet { 0% { top: -40%; } 8%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .flowchart *::after { animation: none !important; }
}
.flowchart figcaption { margin-top: 12px; }

@media (max-width: 720px) {
  .goal-grid, .tension-grid, .method-grid, .insight-list { grid-template-columns: 1fr; }
  .stat-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flowchart__scroll { padding: 28px 16px; }
}

/* Lightbox */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(15 26 42 / 0.92);
}
.lightbox::backdrop { background: transparent; }
.lightbox__scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 56px 16px 16px;
  touch-action: pan-x pan-y pinch-zoom;
}
.lightbox__img {
  display: block;
  max-width: min(100%, 1600px);
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  cursor: zoom-in;
}
.lightbox.is-zoomed .lightbox__img { max-width: none; width: auto; cursor: zoom-out; }
.lightbox__close {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--neutral-0);
  color: var(--neutral-900);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module { grid-template-columns: 1fr; gap: 32px; }
  .module__text { position: static; max-width: 760px; }
}
@media (max-width: 720px) {
  .case-header { padding: 32px 0 32px; }
  .back-link { margin-bottom: 24px; }
  .shot--hero { margin-top: 32px; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .section-nav { margin-top: 32px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-block { padding: 18px; }
  .stat-block dt { font-size: 30px; }
  .ref-grid, .rule-grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; gap: 12px; }
  .module { padding: 56px 0; }
  .phones { gap: 12px; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .phone { flex-basis: 62%; border-radius: 16px; }
  .steps li { padding-left: 44px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .project-card:hover, .entry-card:hover { transform: none; }
  .project-card:hover .project-card__media > * { transform: none; }
}


/* ---------- Case study cards: soft lilac gradient background (after typeform.com story cards) ---------- */
/* Light glow in the middle, slightly deeper corners top-right and bottom-left. No border. */
.case :is(.goal-card, .tension, .method-card, .ref-card, .insight, .rule-card, .stat-block, .callout, .persona, .bridge__card, .flow__step) {
  border-color: transparent;
  background:
    radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--neutral-0) 65%, transparent), transparent 75%),
    radial-gradient(50% 60% at 100% 0%, var(--purple-200), transparent 70%),
    radial-gradient(55% 55% at 0% 100%, var(--purple-200), transparent 70%),
    var(--purple-100);
}
.case .insight__led { border-top-color: var(--purple-300); }

/* ---------- Research: two parts (users, market) ---------- */
.research-intro { margin-top: 8px; }
.research-part { margin-top: 72px; }
/* straight after the section heading, half the gap */
.case h2 + .research-part { margin-top: 36px; }
.research-part__label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  color: var(--purple-800);
}
.case .research-part__label { font-size: var(--cs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; }
.research-part__label span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--purple-800);
  color: var(--neutral-0);
}
.research-part__title { margin: 0 0 16px; }

/* Persona profile: facts on the side, story on the right (after the Wix portfolio) */
.profile {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  margin-top: 24px;
  padding: 36px;
  border-radius: var(--radius-card);
}
.profile__side { display: flex; flex-direction: column; align-items: flex-start; }
.profile__avatar {
  display: grid; place-items: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--neutral-0);
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  box-shadow: 0 0 0 6px var(--neutral-0);
}
.case .profile__name { margin-top: 16px; font-size: var(--cs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.03em; }
.profile__facts { margin: 16px 0 0; display: grid; gap: 12px; width: 100%; }
.profile__facts div { padding-top: 12px; border-top: 1px solid var(--purple-200); }
.case .profile__facts dt { font-size: var(--cs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-800); }
.case .profile__facts dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; }
.profile__main { display: grid; gap: 24px; }
.case .profile__label { font-size: var(--cs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-800); margin-bottom: 6px; }
.case .profile__block p:not(.profile__label),
.case .profile__block li { font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.profile__block ul { margin: 0; padding-left: 18px; }
.profile__block li + li { margin-top: 6px; }
.profile__block li::marker { color: var(--purple-500); }

/* The need: one sentence that states the problem we are solving */
.need {
  margin-top: 40px;
  padding: 8px 0 8px 24px;
  border-left: 3px solid var(--purple-600);
}
.case .need__label { font-size: var(--cs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-800); margin-bottom: 8px; }
.case .need__text { font-size: var(--cs-h3); line-height: 1.45; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }

/* Competitors: closest one full width, then one card per module */
.rival-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rival { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; }
.rival-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.rival__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.rival__head .ref-logos { margin-bottom: 0; }
.case .rival__tag {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--neutral-0);
  color: var(--purple-800);
  font-size: 12px; font-weight: 500; line-height: 1.4;
  white-space: nowrap;
}
.case .rival h4 { margin: 0; }
.case .rival p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

.case :is(.profile, .rival) {
  background:
    radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--neutral-0) 65%, transparent), transparent 75%),
    radial-gradient(50% 60% at 100% 0%, var(--purple-200), transparent 70%),
    radial-gradient(55% 55% at 0% 100%, var(--purple-200), transparent 70%),
    var(--purple-100);
}

@media (max-width: 720px) {
  .research-part { margin-top: 56px; }
  .case h2 + .research-part { margin-top: 28px; }

  .profile { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .profile__avatar { width: 72px; height: 72px; font-size: 24px; }
  .profile__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .rival-grid, .rival-grid--3 { grid-template-columns: 1fr; }
  .need { padding-left: 18px; }
}

/* ---------- Insights & approach: today vs. with the platform ---------- */
/* Tiles with a screen on top, thick dashed lines into one big circle (after Shiri's Claude reference) */
.shift { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; }
.orbit {
  --orbit-line: var(--neutral-400);
  --orbit-sign: var(--neutral-400);
  --orbit-halo: var(--neutral-200);
  margin: 0;
  display: flex; flex-direction: column;
  padding: 32px 28px 28px;
  border-radius: var(--radius-card);
  background: var(--neutral-100);
}
.orbit--platform {
  --orbit-line: var(--neutral-0);
  --orbit-sign: var(--neutral-0);
  --orbit-halo: color-mix(in srgb, var(--neutral-0) 28%, transparent);
  background:
    radial-gradient(70% 60% at 50% 100%, var(--purple-500), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, var(--purple-700), transparent 70%),
    var(--purple-600);
  color: var(--neutral-0);
}
.case .orbit__label { font-size: var(--cs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--neutral-500); }
.case .orbit--platform .orbit__label { color: var(--purple-100); }
.orbit__title { margin: 6px 0 28px; }
.orbit--platform .orbit__title { color: var(--neutral-0); }
.orbit figcaption { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.orbit--platform figcaption { color: var(--purple-50); }

.orbit__diagram { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.orbit__tiles {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.orbit__sign { font-size: 30px; font-weight: 700; line-height: 1; color: var(--orbit-sign); }

.tile {
  padding: 7px 7px 12px;
  border-radius: 16px;
  background: var(--neutral-0);
  box-shadow: var(--shadow-lg);
}
.tile__shot {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--neutral-100);
}
.tile__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.case .tile__name {
  margin-top: 10px;
  font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em;
  text-align: center; color: var(--neutral-800);
}

/* Today: small drawn "app windows", dark like the reference thumbnails */
.mock { position: relative; padding: 18% 10% 10%; background: var(--neutral-800); }
.mock::before {
  content: ""; position: absolute; top: 7%; left: 8%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--neutral-500);
  box-shadow: 7px 0 var(--neutral-500), 14px 0 var(--neutral-500);
}
.mock i { display: block; }
.mock--tasks { display: grid; gap: 9%; align-content: start; }
.mock--tasks i { height: 6px; border-radius: 3px; background: var(--neutral-600); margin-left: 12px; position: relative; }
.mock--tasks i::before { content: ""; position: absolute; left: -12px; top: -1px; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--neutral-400); }
.mock--tasks i:nth-child(2) { width: 70%; }
.mock--tasks i:nth-child(4) { width: 55%; }
.mock--folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10%; align-content: start; }
.mock--folders i { aspect-ratio: 4 / 3; border-radius: 3px; background: var(--neutral-500); position: relative; }
.mock--folders i::before { content: ""; position: absolute; top: -3px; left: 0; width: 45%; height: 4px; border-radius: 2px 2px 0 0; background: var(--neutral-500); }
.mock--sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-content: start; }
.mock--sheet i { height: 9px; border-radius: 1px; background: var(--neutral-600); }
.mock--sheet i:nth-child(-n+3) { background: var(--neutral-400); }

/* Dashed lines from each tile into the circle */
.orbit__lines { display: block; width: 100%; height: 84px; overflow: visible; margin-top: -6px; }
.orbit__lines path {
  fill: none;
  stroke: var(--orbit-line);
  stroke-width: 4;
  stroke-dasharray: 9 9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.orbit__hub { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: -14px; }
.orbit__circle {
  display: grid; place-items: center;
  width: 124px; height: 124px;
  border-radius: 50%;
  background: var(--neutral-0);
  box-shadow: 0 0 0 14px var(--orbit-halo), var(--shadow-lg);
}
.orbit__avatar {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: var(--neutral-0);
  font-size: 20px; font-weight: 500;
}
.orbit__mark { width: 56px; height: 56px; }
.orbit__mark path { fill: var(--purple-200); stroke: var(--purple-600); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.orbit__mark path + path { fill: none; }
.case .orbit__hub-name { margin-top: 24px; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--neutral-800); }
.case .orbit--platform .orbit__hub-name { color: var(--neutral-0); }

@media (max-width: 860px) {
  .shift { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .orbit { padding: 24px 16px 22px; }
  .orbit__tiles { gap: 3px; }
  .orbit__sign { font-size: 20px; }
  .tile { padding: 5px 5px 9px; border-radius: 12px; }
  .tile__shot { border-radius: 8px; }
  .case .tile__name { margin-top: 7px; font-size: 12px; }
  .orbit__lines { height: 64px; }
  .orbit__circle { width: 96px; height: 96px; box-shadow: 0 0 0 10px var(--orbit-halo), var(--shadow-lg); }
  .orbit__avatar { width: 50px; height: 50px; font-size: 16px; }
  .orbit__mark { width: 44px; height: 44px; }
  .case .orbit__hub-name { margin-top: 18px; font-size: 14px; }
  .mock--tasks i, .mock--sheet i { height: 4px; }
  .mock--tasks i::before { width: 6px; height: 6px; top: -1px; }
}
/* zoom into the top-left of each real screen, so the tile reads like a close-up */
.orbit--platform .tile__shot img { transform: scale(1.7); transform-origin: var(--focus, 50% 40%); }
.orbit__tiles .tile { align-self: stretch; }

/* ---------- Design system: colors, type, components (after ofirpellman.com style guide) ---------- */
/* Everything sits on the page itself, no Figma canvases or frames */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ds-part { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--purple-200); }
/* straight after the section title (no intro): half the gap to the line, 64 → 32px (mobile 48 → 24px); the margins collapse */
.case-section h2 + .ds-part { margin-top: 0; }
.case-section h2:has(+ .ds-part) { margin-bottom: 32px; }
.case .ds-part__label { margin: 0 0 28px; }
.case .ds-part__note { margin: -18px 0 28px; color: var(--text-secondary); }

/* Colors */
.ds-colors { display: grid; gap: 22px; }
.swatch-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
/* row names use the site's own label style (like "01 — Context"), not the Figma design note */
.case .swatch-row__name { padding-top: 18px; font-size: var(--cs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-800); }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; }
.swatches li { display: flex; flex-direction: column; min-width: 0; }
.swatches--grad { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
.swatch__chip { display: block; height: 52px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(15 26 42 / 0.06); }
.case .swatch__step { margin-top: 8px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--neutral-800); }
.case .swatch__hex { font-size: 10.5px; line-height: 1.4; color: var(--text-muted); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; }

/* Typography */
.ds-type { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.ds-type__face {
  padding: 32px 28px;
  border-radius: var(--radius-card);
  background: var(--grad-primary);
  color: var(--neutral-0);
}
.case .ds-type__aa { font-size: 96px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.case .ds-type__name { margin-top: 20px; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.case .ds-type__weights { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--purple-100); }
.ds-type__scale { width: 100%; border-collapse: collapse; }
.ds-type__scale th { padding: 0 0 10px; text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-800); border-bottom: 1px solid var(--border); }
.ds-type__scale td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); white-space: nowrap; vertical-align: middle; }
.ds-type__scale td:first-child { color: var(--text); letter-spacing: -0.02em; width: 52%; }
.ds-type__scale th:not(:first-child), .ds-type__scale td:not(:first-child) { text-align: right; }

/* Components */
.ds-level { margin-top: 40px; }
.ds-level:first-of-type { margin-top: 0; }
.case .ds-level__name { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: var(--cs-h4); font-weight: 500; letter-spacing: -0.02em; }
.ds-level__name span {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--purple-800);
  color: var(--neutral-0);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
}
.case .ds-group__title { margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ds-atoms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.ds-atoms .ds-group:first-child { grid-column: 1 / -1; }
.ds-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ds-icons li { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; }
.ds-icons img { width: 28px; height: 28px; }
.case .ds-icons span { font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
.ds-buttons { display: flex; flex-wrap: wrap; gap: 24px; }
.ds-buttons figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ds-buttons img { display: block; width: 99px; height: 48px; }
.case .ds-buttons figcaption { font-size: 12px; color: var(--text-secondary); }

.ds-inputs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.ds-inputs li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.case .ds-inputs small { font-size: 12px; color: var(--text-muted); }
.ds-input {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: 48px;
  padding: 0 44px 0 14px;
  border: 1px solid var(--neutral-200);
  border-radius: 8px;
  background: var(--neutral-50);
  font-size: 14px; color: var(--neutral-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-input b {
  position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--neutral-800); border-bottom: 1.5px solid var(--neutral-800);
  transform: translateY(-70%) rotate(45deg);
}
.ds-input--hover { background: var(--indigo-25); }
.ds-input--focus { background: var(--indigo-50); border-color: var(--indigo-300); }
.ds-input--focus u { width: 1px; height: 18px; margin-right: -6px; background: var(--neutral-800); }
.ds-input--filled { background: var(--indigo-50); border-color: var(--indigo-300); color: var(--neutral-900); }
.ds-input--error { border-color: #FDA29B; }
.case .ds-input__error { font-size: 11px; line-height: 1.4; color: #D92D20; }

.ds-organisms { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.ds-organism { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.case .ds-organism figcaption { font-size: 12px; color: var(--text-secondary); }
.ds-float {
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--neutral-0);
  box-shadow: var(--shadow-lg);
  cursor: zoom-in;
}
.ds-float img { display: block; width: 100%; height: auto; }

@media (max-width: 860px) {
  .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
  .ds-type { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .ds-part { margin-top: 48px; }
  .case-section h2:has(+ .ds-part) { margin-bottom: 24px; }
  .swatch-row { grid-template-columns: 1fr; gap: 10px; }
  .case .swatch-row__name { padding-top: 0; }
  .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 6px; }
  .swatch__chip { height: 36px; border-radius: 8px; }
  .case .swatch__step { margin-top: 5px; font-size: 11px; }
  .case .swatch__hex { font-size: 8.5px; letter-spacing: 0; }
  .case .ds-type__aa { font-size: 72px; }
  .ds-type__scale th:nth-child(3), .ds-type__scale td:nth-child(3) { display: none; }
  .ds-type__scale td:first-child { white-space: normal; }
  .ds-atoms, .ds-inputs { grid-template-columns: 1fr; }
  .ds-icons li { width: 64px; }
  .ds-organisms { grid-template-columns: 1fr; }
  .ds-organism--sidebar { max-width: 200px; }
}
.ds-input__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Design system v2: swatch cards with border and shadow (as in Figma), component sets with their dashed frames */
.swatches { gap: 10px; }
.swatch {
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 12px;
  background: var(--neutral-0);
  box-shadow: var(--shadow-lg);
}
.swatches .swatch__chip { display: block; width: 100%; height: 48px; border-radius: 0; box-shadow: none; }
.swatch__text { display: flex; flex-direction: column; padding: 7px 8px 8px; }
.case .swatch__step { margin-top: 0; font-size: 12.5px; font-weight: 500; color: #181D27; }
.case .swatch__hex { font-size: 10px; color: #535862; }
.swatches--grad { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 16px; }
.swatch--grad .swatch__chip { height: 80px; object-fit: fill; }
.swatch--grad .swatch__text { flex-direction: row; justify-content: space-between; padding: 10px 12px 12px; }
.swatch--grad .swatch__text > span { display: flex; flex-direction: column; }
.swatch--grad .swatch__end { text-align: right; }
.case .swatch--grad .swatch__step { font-size: 15px; }
.case .swatch--grad .swatch__hex { font-size: 12px; }

/* Typography: the Aa panel runs the full height of the type scale */
.ds-type { align-items: stretch; }
.ds-type__face { display: flex; flex-direction: column; justify-content: space-between; }
.case .ds-type__aa { font-size: 120px; }

/* Components */
.ds-atoms { grid-template-columns: 1fr; gap: 36px; }
.ds-set { position: relative; display: block; margin: 0; padding: 0; border: 0; background: none; width: 100%; }
.ds-set img { display: block; width: 100%; height: auto; }
button.ds-set { cursor: zoom-in; }
.ds-set--buttons figcaption { position: relative; height: 20px; margin-top: 8px; }
.case .ds-set--buttons figcaption span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.ds-set--buttons figcaption span:nth-child(1) { left: 5.2%; }
.ds-set--buttons figcaption span:nth-child(2) { left: 27.4%; }
.ds-set--buttons figcaption span:nth-child(3) { left: 50.2%; }
.ds-set--buttons figcaption span:nth-child(4) { left: 74.1%; }
.ds-set--buttons figcaption span:nth-child(5) { left: 88%; }
.ds-set--inputs { max-width: 520px; }
.ds-organisms { grid-template-columns: 1fr; gap: 36px; }
.ds-organisms .ds-float { max-width: 640px; }

@media (max-width: 860px) {
  .swatches--grad { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 640px) {
  .swatches .swatch__chip { height: 32px; }
  .swatch__text { padding: 4px 4px 5px; }
  .case .swatch__step { font-size: 10.5px; }
  .case .swatch__hex { font-size: 7.5px; }
  .swatch { border-radius: 8px; }
  .swatch--grad .swatch__chip { height: 64px; }
  .case .swatch--grad .swatch__step { font-size: 14px; }
  .case .swatch--grad .swatch__hex { font-size: 11px; }
  .ds-type__face { min-height: 0; }
  .case .ds-type__aa { font-size: 80px; }
  .case .ds-set--buttons figcaption span { font-size: 9px; }
}
.ds-type__face { justify-content: flex-start; }
.case .ds-type__name { margin-top: auto; padding-top: 24px; }
@media (max-width: 640px) {
  .ds-scroll { overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .ds-scroll .ds-set--buttons { width: 760px; }
  .case .ds-set--buttons figcaption span { font-size: 12px; }
}
.ds-atoms, .ds-organisms { grid-template-columns: minmax(0, 1fr); }
.ds-group { min-width: 0; }

/* Icons: Figma component sets (dashed frame, Default + active), a few per group */
.ds-icon-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.case .ds-icon-group__name { margin-bottom: 10px; font-size: var(--cs-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-800); }
.ds-icon-sets { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.ds-icon-sets li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.ds-icon-sets img { display: block; width: 48px; height: auto; }
.case .ds-icon-sets span { font-size: 11px; line-height: 1.3; color: var(--text-secondary); text-align: center; }
@media (max-width: 860px) {
  .ds-icon-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (max-width: 640px) {
  .ds-icon-sets { gap: 6px; }
  .ds-icon-sets img { width: 36px; }
  .case .ds-icon-sets span { font-size: 9.5px; }
}

/* Decisions: one module per screen, text on top, desktop next to mobile */
.module--pair { grid-template-columns: 1fr; gap: 32px; }
.module--pair .module__text {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: start;
}
.module--pair .module__text .callout { margin-top: 30px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 21%; gap: 24px; align-items: start; }
.pair--desk-only { grid-template-columns: minmax(0, 1fr); }
.pair .pair__phone { aspect-ratio: 375 / 812; border-radius: 22px; box-shadow: var(--shadow-lg); }
@media (max-width: 860px) {
  .module--pair .module__text { grid-template-columns: 1fr; gap: 0; }
  .module--pair .module__text .callout { margin-top: 24px; }
}
@media (max-width: 640px) {
  .pair { grid-template-columns: minmax(0, 1fr) 30%; gap: 12px; }
  .pair .pair__phone { border-radius: 14px; }
}
.module--pair .module__text { max-width: none; }
.module--pair .module__text h3 + p { margin-top: 12px; color: var(--text-secondary); }
.pair.pair--desk-only { grid-template-columns: minmax(0, 1fr); }

/* ---------- Motion, after avivzommer.com ---------- */
/* Brand: same Inter tracking as the headings, avatar grows a little on hover / tap */
.brand__name { letter-spacing: -0.02em; }
.brand .avatar { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.brand:active .avatar { transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) {
  .brand:hover .avatar { transform: scale(1.06); }
}
.btn { transition: transform 0.16s ease-out, background 0.2s, color 0.2s, -webkit-text-fill-color 0.2s; }
.btn:active { transform: scale(0.96); }

/* Text and blocks rise in gradually as they enter the screen */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  .brand .avatar, .btn, .btn::after { transition: none; }
}
.goals-intro, .decisions-intro { margin-bottom: 32px; }

/* Section nav, matched to avivzommer.com: centered, light 13px links, dark pill for the active one, progress line */
.section-nav { height: 46px; background: rgb(255 255 255 / 0.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.section-nav__inner { height: 100%; align-items: center; justify-content: center; gap: 2px; padding-top: 0; padding-bottom: 0; }
.section-nav a {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 12px;
  font-size: 13px; font-weight: 400;
  color: var(--neutral-500);
  transition: background 0.2s, color 0.2s;
}
.section-nav a:hover { color: var(--neutral-900); background: var(--neutral-100); }
.section-nav a.is-active, .section-nav a.is-active:hover { color: var(--neutral-0); background: var(--neutral-900); }
.section-nav a:focus-visible { outline: 2px solid var(--neutral-900); outline-offset: 2px; }
.section-nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.section-nav__progress i { display: block; width: 100%; height: 100%; background: var(--purple-700); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
@media (max-width: 1024px) { .section-nav__inner { justify-content: flex-start; } }
@media (max-width: 768px) { .section-nav { height: 44px; } }
img.profile__avatar, img.orbit__avatar { object-fit: cover; object-position: 50% 30%; background: var(--neutral-100); }

/* Decisions without the Key decision cards: text spans the full case-study column, like every other section; phones show the full screen with the bottom bar */
.module--pair .module__text { display: block; max-width: none; }
.pair .pair__phone { aspect-ratio: auto; }
.pair .pair__phone img { height: auto; object-fit: initial; }

/* ---------- Insights & approach: flat CSS illustrations (after ai-for-designers.com "The five weeks") ---------- */
/* Lavender box, white shapes with thin dark outlines, one purple accent, one small endless motion per illustration */
.shift2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 40px;
}
.art-card { margin: 0; padding: 24px 20px 32px; min-width: 0; }
.case .art-card__num { margin-top: 22px; font-size: var(--cs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--purple-700); }
.art-card h3 { margin: 8px 0 10px; }
.art-card figcaption { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

.art { position: relative; height: 240px; overflow: hidden; background: var(--purple-100); border-radius: 16px; }
.art b {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-500);
}

/* small glyphs that live inside the boxes */
.g-lines, .g-folders, .g-sheet, .g-bars { position: absolute; left: 8px; right: 8px; top: 9px; }
.g-lines i { display: block; height: 5px; margin-bottom: 5px; border-radius: 3px; background: var(--purple-200); width: var(--w, 70%); animation: art-type 3s infinite; }
.g-lines i:nth-child(2) { --w: 88%; animation-delay: 0.4s; }
.g-lines i:nth-child(3) { --w: 46%; animation-delay: 0.8s; }
.g-folders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.g-folders i { aspect-ratio: 4 / 3; border-radius: 3px; background: var(--purple-200); animation: art-pulse 2.4s infinite; }
.g-folders i:nth-child(2) { animation-delay: 0.3s; background: var(--purple-400); }
.g-folders i:nth-child(3) { animation-delay: 0.6s; }
.g-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.g-sheet i { height: 8px; border-radius: 2px; background: var(--neutral-100); outline: 1px solid var(--purple-200); }
.g-sheet i:nth-child(-n+3) { background: var(--purple-200); }
.g-bars { display: flex; align-items: flex-end; gap: 5px; height: 26px; }
.g-bars i { width: 9px; border-radius: 3px 3px 1px 1px; background: var(--purple-200); }
.g-bars i:nth-child(1) { height: 16px; }
.g-bars i:nth-child(2) { height: 26px; background: var(--purple-500); }
.g-bars i:nth-child(3) { height: 12px; }

/* Today: tools in the corners, the user in the middle, an accent square running between them */
.art__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.art__lines line { stroke: var(--neutral-900); stroke-opacity: 0.35; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.art__tool {
  position: absolute; width: 26%; height: 30%;
  background: var(--neutral-0); border: 1px solid var(--neutral-900); border-radius: 10px;
  animation: art-float 3.2s ease-in-out infinite;
}
.art__tool--tl { left: 6%; top: 11%; }
.art__tool--tr { right: 6%; top: 11%; animation-delay: 0.8s; }
.art__tool--bl { left: 6%; bottom: 9%; animation-delay: 1.6s; }
.art__tool--br { right: 6%; bottom: 9%; animation-delay: 2.4s; }
.art__user {
  position: absolute; left: 50%; top: 52%; z-index: 2;
  width: 52px; height: 52px; transform: translate(-50%, -50%);
  border: 2px solid var(--neutral-900); border-radius: 50%; overflow: hidden; background: var(--neutral-0);
}
.art__user img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.art__runner {
  position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 3px; background: var(--purple-600);
  transform: translate(-50%, -50%); animation: art-tour 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* With the platform: four modules feeding one platform, data packets running down the wires (the Finance chart stays still) */
.art__mod { position: absolute; top: 10%; width: 20%; height: 32%; background: var(--neutral-0); border: 1px solid var(--neutral-900); border-radius: 10px; }
.art__mod--1 { left: 6%; }
.art__mod--2 { left: 28.67%; }
.art__mod--3 { left: 51.33%; }
.art__mod--4 { left: 74%; }
.art__mod b { right: 6px; letter-spacing: 0.1em; }
.art__wire { position: absolute; top: 42%; height: 18%; width: 1px; background: var(--neutral-900); overflow: hidden; }
.art__wire--1 { left: 16%; }
.art__wire--2 { left: 38.67%; }
.art__wire--3 { left: 61.33%; }
.art__wire--4 { left: 84%; }
.art__wire::after { content: ""; position: absolute; left: -1px; top: -40%; width: 3px; height: 40%; border-radius: 2px; background: var(--purple-500); animation: art-drop 1.8s linear infinite; }
.art__wire--2::after { animation-delay: 0.45s; }
.art__wire--3::after { animation-delay: 0.9s; }
.art__wire--4::after { animation-delay: 1.35s; }
.art__core {
  position: absolute; left: 6%; right: 6%; top: 60%; height: 28%;
  display: flex; align-items: center; justify-content: center; padding: 0 16px;
  background: var(--purple-600); border: 1px solid var(--neutral-900); border-radius: 12px;
}
.art__core b { position: static; font-size: 11px; letter-spacing: 0.16em; margin-right: -0.16em; color: var(--neutral-0); } /* offsets the trailing letter-spacing so the label sits in the true center */

@keyframes art-type { 0% { width: 0; } 60%, 100% { width: var(--w, 70%); } }
@keyframes art-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.8); } }
@keyframes art-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes art-drop { to { top: 100%; } }
@keyframes art-tour {
  0%, 100% { left: 50%; top: 52%; }
  12% { left: 19%; top: 26%; }
  25% { left: 50%; top: 52%; }
  37% { left: 81%; top: 26%; }
  50% { left: 50%; top: 52%; }
  62% { left: 81%; top: 76%; }
  75% { left: 50%; top: 52%; }
  87% { left: 19%; top: 76%; }
}

@media (max-width: 860px) {
  .shift2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .art-card { padding: 20px 0 28px; }
  .art { height: 220px; }
  /* four modules side by side: narrower margins and labels so "Work logs" stays on one line */
  .art__mod { width: 21.5%; }
  .art__mod--1 { left: 4%; }
  .art__mod--2 { left: 27.5%; }
  .art__mod--3 { left: 51%; }
  .art__mod--4 { left: 74.5%; }
  .art__wire--1 { left: 14.75%; }
  .art__wire--2 { left: 38.25%; }
  .art__wire--3 { left: 61.75%; }
  .art__wire--4 { left: 85.25%; }
  .art__core { left: 4%; right: 4%; }
  .art__mod b { left: 6px; right: 4px; font-size: 8px; letter-spacing: 0.05em; }
  .art__mod .g-lines, .art__mod .g-folders, .art__mod .g-sheet, .art__mod .g-bars { left: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .art *, .art *::before, .art *::after { animation: none !important; }
}

/* Design system: Colors and Typography span the full column, with their contents at 80% of the size. Mobile keeps its own sizes, which are already small. */
@media (min-width: 721px) {
  .ds-colors, .ds-type { zoom: 0.8; }
}
/* Colors: the row names (Grey, Purple...) in black, a little larger than the other labels */
.case .swatch-row__name { font-size: 14px; letter-spacing: 0.1em; color: var(--neutral-900); }
@media (max-width: 720px) {
  .case .swatch-row__name { font-size: 12px; }
}

/* Case studies: half the space between sections (60px desktop, 40px mobile) */
.case .case-section { padding: calc(var(--section) / 2) 0; }

/* ---------- Travel UP case study ---------- */
/* Apps examined in the research: app icons, as in the old portfolio */
.app-logos { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.app-logos img { display: block; width: 64px; height: 64px; }
@media (max-width: 640px) { .app-logos img { width: 56px; height: 56px; } }

/* Phone strips: four side by side, the rest scroll; optional caption above each phone */
.phones--4 .phone, .phones--4 .phone-fig { flex: 0 0 calc((100% - 48px) / 4); }
.phone-fig { margin: 0; scroll-snap-align: start; }
.phone-fig .phone { display: block; width: 100%; }
.case .phone-fig figcaption { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
@media (max-width: 720px) {
  .phones--4 .phone, .phones--4 .phone-fig { flex-basis: 46%; }
}

/* Screens: text on top, then the phone strip */
.module--screens .module__text { position: static; }
.module--screens .module__text h3 { margin-top: 4px; }
.module--screens .module__text p:not(.module__num) { margin-top: 12px; color: var(--text-secondary); }
.module--screens .phones { margin-top: 0; }

/* Flowchart: branches that merge back into one node */
.flowchart--travel { --fc-accent: var(--purple-500); --fc-bg: var(--purple-100); --fc-core: var(--purple-600); }
.fc-branches--merge { position: relative; }
/* the rail that gathers the branches: the first and last columns draw its rounded ends, the columns between draw their stretch,
   so columns can have different widths */
.fc-branches--merge .fc-col:not(:first-child):not(:last-child) { box-shadow: inset 0 -1px 0 var(--fc-line); }
.fc-branches--merge .fc-col:first-child > .fc-tail,
.fc-branches--merge .fc-col:last-child > .fc-tail { width: calc(50% + 0.5px); background: none; border-bottom: 1px solid var(--fc-line); }
.fc-branches--merge .fc-col:first-child > .fc-tail { align-self: flex-end; border-left: 1px solid var(--fc-line); border-bottom-left-radius: 10px; }
.fc-branches--merge .fc-col:last-child > .fc-tail { align-self: flex-start; border-right: 1px solid var(--fc-line); border-bottom-right-radius: 10px; }
.fc-branches--narrow { width: 50%; }
.fc-tail { flex: 1 1 auto; display: block; width: 1px; min-height: 20px; background: var(--fc-line); }
.fc-col--pass { padding-top: 20px; }
/* Travel UP: the three ways in take the width of their content, and the direct line to the item page runs close beside them,
   so the group sits centred with even space on both sides */
.flowchart--travel .fc-branches:not(.fc-branches--narrow) { width: auto; }
.flowchart--travel .fc-branches:not(.fc-branches--narrow) .fc-col { flex: 0 0 auto; padding-inline: 16px; }
.flowchart--travel .fc-branches:not(.fc-branches--narrow) .fc-col--pass { flex: 0 0 40px; padding-inline: 0; }
/* the module cards carry the full screen names from the old flowchart */
.flowchart--travel .fc-node--mod { width: 196px; }
.flowchart--travel .fc-node--mod b { letter-spacing: 0.08em; }
.flowchart--travel .fc-node--mod .g-map, .flowchart--travel .fc-node--mod .g-folders, .flowchart--travel .fc-node--mod .g-lines { right: auto; width: 96px; }
/* the first column's rounded end reaches across its side padding to meet the next column */
.flowchart--travel .fc-branches--merge:not(.fc-branches--narrow) .fc-col:first-child > .fc-tail { width: calc(50% + 16.5px); margin-right: -16px; }
/* one packet travels the whole route, from the splash screen down to the thank you page */
.flowchart--travel .flowchart__tree > .fc-line:nth-child(2)::after { animation-delay: 0s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(4)::after { animation-delay: 0.4s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(6)::after { animation-delay: 0.8s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(8)::after { animation-delay: 1.2s; }
.flowchart--travel .fc-col > .fc-line:nth-child(2)::after { animation-delay: 1.6s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(10)::after { animation-delay: 2s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(12)::after { animation-delay: 2.4s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(14)::after { animation-delay: 2.8s; }
.flowchart--travel .flowchart__tree > .fc-line:nth-child(16)::after { animation-delay: 3.2s; }

/* Design system: six swatches per row, the Poppins scale set in the site font (Inter), button set */
.swatches--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-type--poppins .ds-type__scale td:first-child { font-size: var(--fs); line-height: 1.25; letter-spacing: -0.02em; }
@media (max-width: 720px) {
  /* keep the biggest samples inside the column on phones */
  .ds-type--poppins .ds-type__scale td:first-child { font-size: min(var(--fs), 22px); }
  .ds-type--poppins .ds-type__scale td { white-space: normal; }
}
@media (max-width: 720px) {
  .swatches--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* a light panel so the white icons (made for photos) stay visible */
/* Travel UP components, by Atomic Design level like the main case study: each component set on its own purple tile */
/* sets shown at ~70% of their Figma size, like the component sets in the main case study; no panel, on the section background */
.ds-tu-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.ds-tu-groups .ds-group--wide { flex-basis: 100%; }
.ds-tu-tile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ds-tu-tile img { display: block; max-width: 100%; height: auto; }
@media (min-width: 641px) { .ds-tu-tile { zoom: 0.7; } }
/* retreat cards and the calendar share one row on desktop, so the organisms come down a little more */
@media (min-width: 1025px) { .ds-tu-groups--organisms .ds-tu-tile { zoom: 0.6; } }
@media (max-width: 640px) {
  .ds-tu-groups { gap: 28px 24px; }
  .ds-tu-tile { gap: 12px; }
  .ds-tu-tile img { zoom: 0.8; }
}
/* the card anatomy sits on the section background too, at the scale of the cards above */
#design-system .art--anatomy { background: none; border-radius: 0; overflow: visible; }
/* the card anatomy closes the section on a purple band across the full width of the screen
   (painted by the shadow, clipped to the band's height, so no page overflow); it runs into the section's bottom padding */
#design-system .ds-group--band {
  padding: 40px 0 calc(var(--section) / 2); margin-bottom: calc(var(--section) / -2);
  background: var(--purple-100); box-shadow: 0 0 0 100vmax var(--purple-100); clip-path: inset(0 -100vmax);
}
/* heading and one line on the left, the card on the right; stacked below 1025px */
.case .ds-band__title { margin: 0; font-size: var(--cs-h2); line-height: 1.18; font-weight: 500; letter-spacing: -0.035em; color: var(--text); }
.case .ds-band__text p { margin-top: 14px; color: var(--text-secondary); }
.ds-band__text { max-width: 420px; }
/* the band is purple-100, so the marker goes a step darker to stay visible */
.ds-band__title .marker { background-image: linear-gradient(transparent 52%, var(--purple-300) 52%, var(--purple-300) 92%, transparent 92%); }
@media (min-width: 1025px) {
  #design-system .ds-group--band { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; column-gap: 40px; }
  #design-system .ds-group--band .anat { zoom: 0.8; }
}
@media (max-width: 640px) { #design-system .ds-group--band { padding-top: 32px; } }
@media (min-width: 641px) { #design-system .art--anatomy { height: 360px; } }
@media (min-width: 1025px) { #design-system .art--anatomy { height: 340px; } #design-system .anat { zoom: 0.9; } }
.ds-tu-sets { display: grid; gap: 16px; }
.ds-tu-sets .ds-set { padding: 24px; border-radius: 16px; background: var(--purple-100); }
.ds-set--anatomy img { max-width: 620px; margin: 0 auto; }
@media (max-width: 640px) { .ds-tu-sets .ds-set { padding: 14px; border-radius: 12px; } }

/* Travel UP top, like the old Wix hero: title and summary in a narrower left column, the phones on the right.
   The Overview row follows at full width, like the main case study.
   Below 860px it's one column, with the phones right after the title so they show in the first screen */
.case-top {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "head hero" "body hero" ". hero";
  column-gap: 48px;
}
.case-top .case-header { grid-area: head; padding: 56px 0 0; }
.case-top .case-header__title { max-width: none; }
.case-top__body { grid-area: body; }
.case-top__body .tags { margin-top: 24px; }
.case-top + .case-overview { margin-top: 40px; }
.case-top .case-hero { grid-area: hero; padding-top: 96px; }
@media (max-width: 860px) {
  .case-top { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "hero" "body"; }
  .case-top .case-hero { padding-top: 40px; }
  .case-top .hero-stage { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .case-top .case-header { padding-top: 24px; }
  .case-top .case-header .back-link { margin-bottom: 16px; }
  .case-top .case-hero { padding-top: 32px; }
  .case-top .hero-stage { max-width: 300px; }
}

/* Travel UP hero: the two phones from the old portfolio, no panel. They come in when they reach the screen,
   then drift at slightly different speeds while scrolling (--p: 0 → 1 as the stage passes through the viewport) */
.hero-stage { --p: 0.5; position: relative; width: 100%; aspect-ratio: 0.88; }
.hero-stage__phone { position: absolute; height: 80%; aspect-ratio: 694 / 1345; }
.hero-stage__phone--home { left: 1%; top: 2%; translate: 0 calc((0.5 - var(--p)) * 40px); }
.hero-stage__phone--welcome { left: 52.5%; top: 16%; translate: 0 calc((0.5 - var(--p)) * 110px); }
.hero-stage__phone img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 20px 28px rgb(62 28 150 / 0.12)); }
/* entrance: Home drops in from above, Welcome rises from below a beat later.
   Keyframes (not transitions), so they always start from the hidden state even if the page painted first */
.js-hero .hero-stage__phone img { opacity: 0; }
.js-hero .hero-stage.is-in .hero-stage__phone--home img { animation: hs-from-top 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.js-hero .hero-stage.is-in .hero-stage__phone--welcome img { animation: hs-from-bottom 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
@keyframes hs-from-top { from { opacity: 0; transform: translateY(var(--from-top, -140px)); } to { opacity: 1; transform: none; } }
@keyframes hs-from-bottom { from { opacity: 0; transform: translateY(var(--from-bottom, 180px)); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .hero-stage__phone--welcome { translate: 0 calc((0.5 - var(--p)) * 70px); }
  .hero-stage { --from-top: -80px; --from-bottom: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage__phone--home, .hero-stage__phone--welcome { translate: none; }
  .js-hero .hero-stage__phone img { opacity: 1; animation: none !important; }
}

/* Travel UP card anatomy, in the Insights illustration language: white card with a dark outline on purple-100,
   callout lines with rounded elbows. Drawn on a fixed 720×320 canvas; below 640px the labels drop under the card */
.art--anatomy { height: 340px; background: var(--purple-100); }
.anat { position: absolute; left: 50%; top: 50%; width: 720px; height: 320px; transform: translate(-50%, -50%); }
.anat__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anat__lines path { fill: none; stroke: var(--neutral-900); stroke-width: 1; }
.anat__packets path {
  stroke: var(--purple-600); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 0.12 2; stroke-dashoffset: 0.12; opacity: 0;
  animation: anat-packet 8s linear infinite;
}
.anat__card {
  position: absolute; left: 200px; top: 60px; width: 320px; height: 180px;
  background: var(--neutral-0); border: 1px solid var(--neutral-900); border-radius: 16px;
}
.anat__img { position: absolute; left: 10px; top: 10px; width: 120px; height: 160px; border-radius: 10px; background: var(--purple-200); }
.anat__heart, .anat__chip, .anat__star, .anat__pin { position: absolute; }
.anat__heart { left: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--neutral-0); border: 1px solid var(--neutral-900); }
.anat__heart::after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50% 50% 2px 50%; transform: rotate(45deg); background: var(--purple-400); }
.anat__chip {
  left: 8px; bottom: 8px; width: 70px; height: 20px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: var(--neutral-0); border: 1px solid var(--neutral-900); border-radius: 8px;
}
.anat__chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--purple-500); }
.anat__chip s, .anat__row s { display: block; height: 5px; border-radius: 3px; background: var(--purple-200); flex: 1; }
.anat__title { position: absolute; left: 145px; top: 22px; width: 150px; height: 9px; border-radius: 5px; background: var(--neutral-900); opacity: 0.85; }
.anat__title--2 { top: 38px; width: 104px; }
.anat__row { position: absolute; left: 145px; display: flex; align-items: center; gap: 7px; height: 12px; }
.anat__row--rating { top: 69px; width: 40px; }
.anat__row--location { top: 91px; width: 94px; }
.anat__star { position: relative; width: 11px; height: 11px; flex: none; background: var(--purple-500); clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 60%, 81% 100%, 50% 78%, 19% 100%, 29% 60%, 0 38%, 37% 35%); }
.anat__pin { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--purple-400); }
.anat__price { position: absolute; right: 16px; bottom: 18px; width: 56px; height: 12px; border-radius: 6px; background: var(--neutral-900); }
.anat__label {
  position: absolute; display: flex; align-items: center; height: 24px; padding: 0 10px; white-space: nowrap;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-700);
  background: var(--neutral-0); border: 1px solid var(--neutral-900); border-radius: 8px;
  animation: anat-label 8s ease infinite;
}
.anat__label--1 { right: calc(100% - 112px); top: 77px; }
.anat__label--2 { left: 580px; top: 60px; }
.anat__label--3 { left: 580px; top: 145px; }
.anat__label--4 { left: 300px; top: 280px; }
.anat__hit { animation: anat-pulse 8s ease infinite; }
/* one callout at a time, two seconds each */
.anat__packets path:nth-child(2), .anat__label--2, .anat__hit--2 { animation-delay: 2s; }
.anat__packets path:nth-child(3), .anat__label--3, .anat__hit--3 { animation-delay: 4s; }
.anat__packets path:nth-child(4), .anat__label--4, .anat__hit--4 { animation-delay: 6s; }
@keyframes anat-packet { 0% { stroke-dashoffset: 0.12; opacity: 1; } 16% { stroke-dashoffset: -1; opacity: 1; } 17%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes anat-label {
  0%, 13% { background: var(--neutral-0); color: var(--neutral-700); }
  17%, 27% { background: var(--purple-600); color: var(--neutral-0); }
  33%, 100% { background: var(--neutral-0); color: var(--neutral-700); }
}
@keyframes anat-pulse { 0%, 12%, 100% { scale: 1; } 5% { scale: 1.3; } }
@media (min-width: 1025px) { .art--anatomy { height: 400px; } .anat { zoom: 1.2; } }
@media (max-width: 860px) { .anat { zoom: 0.9; } }
@media (max-width: 720px) { .anat { zoom: 0.8; } }
@media (max-width: 640px) {
  .art--anatomy { height: auto; padding: 24px 12px; }
  .anat { position: static; zoom: 1; width: auto; height: auto; transform: none; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .anat__lines { display: none; }
  .anat__card { position: relative; left: auto; top: auto; zoom: 0.86; }
  .anat__labels { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 8px; }
  .anat__label { position: static; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .anat__packets { display: none; }
  .anat__label, .anat__hit { animation: none; }
}

/* Insights glyphs for Travel UP: stars for reviews, faces for instructors */
.g-stars, .g-avatars { position: absolute; left: 8px; right: 8px; top: 9px; display: flex; gap: 4px; }
.g-stars i { width: 9px; height: 9px; border-radius: 50%; background: var(--purple-200); }
.g-stars i:nth-child(-n+4) { background: var(--purple-500); }
.g-avatars i { width: 16px; height: 16px; border-radius: 50%; background: var(--purple-200); border: 1.5px solid var(--neutral-0); }
.g-avatars i + i { margin-left: -9px; }
.g-avatars i:nth-child(2) { background: var(--purple-400); }
/* longer module names (Instructors): tighter label */
.art--tight .art__mod b { letter-spacing: 0.04em; right: 4px; }
@media (max-width: 640px) { .art--tight .art__mod b { font-size: 7.5px; letter-spacing: 0.02em; } }

/* Travel UP wireframes, after ofirpellman.com: hover (or tap) a wireframe and the final design fades in over it */
.phone--swap { position: relative; cursor: pointer; }
.phone--swap img { display: block; }
.phone--swap .phone__ui { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.phone--swap.is-ui .phone__ui { opacity: 1; }
@media (hover: hover) { .phone--swap:hover .phone__ui, .phone--swap:focus-visible .phone__ui { opacity: 1; } }
/* the Wireframes heading says Hover on desktop and Tap on touch screens */
.wf-hint--tap { display: none; }
@media (hover: none) { .wf-hint--hover { display: none; } .wf-hint--tap { display: inline; } }
@media (prefers-reduced-motion: reduce) { .phone--swap .phone__ui { transition: none; } }

/* ===== I-Health (2026-10-23), built on the Travel UP case study ===== */

/* Hero: two desktop screens instead of two phones, same entrance and scroll drift */
.hero-stage--web { aspect-ratio: 1.12; }
.hero-stage--web .hero-stage__phone { height: auto; width: 86%; aspect-ratio: 2400 / 1551; }
.hero-stage--web .hero-stage__phone--home { left: 0; top: 8%; }
.hero-stage--web .hero-stage__phone--welcome { left: auto; right: 0; top: 40%; }
.hero-stage--web .hero-stage__phone img { border-radius: 10px; border: 1px solid var(--neutral-200); background: var(--neutral-0); object-fit: cover; }

/* Research: the inspiration logos are wide, not square */
.app-logos--wide { gap: 12px; }
.app-logos--wide img { width: auto; height: 48px; border-radius: 10px; }
@media (max-width: 640px) { .app-logos--wide img { height: 40px; } }

/* Insights, step 2: the AI diagnosis passes to the therapist, then down to the user */
.art--review .art__mod { top: 12%; width: 36%; height: 30%; }
.art__mod--ai { left: 6%; }
.art__mod--human { right: 6%; }
.art__hwire { position: absolute; top: 27%; left: 42%; width: 16%; height: 1px; background: var(--neutral-900); overflow: hidden; }
.art__hwire::after { content: ""; position: absolute; top: -1px; left: -40%; width: 40%; height: 3px; border-radius: 2px; background: var(--purple-500); animation: art-run 1.8s linear infinite; }
.art--review .art__wire--down { left: 76%; }
.g-check { position: absolute; left: 8px; top: 9px; }
.g-check i { position: relative; display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--purple-500); }
.g-check i::after { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--neutral-0); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes art-run { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .art__hwire::after { animation: none; } }

/* User flow, drawn like Travel UP: module cards for the ways in, the therapist card shows faces */
.flowchart--ihealth .fc-node--mod .g-avatars { position: absolute; left: 8px; right: 8px; top: 9px; }
.flowchart--ihealth .fc-branches--grid {
  display: grid; width: max-content; margin: 0 auto;
  grid-template-columns: repeat(4, max-content) minmax(max-content, 1fr) minmax(max-content, 1fr);
}
.flowchart--ihealth .fc-branches--grid .fc-col { padding-inline: 7px; }
/* the tree takes its content width (not the 900px minimum), so it sits centred in the panel and only scrolls when it can't fit */
.flowchart--ihealth .flowchart__tree { min-width: max-content; }
/* Signup closes the top rail, though the chain comes after it in the markup */
.fc-branches--grid .fc-col--end::before { right: 50%; border-right: 1px solid var(--fc-line); border-top-right-radius: 10px; height: 20px; }
.fc-branches--grid .fc-col--end::after { display: none; }
/* Login and Signup meet under the middle of their two columns, with rounded corners */
.fc-col--join-l > .fc-tail, .fc-col--join-r > .fc-tail { width: calc(50% + 7.5px); background: none; border-bottom: 1px solid var(--fc-line); }
.fc-col--join-l > .fc-tail { align-self: flex-end; margin-right: -7px; border-left: 1px solid var(--fc-line); border-bottom-left-radius: 10px; }
.fc-col--join-r > .fc-tail { align-self: flex-start; margin-left: -7px; border-right: 1px solid var(--fc-line); border-bottom-right-radius: 10px; }
.fc-chain { grid-column: 5 / 7; display: flex; flex-direction: column; align-items: center; }

/* Wireframes: desktop screens, three in a row; the final design fades in on hover (or tap) */
.phones--web3 .phone-fig { flex: 0 0 calc((100% - 32px) / 3); }
.phone--web { aspect-ratio: 1728 / 1117; border-radius: 10px; }
@media (max-width: 720px) { .phones--web3 .phone-fig { flex-basis: 82%; } }

/* I-Health design system: four base colors per row, as in Figma */
.swatches--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swatch-stack { display: grid; gap: 16px; }
/* the I-Health sets are drawn large in Figma, so they show at half size, in proportion with the main case study */
@media (min-width: 641px) { .ds-ihealth .ds-tu-tile { zoom: 0.5; } }
@media (max-width: 640px) { .ds-ihealth .ds-tu-tile img { zoom: 0.6; } .swatches--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* buttons and the other atoms keep the Travel UP scale */
@media (min-width: 641px) { .ds-ihealth .ds-level--atoms .ds-tu-tile { zoom: 0.7; } }
/* components with white parts share one light purple panel, in one row when it fits */
.ds-onband { margin-bottom: 32px; padding: 20px 18px; border-radius: 16px; background: var(--purple-200); column-gap: 12px; }
.ds-onband .ds-group__title { color: var(--purple-900); }
/* scroll buttons 30% smaller, closer to their size in Figma */
@media (min-width: 641px) { .ds-ihealth .ds-group--scroll .ds-tu-tile { zoom: 0.49; } }
/* cards 20% smaller */
@media (min-width: 641px) { .ds-ihealth .ds-group--cards .ds-tu-tile { zoom: 0.4; } }
@media (max-width: 640px) { .ds-onband { padding: 18px 16px; border-radius: 12px; } }

/* I-Health hero with one screen: the reviewed diagnosis, a little lower than the title */
.hero-stage--single { aspect-ratio: 1.3; }
.hero-stage--web.hero-stage--single .hero-stage__phone--welcome { left: 0; right: 0; width: 100%; top: 14%; }
/* I-Health colors: 50% more space between the rows */
.ds-ihealth .ds-colors { gap: 66px; } /* twice the space between colors and the grey scale */
.ds-ihealth .swatch-stack { gap: 24px; }
@media (max-width: 860px) { .case-top .hero-stage--single { max-width: 560px; aspect-ratio: 1.45; } .hero-stage--web.hero-stage--single .hero-stage__phone--welcome { top: 8%; } }

/* I-Health UI screens, after ofirpellman.com: every screen in the same frame. The homepage scrolls through
   the full page inside it; pages with several states fade from one to the next (3.5s each) */
.show {
  position: relative; display: block; width: 100%; aspect-ratio: 1728 / 1117; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--neutral-200); border-radius: 12px; background: var(--neutral-0); box-shadow: var(--shadow-lg);
}
.show img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.show--scroll img { animation: show-scroll 33s ease-in-out infinite; }
@keyframes show-scroll { 0%, 8% { object-position: 50% 0; } 46%, 54% { object-position: 50% 100%; } 92%, 100% { object-position: 50% 0; } }
.show--fade img { opacity: 0; animation: show-fade-4 14s infinite; }
.show--fade[style*="--n:2"] img { animation-name: show-fade-2; animation-duration: 7s; }
.show--fade img:nth-child(2) { animation-delay: 3.5s; }
.show--fade img:nth-child(3) { animation-delay: 7s; }
.show--fade img:nth-child(4) { animation-delay: 10.5s; }
/* each image fades in, stays for its turn, and fades out as the next one arrives */
@keyframes show-fade-4 { 0% { opacity: 0; } 3%, 25% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes show-fade-2 { 0% { opacity: 0; } 6%, 50% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* the product page has four separate screens, so they scroll as one strip, stopping at each screen */
.show--strip img { position: static; height: auto; aspect-ratio: 2400 / 1551; }
.show__strip { display: block; animation: show-strip 33s ease-in-out infinite; }
@keyframes show-strip {
  0%, 12% { transform: translateY(0); }
  25%, 37% { transform: translateY(-25%); }
  50%, 62% { transform: translateY(-50%); }
  75%, 87% { transform: translateY(-75%); }
  100% { transform: translateY(0); }
}
.show:hover img, .show:hover .show__strip { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .show img, .show__strip { animation: none; }
  .show--fade img:not(:first-child) { opacity: 0; }
}

/* I-Health product page and profile: one screen at a time, the arrows move between them */
.show--slides { cursor: zoom-in; }
.show--slides img { opacity: 0; transition: opacity 0.45s ease; }
.show--slides img.is-active { opacity: 1; }
/* arrows beside the screen, after ofralbo.com (20% smaller): 27px circles with a 12px arrow, back on the left, next on the right.
   Back shows from the second screen, next hides on the last. Black (neutral-900) with a white arrow;
   on hover and press light purple with a black arrow */
.show-wrap { position: relative; }
.show-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 0; background: var(--neutral-900); color: var(--neutral-0);
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease, scale 0.15s ease;
}
.show-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.show-arrow--prev { left: -43px; }
.show-arrow--next { right: -43px; }
.show-arrow[hidden] { display: grid; opacity: 0; pointer-events: none; }
.show-arrow:hover, .show-arrow:active { color: var(--neutral-900); background: var(--purple-200); }
.show-arrow:active { scale: 0.94; }
.show-arrow:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 3px; }
/* without room beside the screen, the arrows sit under it on the right */
@media (max-width: 1120px) {
  .show-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 10px; }
  .show-wrap .show { grid-column: 1 / -1; }
  .show-arrow { position: static; translate: none; grid-row: 2; }
  .show-arrow--prev { grid-column: 2; }
  .show-arrow--next { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) { .show--slides img, .show-arrow { transition: none; } }

/* ---------- Case study footer (after the luma.com footer) ----------
   A two-line closing line in a purple-to-indigo gradient, two small pills, all over a dot grid where
   clusters of dots light up and fade (canvas, drawn in main.js). The grid runs on under the site footer. */
.case-end {
  position: relative;
  display: grid;
  place-items: center;
  padding: 112px 0 48px;
}
.case-end__dots {
  position: absolute; top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8rem);
  mask-image: linear-gradient(to bottom, transparent, #000 8rem);
}
.case-end__inner { position: relative; z-index: 1; text-align: center; }
.case .case-end__title, .case-end__title {
  max-width: 600px;
  margin: 0 auto;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.grad-text {
  background: linear-gradient(100deg, var(--purple-700) 0%, var(--purple-500) 36%, var(--indigo-500) 58%, var(--indigo-400) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.case-end__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }

/* the site footer sits on the same dot grid */
body:has(.case-end) .site-footer { z-index: 1; }

@media (max-width: 640px) {
  .case-end { padding: 88px 0 40px; }
  .case .case-end__title, .case-end__title { font-size: 30px; }
}

/* ---------- About (after avivzommer.com/about) ----------
   Hero with the portrait on the right, a 760px bio, an experience card whose rows open on hover or tap,
   then "How I work" and "Education" as small blocks. Sections are split by a full-width purple-300 line.
   Aviv's sand surface → purple-50, his yellow → purple-100 / purple-300. */
/* the same centred glow as the homepage hero (.hero::before) */
.ab-hero { position: relative; isolation: isolate; overflow-x: clip; margin-top: calc(var(--header-h) * -1); padding: calc(104px + var(--header-h)) 0 64px; }
.ab-hero__inner { display: grid; grid-template-columns: 1fr 240px; gap: 80px; align-items: start; } /* photo 20% smaller than Aviv's 300px */
.ab-hero .eyebrow { margin-bottom: 28px; }
.ab-hero__title { font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.12; margin: 0 0 24px; }
.ab-hero__intro { font-size: 17px; line-height: 1.72; color: var(--text-secondary); max-width: 620px; }
.ab-hero__photo { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--purple-50); }
.ab-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.ab-section { padding: 96px 0; border-top: 1px solid var(--purple-300); }
.ab-head { margin-bottom: 56px; max-width: 820px; }
.ab-head .eyebrow { margin-bottom: 24px; }
.ab-head__title { font-size: clamp(32px, 4vw, 52px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; margin: 0; }

.ab-bio__text { max-width: 760px; font-size: 17px; line-height: 1.78; color: var(--text-secondary); }
.ab-bio__text p + p { margin-top: 1.3em; }
.ab-bio__text strong { color: var(--text); font-weight: 500; }

.ab-section--exp { padding: 48px 0; }
.ab-exp { background: var(--purple-50); border-radius: 28px; padding: 64px 64px 36px; }
.ab-exp .ab-head { margin-bottom: 28px; }
.ab-exp__list { list-style: none; margin: 0; padding: 0; }
.ab-exp__entry + .ab-exp__entry { border-top: 1px solid var(--purple-200); }
.ab-exp__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start;
  width: 100%; padding: 28px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-exp__row:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 2px; border-radius: 8px; }
.ab-exp__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ab-exp__title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ab-exp__company { font-size: 22px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; color: var(--text); }
.ab-exp__type { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; font-size: 12px; line-height: 1; background: var(--neutral-0); border: 1px solid var(--purple-200); color: var(--text-secondary); border-radius: 100px; }
.ab-exp__role { font-size: 14.5px; line-height: 1.35; color: var(--text-secondary); }
.ab-exp__year { font-size: 14px; line-height: 26px; color: var(--text-secondary); white-space: nowrap; }
.ab-exp__entry--current .ab-exp__year { padding: 0 12px; border-radius: 100px; background: var(--purple-100); border: 1px solid var(--purple-300); color: var(--text); line-height: 24px; }
.ab-exp__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ab-exp__detail > * { overflow: hidden; min-height: 0; }
.ab-exp__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.ab-exp__bullets { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 0 1 520px; max-width: 520px; opacity: 0; transition: opacity 0.4s 0.1s; }
/* the screen beside the details, as on avivzommer.com: fades and grows in from the top right */
.ab-exp__shot { flex: 0 0 min(360px, 42%); margin: 0 0 28px auto; opacity: 0; transform: scale(0.94); transform-origin: right top; transition: opacity 0.4s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ab-exp__shot img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-work); }
.ab-exp__entry.is-open .ab-exp__shot { opacity: 1; transform: none; }
.ab-exp__bullets li { position: relative; padding-left: 14px; font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }
/* bullets: a round dot twice the size of the old middle dot, in purple-400 (two steps darker than the card lines) */
.ab-exp__bullets li { padding-left: 16px; }
.ab-exp__bullets li::before { content: ""; position: absolute; left: 2px; top: calc(0.825em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--purple-400); }
.ab-exp__entry.is-open .ab-exp__row { padding-bottom: 14px; }
.ab-exp__entry.is-open .ab-exp__detail { grid-template-rows: 1fr; }
.ab-exp__entry.is-open .ab-exp__bullets { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ab-exp__entry:hover .ab-exp__row { padding-bottom: 14px; }
  .ab-exp__entry:hover .ab-exp__detail { grid-template-rows: 1fr; }
  .ab-exp__entry:hover .ab-exp__bullets { opacity: 1; }
  .ab-exp__entry:hover .ab-exp__shot { opacity: 1; transform: none; }
}

.ab-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 72px; }
.ab-blocks--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.ab-block h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 14px; color: var(--text); }
.ab-block p { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); max-width: 480px; }
.ab-block .ab-block__school { margin-top: -8px; font-size: 13.5px; color: var(--neutral-400); }
.ab-tools { margin-top: 48px; }
.ab-block .ab-block__school + p { margin-top: 0; }
/* military service and languages: a quiet two-row list under the education blocks */
.ab-facts { display: grid; gap: 10px; margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--purple-200); }
.ab-facts > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.ab-facts dt { font-size: 13.5px; font-weight: 500; color: var(--text); }
.ab-facts dd { margin: 0; font-size: 14.5px; color: var(--text-secondary); }
@media (max-width: 720px) { .ab-facts > div { grid-template-columns: 1fr; gap: 2px; } .ab-facts { gap: 16px; } }

.case-end.case-end--about { padding-top: 96px; border-top: 1px solid var(--purple-300); }

@media (max-width: 1024px) { .ab-hero__inner { grid-template-columns: 1fr 192px; gap: 48px; } }
@media (max-width: 720px) {
  .ab-hero { padding: calc(56px + var(--header-h)) 0 48px; }
  .ab-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .ab-hero__photo { aspect-ratio: 4 / 5; order: -1; width: 70%; }   /* 30% smaller than full width, at Shiri's request (2026-10-28; was 100%) */
  .ab-section { padding: 64px 0; }
  .ab-section--exp { padding: 32px 0; }
  .ab-head { margin-bottom: 36px; }
  .ab-head .eyebrow { margin-bottom: 18px; }
  .ab-exp { padding: 36px 24px 20px; border-radius: 20px; }
  .ab-exp .ab-head { margin-bottom: 16px; }
  .ab-exp__row { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .ab-exp__entry.is-open .ab-exp__row { padding-bottom: 12px; }
  .ab-exp__company { font-size: 18px; }
  .ab-exp__type { height: 22px; padding: 0 10px; font-size: 11.5px; }
  .ab-exp__role { font-size: 13.5px; }
  .ab-exp__year { justify-self: start; margin-top: 8px; font-size: 13px; line-height: 22px; }
  .ab-exp__entry--current .ab-exp__year { line-height: 20px; }
  .ab-exp__inner { flex-direction: column; gap: 18px; }
  .ab-exp__bullets { flex: 0 0 auto; max-width: none; margin-bottom: 0; }
  .ab-exp__shot { flex: 0 0 auto; width: 100%; margin: 0 0 22px; transform-origin: left top; }
  .ab-blocks, .ab-blocks--3 { grid-template-columns: 1fr; gap: 32px; }
  .case-end.case-end--about { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .ab-exp__row, .ab-exp__detail, .ab-exp__bullets, .ab-exp__shot { transition: none; } }

/* Construction home page in Decisions: the static screen gives the sidebar and the app header; the content column
   (Figma 1:5393) scrolls under the header and back, like the I-Health homepage (.show--scroll, 33s).
   Header = 83 of the screen's 998px (1x); the image is 3723px tall at 1x in a 915px pane:
   it starts 83px up (-2.23%) and ends with its bottom at the pane's bottom (-75.42%). */
.shot--scroll { position: relative; }
.shot--scroll__pane { position: absolute; left: 16.6667%; right: 0; top: 8.317%; bottom: 0; overflow: hidden; }
.shot--scroll__pane img { display: block; width: 100%; height: auto; transform: translateY(-2.23%); animation: shot-scroll 33s ease-in-out infinite; }
@keyframes shot-scroll {
  0%, 8% { transform: translateY(-2.23%); }
  46%, 54% { transform: translateY(-75.42%); }
  92%, 100% { transform: translateY(-2.23%); }
}
@media (prefers-reduced-motion: reduce) { .shot--scroll__pane img { animation: none; } }

/* Travel UP, 01 Splash and welcome: screen recording from the old Wix case study, in its white phone frame.
   phone-frame-white.png (858×1742) has a transparent screen at x 63–796, y 76–1680. The 422×860 video has its
   own black frame, with the screen at x 26–399, y 25–835, so it is stretched until that screen fills the hole. */
.phone.phone--video {
  position: relative;
  aspect-ratio: 858 / 1742;
  border: 0; border-radius: 0; overflow: visible; background: transparent;
  cursor: default;
  filter: drop-shadow(0 0 20px rgba(15, 26, 42, .16));
}
.phone--video__screen {
  position: absolute; overflow: hidden;
  left: 7.343%; top: 4.363%; width: 85.548%; height: 92.135%;   /* 63/858, 76/1742, 734/858, 1605/1742 */
}
.phone--video video {
  position: absolute;
  left: -6.952%; top: -3.083%;                                    /* 26/374, 25/811 */
  width: 112.834%; height: 106.042%;                              /* 422/374, 860/811 */
  max-width: none; object-fit: fill;
}
.phone .phone--video__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
/* the strip around it has one phone and never scrolls: let the frame's shadow show in full */
.phones:has(> .phone--video) { overflow: visible; }

/* ---------- Mobile pass, matched to avivzommer.com at 375px (2026-10-26) ----------
   Labels 10.5px/500 with 0.13em tracking; the homepage hero fills the first screen with the text centred,
   48px title and 18px line; the header button is Aviv's 36px / 13px; the closing title is 34px. */
@media (max-width: 640px) {
  :root { --fs-label: 10.5px; }
  .eyebrow { font-weight: 500; letter-spacing: 0.13em; }

  .hero {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - 190px);   /* the first card peeks in at the bottom, like Aviv's entry cards */
    padding-top: 76px; padding-bottom: 44px;
  }
  .hero__title { font-size: 48px; }
  .hero__line { font-size: 18px; line-height: 1.6; }

  .header-actions .btn { height: 36px; padding: 0 16px; font-size: 13px; }

  .case .case-end__title, .case-end__title { font-size: 34px; line-height: 1.05; letter-spacing: -0.045em; }

  /* case study header: Aviv's spacing (back link 77px under the header, then the label, title, lede) */
  .case .case-header { padding-top: 76px; }
  .case .back-link, .case-top .case-header .back-link { font-size: 13px; font-weight: 400; margin-bottom: 60px; }
  .case .case-header .eyebrow { margin-bottom: 28px; }
  .case .case-header__summary { margin-top: 28px; }
}
/* About portrait between 641 and 720px: full width would be ~680px tall-ish, so it stops at 480px */
@media (min-width: 641px) and (max-width: 720px) { .ab-hero__photo { max-width: 336px; } }   /* 70% of the earlier 480px */

/* ---------- Mobile pass 2 (2026-10-26) ---------- */
.ds-buttons-m { display: none; }
@media (max-width: 640px) {
  /* homepage: half the gap between the hero line and Selected work (210 → 105px), title where it was */
  .hero { display: block; min-height: 0; padding-top: 162px; padding-bottom: 25px; }

  /* case studies: half the space at the top, and the homepage glow behind the header so it isn't so bare */
  .case { overflow-x: clip; }
  .case .case-header { position: relative; isolation: isolate; padding-top: 38px; }
  .case .back-link, .case-top .case-header .back-link { margin-bottom: 30px; }
  .case .case-header .eyebrow { margin-bottom: 14px; }
  .case .case-header::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 900px; max-width: 150%; height: 620px;
    background: radial-gradient(closest-side, rgb(217 214 254 / 0.6) 0%, rgb(199 215 254 / 0.4) 45%, rgb(235 233 254 / 0.3) 75%, rgb(255 255 255 / 0) 100%);
    pointer-events: none;
    z-index: -1;
  }


  /* construction design system: the three gradients in one row */
  .swatches--grad { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 8px; }
  .swatch--grad .swatch__chip { height: 48px; }
  .swatch--grad .swatch__text { flex-direction: column; gap: 4px; padding: 6px 8px 8px; }
  .swatch--grad .swatch__end { text-align: left; }
  .case .swatch--grad .swatch__step { font-size: 12px; }
  .case .swatch--grad .swatch__hex { font-size: 9.5px; }

  /* construction buttons: the five states side by side, cut from set-buttons.png (3034×336).
     Each crop is 210×252 px of the image, centred on a state (x from 53.5, 725.5, 1417.5, 2143.5, 2565.5; y from 32) */
  .ds-scroll:has(.ds-set--buttons) { display: none; }
  .ds-buttons-m { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 10px 8px; border: 1px dashed #9747FF; border-radius: 6px; }
  .ds-buttons-m figure { margin: 0; text-align: center; }
  .ds-btn-crop { position: relative; display: block; aspect-ratio: 210 / 252; overflow: hidden; }
  .ds-btn-crop img { display: block; width: 1444.762%; max-width: none; height: auto; margin-top: -15.238%; }
  .ds-btn-crop--1 img { margin-left: -25.476%; }
  .ds-btn-crop--2 img { margin-left: -345.476%; }
  .ds-btn-crop--3 img { margin-left: -675%; }
  .ds-btn-crop--4 img { margin-left: -1020.714%; }
  .ds-btn-crop--5 img { margin-left: -1221.667%; }
  .case .ds-buttons-m figcaption { margin-top: 6px; font-size: 10px; line-height: 1.3; color: var(--text-secondary); }
}

/* ---------- Mobile pass 3 (2026-10-26) ---------- */
.case-hero--inline { display: none; }
@media (max-width: 640px) {
  /* construction: title, screen, paragraph, like Travel UP and I-Health (the copy in the header replaces the hero below) */
  .case-hero--inline { display: block; }
  .case-hero--inline .shot--hero { margin-top: 24px; }
  .case > .case-hero { display: none; }

  /* overview: three columns, tighter. Travel UP and I-Health (three items) fit in one row, construction in two */
  .case .case-overview .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; padding: 16px 0; }
  .case .case-overview .meta__item dd { margin-top: 4px; font-size: 13px; line-height: 1.35; }
  .case-overview .tool-icons { gap: 8px; }
  .case-overview .tool-icons img { height: 20px; }
  .case-top + .case-overview { margin-top: 24px; }
  /* three items (Year, Role, Tools): the short ones take their own width, Role takes the rest */
  .case .case-overview .meta:has(> .meta__item:nth-child(3):last-child) { grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: 24px; }

  /* persona facts: three columns, tighter (construction's three fit in one row) */
  .profile__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .profile__facts div { padding-top: 8px; }
  /* three facts: Age takes its own width, the other two share the rest (a long value wraps instead of pushing the row out) */
  .profile__facts:has(> div:nth-child(3):last-child) { grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .case .profile__facts dd { font-size: 13px; line-height: 1.35; }

  /* UI design: half the space between one screen and the next (56 + 56 → 28 + 28) */
  .module { padding: 28px 0; }

  /* flowcharts at 70% */
  .flowchart__tree { zoom: 0.7; }
}