/* Gamut case study. Same split layout as the portfolio's Emento case study
   (sticky text panel on the left, stacked rounded cards on the right),
   recoloured for this project: near-black cards, off-white text, CMY accents. */
@font-face { font-family: "Tokyo Dreams"; src: url("../assets/tokyodreams-webfont.woff2") format("woff2"); font-display: block; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }

:root {
  --bg: #141416;            /* page, as in the portfolio */
  --panel: #08080a;         /* cards: the app's own background */
  --tile: rgba(255, 255, 255, 0.035);
  --ink: #f5f3ee; --p-gray: #9a9a9a; --soft: #7a7a7a;
  --line: rgba(244, 241, 234, 0.14);
  --rim: rgba(255, 255, 255, 0.1);
  --cyan: #00c8ff; --magenta: #ff1f9c; --yellow: #ffe100;
  --display: "Tokyo Dreams", "Libre Baskerville", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --app: "Raleway", var(--sans);
  --edge: 8px; --gap: 20px;
  --radius: clamp(30px, 4vw, 60px);
  --pad-x: clamp(2.5rem, 9vw, 8rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --fs-label: 0.75rem;
  --fs-small: 0.92rem;
  --fs-body: clamp(1rem, 1.15vw, 1.2rem);
  --fs-h4: 1.3rem;
  --fs-h3: clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-num: clamp(1.5rem, 2.1vw, 1.9rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }
html.lenis { scroll-behavior: auto; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ============ Two-box split ============ */
.fn { display: grid; grid-template-columns: minmax(calc(23rem + clamp(1rem, 2vw, 2rem) + clamp(0.5rem, 1vw, 1rem)), 29%) minmax(0, 1fr);   /* left column never narrower than the four tabs on one line; the right one gives way until the tablet layout takes over */ gap: var(--gap); padding: var(--edge); align-items: start; max-width: 1900px; margin: 0 auto; }

/* Left side sits directly on the page background */
.fn-panel {
  position: sticky; top: var(--edge); height: calc(100vh - 2 * var(--edge)); height: calc(100svh - 2 * var(--edge));
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(0.5rem, 1vw, 1rem) clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem);
}
/* Left panel text: the two greys carry the same slight warm undertone as the cream used on the landing page */
.fn-panel { --p-gray: #9c9a95; --soft: #7b7974; }
.fn-back { display: block; width: 100%; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); transition: color .3s var(--ease); }
.fn-back:hover { color: #fff; }
.fn-head { margin-top: 1.4rem; }
.fn-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.8rem, 4.6vw, 4.2rem); line-height: 1; margin: 0 0 0.9rem; color: #fff; }
.fn-tagline { color: var(--p-gray); font-size: var(--fs-small); max-width: 40ch; }

.fn-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.4rem; margin-top: clamp(2.5rem, 9vh, 5rem); }
.fn-tabs a { position: relative; padding: 0.35rem 0; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6; color: var(--soft); transition: color .3s var(--ease); }
.fn-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.fn-tabs a:hover, .fn-tabs a.is-active { color: #fff; }
.fn-tabs a.is-active::after { transform: scaleX(1); }
/* Summary paragraphs: the landing page's --ink-2 cream, a step brighter than the grey labels */
.fn-sum { margin-top: 1.4rem; color: #cfcabf; font-size: var(--fs-small); line-height: 1.55; max-width: 44ch; white-space: pre-line; transition: opacity .32s var(--ease); }
/* Desktop: a long summary scrolls inside its own area (no scrollbar), so it never runs over the Previous / Next line */
@media (min-width: 1024px) {
  .fn-sum { overflow-y: auto; margin-bottom: 1rem; scrollbar-width: none; }
  .fn-sum::-webkit-scrollbar { display: none; }
}

.fn-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); }
.fn-foot a:hover { color: #fff; }

/* ============ Right side: stacked cards ============ */
.fn-main { display: grid; gap: var(--gap); font-family: var(--app); font-feature-settings: "lnum" 1; }
.fn-sec { position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: var(--edge); background: var(--panel); border-radius: var(--radius); padding: clamp(2.5rem, 6.5vw, 6rem) var(--pad-x); }

/* Each card carries one ink as a soft light in a corner, the way the Emento cards carry a blurred photo */
.fn-sec::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--glow); filter: blur(120px); opacity: 0.16; pointer-events: none; }
#discovery { --glow: var(--cyan); }
#discovery::before { top: -22%; right: -22%; }
#strategy { --glow: var(--magenta); }
#strategy::before { top: -16%; left: -16%; width: 38%; opacity: 0.1; }
#strategy::after { content: ""; position: absolute; z-index: -1; top: -13%; left: 4%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); filter: blur(120px); opacity: 0.06; pointer-events: none; }
#design { --glow: var(--yellow); }
#design::before { top: -14%; right: -26%; opacity: 0.1; }

