/* =====================================================================
   v5 — Editorial biotech
   Bright paper, cold ink, one bold color (cobalt). Color lives inside
   frames: grainy gradient previews, the specimen dish, the mint contact.
   Loaded after style.css and case-study.css on every page.
   ===================================================================== */
:root {
  --paper: #FAFAF7;
  --ink: #0E1116;
  --cobalt: #1B2DB8;
  --cobalt-hover: #14228F;
  --mint: #CFE9DF;
  /* Figma-matched grain: single-pixel black dots at ~55% density (Figma Noise: Mono,
     size 0.7, density 55%). Strength is set per surface with opacity, like in Figma. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 12 0 0 0 -5.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grad-signal:
    radial-gradient(ellipse 36% 50% at 16% 42%, rgba(232, 69, 44, .95), rgba(232, 69, 44, .95) 25%, rgba(232, 69, 44, 0) 100%),
    radial-gradient(ellipse 32% 46% at 52% 12%, rgba(232, 163, 58, .9), rgba(232, 163, 58, .9) 25%, rgba(232, 163, 58, 0) 100%),
    radial-gradient(ellipse 28% 42% at 80% 80%, rgba(184, 48, 31, .8), rgba(184, 48, 31, .8) 25%, rgba(184, 48, 31, 0) 100%),
    #F1B458;
  --grad-cobalt:
    radial-gradient(ellipse 35% 52% at 15% 20%, rgba(27, 45, 184, .95), rgba(27, 45, 184, .95) 25%, rgba(27, 45, 184, 0) 100%),
    radial-gradient(ellipse 36% 52% at 69% 69%, rgba(107, 63, 209, .9), rgba(107, 63, 209, .9) 25%, rgba(107, 63, 209, 0) 100%),
    radial-gradient(ellipse 26% 42% at 65% 13%, rgba(232, 163, 58, .35), rgba(232, 163, 58, 0) 100%),
    radial-gradient(ellipse 26% 42% at 14% 69%, rgba(232, 163, 58, .35), rgba(232, 163, 58, 0) 100%),
    #2A2F9E;
}

body { background: var(--paper); color: var(--ink); }

/* Cobalt is the one action color */
.btn-dark { background: var(--cobalt); color: #fff; }
.btn-dark:hover { background: var(--cobalt-hover); }
.ba-btn.is-active { background: var(--cobalt); color: #fff; }

/* Only "Fig." captions use the lab-label voice */
.fig-caption {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: rgba(14, 17, 22, .55);
}

/* ---------- Homepage hero: headline + living specimen ---------- */
.hero.hero--v5 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 386px;
  align-items: center;
  gap: 64px;
  padding-top: 72px;
}
.hero--v5 .open-to-work {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cobalt);
  margin: 0 0 18px;
}
.hero--v5 .hero-headline {
  font-size: 52px;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 720px;
}
.hero--v5 .hero-sub { font-size: 18px; color: rgba(14, 17, 22, .65); max-width: 600px; margin-top: 20px; }
.hero--v5 .hero-links { margin-top: 24px; }
.specimen { margin: 0; justify-self: end; width: 386px; max-width: 100%; }
.specimen-dish {
  width: 100%;
  aspect-ratio: 386 / 380;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(14, 17, 22, .08);
}
.specimen-dish svg { display: block; width: 100%; height: 100%; }
.specimen .fig-caption { text-align: center; margin-top: 14px; }

/* Each cell moves through the four poses from Figma on its own clock.
   Periods (13s, 26s, 13s, 26s) all divide 26s, so every 26 seconds the
   whole dish is back in State 1 and the loop is seamless. */
.cell { transform-box: view-box; transform-origin: 0 0; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
.cell--red    { animation-name: cell-red;    animation-duration: 13s; }
.cell--cobalt { animation-name: cell-cobalt; animation-duration: 26s; }
.cell--violet { animation-name: cell-violet; animation-duration: 13s; }
.cell--amber  { animation-name: cell-amber;  animation-duration: 26s; }
@keyframes cell-red {
  0%, 100% { transform: translate(74px, 190px); }
  23.08%   { transform: translate(84.3px, 176px) rotate(14.7deg) scale(1.0336, 1.0543); }
  42.31%   { transform: translate(119.3px, 157.4px) rotate(29.3deg) scale(.9395, 1.4967); }
  69.23%   { transform: translate(111.5px, 177px) rotate(29.3deg) scale(.9513, 1.4967); }
}
@keyframes cell-cobalt {
  0%, 100% { transform: translate(180px, 56px); }
  30%      { transform: translate(178.2px, 76px) scale(.9096, .8952); }
  55%      { transform: translate(184px, 63.2px) scale(.9474, .9349); }
  78%      { transform: translate(195.6px, 64.7px) rotate(9.1deg) scale(.9474, .9349); }
}
@keyframes cell-violet {
  0%, 100% { transform: translate(82px, 92px); }
  18%      { transform: translate(42.6px, 105px) rotate(-23.7deg) scale(1.1730, 1.0252); }
  46%      { transform: translate(63.1px, 83.3px) rotate(-15.4deg) scale(1.0328, 1.0618); }
  71%      { transform: translate(62.3px, 106.7px) rotate(-15.4deg) scale(.9492, .9561); }
}
@keyframes cell-amber {
  0%, 100% { transform: translate(204px, 181px); }
  22%      { transform: translate(194.4px, 156.8px) rotate(7.3deg) scale(1.1008, .9738); }
  50%      { transform: translate(195.3px, 178.8px) rotate(7.3deg) scale(1.0475, .9231); }
  74%      { transform: translate(219.2px, 177px) rotate(20.8deg) scale(1.0475, .9354); }
}

/* ---------- Grainy gradient frames (previews + case heroes) ---------- */
.preview-unclutter { background: var(--grad-signal); border-radius: 6px; }
.preview-nebula { background: var(--grad-cobalt); border-radius: 6px; }
.preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.preview-inner { position: relative; z-index: 1; }

/* Project cards: one bordered card holds the preview and the text */
.selected-work .project-card {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 20px;
  background: var(--paper);
}
.selected-work .project-card .preview { border-radius: 12px; }
.selected-work .project-content { padding: 12px 8px 4px; }

/* ---------- Contact: a slow mint light drifting around the card ---------- */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mint);
}
.contact::before {
  content: '';
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, #F5F5F7, var(--mint));
  left: -1.3%; top: 50%; width: 202.6%;
  animation: contact-light 16s infinite;
}
@keyframes contact-light {
  0%, 100% { left: -1.3%; top: 50%; width: 202.6%; animation-timing-function: ease-in-out; }
  25%      { left: 50%;   top: 100%; width: 109.6%; animation-timing-function: ease-in-out; }
  50%      { left: 100%;  top: 50%; width: 200%;   animation-timing-function: ease-in-out; }
  75%      { left: 50%;   top: 0%;  width: 77.8%;  animation-timing-function: ease-in-out; }
}
.contact h2 { font-weight: 300; font-size: 32px; }
.contact-btn { background: var(--paper); }