/* Cover: the app on a dark stage with the three inks behind it */
.fn-cover { position: relative; container-type: size; height: calc(100svh - 2 * var(--edge)); overflow: hidden; background: var(--panel); border-radius: var(--radius); animation: fn-cover 1.6s var(--ease) both; }
@keyframes fn-cover { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.fn-cover__glow {
  position: absolute; inset: 8% 0 0;
  background:
    radial-gradient(circle at 18% 58%, var(--cyan) 0%, transparent 36%),
    radial-gradient(circle at 50% 36%, var(--magenta) 0%, transparent 34%),
    radial-gradient(circle at 82% 60%, var(--yellow) 0%, transparent 36%);
  filter: blur(80px); opacity: 0.36;
}
.fn-cover__mock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3cqw; }
/* sized to fit the cover both ways: by its height on wide screens, by its width on narrow ones */
.fn-cover .phone { width: min(74cqh * 390 / 844, 36cqw); }
.fn-cover .phone--side { width: min(58cqh * 390 / 844, 26cqw); }

/* ============ Embedded app screens ============ */
/* The app is 390×844. Each screen is a 2x screenshot laid out at that size and scaled by --s, which the page script sets from the box's width. */
.phone {
  --s: 0.5;
  position: relative; flex: none; width: 100%; aspect-ratio: 390 / 844;
  border-radius: calc(52px * var(--s)); background: #08080a; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 calc(9px * var(--s)) #0d0d10, 0 30px 60px -24px rgba(0, 0, 0, 0.9);
}
.phone img, .crop img { position: absolute; top: 0; left: 0; width: 390px; height: 844px; max-width: none; border: 0; transform-origin: 0 0; pointer-events: none; }
.phone img { transform: scale(var(--s)); }

/* A window onto one part of a screen: --cx/--cy is its top-left corner in app pixels, --cw/--ch its size */
.crop {
  --s: 1; --cx: 24px; --cy: 82px; --cw: 342px; --ch: 274px;
  position: relative; width: 100%; aspect-ratio: 342 / 274;
  border-radius: 20px; background: #08080a; box-shadow: 0 0 0 1px var(--rim); overflow: hidden;
}
.crop img { transform: scale(var(--s)) translate(calc(var(--cx) * -1), calc(var(--cy) * -1)); }


/* ============ Card content ============ */
/* Cards are containers, so what's inside lays out by the card's width rather than the window's. */
.fn-sec { container-type: inline-size; container-name: card; }

.eyebrow { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); }

.statement { max-width: 20ch; margin: 0; font-weight: 300; font-size: clamp(1.9rem, 6cqi, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5cqi, 3.5rem); }
/* a section with no pull-line lets its body text run across both columns */
.cols > .prose:only-child { grid-column: 1 / -1; display: block; columns: 2; column-gap: clamp(1.5rem, 5cqi, 3.5rem); }
.cols > .prose:only-child > * + * { margin-top: 1rem; }
.prose { display: grid; gap: 1rem; align-content: start; color: var(--p-gray); font-size: clamp(0.95rem, 1.7cqi, 1.05rem); line-height: 1.7; }

/* Glass tile shared by every box inside a card */
.goals li, .case, .flow__path, .flow__node, .facts {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--rim);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.goals, .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 3.5rem; }
.showcase__head + .cases { margin-top: 0; }
.goals li { padding: 1.3rem; font-weight: 300; font-size: clamp(1rem, 2.1cqi, 1.2rem); line-height: 1.35; }
.goals span { display: block; margin-bottom: 1.6rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin: 0.8rem 0 0; padding: 1.3rem; }
.facts dt, .case__facts dt { font-size: 0.75rem; color: var(--soft); }
.facts dd, .case__facts dd { margin: 0; font-size: 0.9rem; font-weight: 500; }

/* Two layers of the same journey: the clean flow the user sees, and the technical work underneath it */
.layers { --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; }
.layers + .cases { margin-top: clamp(4rem, 12cqi, 7rem); }
.pull + .cases, .pull + .layer__label { margin-top: clamp(6rem, 18cqi, 10.5rem); }
.layer__label + .cases { margin-top: 0; }
.layer__label { margin-bottom: 1rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-gray); }
.layer__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; counter-reset: step; }
.layer__steps li { position: relative; counter-increment: step; }
.layer__steps li + li::before { content: "→"; position: absolute; top: 50%; left: -1.4rem; width: 1.4rem; translate: 0 -50%; text-align: center; font-family: var(--app); font-size: 0.9rem; color: var(--soft); }

/* the surface: soft glass cards, numbered like the app's own steps */
.layer--user li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; min-height: 7rem; padding: 1.1rem;
  border-radius: 20px; border: 1px solid var(--rim);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: 0.95rem; font-weight: 500; line-height: 1.3;
}
.layer--user li::after { content: "0" counter(step); order: -1; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; color: var(--soft); }
.layer--user li:last-child { background: #f5f3ee; border-color: #f5f3ee; color: #0a0a0c; box-shadow: none; }
.layer--user li:last-child::after { color: #6b6a70; }

/* dashed drops from each visible step to the work behind it */
.layer__links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; }
.layer__links span { justify-self: center; width: 0; height: 2.6rem; border-left: 1px dashed rgba(255, 255, 255, 0.28); }

/* the system layer: a recessed panel on a faint grid, set in monospace */
.layer--system {
  padding: 1.2rem; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, 0.18);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px),
    rgba(0, 0, 0, 0.35);
}
/* the panel's padding would shift its columns off the layer above; pull them back into line */
.layer--system .layer__steps { margin-inline: -1.2rem; padding-inline: 0; }
.layer--system .layer__steps li { margin-inline: 0.5rem; }
.layer--system .layer__label { font-family: var(--mono); font-weight: 400; letter-spacing: 0.06em; }
.layer--system .layer__label::before { content: "// "; color: var(--soft); }
.layer--system li {
  display: flex; align-items: center; min-height: 3.6rem; padding: 0.7rem 0.8rem;
  border-radius: 6px; border: 1px solid rgba(0, 200, 255, 0.28); background: rgba(0, 200, 255, 0.06);
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.35; color: #bfeaf7;
}
.layer--system li + li::before { left: calc(-1.4rem - 0.5rem); width: calc(1.4rem + 1rem); font-family: var(--mono); color: rgba(0, 200, 255, 0.55); }