/* ---------- Case pages ---------- */
.cs-hero--unclutter::before { background: var(--grad-signal); }
.cs-hero--nebula::before { background: var(--grad-cobalt); }
.cs-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .3;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cs-hero h1 { font-weight: 300; font-size: 64px; letter-spacing: -0.02em; line-height: 1.08; }
.cs-hero--nebula h1, .cs-hero--nebula .cs-hero-meta, .cs-hero--nebula .cs-hero-summary { color: #fff; }
.cs-hero--nebula .cs-hero-meta { color: rgba(255, 255, 255, .88); }
.cs-hero--nebula .cs-hero-summary { color: rgba(255, 255, 255, .8); }

.case-study h2 { font-weight: 300; font-size: 36px; letter-spacing: -0.01em; }

/* Product / Problem / Solution / Result */
.cs-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cs-fact {
  background: rgba(122, 122, 122, .1);
  border-radius: 16px;
  padding: 28px 28px 32px;
}
.cs-fact h2 { margin: 0 0 12px; }
.cs-fact p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); }

/* Plates: each visual mounted on a light tint of the project color */
.cs-plate {
  background: var(--plate, #FCEFDA);
  border: 0.5px solid var(--plate-line, #EE8B26);
  border-radius: 24px;
  padding: 48px;
}
.case--nebula { --plate: #E9E2F8; --plate-line: #6975D4; }
.cs-plate .cs-figure img, .cs-plate .chat-mock, .cs-plate .avoid-card { box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .12); }
.cs-problem.shaded { background: none; }
.cs-problem.shaded .cs-problem-inner { background: none; padding: 0; }

/* Features: one wide screen on top, two below whose widths add up to it.
   Each lower figure grows by its aspect ratio, so both get the same height. */
.cs-mosaic { display: flex; flex-direction: column; gap: 20px; }
.cs-mosaic-row { display: flex; gap: 20px; }
.cs-mosaic-row .cs-figure { flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.cs-mosaic .cs-figure { margin: 0; }

.cs-phone-plate { display: flex; justify-content: center; }

/* ---------- About ---------- */
.about { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 72px var(--gutter) 96px; display: flex; flex-direction: column; gap: 96px; }
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: start; }
.about-intro p { font-size: 18px; line-height: 1.6; color: rgba(14, 17, 22, .72); margin: 0 0 18px; max-width: 680px; }
.about-intro .hero-links { margin-top: 8px; }
.about-photo img { width: 100%; aspect-ratio: 380 / 460; object-fit: cover; border-radius: 6px; display: block; }
.about h2 { font-weight: 300; font-size: 36px; letter-spacing: -0.01em; margin: 0 0 24px; }
.about-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-principles article { background: #EDEDEA; border-radius: 24px; padding: 28px; }
.about-principles h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.about-principles p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
.about-path { list-style: none; margin: 0; padding: 0; }
.about-path li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 48px; padding: 20px 0; border-top: 1px solid rgba(14, 17, 22, .1); }
.about-path .yr { font-family: var(--font-mono); font-size: 12px; color: rgba(14, 17, 22, .55); padding-top: 4px; }
.about-path h3 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.about-path .org { font-size: 15px; color: rgba(14, 17, 22, .55); margin: 0 0 6px; }
.about-path .note { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
.about-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-photos figure { margin: 0; }
.about-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; }
.about-langs { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 17px; font-weight: 500; }
.about-langs span span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: rgba(14, 17, 22, .55); margin-left: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero.hero--v5 { grid-template-columns: 1fr; gap: 40px; }
  .specimen { justify-self: center; width: 300px; }
  .hero--v5 .hero-headline { font-size: 40px; }
  .cs-hero h1 { font-size: 44px; }
  .about-intro { grid-template-columns: 1fr; }
  .about-photo { max-width: 380px; }
  .about-principles { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero.hero--v5 { padding-top: 40px; }
  .hero--v5 .hero-headline { font-size: 30px; line-height: 1.18; }
  .hero--v5 .hero-sub { font-size: 16px; }
  .specimen { width: 260px; }
  .cs-hero h1 { font-size: 32px; }
  .cs-facts { grid-template-columns: 1fr; gap: 16px; }
  .cs-fact { padding: 22px; }
  .case-study h2, .about h2 { font-size: 28px; }
  .cs-plate { padding: 16px; }
  .cs-mosaic, .cs-mosaic-row { gap: 10px; }
  .selected-work .project-content { padding: 12px 6px 4px; }
  .about { padding-top: 40px; gap: 64px; }
  .about-path li { grid-template-columns: 1fr; gap: 6px; }
  .about-photos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cell, .contact::before { animation: none; }
}

/* fixes after first render */
.about-photo img { height: auto; }
.cs-problem-stacked .cs-problem-visual { width: 100%; max-width: none; }
.cs-plate > .avoid-card, .cs-plate > .chat-mock { width: 100%; max-width: 760px; margin: 0 auto; }
.cs-phone-plate .cs-phone-frame { width: min(240px, 100%); }
.cs-problem-visual-vertical .cs-plate { width: 100%; }
/* Over the deep cobalt hero the glass needs more white so nav text stays readable */
.hero-dark .header-inner { background: rgba(255, 255, 255, .62); }

/* ---------- Figma-matched surfaces (v5.1) ---------- */
/* Plates: tinted fill + a thin line in the project color, rounded 24px */
/* Product / Problem / Solution / Result cards */
.cs-fact { border-radius: 24px; background: rgba(122, 122, 122, .1); }
.cs-fact h2 { font-style: italic; }

/* About principles */


/* Testimonial cards */
.testimonial { background: #F5F5F7; }

/* Unclutter hero: full black text on the warm gradient for readability */
.cs-hero--unclutter h1 { color: #000; }
.cs-hero--unclutter .cs-hero-meta { color: rgba(0, 0, 0, .85); }
.cs-hero--unclutter .cs-hero-summary { color: rgba(0, 0, 0, .78); }

/* Captions: always left-aligned with the left edge of their picture */
.fig-caption { text-align: left; margin-left: 0; padding-left: 0; }
.specimen .fig-caption { text-align: left; }
.cs-figure, .cs-figure-nozoom, .about-photo, .about-photos figure, .specimen { margin-left: 0; margin-right: 0; }
.cs-problem-visual .cs-figure-nozoom { margin: 0; width: auto; }
.cs-problem-visual .cs-figure-nozoom img { margin: 0; display: block; }
/* Plates span the full content width; captions start at the plate's left edge */
.cs-problem-visual-large, .cs-problem-visual-vertical { align-self: stretch; align-items: stretch; width: 100%; }
.cs-problem-visual-large .cs-plate .before-after { align-items: center; }
.cs-problem-visual-large .cs-plate .cs-figure, .cs-problem-visual-large .cs-plate .cs-figure-stack { width: 1000px; max-width: 100%; }
.cs-problem-visual-vertical { gap: 0; }

/* ---------- v5.2 alignment + minimal polish ---------- */
/* Everything reads left, nothing centered except the specimen dish contents */
.cs-fact, .cs-fact p, .about-principles article, .about-principles p,
.cs-problem-text, .cs-learned, .cs-overview { text-align: left; }
.cs-fact h2 { text-align: left; }

/* Case hero text: keep centered on the band (as in Figma), but softer Unclutter */
/* Card corners rounded to 24 like the Figma update */
.testimonial { border-radius: 24px; }

/* Round every screenshot/figure so nothing has hard edges */
.cs-figure img, .cs-figure-nozoom img, .cs-plate .cs-figure img,
.about-photo img, .about-photos img, .preview-inner img,
.chat-mock, .avoid-card { border-radius: 12px; }
.cs-figure, .cs-figure-nozoom, .cs-figure-stack figure { overflow: visible; }

/* v5: every case block stacks (text above its full-width plate) */
.case-study .cs-problem { flex-direction: column; gap: 20px; align-items: stretch; }
.case-study .cs-problem-text { max-width: 900px; }
.case-study .cs-problem-visual,
.case-study .cs-problem-visual-large,
.case-study .cs-problem-visual-vertical,
.case-study .cs-problem-single .cs-problem-visual { width: 100%; }
.cs-phone-plate { justify-content: center; }
.cs-phone-plate .cs-phone-frame { width: min(260px, 60%); }

/* v5.2: rounded, edge-free figures everywhere; consistent left alignment */
.cs-figure, .cs-figure-nozoom, .cs-figure-stack, .cs-figure-stack figure { border-radius: 12px; overflow: hidden; }
.cs-plate .cs-figure, .cs-plate .cs-figure-nozoom { border-radius: 8px; }
.project-card { text-align: left; }
.project-content, .project-body, .project-description { text-align: left; }

/* ---------- v5.3 ---------- */
/* About: principle titles in Medium Italic, as in Figma */
.about-principles h3 { font-size: 28px; font-weight: 500; font-style: italic; letter-spacing: -0.01em; margin-bottom: 12px; }
@media (max-width: 600px) { .about-principles h3 { font-size: 24px; } }

/* Unclutter: SEO table small and left-aligned */
.case--unclutter .cs-figure-nozoom { width: auto; max-width: 520px; margin: 0; overflow: visible; }
.case--unclutter .cs-figure-nozoom img { width: 100%; max-width: 520px; height: auto; margin: 0; }
@media (max-width: 600px) { .case--unclutter .cs-figure-nozoom { max-width: 100%; } }

/* Unclutter: screenshots gently grow on hover (the whole screenshot, not a
   zoom into it). Pointer devices only; still for reduced motion. */
@media (hover: hover) and (pointer: fine) {
  .case--unclutter .cs-plate .cs-figure {
    position: relative;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
  }
  .case--unclutter .cs-plate .cs-figure:hover {
    transform: scale(1.1);
    z-index: 3;
    box-shadow: 0 28px 60px -12px rgba(0, 0, 0, .25);
  }
  .case--unclutter .cs-plate .cs-figure img { cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  .case--unclutter .cs-plate .cs-figure, .case--unclutter .cs-plate .cs-figure:hover { transition: none; transform: none; }
}
/* Replace the old in-frame zoom with the whole-screenshot enlargement */
@media (hover: hover) and (pointer: fine) {
  .case--unclutter .cs-plate .cs-figure:hover img,
  .case--unclutter .cs-figure-stack .cs-figure:hover img { transform: none; box-shadow: none; }
  .case--unclutter .cs-plate .cs-figure { overflow: hidden; border-radius: 8px; }
  .case--unclutter .cs-problem-visual .cs-figure:not(.cs-figure-nozoom)::after { display: none; }
  .case--unclutter .cs-problem-visual .cs-figure:not(.cs-figure-nozoom) img { cursor: default; }
}

/* ---------- v5.4 ---------- */
/* Flat, clean screenshots: no baked or added lower edges — just rounded corners */
.cs-plate .cs-figure img, .cs-plate .cs-figure { box-shadow: none; }
.cs-plate .cs-figure { border-radius: 12px; overflow: hidden; }

/* SEO table: one continuous rounded border, nothing clipped at the corners */
.case--unclutter .cs-figure-nozoom {
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow: hidden;
  max-width: 520px;
}
.case--unclutter .cs-figure-nozoom img { border-radius: 0; display: block; width: 100%; }

/* Mobile block: text on the left, the phone plate on the right (desktop) */
@media (min-width: 901px) {
  .case--unclutter .cs-problem:has(.cs-problem-visual-vertical) {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .case--unclutter .cs-problem:has(.cs-problem-visual-vertical) .cs-problem-text { flex: 1 1 0; max-width: none; }
  .case--unclutter .cs-problem:has(.cs-problem-visual-vertical) .cs-problem-visual-vertical { flex: 0 0 563px; width: 563px; }
}

/* ---------- v5.5 ---------- */
/* Mobile block: paragraph aligned to the top of the phone plate */
@media (min-width: 901px) {
  .case--unclutter .cs-problem:has(.cs-problem-visual-vertical) { align-items: flex-start; }
}

/* Click a screenshot on desktop to open it full-screen (no icon, zoom cursor as the hint) */
@media (hover: hover) and (pointer: fine) {
  .case--unclutter .cs-problem-visual .cs-figure:not(.cs-figure-nozoom) img { cursor: zoom-in; }
}
@media (hover: hover) and (min-width: 901px) {
  .cs-lightbox-scroll { padding: 40px; justify-content: center; align-items: center; }
  .cs-lightbox-scroll img {
    width: auto;
    max-width: 94vw;
    max-height: 90vh;
    border-radius: 12px;
    cursor: zoom-out;
  }
}

/* ---------- v5.6 ---------- */
/* Grain strength per surface, taken from the Figma Noise alpha values */
/* the 400px tile is drawn at 200px, so each dot is half a CSS pixel — as fine as Figma's 0.7 noise size */
.preview::before, .cs-hero::after { mix-blend-mode: normal; background-size: 200px 200px; }
.preview-unclutter::before { opacity: .05; }
.preview-nebula::before { opacity: .08; }
.cs-hero--unclutter::after { opacity: .05; }
.cs-hero--nebula::after { opacity: .1; }

/* Phones: the specimen becomes a small living detail beside "Open to work",
   so the headline and the first project are what people see first */
@media (max-width: 600px) {
  .hero.hero--v5 { position: relative; display: block; }
  .hero--v5 .open-to-work { min-height: 72px; display: flex; align-items: center; margin-bottom: 12px; padding-right: 88px; }
  .hero--v5 .specimen { position: absolute; top: 40px; right: 0; width: 72px; margin: 0; }
  .hero--v5 .specimen .fig-caption { display: none; }
}