/* ---------- Discovery ---------- */
.case { padding: 1.3rem; }
.case__name { margin: 0; font-size: 1.3rem; font-weight: 500; }
.case__line { margin: 0.35rem 0 1.5rem; color: var(--p-gray); font-size: 0.92rem; line-height: 1.5; }
.case__name::before { content: ""; display: block; width: 0.6rem; height: 0.6rem; margin-bottom: 1.1rem; border-radius: 50%; background: var(--dot); box-shadow: 0 0 14px var(--dot); }
.case:nth-child(1) { --dot: var(--cyan); }
.case:nth-child(2) { --dot: var(--magenta); }
.case:nth-child(3) { --dot: var(--yellow); }
.case__facts { display: grid; gap: 0.9rem; margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.pull { max-width: 22ch; margin: clamp(6rem, 18cqi, 10.5rem) auto 0; font-weight: 300; font-size: clamp(1.6rem, 5cqi, 2.6rem); line-height: 1.18; letter-spacing: -0.015em; text-align: center; }

/* ---------- Strategy: the fork that closes again ---------- */
.flow { display: grid; gap: 0.8rem; margin-top: 3.5rem; }
.showcase__head + .flow { margin-top: 0; }
.flow__node { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.3rem 1.6rem; padding: 1.3rem 1.4rem; font-size: 1.05rem; font-weight: 600; text-align: center; }
.flow__node small { flex-basis: 100%; font-size: 0.85rem; font-weight: 400; color: var(--p-gray); }
/* Home is where everything starts, so it's the largest thing in the diagram */
.flow > .flow__node:first-child { padding: 1.7rem 1.4rem 1.6rem; gap: 0.4rem 1.6rem; font-size: clamp(1.3rem, 3cqi, 1.6rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
.flow > .flow__node:first-child small { font-size: 0.9rem; letter-spacing: 0; }
/* where the three paths meet: the same glass box as the rest, holding the shared last steps */
.flow__node--shared { position: relative; display: grid; justify-items: center; gap: 1rem; padding: 1.5rem 1.4rem 1.6rem; overflow: hidden; }
/* same voice as the line under "Home": plain small grey text beneath the content */
.flow__node--shared small { flex-basis: auto; }
/* the ending is a lighter pane of the same glass: it stands forward without turning into a white block */
.flow__node--shared small { color: rgba(245, 243, 238, 0.62); }
.flow .flow__node--shared { background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.11) 100%); border-color: rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.flow__end { --join: clamp(1.4rem, 7cqi, 4.5rem); position: relative; display: flex; align-items: baseline; justify-content: center; }
.flow__end li { position: relative; font-size: 0.95rem; font-weight: 500; color: rgba(245, 243, 238, 0.62); white-space: nowrap; }
/* Print is the point of the whole flow; connecting and finishing step back around it */
.flow__end .is-main { font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.flow__end li + li { margin-left: calc(var(--join) + 1.8rem); }
/* the hairline joining one step to the next */
.flow__end li + li::after { content: ""; position: absolute; right: calc(100% + 0.9rem); top: 50%; width: var(--join); height: 1px; background: rgba(255, 255, 255, 0.22); }
.flow__paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.flow__path { padding: 1.3rem 1.2rem 1.4rem; }
.flow__name { display: block; margin-bottom: 1rem; font-size: 1.05rem; font-weight: 600; }
.flow__path ol { display: grid; gap: 0.5rem; counter-reset: step; }
.flow__path li { display: flex; align-items: center; gap: 0.7rem; height: 2.5rem; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--rim); font-size: 0.85rem; counter-increment: step; }
.flow__path li::before { content: counter(step); font-size: 0.75rem; font-weight: 600; color: var(--soft); }



/* ---------- Structure: useful extras, told as two looping animations ---------- */
/* Two scenes side by side. Each is a caps heading over one glass box; inside the box the animation
   plays on the left and its steps are listed on the right.
   --t is one loop; the animation and the step list both run on it, so the lit step follows the picture.
   Base styles are the final frame (the print preview, last step lit): that is what shows before the scene is
   in view, and what stays if motion is reduced. The page script adds .is-live while the scene is on screen. */
.scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.scene { --t: 14s; }
.scene__body {
  display: grid; grid-template-columns: minmax(0, 1fr) 10rem; align-items: center; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--rim);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* The window onto the animation. The scene behind it is a 4:3 picture drawn in cqw (100cqw × 75cqw)
   with its subject in the middle, so the window shows only the middle half: the scene is twice the
   window's width, centred, which makes the window 2:3. */
.anim { position: relative; justify-self: center; width: 100%; max-width: 17rem; aspect-ratio: 2 / 3; overflow: hidden; }
.anim__scene { position: absolute; top: 0; left: -50%; width: 200%; height: 100%; container-type: size; }
.anim *, .anim *::after, .scene__steps li { animation-duration: var(--t); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.scene:not(.is-live) .anim *, .scene:not(.is-live) .anim *::after, .scene:not(.is-live) .scene__steps li { animation-name: none !important; }

/* the steps, inside the box to the right of the animation; the one being played is lit */
.scene__steps { display: grid; padding-right: 0.8rem; }
.scene__steps li { padding: 0.8rem 0 0.8rem 1rem; border-left: 2px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; font-weight: 500; line-height: 1.25; white-space: nowrap; color: #7a7a7a; }
.scene__steps li:last-child { border-left-color: #f5f3ee; color: #f5f3ee; }
.scene--photo .scene__steps li:nth-child(1) { animation-name: ph-s1; }
.scene--photo .scene__steps li:nth-child(2) { animation-name: ph-s2; }
.scene--photo .scene__steps li:nth-child(3) { animation-name: ph-s3; }
.scene--photo .scene__steps li:nth-child(4) { animation-name: ph-s4; }
.scene--prep .scene__steps li:nth-child(1) { animation-name: pr-s1; }
.scene--prep .scene__steps li:nth-child(2) { animation-name: pr-s2; }
.scene--prep .scene__steps li:nth-child(3) { animation-name: pr-s3; }
.scene--prep .scene__steps li:nth-child(4) { animation-name: pr-s4; }
@keyframes ph-s1 { 0% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 2%, 24% { border-left-color: #f5f3ee; color: #f5f3ee; } 26%, 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes ph-s2 { 0%, 26% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 28%, 46% { border-left-color: #f5f3ee; color: #f5f3ee; } 48%, 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes ph-s3 { 0%, 48% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 50%, 70% { border-left-color: #f5f3ee; color: #f5f3ee; } 72%, 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes ph-s4 { 0%, 72% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 74%, 96% { border-left-color: #f5f3ee; color: #f5f3ee; } 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes pr-s1 { 0% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 2%, 22% { border-left-color: #f5f3ee; color: #f5f3ee; } 24%, 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes pr-s2 { 0%, 24% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 26%, 56% { border-left-color: #f5f3ee; color: #f5f3ee; } 58%, 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes pr-s3 { 0%, 58% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 60%, 72% { border-left-color: #f5f3ee; color: #f5f3ee; } 74%, 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }
@keyframes pr-s4 { 0%, 74% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } 76%, 96% { border-left-color: #f5f3ee; color: #f5f3ee; } 100% { border-left-color: rgba(255, 255, 255, 0.12); color: #7a7a7a; } }

/* ----- Scene 1: photo → edit → polaroid → collage → print preview ----- */
.anim--photo {
  --img1: radial-gradient(circle at 50% 62%, hsl(307 85% 68%) 0%, transparent 55%), linear-gradient(40deg, hsl(247 70% 32%), hsl(357 75% 48%));
  --img2: radial-gradient(circle at 45% 30%, hsl(41 85% 68%) 0%, transparent 55%), linear-gradient(120deg, hsl(341 70% 32%), hsl(91 75% 48%));
  --img3: radial-gradient(circle at 50% 50%, hsl(182 85% 68%) 0%, transparent 55%), linear-gradient(240deg, hsl(122 70% 32%), hsl(232 75% 48%));
  --img4: radial-gradient(circle at 60% 25%, hsl(276 85% 68%) 0%, transparent 55%), linear-gradient(320deg, hsl(216 70% 32%), hsl(326 75% 48%));
}
.ph1__sheet, .ph1__pola, .ph1__photo, .ph1__cell, .ph1__controls { position: absolute; }

/* the one photo, with its polaroid frame waiting behind it */
.ph1__single { position: absolute; inset: 0; opacity: 0; animation-name: ph1-single; }
.ph1__photo { left: 35cqw; top: 14cqw; width: 30cqw; height: 36cqw; border-radius: 0.2cqw; background: var(--img1); animation-name: ph1-photo; }
.ph1__pola { left: 32.5cqw; top: 11.5cqw; width: 35cqw; height: 49cqw; border-radius: 0.5cqw; background: #f6f4ee; box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.9); animation-name: ph1-pola; }
.ph1__pola span { position: absolute; right: 0; bottom: 2.6cqw; left: 0; font-family: "Caveat", cursive; font-size: 4.2cqw; line-height: 1; color: #1b1b1f; text-align: center; animation-name: ph1-cap; }
@keyframes ph1-single { 0% { opacity: 0; transform: scale(0.94); } 6%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: scale(0.86); } }
/* the photo starts a little flat, and brightens as the sliders move */
@keyframes ph1-photo { 0%, 11% { filter: brightness(0.85) saturate(0.7); border-radius: 0.8cqw; } 22%, 26% { filter: brightness(1.08) saturate(1.3); border-radius: 0.8cqw; } 32%, 100% { filter: brightness(1.08) saturate(1.3); border-radius: 0.2cqw; } }
@keyframes ph1-pola { 0%, 26% { opacity: 0; transform: scale(0.86); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes ph1-cap { 0%, 32% { opacity: 0; transform: translateY(1cqw); } 37%, 100% { opacity: 1; transform: none; } }

/* three sliders under the photo */
.ph1__controls { left: 30cqw; top: 54.5cqw; width: 40cqw; display: grid; gap: 3.2cqw; opacity: 0; animation-name: ph1-ctrl; }
.ph1__controls i { position: relative; height: 1px; background: rgba(255, 255, 255, 0.3); }
.ph1__controls b { position: absolute; top: 50%; left: 50%; width: 2.4cqw; height: 2.4cqw; margin: -1.2cqw 0 0 -1.2cqw; border-radius: 50%; background: #fff; }
.ph1__controls i:nth-child(1) b { animation-name: ph1-k1; }
.ph1__controls i:nth-child(2) b { animation-name: ph1-k2; }
.ph1__controls i:nth-child(3) b { animation-name: ph1-k3; }
@keyframes ph1-ctrl { 0%, 8% { opacity: 0; transform: translateY(1.5cqw); } 11%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: none; } }
@keyframes ph1-k1 { 0%, 11% { left: 35%; } 17%, 100% { left: 68%; } }
@keyframes ph1-k2 { 0%, 14% { left: 50%; } 20%, 100% { left: 62%; } }
@keyframes ph1-k3 { 0%, 16% { left: 40%; } 22%, 100% { left: 75%; } }

/* four photos fly in and settle into a 2 × 2 collage; the paper then appears under them */
.ph1__cell { width: 15.5cqw; height: 22.5cqw; border-radius: 0.2cqw; }
.ph1__cell--1 { left: 34cqw; top: 14cqw; background: var(--img1); animation-name: ph1-c1; }
.ph1__cell--2 { left: 50.5cqw; top: 14cqw; background: var(--img2); animation-name: ph1-c2; }
.ph1__cell--3 { left: 34cqw; top: 37.5cqw; background: var(--img3); animation-name: ph1-c3; }
.ph1__cell--4 { left: 50.5cqw; top: 37.5cqw; background: var(--img4); animation-name: ph1-c4; }
@keyframes ph1-c1 { 0%, 50% { opacity: 0; transform: translate(-22cqw, -8cqw) rotate(-14deg) scale(0.8); } 58%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ph1-c2 { 0%, 53% { opacity: 0; transform: translate(22cqw, -10cqw) rotate(12deg) scale(0.8); } 61%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ph1-c3 { 0%, 56% { opacity: 0; transform: translate(-24cqw, 10cqw) rotate(10deg) scale(0.8); } 64%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ph1-c4 { 0%, 59% { opacity: 0; transform: translate(22cqw, 12cqw) rotate(-10deg) scale(0.8); } 67%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ph1__sheet { left: 31.5cqw; top: 11.5cqw; width: 37cqw; height: 51cqw; border-radius: 0.5cqw; background: #e4e1d8; box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.9); animation-name: ph1-sheet; }
@keyframes ph1-sheet { 0%, 70% { opacity: 0; transform: scale(0.94); } 78%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* ----- Scene 2: design → A4 → fill the sheet → bleed and crop marks → print preview ----- */
.anim--prep { --art: radial-gradient(circle at 50% 50%, #ffe100 0 34%, #ff1f9c 35% 100%); --k: rgba(20, 20, 24, 0.8); }
.pr__sheet, .pr__grid, .pr__marks, .pr__chips, .pr__count { position: absolute; }
.pr__sheet { left: 32cqw; top: 11cqw; width: 36cqw; height: 51cqw; border-radius: 0.5cqw; background: #e4e1d8; box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.9); animation-name: pr-sheet; }
@keyframes pr-sheet { 0%, 21% { opacity: 0; transform: scale(0.94); } 27%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* size chips; A4 gets picked */
.pr__chips { right: 0; left: 0; top: 57cqw; display: flex; justify-content: center; gap: 1.6cqw; opacity: 0; animation-name: pr-chips; }
.pr__chips span { display: grid; place-items: center; height: 6cqw; padding: 0 2.6cqw; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 2.7cqw; font-weight: 500; color: var(--p-gray); }
.pr__chips span:first-child { border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.08); color: #f5f3ee; animation-name: pr-a4; }
@keyframes pr-chips { 0%, 8% { opacity: 0; transform: translateY(1.5cqw); } 11%, 20% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: none; } }
@keyframes pr-a4 { 0%, 14% { border-color: rgba(255, 255, 255, 0.16); background-color: rgba(255, 255, 255, 0); color: #9a9a9a; } 16%, 100% { border-color: rgba(255, 255, 255, 0.75); background-color: rgba(255, 255, 255, 0.08); color: #f5f3ee; } }

/* 3 × 4 pieces. The first one is the design itself: it starts large in the middle of the stage,
   then drops into the top-left place; the other eleven pop in after it, one by one. */
.pr__grid { left: 36cqw; top: 17.65cqw; display: grid; grid-template-columns: repeat(3, 8.53cqw); gap: 1.2cqw; }
.pr__grid i { position: relative; height: 8.53cqw; background: var(--art); transform: scale(1.07); }
/* the trim line, once each piece has grown by its bleed */
.pr__grid i::after { content: ""; position: absolute; inset: 0.28cqw; border: 1px dashed rgba(255, 255, 255, 0.9); animation-name: pr-trim; }
@keyframes pr-trim { 0%, 61% { opacity: 0; } 66%, 95% { opacity: 1; } 100% { opacity: 0; } }
.pr__grid i:nth-child(1) { animation-name: pr-first; }
.pr__grid i:nth-child(2) { animation-name: pr-c2; }
.pr__grid i:nth-child(3) { animation-name: pr-c3; }
.pr__grid i:nth-child(4) { animation-name: pr-c4; }
.pr__grid i:nth-child(5) { animation-name: pr-c5; }
.pr__grid i:nth-child(6) { animation-name: pr-c6; }
.pr__grid i:nth-child(7) { animation-name: pr-c7; }
.pr__grid i:nth-child(8) { animation-name: pr-c8; }
.pr__grid i:nth-child(9) { animation-name: pr-c9; }
.pr__grid i:nth-child(10) { animation-name: pr-c10; }
.pr__grid i:nth-child(11) { animation-name: pr-c11; }
.pr__grid i:nth-child(12) { animation-name: pr-c12; }
@keyframes pr-first { 0% { opacity: 0; transform: translate(9.735cqw, 8.085cqw) scale(1.7); } 5%, 28% { opacity: 1; transform: translate(9.735cqw, 8.085cqw) scale(1.876); } 35%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c2 { 0%, 35% { opacity: 0; transform: scale(0.4); } 38%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c3 { 0%, 36.4% { opacity: 0; transform: scale(0.4); } 39.4%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c4 { 0%, 37.8% { opacity: 0; transform: scale(0.4); } 40.8%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c5 { 0%, 39.2% { opacity: 0; transform: scale(0.4); } 42.2%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c6 { 0%, 40.6% { opacity: 0; transform: scale(0.4); } 43.6%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c7 { 0%, 42% { opacity: 0; transform: scale(0.4); } 45%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c8 { 0%, 43.4% { opacity: 0; transform: scale(0.4); } 46.4%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c9 { 0%, 44.8% { opacity: 0; transform: scale(0.4); } 47.8%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c10 { 0%, 46.2% { opacity: 0; transform: scale(0.4); } 49.2%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c11 { 0%, 47.6% { opacity: 0; transform: scale(0.4); } 50.6%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
@keyframes pr-c12 { 0%, 49% { opacity: 0; transform: scale(0.4); } 52%, 60% { opacity: 1; transform: none; } 66%, 95% { opacity: 1; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }

.pr__count { right: 0; left: 0; top: 65.4cqw; font-size: 2.9cqw; font-weight: 500; line-height: 1; color: #f5f3ee; text-align: center; animation-name: pr-count; }
@keyframes pr-count { 0%, 52% { opacity: 0; transform: translateY(1cqw); } 56%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* crop marks: a tick continuing every cut line, on all four sides of the block */
.pr__marks { animation-name: pr-marks; }
.pr__marks--t, .pr__marks--b { left: 36cqw; width: 28cqw; height: 1.6cqw; background: repeating-linear-gradient(90deg, var(--k) 0 0.25cqw, transparent 0.25cqw 8.28cqw, var(--k) 8.28cqw 8.53cqw, transparent 8.53cqw 9.73cqw); }
.pr__marks--l, .pr__marks--r { top: 17.65cqw; width: 1.6cqw; height: 37.72cqw; background: repeating-linear-gradient(180deg, var(--k) 0 0.25cqw, transparent 0.25cqw 8.28cqw, var(--k) 8.28cqw 8.53cqw, transparent 8.53cqw 9.73cqw); }
.pr__marks--t { top: 15.15cqw; }
.pr__marks--b { top: 56.27cqw; }
.pr__marks--l { left: 33.5cqw; }
.pr__marks--r { left: 64.9cqw; }
@keyframes pr-marks { 0%, 66% { opacity: 0; } 71%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Design: the small system ---------- */
.system { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 3.5rem; }
.showcase__head + .system { margin-top: 0; }
/* The tiles are screenshots of the live design system, baked with their own glass surface */
.system img { display: block; width: 100%; height: auto; }
.system img:first-child { grid-column: 1 / -1; }

/* ---------- Design: the screens ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 8cqi, 5.5rem); }
.showcase__head--inner { margin-top: clamp(5rem, 14cqi, 8rem); }
/* Useful extras opens a second topic inside the Structure card, so it gets more air than a sub-heading */
#strategy .showcase__head--inner { margin-top: clamp(7rem, 20cqi, 11rem); margin-bottom: clamp(4.5rem, 12.5cqi, 6.5rem); }
/* the pull-line again, beside the phone: same voice, left-aligned and a step smaller since the line is longer */
.pull--side { max-width: none; margin: 0; font-size: clamp(1.35rem, 3.6cqi, 2rem); line-height: 1.25; text-align: left; }

.showcase { margin-top: clamp(5rem, 14cqi, 8rem); }
.showcase__head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(1.5rem, 5cqi, 3.5rem); margin-bottom: 2.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .showcase__head { margin-bottom: 4rem; } }
.showcase__title { margin: 0; font-weight: 300; font-size: clamp(1.7rem, 5cqi, 2.6rem); line-height: 1.08; letter-spacing: -0.02em; }
/* the paragraph hugs the right edge of the header, as on the Emento page */
.showcase__lead { justify-self: end; max-width: 24rem; color: var(--p-gray); font-size: 0.95rem; line-height: 1.6; }
.phones, .details { display: grid; gap: clamp(0.8rem, 2.4cqi, 1.5rem); align-items: start; }
.phones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.phones--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 8%; }
.details { margin-top: 2.6rem; }
.details--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.details--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
figcaption { margin-top: 1rem; font-size: 0.82rem; line-height: 1.5; color: var(--p-gray); }
figcaption b { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); }

@container card (max-width: 640px) {
  .cols, .showcase__head, .goals, .cases, .system, .scenes { grid-template-columns: 1fr; }
  .scene + .scene { margin-top: 2rem; }
  /* both layers turn into vertical lists side by side, so each step still sits next to its counterpart */
  .layers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: start; }
  .layer__links { display: none; }
  .layer__steps { grid-template-columns: 1fr; gap: 0.6rem; }
  .layer__steps li + li::before { display: none; }
  .layer--user li, .layer--system li { min-height: 4.2rem; gap: 0.4rem; }
  .layer--system { padding: 0; border: 0; background: none; }
  .layer--system .layer__steps { margin-inline: 0; }
  .layer--system .layer__steps li { margin-inline: 0; }
  .cols > .prose:only-child { columns: 1; }
  .cols, .showcase__head { gap: 1.1rem; }
  .showcase__lead { justify-self: start; max-width: none; }
  .facts { grid-template-columns: 1fr 1fr; }
  .phones--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .phones--3 { padding: 0; }
  .details--3 { grid-template-columns: 1fr; padding: 0 12%; }
}
@container card (max-width: 480px) {
  .flow__paths, .feature, .details--2 { grid-template-columns: 1fr; }
  .feature .phone { max-width: 240px; margin: 0 auto; }
  .flow__node { gap: 0.3rem 0.7rem; }
  .flow__end { flex-direction: column; gap: 0.5rem; }
  .flow__end li + li { margin-left: 0; }
  .flow__end li + li::after { display: none; }
}

/* ============ Tablet: 768–1023 ============
   Single column. The panel keeps title, tagline, section tabs and summary (as on desktop);
   Previous / Next move to the top bar and the landing menu to the bottom (css/case-nav.css). */
@media (min-width: 768px) and (max-width: 1023px) {
  .fn { grid-template-columns: 1fr; }
  .fn-panel { position: static; height: auto; overflow: visible; }
  .fn-foot { display: none; }
  .fn-tabs { margin-top: 2.5rem; }
  .fn-tagline, .fn-sum { max-width: 70ch; }
  .fn-cover { height: 78vh; }
}

/* ============ Mobile: ≤767 ============ */
@media (max-width: 767px) {
  :root { --pad-x: 1.5rem; }
  .fn { grid-template-columns: 1fr; }
  .fn-panel { position: static; height: auto; overflow: visible; }
  .fn-foot { display: none; }
  .fn-tabs { margin-top: 2rem; gap: 0.35rem 0.9rem; }
  .fn-tabs a { letter-spacing: 0.1em; }   /* keeps the four tabs on one line at 375px */
  .fn-tagline, .fn-sum { max-width: 70ch; }
  .fn-cover { height: 78vh; }
  .fn-cover .phone--side { display: none; }
  .fn-cover .phone { width: min(80cqh * 390 / 844, 62cqw); }
  .fn-cover, .fn-sec { border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .anim *, .anim *::after, .scene__steps li { animation: none !important; }
  .fn-cover { animation: none; }
  .fn-sum { transition: none; }
}