/* =====================================================================
   ANVIN portfolio
   All sizes are in "design pixels" from the 2048 × 1189 Figma frame.
   --u is one design pixel, scaled so the whole frame fits the window.
   ===================================================================== */

@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(160, 220, 245, 0.55);
}

/* ---------------- Suisse Int'l ----------------
   Uses the font if it's installed on the computer, or from /fonts once the files are added.
   Falls back to Inter until then. */
@font-face { font-family: "Suisse Intl Web"; font-weight: 300; font-style: normal; font-display: swap;
  src: local("Suisse Int'l Light"), local("SuisseIntl-Light"); }
@font-face { font-family: "Suisse Intl Web"; font-weight: 400; font-style: normal; font-display: swap;
  src: local("Suisse Int'l Regular"), local("SuisseIntl-Regular"); }
@font-face { font-family: "Suisse Intl Web"; font-weight: 500; font-style: normal; font-display: swap;
  src: local("Suisse Int'l Medium"), local("SuisseIntl-Medium"); }
@font-face { font-family: "Suisse Intl Web"; font-weight: 300; font-style: italic; font-display: swap;
  src: local("Suisse Int'l Light Italic"), local("SuisseIntl-LightItalic"); }
@font-face { font-family: "Suisse Intl Web"; font-weight: 400; font-style: italic; font-display: swap;
  src: local("Suisse Int'l Regular Italic"), local("SuisseIntl-RegularItalic"); }

:root {
  --font: "Suisse Intl Web", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #f3f3f3;
  --ink: #1a1a1a;
  --ink-2: #474747;
  --ink-3: #a3a3a3;
  --line: #cccccc;
  --white: #ffffff;
  --ease: cubic-bezier(0.65, 0, 0.25, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 900ms;

  /* Artboard */
  --art-w: 2048;
  --art-h: 1189;
  --u0: min(calc(100vw / var(--art-w)), calc(100vh / var(--art-h)));
  --u: var(--u0);

  /* Layout (design px) */
  --intro-x: 365;   --intro-y: 464;   --controls-y: 638;
  --case-intro-x: 119; --case-intro-y: 469;
  /* Home card: base 662 × 682 from Figma, scaled by --k and centred on the glow */
  --k: 1;
  --card-w: calc(662 * var(--k));  --card-h: calc(682 * var(--k));
  --card-x: calc(1444 - 662 * var(--k) / 2);  --card-y: calc(595 - 682 * var(--k) / 2);
  --peek-near: 485; --peek-far: 542;
  --dots-x: 1928;   --dots-y: 565;
  --panel-x: 593;   --panel-y: 22;    --panel-w: 1432; --panel-h: 1146;
  --glow-x: 757;    --glow-y: -76;    --glow-size: 1321;
  --about-x: 593;   --about-y: 22;    --about-w: 1432; --about-h: 1146;
  --persp: calc(1500 * var(--u));
  --title-size: 46;
  --cs-title: 52;
}

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

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

/* High-contrast text selection */
::selection { background: #1a1a1a; color: #ffffff; }
::-moz-selection { background: #1a1a1a; color: #ffffff; }
.hl::selection, .hl *::selection { background: #1a1a1a; color: #ffffff; }

.stage {
  position: relative;
  width: calc(var(--art-w) * var(--u));
  height: calc(var(--art-h) * var(--u));
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------- Glow ---------------- */
.glow {
  position: absolute;
  left: calc(var(--glow-x) * var(--u));
  top: calc(var(--glow-y) * var(--u));
  width: calc(var(--glow-size) * var(--u));
  height: calc(var(--glow-size) * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, rgba(243, 243, 243, 0) 62%);
  transition: --glow 1.2s var(--ease), opacity 0.8s var(--ease);
  pointer-events: none;
}
[data-view="case"] .glow { opacity: 0; }

/* ---------------- Intro text ---------------- */
.intro {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.intro > * { pointer-events: auto; }

.intro__text {
  position: absolute;
  left: calc(var(--intro-x) * var(--u));
  top: calc(var(--intro-y) * var(--u));
  width: calc(700 * var(--u));
  transition: transform var(--dur) var(--ease), opacity 500ms var(--ease);
}
.intro__title, .intro__subtitle {
  margin: 0;
  font-size: calc(var(--title-size) * var(--u));
  line-height: calc(47.84 * var(--u));
  letter-spacing: -0.01em;
}
.intro__title { font-weight: 500; color: var(--ink-2); }
.intro__subtitle { font-weight: 400; color: var(--ink-3); margin-top: calc(2 * var(--u)); }

.intro__text--case {
  left: calc(var(--case-intro-x) * var(--u));
  top: calc(var(--case-intro-y) * var(--u));
  opacity: 0;
  transform: translateX(calc(80 * var(--u)));
}
/* About: the name and buttons slide left to the same spot as in case studies */
[data-view="about"] .intro__text--home {
  transform: translate(calc((var(--case-intro-x) - var(--intro-x)) * var(--u)), calc((var(--case-intro-y) - var(--intro-y)) * var(--u)));
}
[data-view="about"] .controls--home {
  transform: translate(calc((var(--case-intro-x) - var(--intro-x)) * var(--u)), calc((var(--case-intro-y) + 174 - var(--controls-y)) * var(--u)));
}
[data-view="case"] .intro__text--home { opacity: 0; transform: translateX(calc(-120 * var(--u))); }
[data-view="case"] .intro__text--case { opacity: 1; transform: none; transition-delay: 150ms; }

#caseNumber { display: inline-block; }
#caseNumber.swap { animation: numSwap 600ms var(--ease); }
@keyframes numSwap {
  0% { opacity: 1; transform: none; }
  45% { opacity: 0; transform: translateY(calc(-14 * var(--u))); }
  55% { opacity: 0; transform: translateY(calc(14 * var(--u))); }
  100% { opacity: 1; transform: none; }
}

/* ---------------- Round controls ---------------- */
.controls {
  position: absolute;
  display: flex;
  gap: calc(6 * var(--u));
  transition: opacity 500ms var(--ease), transform var(--dur) var(--ease), visibility 0s linear;
}
.controls--home { left: calc(var(--intro-x) * var(--u)); top: calc(var(--controls-y) * var(--u)); }
.controls--case {
  left: calc(var(--case-intro-x) * var(--u));
  top: calc((var(--case-intro-y) + 174) * var(--u));
  opacity: 0; visibility: hidden;
  transform: translateX(calc(80 * var(--u)));
  transition: opacity 500ms var(--ease), transform var(--dur) var(--ease), visibility 0s linear 900ms;
}
[data-view="case"] .controls--home {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(calc(-120 * var(--u)));
  transition: opacity 400ms var(--ease), transform var(--dur) var(--ease), visibility 0s linear 900ms;
}
[data-view="case"] .controls--case {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 500ms var(--ease) 200ms, transform var(--dur) var(--ease), visibility 0s;
}

.ctrl {
  position: relative;
  flex: none;
  width: calc(77 * var(--u));
  height: calc(77 * var(--u));
  border: 0;
  padding: 0;
  border-radius: calc(24 * var(--u));
  background: var(--white);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: calc(24 * var(--u));
  transition: border-radius 450ms var(--ease), background-color 350ms var(--ease),
              color 350ms var(--ease), transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.ctrl:hover { transform: translateY(calc(-3 * var(--u))); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.06); }
.ctrl:active { transform: scale(0.96); }
.ctrl:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ctrl svg {
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.ctrl svg.icon-close { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: 0; }
.ctrl .icon-close { font-size: calc(34 * var(--u)); line-height: 1; margin-top: calc(-3 * var(--u)); }

.ctrl--dark,
.ctrl--toggle[aria-expanded="true"] {
  background: #000; color: var(--white); border-radius: calc(39 * var(--u));
}
.ctrl--toggle .icon-close { display: none; }
.ctrl--toggle[aria-expanded="true"] .icon-open { display: none; }
.ctrl--toggle[aria-expanded="true"] .icon-close { display: block; animation: pop 350ms var(--ease-out); }
@keyframes pop { from { transform: rotate(-90deg) scale(0.4); opacity: 0; } }

.ctrl--social { font-size: calc(26 * var(--u)); font-weight: 500; }

.socials { display: flex; gap: calc(6 * var(--u)); }
.socials .ctrl {
  opacity: 0; transform: translateX(calc(-24 * var(--u))) scale(0.8);
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 450ms var(--ease-out), box-shadow 250ms;
}
.socials.is-open .ctrl { opacity: 1; transform: none; pointer-events: auto; }
.socials.is-open .ctrl:nth-child(2) { transition-delay: 60ms; }
.socials.is-open .ctrl:nth-child(3) { transition-delay: 120ms; }
.socials.is-open .ctrl:hover { transform: translateY(calc(-3 * var(--u))); transition-delay: 0ms; }

/* ---------------- Carousel ---------------- */
.carousel, .peek {
  position: absolute;
  left: calc(var(--card-x) * var(--u));
  top: calc(var(--card-y) * var(--u));
  width: calc(var(--card-w) * var(--u));
  height: calc(var(--card-h) * var(--u));
  transform-style: preserve-3d;
}
.carousel { transition: opacity 500ms var(--ease); }

.card { --u: calc(var(--u0) * var(--k)); }
.peek, .card {
  border-radius: calc(48 * var(--u));
  background: var(--white);
}
.peek { pointer-events: none; transition: opacity 600ms var(--ease); }
.peek--far-top    { transform: translateY(calc(var(--peek-far) * var(--u) * -1)) perspective(var(--persp)) scale(0.46) rotateX(78deg); opacity: 0.55; }
.peek--far-bottom { transform: translateY(calc(var(--peek-far) * var(--u))) perspective(var(--persp)) scale(0.46) rotateX(-78deg); opacity: 0.55; }
[data-view="case"] .peek { opacity: 0; }

.card {
  position: absolute;
  inset: 0;
  padding: calc(26 * var(--u)) calc(22 * var(--u));
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 0;
  text-align: left;
  color: inherit;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow 400ms var(--ease-out);
}
.card::after { /* blank white face for the cards peeking above/below */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--white);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.card.no-anim, .card.no-anim::after { transition: none !important; }

.card[data-pos="0"]  { transform: translateY(0) perspective(var(--persp)) scale(1) rotateX(0deg); opacity: 1; z-index: 3; }
.card[data-pos="-1"] { transform: translateY(calc(var(--peek-near) * var(--u0) * -1)) perspective(var(--persp)) scale(0.6) rotateX(74deg); opacity: 0.85; z-index: 2; }
.card[data-pos="1"]  { transform: translateY(calc(var(--peek-near) * var(--u0))) perspective(var(--persp)) scale(0.6) rotateX(-74deg); opacity: 0.85; z-index: 2; }
.card[data-pos="-2"] { transform: translateY(calc(var(--peek-far) * var(--u0) * -1)) perspective(var(--persp)) scale(0.46) rotateX(78deg); opacity: 0; z-index: 1; }
.card[data-pos="2"]  { transform: translateY(calc(var(--peek-far) * var(--u0))) perspective(var(--persp)) scale(0.46) rotateX(-78deg); opacity: 0; z-index: 1; }
.card:not([data-pos="0"])::after { opacity: 1; }
.card:not([data-pos="0"]) { pointer-events: none; }

.card[data-pos="0"]:hover { box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(30, 40, 60, 0.08); }
.card[data-pos="0"]:hover .card__media { transform: scale(1.015); }
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.card__media {
  position: relative;
  transition: transform 700ms var(--ease-out);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(30 * var(--u));
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
  transition: transform 700ms var(--ease-out);
}
.media-video {
  position: absolute;
  object-fit: cover;
  border-radius: calc(30 * var(--u));
  pointer-events: none;
}
.card__title {
  margin: calc(39 * var(--u)) 0 0;
  font-size: calc(24 * var(--u));
  line-height: calc(24.96 * var(--u));
  font-weight: 400;
  color: var(--ink);
}

.tags { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
.tag {
  height: calc(36 * var(--u));
  padding: 0 calc(12 * var(--u));
  display: inline-flex; align-items: center;
  border-radius: calc(12 * var(--u));
  border: calc(2 * var(--u)) solid;
  font-size: calc(20 * var(--u));
  color: var(--ink-2);
  white-space: nowrap;
}
.tag:nth-child(4n+1) { background: rgba(160, 220, 255, 0.2); border-color: rgba(37, 150, 216, 0.2); }
.tag:nth-child(4n+2) { background: rgba(166, 160, 255, 0.2); border-color: rgba(82, 37, 216, 0.2); }
.tag:nth-child(4n+3) { background: rgba(223, 255, 160, 0.2); border-color: rgba(186, 216, 37, 0.2); }
.tag:nth-child(4n+4) { background: rgba(160, 255, 247, 0.2); border-color: rgba(37, 216, 216, 0.2); }

/* Image placeholder until the Figma exports are in /images */
.img-missing {
  background: linear-gradient(135deg, #eef3f8, #f5f0fb);
}
.img-missing img { opacity: 0; }

/* ---------------- About panel ----------------
   Big panel like the case study one, but it starts right of the name
   so the left side never moves. It grows out of the front card. */
.about-card {
  --clip-t: calc((var(--card-y) - var(--about-y)) * var(--u));
  --clip-l: calc((var(--card-x) - var(--about-x)) * var(--u));
  --clip-r: calc(((var(--about-x) + var(--about-w)) - (var(--card-x) + var(--card-w))) * var(--u));
  --clip-b: calc(((var(--about-y) + var(--about-h)) - (var(--card-y) + var(--card-h))) * var(--u));
  position: absolute;
  left: calc(var(--about-x) * var(--u));
  top: calc(var(--about-y) * var(--u));
  width: calc(var(--about-w) * var(--u));
  height: calc(var(--about-h) * var(--u));
  background: var(--white);
  border-radius: calc(48 * var(--u));
  overflow: hidden;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(var(--clip-t) var(--clip-r) var(--clip-b) var(--clip-l) round calc(48 * var(--u)));
  transition: clip-path var(--dur) var(--ease), opacity 350ms var(--ease) 550ms, visibility 0s linear var(--dur);
}
[data-view="about"] .about-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0px 0px 0px 0px round calc(48 * var(--u)));
  transition: clip-path var(--dur) var(--ease), opacity 250ms var(--ease), visibility 0s;
}
.about-card__scroll {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  padding: calc(72 * var(--u)) calc(80 * var(--u));
  display: grid;
  grid-template-columns: calc(440 * var(--u)) minmax(0, calc(760 * var(--u)));
  gap: calc(72 * var(--u));
  align-content: center;
  color: var(--ink-2);
}
.about-card__scroll::-webkit-scrollbar { display: none; }

.about-card__photo {
  width: calc(440 * var(--u));
  height: calc(550 * var(--u));
  align-self: start;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: calc(36 * var(--u));
  background: var(--bg);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 400ms var(--ease), transform 1200ms var(--ease-out);
}
[data-view="about"] .about-card__photo { opacity: 1; transform: none; transition-delay: 300ms; }

.about-card__text { padding: 0; align-self: start; }
.about-card__text > * {
  opacity: 0;
  transform: translateY(calc(24 * var(--u)));
  transition: opacity 300ms var(--ease), transform 600ms var(--ease-out);
}
[data-view="about"] .about-card__text > * { opacity: 1; transform: none; transition: opacity 500ms var(--ease), transform 700ms var(--ease-out); }
[data-view="about"] .about-card__text > :nth-child(1) { transition-delay: 450ms; }
[data-view="about"] .about-card__text > :nth-child(2) { transition-delay: 530ms; }
[data-view="about"] .about-card__text > :nth-child(3) { transition-delay: 610ms; }
[data-view="about"] .about-card__text > :nth-child(4) { transition-delay: 690ms; }
[data-view="about"] .about-card__text > :nth-child(n+5) { transition-delay: 770ms; }

.about-card__title {
  margin: 0 0 calc(28 * var(--u));
  font-size: calc(56 * var(--u)); line-height: 1.05; font-weight: 400;
  color: var(--ink); letter-spacing: -0.02em;
}
/* word-by-word reveal */
.about-card__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.about-card__title .w > * {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 800ms var(--ease-out);
}
[data-view="about"] .about-card__title .w > * { transform: none; }
[data-view="about"] .about-card__title .w:nth-child(1) > * { transition-delay: 420ms; }
[data-view="about"] .about-card__title .w:nth-child(2) > * { transition-delay: 490ms; }
[data-view="about"] .about-card__title .w:nth-child(3) > * { transition-delay: 540ms; }
[data-view="about"] .about-card__title .w:nth-child(4) > * { transition-delay: 590ms; }
[data-view="about"] .about-card__title .w:nth-child(5) > * { transition-delay: 640ms; }
.about-card em {
  font-family: var(--font);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.about-card__title em { color: var(--ink-3); }

.about-card p { margin: 0 0 calc(16 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.6; }
.about-card p.about-card__lead { font-size: calc(26 * var(--u)); line-height: 1.45; color: var(--ink); margin-bottom: calc(22 * var(--u)); letter-spacing: -0.005em; }
.about-card p.about-card__quote {
  margin-top: calc(26 * var(--u));
  font-size: calc(22 * var(--u)); color: var(--ink);
}
.about-card__quote em { display: block; font-size: calc(32 * var(--u)); line-height: 1.25; margin-top: calc(6 * var(--u)); color: var(--ink-2); }

/* Marker highlights that sweep in after the text appears */
.hl {
  color: inherit;
  background-color: transparent;
  padding: 0 0.12em;
  margin: 0 -0.06em;
  border-radius: 0.2em;
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 42%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 900ms var(--ease-out);
}
.hl--1 { background-image: linear-gradient(rgba(160, 220, 255, 0.7), rgba(160, 220, 255, 0.7)); }
.hl--2 { background-image: linear-gradient(rgba(166, 160, 255, 0.45), rgba(166, 160, 255, 0.45)); }
.hl--3 { background-image: linear-gradient(rgba(223, 255, 160, 0.9), rgba(223, 255, 160, 0.9)); }
.hl--4 { background-image: linear-gradient(rgba(160, 255, 247, 0.7), rgba(160, 255, 247, 0.7)); }
[data-view="about"] .hl { background-size: 100% 42%; }
[data-view="about"] .hl--1 { transition-delay: 1000ms; }
[data-view="about"] .hl--2 { transition-delay: 1250ms; }
[data-view="about"] .hl--3 { transition-delay: 1450ms; }
[data-view="about"] .hl--4 { transition-delay: 1650ms; }
.hl:hover { background-size: 100% 88%; transition-delay: 0ms; transition-duration: 300ms; }

/* Photo: soft float on hover */
.about-card__photo { will-change: transform; }
[data-view="about"] .about-card__photo:hover { transform: scale(1.02) rotate(-0.6deg); transition: transform 700ms var(--ease-out); }

.about-card__points { list-style: none; margin: calc(28 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(10 * var(--u)); }
.about-card__points li {
  padding: calc(14 * var(--u)) calc(20 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--bg);
  font-size: calc(21 * var(--u)); line-height: 1.45;
}
.about-card__points strong { color: var(--ink); font-weight: 500; }

.about-card__cta { margin-top: calc(30 * var(--u)) !important; margin-bottom: 0 !important; color: var(--ink); }
.about-card__cta span { display: block; }
.about-card__cta a {
  display: inline-block;
  margin: calc(14 * var(--u)) calc(8 * var(--u)) 0 0;
  padding: calc(12 * var(--u)) calc(22 * var(--u));
  border-radius: calc(39 * var(--u));
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-size: calc(20 * var(--u));
  transition: background-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease-out);
}
.about-card__cta a:first-of-type { background: #000; color: var(--white); }
.about-card__cta a:hover { transform: translateY(calc(-2 * var(--u))); background: #000; color: var(--white); }
.about-card h3 {
  margin: calc(44 * var(--u)) 0 calc(10 * var(--u));
  font-size: calc(20 * var(--u)); font-weight: 400; color: var(--ink-3);
}
.about-card__list { list-style: none; margin: 0; padding: 0; }
.about-card__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: calc(16 * var(--u));
  padding: calc(14 * var(--u)) 0;
  border-top: 1px solid #ececec;
  font-size: calc(22 * var(--u)); color: var(--ink);
}
.about-card__list li:last-child { border-bottom: 1px solid #ececec; }
.about-card__list li span:last-child { color: var(--ink-3); }
.about-card__list a { color: var(--ink); text-decoration: none; }
.about-card__list a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-aspect-ratio: 1/1) {
  .about-card__scroll { display: block; padding: calc(32 * var(--u)); }
  [data-view="about"] .intro__text--home, [data-view="about"] .controls--home { transform: none; }
  .about-card__photo { width: calc(360 * var(--u)); height: calc(450 * var(--u)); }
  .about-card__text { padding: calc(40 * var(--u)) calc(8 * var(--u)) 0; }
  .about-card p { font-size: calc(26 * var(--u)); }
  .about-card p.about-card__lead { font-size: calc(30 * var(--u)); }
  .about-card__points li, .about-card__list li { font-size: calc(24 * var(--u)); }
}

/* The front case study steps aside while the about card is open;
   the tilted cards above and below stay, so the about card sits in the stack */
[data-view="about"] .card[data-pos="0"] {
  opacity: 0;
  transform: translateY(calc(-80 * var(--u))) perspective(var(--persp)) scale(0.94) rotateX(0deg);
}
[data-view="about"] .carousel { pointer-events: none; }
[data-view="about"] .peek { opacity: 0; }
[data-view="about"] .card:not([data-pos="0"]) { opacity: 0; }
[data-view="about"] .dots { opacity: 0; pointer-events: none; }
.dots { transition: opacity 400ms var(--ease); }

/* ---------------- Dots ---------------- */
.dots {
  position: absolute;
  left: calc((var(--dots-x) - 10) * var(--u));
  top: calc((var(--dots-y) - 6) * var(--u));
  display: flex; flex-direction: column;
}
.dot {
  width: calc(24 * var(--u));
  height: calc(16 * var(--u));
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.dot::before {
  content: "";
  width: calc(4 * var(--u)); height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--line);
  transition: background-color 400ms var(--ease), height 400ms var(--ease);
}
.dot:hover::before { background: #999; }
.dot[aria-current="true"]::before { background: var(--ink); }
.dot:focus-visible { outline: 2px solid var(--ink); border-radius: 4px; }

/* ---------------- Case study panel ---------------- */
.panel {
  position: absolute;
  left: calc(var(--panel-x) * var(--u));
  /* Fill the browser window's height (minus a small gap), whatever its shape; width stays as designed */
  --gap: calc(16 * var(--u));
  top: calc(var(--gap) - (100vh - var(--art-h) * var(--u)) / 2);
  width: calc(var(--panel-w) * var(--u));
  height: calc(100vh - 2 * var(--gap));
  background: var(--white);
  border-radius: calc(48 * var(--u));
  overflow: hidden;
  visibility: hidden;
  z-index: 5;
  clip-path: inset(0 round calc(48 * var(--u)));
}
.panel.is-animating { transition: clip-path var(--dur) var(--ease); }
.panel.is-open { visibility: visible; }

.panel__scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  scrollbar-width: none;
  outline: none;
  overscroll-behavior: contain;
}
.panel__scroll::-webkit-scrollbar { display: none; }

.panel__inner {
  padding: calc(46 * var(--u)) calc(80 * var(--u)) calc(120 * var(--u)) calc(42 * var(--u));
  transition: opacity 450ms var(--ease), transform 600ms var(--ease);
}
.panel__inner.is-leaving-up   { opacity: 0; transform: translateY(calc(-40 * var(--u))); }
.panel__inner.is-leaving-down { opacity: 0; transform: translateY(calc(40 * var(--u))); }
.panel__inner.is-entering-up   { opacity: 0; transform: translateY(calc(40 * var(--u))); transition: none; }
.panel__inner.is-entering-down { opacity: 0; transform: translateY(calc(-40 * var(--u))); transition: none; }
.panel__inner.is-hidden { opacity: 0; }

.panel__bar {
  position: absolute;
  right: calc(11 * var(--u));
  top: calc(46 * var(--u));
  bottom: calc(46 * var(--u));
  width: calc(9 * var(--u));
  pointer-events: none;
}
.panel__thumb {
  width: 100%;
  height: calc(127 * var(--u));
  border-radius: calc(4.5 * var(--u));
  background: var(--line);
  will-change: transform;
}

.cs-title {
  margin: 0;
  max-width: calc(1196 * var(--u));
  font-size: calc(var(--cs-title) * var(--u));
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.panel .tags { margin-top: calc(32 * var(--u)); }

.cs-body { max-width: calc(1040 * var(--u)); color: var(--ink-2); }
.cs-body .cs-hero {
  display: block;
  width: calc(760 * var(--u));
  max-width: 100%;
  margin: calc(64 * var(--u)) 0 calc(24 * var(--u));
}
.cs-body img { max-width: 100%; border-radius: calc(30 * var(--u)); }
.cs-body div.cs-hero { position: relative; aspect-ratio: 618 / 514; }
.cs-body div.cs-hero > img { display: block; width: 100%; height: 100%; border-radius: 0; }
.cs-body h3 {
  margin: calc(72 * var(--u)) 0 calc(20 * var(--u));
  font-size: calc(34 * var(--u)); line-height: 1.2; font-weight: 500; color: var(--ink);
  letter-spacing: -0.01em;
}
.cs-body > h3:first-child { margin-top: calc(64 * var(--u)); }
.cs-body p { margin: 0 0 calc(18 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.6; }
.cs-body strong { color: var(--ink); font-weight: 500; }
.cs-body .placeholder { color: var(--ink-3); font-style: italic; }

.cs-meta {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: calc(20 * var(--u)) calc(64 * var(--u));
  margin: calc(40 * var(--u)) 0;
  font-size: calc(22 * var(--u)); color: var(--ink);
}
.cs-meta span { display: block; font-size: calc(17 * var(--u)); color: var(--ink-3); margin-bottom: calc(6 * var(--u)); }

.cs-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: calc(16 * var(--u));
  margin: calc(48 * var(--u)) 0;
}
.cs-stats > div { background: var(--bg); border-radius: calc(24 * var(--u)); padding: calc(24 * var(--u)); }
.cs-stats strong { display: block; font-size: calc(52 * var(--u)); line-height: 1; font-weight: 500; color: var(--ink); }
.cs-stats span { display: block; margin-top: calc(10 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.35; color: var(--ink-2); }

.cs-body blockquote {
  margin: calc(64 * var(--u)) 0 0;
  font-size: calc(36 * var(--u)); line-height: 1.3; color: var(--ink); letter-spacing: -0.01em;
}
.cs-body blockquote cite { display: block; margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); font-style: normal; color: var(--ink-3); }

/* Reveal-on-scroll for case study blocks */
.cs-body > * { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.cs-body > .reveal, .sp .reveal { opacity: 0; transform: translateY(calc(24 * var(--u))); }
.sp > *, .sp-section > * { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }

/* ---------------- Phones & portrait screens ---------------- */
@media (max-aspect-ratio: 1/1) {
  :root {
    --art-w: 760;  --art-h: 1440;
    --intro-x: 49;  --intro-y: 70;  --controls-y: 230;
    --case-intro-x: 49; --case-intro-y: 70;
    --k: 1;
    --card-x: 49;  --card-y: 540;
    --peek-near: 430; --peek-far: 480;
    --dots-x: 734; --dots-y: 850;
    --panel-x: 16; --panel-y: 340; --panel-w: 728; --panel-h: 1084;
    --about-x: 16; --about-y: 340; --about-w: 728; --about-h: 1084;
    --glow-x: -200; --glow-y: 220; --glow-size: 1160;
    --cs-title: 40;
  }
  .peek { display: none; }
  .panel { top: calc(var(--panel-y) * var(--u)); height: calc(var(--panel-h) * var(--u)); }
  .card[data-pos="-1"] { transform: translateY(calc(var(--peek-near) * var(--u) * -1)) perspective(var(--persp)) scale(0.6) rotateX(74deg); }
  .card[data-pos="1"]  { transform: translateY(calc(var(--peek-near) * var(--u))) perspective(var(--persp)) scale(0.6) rotateX(-74deg); }
  .controls--case { top: calc(230 * var(--u)); }
  .cs-body p { font-size: calc(26 * var(--u)); }
  .cs-meta { grid-template-columns: repeat(2, auto); font-size: calc(24 * var(--u)); }
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-body .cs-hero { width: 100%; }
  .panel__inner { padding-right: calc(50 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  .card, .card::after, .panel.is-animating, .panel__inner, .intro__text, .controls, .glow { transition-duration: 1ms !important; }
  .hl, .about-card__title .w > *, .about-card__text > *, .about-card__photo { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

/* =====================================================================
   Case study: Stratos platform (interactive)
   ===================================================================== */
.cs-body:has(.sp) { max-width: none; }
.sp { --r: calc(28 * var(--u)); color: var(--ink-2); }
.sp .cs-meta { margin-top: calc(36 * var(--u)); }

.sp-hero { position: relative; margin: calc(48 * var(--u)) 0 0; height: calc(360 * var(--u)); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.sp-hero img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform-origin: 50% 30%; border-radius: 0; max-width: none; will-change: transform; }

/* numbers */
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14 * var(--u)); margin: calc(8 * var(--u)) 0 calc(24 * var(--u)); }
.sp-stat { position: relative; overflow: hidden; background: var(--bg); border-radius: calc(24 * var(--u)); padding: calc(28 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)); transition: transform 400ms var(--ease-out), background-color 400ms; }
.sp-stat:hover { transform: translateY(calc(-4 * var(--u))); }
.sp-stat:nth-child(1):hover { background: rgba(160, 220, 255, 0.35); }
.sp-stat:nth-child(2):hover { background: rgba(166, 160, 255, 0.28); }
.sp-stat:nth-child(3):hover { background: rgba(223, 255, 160, 0.5); }
.sp-stat:nth-child(4):hover { background: rgba(160, 255, 247, 0.4); }
.sp-stat strong { display: block; font-size: calc(84 * var(--u)); line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-stat span { display: block; margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.4; }

/* sections */
.sp-section { margin-top: calc(120 * var(--u)); }
.sp-kicker { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: 0 0 calc(14 * var(--u)) !important; font-size: calc(18 * var(--u)) !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.sp-kicker b { font-weight: 500; color: var(--ink); background: var(--bg); border-radius: 999px; padding: calc(6 * var(--u)) calc(14 * var(--u)); letter-spacing: 0; }
.cs-body .sp h3 { margin: 0 0 calc(28 * var(--u)); font-size: calc(56 * var(--u)); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); max-width: calc(1000 * var(--u)); }
.cs-body .sp h4 { margin: 0 0 calc(16 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.2; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.sp p { max-width: calc(860 * var(--u)); }
.cs-body .sp .sp-lead { font-size: calc(28 * var(--u)); line-height: 1.45; color: var(--ink); max-width: calc(980 * var(--u)); }
.sp-label { font-size: calc(16 * var(--u)) !important; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin: calc(28 * var(--u)) 0 calc(12 * var(--u)) !important; }
.sp-label--big { margin-top: calc(72 * var(--u)) !important; }

/* images */
.cs-body .sp-img { display: block; width: 100%; height: auto; border-radius: calc(20 * var(--u)); background: var(--bg); cursor: zoom-in; transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.cs-body .sp-img:hover { transform: scale(1.01); box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(20, 30, 50, 0.1); }
.sp-img--soft { margin: calc(48 * var(--u)) auto 0; max-width: calc(1000 * var(--u)) !important; background: none !important; }
.sp-figure { margin: calc(40 * var(--u)) 0 0; }
.sp-figure figcaption { margin-top: calc(12 * var(--u)); font-size: calc(17 * var(--u)); color: var(--ink-3); }
.sp-gallery { display: grid; gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); align-items: start; }
.sp-gallery--2 { grid-template-columns: 1fr 1fr; }
.sp-gallery--3 { grid-template-columns: 0.4fr 1fr 1fr; }
.sp-gallery--data { grid-template-columns: 0.33fr 1fr; }
.sp-gallery--journey { grid-template-columns: 0.79fr 1fr; margin-top: 0; }
.sp-gallery--pitch { grid-template-columns: 1fr 1fr; }
.sp-gallery--shadow { grid-template-columns: 0.635fr 1.386fr; align-items: stretch; }
.sp-gallery--shadow .sp-img { height: 100%; object-fit: cover; }
.cs-body .sp-img--line { background: var(--white); border: 1px solid #ececec; object-fit: contain !important; }
.sp-tabpanel > .sp-img { margin-top: calc(14 * var(--u)); }
.sp-missing { display: grid !important; place-items: center; min-height: calc(220 * var(--u)); color: var(--ink-3); font-size: calc(15 * var(--u)); border: 1px dashed var(--line); cursor: default !important; }

/* ecosystem + tabs */
.sp-eco { margin-top: calc(44 * var(--u)); padding: calc(36 * var(--u)); background: var(--bg); border-radius: var(--r); }
.sp-eco__flow { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-bottom: calc(30 * var(--u)); }
.sp-eco__flow i { flex: 1 1 calc(20 * var(--u)); min-width: calc(20 * var(--u)); height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: flow 1.2s linear infinite; }
@keyframes flow { to { background-position: 24px 0; } }
.sp-node { padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: 999px; background: var(--white); font-size: calc(18 * var(--u)); color: var(--ink-2); white-space: nowrap; transition: background-color 400ms var(--ease), color 400ms, transform 400ms var(--ease-out); }
.sp-node.is-active { background: var(--ink); color: var(--white); transform: scale(1.06); }
.sp-tabs { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.sp-tab { border: 0; cursor: pointer; padding: calc(14 * var(--u)) calc(22 * var(--u)); border-radius: 999px; background: var(--white); font-size: calc(19 * var(--u)); color: var(--ink-2); transition: background-color 300ms, color 300ms, transform 200ms var(--ease-out); }
.sp-tab:hover { transform: translateY(-2px); }
.sp-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.sp-tab em { font-style: normal; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 0.6em; border-radius: 50%; background: rgba(0,0,0,0.06); font-size: 0.85em; }
.sp-tab[aria-selected="true"] em { background: rgba(255,255,255,0.18); }
.sp-tabpanels { position: relative; margin-top: calc(22 * var(--u)); }
.sp-tabpanel { display: none; font-size: calc(22 * var(--u)); line-height: 1.55; }
.sp-tabpanel.is-active { display: block; animation: tabIn 500ms var(--ease-out); }
.sp-tabpanel b { color: var(--ink); font-weight: 500; }
@keyframes tabIn { from { opacity: 0; transform: translateY(12px); } }
.sp-stepper { margin-top: calc(8 * var(--u)); }
.sp-tabs--steps .sp-tab { background: var(--bg); }
.sp-tabs--steps .sp-tab[aria-selected="true"] { background: var(--ink); }

/* chips */
.sp-chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin: calc(8 * var(--u)) 0 calc(28 * var(--u)); }
.sp-chip { padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: 999px; font-size: calc(18 * var(--u)); color: var(--ink); border: 2px solid; transition: transform 300ms var(--ease-out); }
.sp-chip:hover { transform: rotate(-2deg) scale(1.05); }
.sp-chip--1 { background: rgba(160, 220, 255, 0.2); border-color: rgba(37, 150, 216, 0.2); }
.sp-chip--2 { background: rgba(166, 160, 255, 0.2); border-color: rgba(82, 37, 216, 0.2); }
.sp-chip--3 { background: rgba(223, 255, 160, 0.3); border-color: rgba(186, 216, 37, 0.25); }
.sp-chip--4 { background: rgba(160, 255, 247, 0.2); border-color: rgba(37, 216, 216, 0.2); }

/* timeline */
.sp-timeline { position: relative; margin-top: calc(72 * var(--u)); padding-left: calc(56 * var(--u)); }
.sp-timeline::before { content: ""; position: absolute; left: calc(12 * var(--u)); top: 0; bottom: 0; width: 2px; background: #ececec; }
.sp-step { position: relative; padding-bottom: calc(72 * var(--u)); }
.sp-step::before { content: ""; position: absolute; left: calc(-51 * var(--u)); top: calc(6 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: var(--white); border: 3px solid var(--ink); }
.sp-step__no { display: inline-block; margin-bottom: calc(12 * var(--u)); font-size: calc(16 * var(--u)); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.cs-body .sp .sp-quote { font-size: calc(26 * var(--u)); line-height: 1.4; font-style: italic; font-weight: 300; color: var(--ink); margin: calc(24 * var(--u)) 0; }
.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(10 * var(--u)); max-width: calc(900 * var(--u)); }
.sp-checks li { position: relative; padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)) calc(54 * var(--u)); background: var(--bg); border-radius: calc(16 * var(--u)); font-size: calc(20 * var(--u)); line-height: 1.5; }
.sp-checks li::before { content: "✓"; position: absolute; left: calc(18 * var(--u)); top: calc(13 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: rgba(160, 255, 200, 0.6); color: var(--ink); font-size: calc(14 * var(--u)); }
.sp-checks--warn li::before { content: "!"; background: rgba(255, 190, 160, 0.7); font-weight: 500; }
.sp-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); margin: calc(8 * var(--u)) 0; }
.sp-questions div { position: relative; padding: calc(56 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--bg); font-size: calc(21 * var(--u)); line-height: 1.4; color: var(--ink); transition: transform 350ms var(--ease-out), background-color 350ms; }
.sp-questions div::before { content: "?"; position: absolute; left: calc(22 * var(--u)); top: calc(16 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 300; color: var(--ink-3); transition: transform 500ms var(--ease-out); }
.sp-questions div:hover { transform: translateY(calc(-4 * var(--u))); background: rgba(166, 160, 255, 0.22); }
.sp-questions div:hover::before { transform: rotate(-15deg) scale(1.3); }

/* toggle */
.sp-flip { margin-top: calc(24 * var(--u)); padding: calc(40 * var(--u)); border-radius: var(--r); background: var(--bg); }
.sp-flip .sp-checks li { background: var(--white); }
.cs-body .sp-flip__photo .sp-img { background: none; border-radius: calc(16 * var(--u)); }
.sp-flip__head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(30 * var(--u)); flex-wrap: wrap; }
.sp-flip__head h4 { max-width: calc(620 * var(--u)); }
.sp-switch { position: relative; display: inline-flex; padding: calc(5 * var(--u)); background: var(--white); border-radius: 999px; }
.sp-switch button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: calc(12 * var(--u)) calc(20 * var(--u)); font-size: calc(18 * var(--u)); color: var(--ink-2); border-radius: 999px; transition: color 350ms; }
.sp-switch button[aria-selected="true"] { color: var(--white); }
.sp-switch__pill { position: absolute; top: calc(5 * var(--u)); bottom: calc(5 * var(--u)); left: 0; width: 0; border-radius: 999px; background: var(--ink); transition: transform 450ms var(--ease-out), width 450ms var(--ease-out); }
.sp-flip__panes { position: relative; margin-top: calc(24 * var(--u)); }
.sp-flip__pane { display: none; }
.sp-flip__pane.is-active { display: block; animation: tabIn 500ms var(--ease-out); }

/* vision */
.sp-vision { display: grid; grid-template-columns: 1fr auto 1.3fr; gap: calc(20 * var(--u)); align-items: stretch; margin: calc(44 * var(--u)) 0; }
.sp-vision__col { padding: calc(30 * var(--u)); border-radius: var(--r); background: var(--bg); }
.sp-vision__col strong { display: block; font-size: calc(34 * var(--u)); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; margin-bottom: calc(10 * var(--u)); }
.sp-vision__col .sp-label { margin: 0 0 calc(10 * var(--u)) !important; display: block; }
.sp-vision__col p { font-size: calc(19 * var(--u)) !important; margin: 0 !important; }
.sp-vision__col--after { background: var(--ink); color: rgba(255,255,255,0.75); }
.sp-vision__col--after strong { color: var(--white); }
.sp-vision__arrow { align-self: center; font-size: calc(40 * var(--u)); color: var(--ink-3); animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(calc(8 * var(--u))); } }

.cs-body .sp .sp-bigquote { margin: calc(80 * var(--u)) 0 0; max-width: calc(1100 * var(--u)); font-size: calc(44 * var(--u)); line-height: 1.2; letter-spacing: -0.02em; font-weight: 300; font-style: italic; color: var(--ink); }

/* flip cards */
.sp-hint { font-size: calc(16 * var(--u)) !important; color: var(--ink-3); margin-bottom: calc(16 * var(--u)) !important; }
.sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); }
.sp-card { position: relative; height: calc(300 * var(--u)); border: 0; padding: 0; background: none; cursor: pointer; perspective: 1200px; text-align: left; font: inherit; }
.sp-card > span { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(12 * var(--u)); padding: calc(30 * var(--u)); border-radius: var(--r); backface-visibility: hidden; transition: transform 700ms var(--ease-out); font-size: calc(26 * var(--u)); line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.sp-card > span em { position: absolute; top: calc(26 * var(--u)); left: calc(30 * var(--u)); font-style: normal; font-size: calc(15 * var(--u)); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.sp-card__back { transform: rotateY(180deg); background: var(--ink); color: var(--white) !important; font-size: calc(22 * var(--u)) !important; line-height: 1.4 !important; }
.sp-card__back em { color: rgba(255,255,255,0.5) !important; }
.sp-card--1 .sp-card__front { background: rgba(160, 220, 255, 0.35); }
.sp-card--2 .sp-card__front { background: rgba(166, 160, 255, 0.3); }
.sp-card--3 .sp-card__front { background: rgba(223, 255, 160, 0.55); }
.sp-card.is-flipped .sp-card__front { transform: rotateY(-180deg); }
.sp-card.is-flipped .sp-card__back { transform: rotateY(0deg); }
.sp-card:not(.is-flipped):hover .sp-card__front { transform: rotateY(-8deg); }

/* outcomes */
.sp-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); margin: calc(12 * var(--u)) 0 calc(28 * var(--u)); }
.sp-outcomes > div { padding: calc(30 * var(--u)); border-radius: var(--r); background: var(--bg); transition: transform 400ms var(--ease-out); }
.sp-outcomes > div:hover { transform: translateY(calc(-6 * var(--u))); }
.sp-outcomes__icon { display: grid; place-items: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: var(--ink); color: var(--white); font-size: calc(24 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.sp-outcomes strong { display: block; font-size: calc(26 * var(--u)); font-weight: 500; color: var(--ink); margin-bottom: calc(8 * var(--u)); }
.sp-outcomes p { font-size: calc(19 * var(--u)) !important; margin: 0 !important; }

.sp-final { padding-bottom: calc(40 * var(--u)); }
.sp-final .sp-bigquote { margin: 0 0 calc(30 * var(--u)) !important; }
.sp-next { margin-top: calc(40 * var(--u)); border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(20 * var(--u)) calc(32 * var(--u)); border-radius: 999px; background: var(--ink); color: var(--white); font-size: calc(22 * var(--u)); transition: transform 300ms var(--ease-out); }
.sp-next span { transition: transform 300ms var(--ease-out); }
.sp-next:hover { transform: translateY(-2px); }
.sp-next:hover span { transform: translateX(6px); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(20, 20, 20, 0.82); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity 350ms var(--ease), visibility 0s linear 350ms; cursor: zoom-out; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 350ms var(--ease); }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 16px; transform: scale(0.96); transition: transform 450ms var(--ease-out); background: #fff; }
.lightbox.is-open img { transform: none; }
.lightbox__close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; font-size: 28px; cursor: pointer; }

@media (max-aspect-ratio: 1/1) {
  .sp-stats, .sp-outcomes { grid-template-columns: 1fr 1fr; }
  .sp-questions, .sp-cards { grid-template-columns: 1fr; }
  .sp-vision { grid-template-columns: 1fr; }
  .sp-vision__arrow { transform: rotate(90deg); justify-self: center; animation: none; }
  .sp-gallery--3, .sp-gallery--data, .sp-gallery--journey, .sp-gallery--shadow { grid-template-columns: 1fr; }
  .cs-body .sp h3 { font-size: calc(48 * var(--u)); }
  .sp-hero { height: calc(300 * var(--u)); }
}

/* Step 1: wireframe sketches as a quiet background decoration */
.sp-step--deco { isolation: isolate; }
.sp-step--deco > :not(.sp-deco) { position: relative; z-index: 1; }
.cs-body .sp-deco {
  position: absolute; z-index: 0; top: calc(-60 * var(--u)); right: calc(-40 * var(--u));
  width: calc(760 * var(--u)); max-width: none; height: auto;
  opacity: 0.16; border-radius: 0; pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 35%, transparent 75%);
}
.sp-split { display: grid; grid-template-columns: 1fr calc(420 * var(--u)); gap: calc(40 * var(--u)); align-items: start; margin-top: calc(8 * var(--u)); }
.sp-split .sp-img { margin-top: calc(28 * var(--u)); }
@media (max-aspect-ratio: 1/1) {
  .sp-split { grid-template-columns: 1fr; }
  .cs-body .sp-deco { width: 90%; }
}

/* Step 2: sketch board in the background, screens composed on top */
.cs-body .sp-step--deco2 .sp-deco { top: calc(20 * var(--u)); right: calc(-60 * var(--u)); width: calc(820 * var(--u)); opacity: 0.22; }
.sp-screens { display: grid; grid-template-columns: calc(210 * var(--u)) 1fr; gap: calc(28 * var(--u)); align-items: start; margin-top: calc(36 * var(--u)); }
.cs-body .sp-screens .sp-img { background: none; border-radius: 0; }
.cs-body .sp-screens__nav { margin-top: calc(30 * var(--u)); filter: drop-shadow(0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(20,30,50,0.08)); border-radius: calc(14 * var(--u)) !important; background: var(--white) !important; }
.sp-screens__stack { position: relative; height: calc(640 * var(--u)); }
.cs-body .sp-screens__a, .cs-body .sp-screens__b { position: absolute; width: 78%; transition: transform 500ms var(--ease-out), z-index 0s; }
.cs-body .sp-screens__a { left: 0; top: 0; z-index: 1; }
.cs-body .sp-screens__b { right: 0; bottom: 0; z-index: 2; }
.cs-body .sp-screens__a:hover { z-index: 3; transform: translateY(calc(-6 * var(--u))) scale(1.01); box-shadow: none; }
.cs-body .sp-screens__b:hover { transform: translateY(calc(-6 * var(--u))) scale(1.01); box-shadow: none; }
@media (max-aspect-ratio: 1/1) {
  .sp-screens { grid-template-columns: 1fr; }
  .cs-body .sp-screens__nav { display: none; }
  .sp-screens__stack { height: auto; display: grid; gap: calc(12 * var(--u)); }
  .cs-body .sp-screens__a, .cs-body .sp-screens__b { position: static; width: 100%; }
}

/* Workstation: as-is / to-be service journey switch */
.sp-journey { margin-top: calc(24 * var(--u)); padding: calc(32 * var(--u)); border-radius: var(--r); background: var(--bg); }
.sp-journey .sp-flip__head { align-items: center; }
.cs-body .sp-journey .sp-img { background: var(--white); border-radius: calc(16 * var(--u)); }
.cs-body .sp .sp-journey__note { margin: calc(14 * var(--u)) 0 0; font-size: calc(18 * var(--u)); color: var(--ink-2); }

/* Workstation redesign steps */
.sp-timeline--tight { margin-top: calc(20 * var(--u)); }
.sp-minis { display: flex; gap: calc(12 * var(--u)); margin: calc(8 * var(--u)) 0 calc(12 * var(--u)); flex-wrap: wrap; }
.sp-minis > div { display: flex; align-items: baseline; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); border-radius: 999px; background: var(--bg); }
.sp-minis strong { font-size: calc(30 * var(--u)); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sp-minis span { font-size: calc(17 * var(--u)); color: var(--ink-2); }
.sp-docs { position: relative; height: calc(400 * var(--u)); margin-top: calc(28 * var(--u)); }
.cs-body .sp-docs .sp-img { position: absolute; width: 92%; background: var(--white); border-radius: calc(12 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(20,30,50,0.1); transition: transform 500ms var(--ease-out); }
.cs-body .sp-docs__a { left: 0; top: 0; transform: rotate(-2.5deg); z-index: 1; }
.cs-body .sp-docs__b { right: 0; bottom: 0; transform: rotate(1.5deg); z-index: 2; }
.cs-body .sp-docs__a:hover { transform: rotate(0) scale(1.02); z-index: 3; }
.cs-body .sp-docs__b:hover { transform: rotate(0) scale(1.02); }
@media (max-aspect-ratio: 1/1) { .sp-docs { height: calc(520 * var(--u)); } }

.cs-body .sp-video { cursor: default; aspect-ratio: 16 / 9; object-fit: cover; }

.sp-pitch { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); margin-top: calc(28 * var(--u)); }
.sp-pitch figure { margin: 0; }
.sp-pitch figcaption { margin-top: calc(10 * var(--u)); font-size: calc(16 * var(--u)); color: var(--ink-2); }
.sp-pitch figcaption b { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: 0.5em; border-radius: 50%; background: var(--bg); font-weight: 500; color: var(--ink); }
.cs-body .sp-pitch .sp-video { border-radius: calc(14 * var(--u)); background: #0e1a3a; }
@media (max-aspect-ratio: 1/1) { .sp-pitch { grid-template-columns: 1fr; } }

/* ---------- Pitch showcase: big browser window, stacked deck, auto-play ---------- */
.sp-show { margin-top: calc(70 * var(--u)); }
.sp-show__stage { position: relative; aspect-ratio: 16 / 10.2; perspective: 1600px; margin: 0 calc(30 * var(--u)) 0 0; }
.sp-show__card {
  --rx: 0deg; --ry: 0deg;
  position: absolute; inset: 0 0 auto 0;
  border-radius: calc(18 * var(--u)); overflow: hidden; background: #0e1a3a;
  box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(15, 25, 60, 0.22);
  transform-origin: 50% 100%;
  transition: transform 900ms cubic-bezier(.2,1.3,.35,1), opacity 600ms var(--ease), filter 600ms var(--ease);
  cursor: pointer;
}
.sp-show__card[data-pos="0"] { z-index: 3; transform: rotateX(var(--rx)) rotateY(var(--ry)); cursor: default; }
.sp-show__card[data-pos="1"] { z-index: 2; transform: translate(4%, -5%) rotate(3.5deg) scale(.92); filter: brightness(.9) saturate(.8); }
.sp-show__card[data-pos="2"] { z-index: 1; transform: translate(7%, -9%) rotate(7deg) scale(.85); filter: brightness(.8) saturate(.6); opacity: .9; }
.sp-show__card[data-pos="1"]:hover { transform: translate(6%, -8%) rotate(5deg) scale(.93); }
.sp-show__card.is-leaving { animation: flyOut 700ms cubic-bezier(.5,0,.75,0) forwards; z-index: 4; }
@keyframes flyOut {
  0% { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
  45% { transform: translate(-2%, 7%) rotate(-3deg) scale(.97); }
  100% { transform: translate(8%, -10%) rotate(8deg) scale(.85); opacity: .9; }
}
.sp-show__chrome { display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); background: #f4f5f7; border-bottom: 1px solid #e6e7ea; }
.sp-show__chrome i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #ff5f57; }
.sp-show__chrome i:nth-child(2) { background: #febc2e; } .sp-show__chrome i:nth-child(3) { background: #28c840; }
.sp-show__chrome span { margin-left: calc(14 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: var(--white); font-size: calc(14 * var(--u)); color: var(--ink-3); }
.sp-show__card video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0e1a3a; }
.sp-show__sticker {
  position: absolute; z-index: 5; right: calc(-18 * var(--u)); bottom: calc(40 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u)); border-radius: 999px; background: rgba(223, 255, 160, 1);
  font-size: calc(18 * var(--u)); font-weight: 500; color: var(--ink); transform: rotate(-8deg);
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.12); animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble { 50% { transform: rotate(-3deg) translateY(calc(-6 * var(--u))); } }
.sp-show__chips { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; margin-top: calc(26 * var(--u)); }
.sp-show__chips button { position: relative; overflow: hidden; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: var(--bg); font-size: calc(18 * var(--u)); color: var(--ink-2); transition: background-color 300ms, color 300ms, transform 250ms var(--ease-out); }
.sp-show__chips button:hover { transform: translateY(-2px); }
.sp-show__chips button em { font-style: normal; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: rgba(0,0,0,.07); font-size: .85em; }
.sp-show__chips button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.sp-show__chips button[aria-selected="true"] em { background: rgba(160, 220, 255, .9); color: var(--ink); }
.sp-show__prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(160, 220, 255, 1); }
@media (max-aspect-ratio: 1/1) { .sp-show__stage { margin-right: calc(40 * var(--u)); } .sp-show__sticker { right: calc(-30 * var(--u)); } }
@media (prefers-reduced-motion: reduce) { .sp-show__card, .sp-show__sticker { animation: none !important; transition-duration: 1ms !important; } }

/* =====================================================================
   Case study: Design system (playful)
   ===================================================================== */
.ds-hero img { object-position: 50% 0%; }
.ds .sp-stat:nth-child(1):hover { background: rgba(166, 160, 255, 0.3); }

/* Button chaos → unified */
.ds-chaos { margin-top: calc(44 * var(--u)); padding: calc(34 * var(--u)); border-radius: var(--r); background: var(--bg); overflow: hidden; }
.ds-chaos__head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(20 * var(--u)); flex-wrap: wrap; }
.ds-chaos__head h4 { margin: 0 !important; }
.ds-chaos__fix { border: 0; cursor: pointer; padding: calc(14 * var(--u)) calc(24 * var(--u)); border-radius: 999px; background: #5b4cf0; color: #fff; font-size: calc(18 * var(--u)); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(91, 76, 240, .35); transition: transform 250ms var(--ease-out), background-color 300ms; animation: pulse 2.2s ease-in-out infinite; }
.ds-chaos__fix:hover { transform: translateY(-2px) scale(1.03); }
@keyframes pulse { 50% { box-shadow: 0 0 0 calc(10 * var(--u)) rgba(91, 76, 240, 0); } }
.ds-chaos__fix-b, .ds-chaos__cap-b { display: none; }
.is-unified .ds-chaos__fix { background: var(--ink); animation: none; box-shadow: none; }
.is-unified .ds-chaos__fix-a, .is-unified .ds-chaos__cap-a { display: none; }
.is-unified .ds-chaos__fix-b, .is-unified .ds-chaos__cap-b { display: inline; }
.ds-chaos__board { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: calc(16 * var(--u)); min-height: calc(240 * var(--u)); margin-top: calc(24 * var(--u)); }
.ds-b {
  display: inline-grid; place-items: center; min-width: calc(110 * var(--u));
  transition: all 750ms cubic-bezier(.3,1.5,.4,1); transition-delay: calc(var(--d, 0) * 40ms);
  font-size: calc(17 * var(--u)); user-select: none;
}
/* chaos: every button different */
.ds-chaos:not(.is-unified) .ds-b:nth-child(1)  { --d:0; padding: 6px 10px; background: var(--c); color: #fff; border-radius: 2px; transform: rotate(-6deg) translate(-10px, 8px); font-weight: 700; }
.ds-chaos:not(.is-unified) .ds-b:nth-child(2)  { --d:1; padding: 14px 30px; border: 3px solid var(--c); color: var(--c); border-radius: 30px; transform: rotate(4deg) translateY(-14px); background: #fff; }
.ds-chaos:not(.is-unified) .ds-b:nth-child(3)  { --d:2; padding: 4px 8px; background: var(--c); color: #fff; border-radius: 12px 0; transform: rotate(-3deg) translateY(20px); font-size: calc(22 * var(--u)); }
.ds-chaos:not(.is-unified) .ds-b:nth-child(4)  { --d:3; padding: 10px 16px; background: #e5e7eb; color: #111; border-radius: 0; transform: rotate(8deg); text-transform: uppercase; }
.ds-chaos:not(.is-unified) .ds-b:nth-child(5)  { --d:4; padding: 18px 22px; background: linear-gradient(90deg, var(--c), #fb923c); color: #fff; border-radius: 999px; transform: rotate(-9deg) translateY(-6px); font-style: italic; }
.ds-chaos:not(.is-unified) .ds-b:nth-child(6)  { --d:5; padding: 8px 12px; color: var(--c); text-decoration: underline; background: transparent; transform: rotate(5deg) translateY(16px); }
.ds-chaos:not(.is-unified) .ds-b:nth-child(7)  { --d:6; padding: 12px 20px; background: var(--c); color: #fff; border-radius: 8px; box-shadow: 4px 4px 0 #111; transform: rotate(-2deg) translateY(-18px); }
.ds-chaos:not(.is-unified) .ds-b:nth-child(8)  { --d:7; padding: 16px 12px; background: var(--c); color: #fff; border-radius: 50%; min-width: 0; width: calc(70 * var(--u)); height: calc(70 * var(--u)); transform: rotate(12deg); }
.ds-chaos:not(.is-unified) .ds-b:nth-child(9)  { --d:8; padding: 6px 26px; border: 1px dashed var(--c); color: var(--c); background: #fffbeb; border-radius: 6px; transform: rotate(-7deg) translateY(10px); font-family: Georgia, serif; }
.ds-chaos:not(.is-unified) .ds-b:nth-child(10) { --d:9; padding: 10px 14px; background: var(--c); color: #fff; border-radius: 16px 16px 0 16px; transform: rotate(3deg) translateY(-8px); letter-spacing: .2em; }
.ds-chaos:not(.is-unified) .ds-b { animation: jiggle 3s ease-in-out infinite; animation-delay: calc(var(--d) * -0.3s); }
@keyframes jiggle { 50% { translate: 0 calc(-4 * var(--u)); } }
/* unified: one component */
.is-unified .ds-b { padding: calc(12 * var(--u)) calc(22 * var(--u)); background: #5b4cf0; color: #fff; border-radius: calc(10 * var(--u)); transform: none; border: 0; box-shadow: none; font-style: normal; font-weight: 500; text-decoration: none; text-transform: none; letter-spacing: 0; font-family: inherit; width: auto; height: auto; }
.is-unified .ds-b:nth-child(3n+2) { background: #fff; color: #5b4cf0; box-shadow: inset 0 0 0 1.5px #5b4cf0; }
.is-unified .ds-b:nth-child(5n) { background: #ede9fe; color: #5b4cf0; }
.ds-chaos__caption { margin: calc(20 * var(--u)) 0 0 !important; text-align: center; font-size: calc(17 * var(--u)) !important; color: var(--ink-2); max-width: none !important; }

/* columns + quote bubble */
.ds-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(48 * var(--u)); }
.ds-cols .sp-label { margin-top: 0 !important; }
.ds-bubble { position: relative; margin-top: calc(40 * var(--u)); max-width: calc(820 * var(--u)); padding: calc(34 * var(--u)) calc(38 * var(--u)); border-radius: calc(32 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)) calc(6 * var(--u)); background: #5b4cf0; color: #fff; transform-origin: 0 100%; }
.ds-bubble p { margin: 0 !important; font-size: calc(32 * var(--u)) !important; line-height: 1.3 !important; letter-spacing: -0.01em; color: #fff; max-width: none !important; }
.ds-bubble__who { position: absolute; top: calc(-14 * var(--u)); left: calc(30 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: rgba(223,255,160,1); color: var(--ink); font-size: calc(15 * var(--u)); }
.sp-section > .ds-bubble:not(.reveal) { animation: pop2 700ms cubic-bezier(.3,1.6,.4,1); }
@keyframes pop2 { from { transform: scale(.7) rotate(-4deg); opacity: 0; } }

/* duo cards */
.ds-duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); margin: calc(24 * var(--u)) 0 calc(28 * var(--u)); }
.ds-duo > div { padding: calc(28 * var(--u)); border-radius: var(--r); background: var(--bg); transition: transform 400ms var(--ease-out), background-color 400ms; }
.ds-duo > div:hover { transform: translateY(calc(-5 * var(--u))) rotate(-.6deg); background: rgba(166, 160, 255, .22); }
.ds-duo__icon { display: grid; place-items: center; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: #5b4cf0; color: #fff; font-size: calc(22 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.ds-duo strong { display: block; font-size: calc(24 * var(--u)); font-weight: 500; color: var(--ink); margin-bottom: calc(8 * var(--u)); }
.ds-duo p { font-size: calc(19 * var(--u)) !important; margin: 0 !important; }
.ds-gallery { align-items: stretch; }
.ds-gallery .sp-img { height: 100%; object-fit: cover; }
.cs-body .sp .ds-note { margin-top: calc(28 * var(--u)); max-width: none; padding: calc(22 * var(--u)) calc(26 * var(--u)); border-radius: calc(18 * var(--u)); background: rgba(223, 255, 160, .55); color: var(--ink); font-size: calc(21 * var(--u)); }
.ds-note b { font-weight: 500; margin-right: .5em; }

/* 80% meter */
.ds-meter { margin: calc(36 * var(--u)) 0 calc(20 * var(--u)); padding: calc(32 * var(--u)); border-radius: var(--r); background: var(--ink); color: rgba(255,255,255,.7); }
.ds-meter__top { display: flex; align-items: baseline; gap: calc(12 * var(--u)); flex-wrap: wrap; font-size: calc(22 * var(--u)); }
.ds-meter__top strong { color: #fff; font-weight: 500; font-size: calc(34 * var(--u)); letter-spacing: -0.02em; }
.ds-meter__top .ds-meter__pct { color: rgba(223,255,160,1); font-size: calc(56 * var(--u)); }
.ds-meter__bar { margin-top: calc(20 * var(--u)); height: calc(16 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.ds-meter__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a0dcff, #a6a0ff, #dfffa0); transition: width 1600ms cubic-bezier(.2,.9,.2,1) 200ms; }
.sp-section > .ds-meter:not(.reveal) .ds-meter__bar i { width: 80%; }
.ds-meter__chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(20 * var(--u)); }
.ds-meter__chips span { padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: calc(16 * var(--u)); transition: transform 300ms cubic-bezier(.3,1.6,.4,1), background-color 300ms; }
.ds-meter__chips span:hover { transform: translateY(-4px) rotate(-4deg); background: #5b4cf0; }

/* parts & blocks */
.ds-lego { display: flex; align-items: center; gap: calc(10 * var(--u)); flex-wrap: wrap; margin-top: calc(16 * var(--u)); }
.ds-lego span { padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); border: 1.5px dashed #a6a0ff; color: #5b4cf0; font-size: calc(17 * var(--u)); background: #fff; transition: transform 400ms cubic-bezier(.3,1.6,.4,1); }
.ds-lego b { font-weight: 400; color: var(--ink-3); font-size: calc(22 * var(--u)); }
.ds-lego .ds-lego__block { border: 0; background: #5b4cf0; color: #fff; }
.ds-lego:hover span:not(.ds-lego__block) { transform: translateX(calc(12 * var(--u))) rotate(-4deg); }
.ds-lego:hover .ds-lego__block { transform: scale(1.1); }
.ds-states { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; margin-top: calc(16 * var(--u)); }
.ds-state { padding: calc(10 * var(--u)) calc(20 * var(--u)); border-radius: calc(10 * var(--u)); background: #5b4cf0; color: #fff; font-size: calc(17 * var(--u)); }
.ds-state.is-hover { background: #4a3bd9; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(91,76,240,.35); }
.ds-state.is-active { background: #3a2dbf; transform: scale(.96); }
.ds-state.is-disabled { background: #e5e7eb; color: #9ca3af; }

/* light/dark */
.ds-theme { margin-top: calc(20 * var(--u)); padding: calc(32 * var(--u)); border-radius: var(--r); background: var(--bg); transition: background-color 600ms var(--ease); }
.ds-theme:has(.sp-flip__pane:nth-child(2).is-active) { background: #111827; }
.ds-theme:has(.sp-flip__pane:nth-child(2).is-active) .sp-label { color: rgba(255,255,255,.5); }
.ds-theme .sp-flip__head { align-items: center; }
.cs-body .ds-theme .sp-img { background: none; border-radius: calc(14 * var(--u)); }
.ds-theme .sp-flip__pane.is-active { animation: themeIn 600ms var(--ease-out); }
@keyframes themeIn { from { opacity: 0; transform: scale(.97) rotate(-.6deg); filter: blur(4px); } }

.ds-cards4 { grid-template-columns: repeat(4, 1fr); }
.ds-cards4 .sp-card { height: calc(280 * var(--u)); }
.sp-card--4 .sp-card__front { background: rgba(160, 255, 247, 0.4); }
.ds .sp-card--1 .sp-card__front { background: rgba(166, 160, 255, 0.35); }
.ds .sp-card--2 .sp-card__front { background: rgba(160, 220, 255, 0.35); }

@media (max-aspect-ratio: 1/1) {
  .ds-cols, .ds-duo { grid-template-columns: 1fr; }
  .ds-cards4 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ds-b, .ds-chaos__fix { animation: none !important; } }

/* ===================== Before → after metric board ===================== */
.sp-ba { position: relative; margin: calc(20 * var(--u)) 0 calc(28 * var(--u)); padding: calc(30 * var(--u)); border-radius: calc(28 * var(--u)); background: #fff1ee; transition: background-color 700ms var(--ease-out); overflow: hidden; }
.sp-ba.is-after { background: #effbd9; }
.sp-ba__head { display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); margin-bottom: calc(22 * var(--u)); flex-wrap: wrap; }
.sp-ba__title { margin: 0 !important; font-size: calc(26 * var(--u)) !important; color: var(--ink) !important; font-weight: 500; }
.sp-ba__title em { font-style: normal; display: inline-block; margin-left: 0.25em; transition: transform 500ms var(--ease-out), color 500ms; }
.sp-ba.is-after .sp-ba__title em { color: #3f7d12; transform: rotate(-3deg) scale(1.06); }
.sp-ba__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: calc(12 * var(--u)); }
.sp-ba__m { position: relative; background: var(--white); border-radius: calc(20 * var(--u)); padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u)); display: flex; flex-direction: column; min-height: calc(200 * var(--u)); transition: transform 450ms var(--ease-out); }
.sp-ba__m:hover { transform: translateY(calc(-4 * var(--u))) rotate(-0.6deg); }
.sp-ba__label { font-size: calc(16 * var(--u)); line-height: 1.35; color: var(--ink-2); padding-right: calc(96 * var(--u)); }
.sp-ba__val { margin-top: auto; padding-top: calc(18 * var(--u)); font-size: calc(58 * var(--u)); line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-ba__bar { margin-top: calc(16 * var(--u)); height: calc(10 * var(--u)); border-radius: 999px; background: rgba(0,0,0,0.06); overflow: hidden; }
.sp-ba__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #ff8a73; transition: background-color 700ms; }
.sp-ba.is-after .sp-ba__bar i { background: linear-gradient(90deg, #7fd3ff, #a6a0ff 55%, #c9f26b); }
.sp-ba__delta { position: absolute; top: calc(16 * var(--u)); right: calc(16 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: #dfffa0; color: #2c5a08; font-size: calc(16 * var(--u)); font-weight: 500; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,0.08); transform: scale(0) rotate(-20deg); transition: transform 500ms cubic-bezier(.3,1.6,.5,1); }
.sp-ba.is-after .sp-ba__delta { transform: scale(1) rotate(6deg); }
.sp-ba.is-after .sp-ba__m:nth-child(2) .sp-ba__delta { transition-delay: 90ms; transform: scale(1) rotate(-5deg); }
.sp-ba.is-after .sp-ba__m:nth-child(3) .sp-ba__delta { transition-delay: 180ms; }
.sp-ba.is-after .sp-ba__m:nth-child(4) .sp-ba__delta { transition-delay: 270ms; transform: scale(1) rotate(-4deg); }
.sp-ba.is-after .sp-ba__m:nth-child(5) .sp-ba__delta { transition-delay: 360ms; }
.sp-ba__foot { margin: calc(18 * var(--u)) 0 0 !important; font-size: calc(16 * var(--u)) !important; color: var(--ink-2); }

/* Starting-point pain numbers */
.sp-minis--pain > div { background: #fff1ee; }
.sp-minis--pain strong { color: #c2412b; }

@media (max-aspect-ratio: 1/1) {
  .sp-ba__grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sp-ba__delta, .sp-ba__title em { transition: none !important; } }

/* ===================== Case study: Euromaster (booking demo) ===================== */
.em { --em-blue: #0b3b8f; --em-blue-2: #1554c0; --em-yellow: #ffd100; --em-green: #13843f; --em-sky: #e8f0fc; }
.em-hero img { object-position: 50% 40%; }
.em-meta { grid-template-columns: repeat(4, auto) !important; }

/* process line */
.em-proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)); margin: calc(12 * var(--u)) 0 calc(36 * var(--u)); counter-reset: p; }
.em-proc > div { position: relative; padding: calc(24 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--bg); display: flex; flex-direction: column; gap: calc(6 * var(--u)); transition: transform 400ms var(--ease-out), background-color 400ms; }
.em-proc > div:hover { transform: translateY(calc(-6 * var(--u))) rotate(-1deg); background: var(--em-sky); }
.em-proc > div:not(:last-child)::after { content: "→"; position: absolute; right: calc(-14 * var(--u)); top: 50%; transform: translate(50%, -50%); z-index: 1; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--em-yellow); color: var(--em-blue); font-size: calc(16 * var(--u)); font-weight: 600; }
.em-proc em { font-style: normal; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--em-blue); color: #fff; font-size: calc(16 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.em-proc b { font-size: calc(22 * var(--u)); font-weight: 500; color: var(--ink); }
.em-proc span { font-size: calc(17 * var(--u)); line-height: 1.4; }

/* ---------- playground ---------- */
.em-play { display: grid; grid-template-columns: 1fr calc(420 * var(--u)); gap: calc(40 * var(--u)); align-items: center; margin: calc(16 * var(--u)) 0 calc(60 * var(--u)); padding: calc(44 * var(--u)); border-radius: calc(32 * var(--u)); background: radial-gradient(120% 90% at 100% 0%, #dbe8ff 0%, #eef3fb 45%, #f6f7f9 100%); overflow: hidden; }
.em-play__info { position: relative; min-height: calc(420 * var(--u)); }
.em-info { position: absolute; inset: 0; opacity: 0; transform: translateX(calc(-24 * var(--u))); pointer-events: none; transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); }
.em-info.is-active { opacity: 1; transform: none; pointer-events: auto; }
.em-info__no { display: inline-block; padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: var(--em-blue); color: #fff; font-size: calc(15 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.cs-body .em-info h4 { font-size: calc(38 * var(--u)); }
.cs-body .em-info p { font-size: calc(21 * var(--u)); }
.em-sim { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: 999px; background: #fff; color: var(--ink); font-size: calc(18 * var(--u)); cursor: pointer; box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(11, 59, 143, 0.08); }
.em-sim input { position: absolute; opacity: 0; pointer-events: none; }
.em-sim__box { position: relative; width: calc(44 * var(--u)); height: calc(26 * var(--u)); border-radius: 999px; background: #d8dde6; transition: background-color 300ms; }
.em-sim__box::after { content: ""; position: absolute; top: calc(3 * var(--u)); left: calc(3 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: #fff; transition: transform 300ms var(--ease-out); }
.em-sim input:checked + .em-sim__box { background: #ff8a73; }
.em-sim input:checked + .em-sim__box::after { transform: translateX(calc(18 * var(--u))); }

/* phone */
.em-phone { position: relative; width: calc(400 * var(--u)); height: calc(820 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(58 * var(--u)); background: #16181d; box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) rgba(11, 30, 70, 0.28), inset 0 0 0 calc(2 * var(--u)) #3a3d44; transform: rotate(2deg); transition: transform 600ms var(--ease-out); }
.em-phone:hover { transform: rotate(0deg) translateY(calc(-6 * var(--u))); }
.em-phone::before { content: ""; position: absolute; top: calc(26 * var(--u)); left: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(-8 * var(--u)); border-radius: 50%; background: #000; z-index: 3; }
.em-phone__screen { position: relative; height: 100%; border-radius: calc(46 * var(--u)); background: #fff; overflow: hidden; display: flex; flex-direction: column; font-size: calc(15 * var(--u)); color: #1d2433; }
.em-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(52 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid #edf0f5; }
.em-logo { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border: calc(2 * var(--u)) solid var(--em-blue); border-radius: calc(4 * var(--u)); color: var(--em-blue); font-weight: 700; font-size: calc(14 * var(--u)); letter-spacing: 0.02em; }
.em-logo i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: conic-gradient(var(--em-yellow) 0 50%, var(--em-green) 0); }
.em-bar__step { font-size: calc(13 * var(--u)); color: #6b7489; font-variant-numeric: tabular-nums; }
.em-prog { display: flex; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)) 0; }
.em-prog i { flex: 1; height: calc(5 * var(--u)); border-radius: 999px; background: #e4e8ef; transition: background-color 400ms; }
.em-prog i.is-on { background: var(--em-blue); }
.em-hold { margin: calc(10 * var(--u)) calc(20 * var(--u)) 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff7cf; color: #5b4a00; font-size: calc(13 * var(--u)); }
.em-hold b { font-variant-numeric: tabular-nums; }
.em-hold.pop { animation: emPop 500ms cubic-bezier(.3,1.6,.5,1); }
.em-scrs { position: relative; flex: 1; }
.em-scr { position: absolute; inset: 0; padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); opacity: 0; transform: translateX(40%); pointer-events: none; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); overflow: hidden; }
.em-scr.is-past { transform: translateX(-40%); }
.em-scr.is-active { opacity: 1; transform: none; pointer-events: auto; }
.cs-body .em-scr p { margin: 0; }
.cs-body .em-scr .em-t { font-size: calc(21 * var(--u)); font-weight: 600; color: #1d2433; display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); }
.em-t--c { justify-content: center !important; }
.em-lbl { font-size: calc(13 * var(--u)); color: #6b7489; margin-top: calc(4 * var(--u)); }
.em-plate { display: flex; height: calc(58 * var(--u)); border: calc(3 * var(--u)) solid #1d2433; border-radius: calc(8 * var(--u)); overflow: hidden; }
.em-plate span { width: calc(34 * var(--u)); display: grid; place-items: end center; padding-bottom: calc(6 * var(--u)); background: #0f4fb0; color: #fff; font-weight: 700; font-size: calc(14 * var(--u)); }
.em-plate input { flex: 1; min-width: 0; border: 0; text-align: center; font: 700 calc(30 * var(--u)) / 1 var(--font); letter-spacing: 0.08em; color: #1d2433; outline: none; }
.em-field { display: flex; align-items: center; height: calc(48 * var(--u)); padding: 0 calc(14 * var(--u)); border: 1px solid #d5dbe5; border-radius: calc(8 * var(--u)); }
.em-field input { flex: 1; min-width: 0; border: 0; font: inherit; outline: none; }
.em-field span { color: #6b7489; }
.em-btn { display: block; width: 100%; margin-top: calc(6 * var(--u)); padding: calc(14 * var(--u)); border: 0; border-radius: calc(8 * var(--u)); background: var(--em-blue); color: #fff; font: 500 calc(16 * var(--u)) var(--font); cursor: pointer; transition: transform 200ms var(--ease-out), background-color 200ms, opacity 200ms; }
.em-btn:hover:not(:disabled) { background: var(--em-blue-2); }
.em-btn:active:not(:disabled) { transform: scale(0.97); }
.em-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.em-btn--ghost { background: var(--em-sky); color: var(--em-blue); }
.em-btn--ghost:hover:not(:disabled) { background: #d7e5fb; }
.em-btn--sm { width: auto; margin: 0; padding: calc(11 * var(--u)) calc(20 * var(--u)); font-size: calc(15 * var(--u)); }
.em-loading { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: #6b7489; padding: calc(10 * var(--u)) 0; }
.em-loading i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid #d5dbe5; border-top-color: var(--em-blue); animation: emSpin 800ms linear infinite; }
.em-car { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--em-sky); border: 1px solid #cfdcf3; }
.em-car b { font-size: calc(16 * var(--u)); }
.em-car span { font-size: calc(13 * var(--u)); color: #6b7489; }
.em-car em { font-style: normal; font-size: calc(13 * var(--u)); color: var(--em-green); }
.em-car.pop, .em-car:not([hidden]) { animation: emPop 500ms cubic-bezier(.3,1.6,.5,1); }
.em-sheet { position: absolute; inset: 0; display: flex; align-items: flex-end; background: rgba(15, 25, 45, 0.35); animation: emFade 300ms; z-index: 2; }
.em-sheet[hidden] { display: none; }
.em-sheet__card { width: 100%; padding: calc(22 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); border-radius: calc(22 * var(--u)) calc(22 * var(--u)) 0 0; background: #fff; animation: emUp 450ms var(--ease-out); }
.em-sheet__card b { font-size: calc(18 * var(--u)); }
.cs-body .em-sheet__card p { margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); color: #6b7489; line-height: 1.45; }
.em-sheet__opts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.em-sheet__opts button { padding: calc(14 * var(--u)); border: calc(2 * var(--u)) solid #d5dbe5; border-radius: calc(10 * var(--u)); background: #fff; font: 500 calc(15 * var(--u)) var(--font); cursor: pointer; transition: border-color 200ms, transform 200ms; }
.em-sheet__opts button:hover { border-color: var(--em-blue); transform: translateY(calc(-2 * var(--u))); }

/* services */
.em-svcs { flex: 1; display: flex; flex-direction: column; gap: calc(6 * var(--u)); overflow-y: auto; margin: 0 calc(-6 * var(--u)); padding: 0 calc(6 * var(--u)); }
.em-svc { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border: 1px solid #e3e8f0; border-radius: calc(10 * var(--u)); background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 200ms, background-color 200ms; }
.em-svc img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); object-fit: contain; border-radius: 0 !important; }
.em-svc span { flex: 1; display: flex; flex-direction: column; }
.em-svc b { font-weight: 500; font-size: calc(14 * var(--u)); }
.em-svc em { font-style: normal; font-size: calc(11 * var(--u)); color: var(--em-green); }
.em-svc i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #cdd4df; display: grid; place-items: center; transition: background-color 200ms, border-color 200ms; }
.em-svc.is-on { border-color: var(--em-blue); background: var(--em-sky); }
.em-svc.is-on i { background: var(--em-green); border-color: var(--em-green); }
.em-svc.is-on i::after { content: "✓"; color: #fff; font-size: calc(12 * var(--u)); font-style: normal; }
.em-svc.bump { animation: emBump 350ms var(--ease-out); }
.em-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding-top: calc(6 * var(--u)); margin-top: auto; font-size: calc(14 * var(--u)); color: #6b7489; }

/* garages */
.em-garages { flex: 1; display: flex; flex-direction: column; gap: calc(8 * var(--u)); overflow-y: auto; }
.em-gar { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(2 * var(--u)) solid #e3e8f0; border-radius: calc(12 * var(--u)); background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color 200ms, transform 250ms var(--ease-out); }
.em-gar:hover { transform: translateY(calc(-2 * var(--u))); }
.em-gar.is-on { border-color: var(--em-blue); }
.em-gar__top { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.em-gar__top i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #cdd4df; transition: border 200ms; }
.em-gar.is-on .em-gar__top i { border: calc(6 * var(--u)) solid var(--em-blue); }
.em-gar b { font-size: calc(15 * var(--u)); font-weight: 600; }
.em-gar small { font-size: calc(12 * var(--u)); color: #6b7489; }
.em-gar__tags { display: flex; gap: calc(5 * var(--u)); }
.em-gar__tags em { font-style: normal; padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 999px; font-size: calc(11 * var(--u)); background: #fff3cc; color: #7a5b00; }
.em-gar__tags em:first-child { background: #ecebff; color: #4b3fd1; }
.em-gar__price { display: flex; justify-content: space-between; align-items: baseline; padding-top: calc(8 * var(--u)); border-top: 1px solid #edf0f5; font-size: calc(13 * var(--u)); color: #6b7489; }
.em-gar__price strong { color: #1d2433; font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums; }
.em-gar--quote { background: #f5f9ff; border-style: dashed; }
.em-gar--quote .em-gar__tags em { background: #dcebff; color: var(--em-blue); }
.em-gar--quote .em-gar__price { color: var(--em-blue); }

/* calendar */
.em-cal { flex: 1; padding: calc(14 * var(--u)); border: 1px solid #e3e8f0; border-radius: calc(12 * var(--u)); }
.cs-body .em-cal__m { text-align: center; font-size: calc(12 * var(--u)); letter-spacing: 0.12em; text-transform: uppercase; color: #6b7489; margin-bottom: calc(10 * var(--u)); }
.em-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(6 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.em-days button, .em-slots button { border: 1px solid #e3e8f0; border-radius: calc(8 * var(--u)); background: #fff; font: 600 calc(17 * var(--u)) var(--font); color: #1d2433; cursor: pointer; transition: background-color 200ms, color 200ms, transform 200ms; }
.em-days button { display: flex; flex-direction: column; align-items: center; padding: calc(6 * var(--u)) 0; }
.em-days small { font-weight: 400; font-size: calc(11 * var(--u)); color: inherit; opacity: 0.7; }
.em-slots { display: grid; gap: calc(8 * var(--u)); }
.em-slots button { padding: calc(12 * var(--u)); font-weight: 400; font-size: calc(15 * var(--u)); }
.em-days button:hover, .em-slots button:hover { transform: translateY(calc(-2 * var(--u))); }
.em-days button.is-on, .em-slots button.is-on { background: var(--em-blue); border-color: var(--em-blue); color: #fff; }

/* contact */
.em-auto { border: 0; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: #fff3cc; color: #7a5b00; font: 500 calc(12 * var(--u)) var(--font); cursor: pointer; animation: emWiggle 2.4s ease-in-out infinite; }
.em-form { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.em-form label { display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); color: #6b7489; }
.em-form input:not([type]) { height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); border: 1px solid #d5dbe5; border-radius: calc(8 * var(--u)); font: calc(14 * var(--u)) var(--font); color: #1d2433; outline: none; min-width: 0; }
.em-form input:not([type]):focus { border-color: var(--em-blue); }
.em-phonein { display: flex; gap: calc(6 * var(--u)); }
.em-phonein em { font-style: normal; display: grid; place-items: center; padding: 0 calc(10 * var(--u)); border: 1px solid #d5dbe5; border-radius: calc(8 * var(--u)); color: #1d2433; font-size: calc(14 * var(--u)); }
.em-phonein input { flex: 1; }
.em-form .em-check { flex-direction: row; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); cursor: pointer; }
.em-check input { width: calc(18 * var(--u)); height: calc(18 * var(--u)); accent-color: var(--em-blue); }

/* done */
.em-scr--done { align-items: stretch; }
.em-done__tick { align-self: center; margin-top: calc(8 * var(--u)); width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--em-green); color: #fff; font-size: calc(32 * var(--u)); }
.em-scr--done.is-active .em-done__tick { animation: emPop 700ms cubic-bezier(.3,1.6,.5,1); }
.em-sum { display: flex; flex-direction: column; border: 1px solid #e3e8f0; border-radius: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); }
.em-sum > div { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid #f0f2f6; font-size: calc(13 * var(--u)); color: #6b7489; }
.em-sum > div:last-child { border: 0; }
.em-sum b { color: #1d2433; font-weight: 500; text-align: right; }
.em-sum__total b { font-size: calc(16 * var(--u)); font-weight: 700; }
.em-notes { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.em-notes span { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #f1f7f2; font-size: calc(13 * var(--u)); opacity: 0; transform: translateY(calc(10 * var(--u))) scale(0.95); transition: opacity 400ms, transform 450ms cubic-bezier(.3,1.6,.5,1); }
.em-notes span.is-in { opacity: 1; transform: none; }
.em-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.em-confetti i { position: absolute; top: -4%; width: calc(8 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(2 * var(--u)); animation: emConfetti 2s cubic-bezier(.2,.6,.4,1) forwards; }

@keyframes emSpin { to { transform: rotate(360deg); } }
@keyframes emPop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes emFade { from { opacity: 0; } }
@keyframes emUp { from { transform: translateY(100%); } }
@keyframes emBump { 40% { transform: scale(0.96); } 70% { transform: scale(1.02); } }
@keyframes emWiggle { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
@keyframes emConfetti { to { transform: translate(var(--dx), calc(860 * var(--u))) rotate(var(--rot)); opacity: 0.2; } }

/* ---------- real recordings + screens ---------- */
.em-reels { position: relative; display: flex; justify-content: center; gap: calc(40 * var(--u)); padding: calc(40 * var(--u)) 0 calc(20 * var(--u)); border-radius: calc(32 * var(--u)); background: linear-gradient(160deg, #0b3b8f, #081f4d); }
.em-reels figure { margin: 0; text-align: center; transition: transform 600ms var(--ease-out); }
.em-reels figure:first-child { transform: rotate(-3deg); }
.em-reels figure:nth-child(2) { transform: rotate(3deg) translateY(calc(24 * var(--u))); }
.em-reels figure:hover { transform: rotate(0) translateY(calc(-8 * var(--u))) scale(1.02); }
.em-reels video { display: block; width: calc(300 * var(--u)); height: auto; border-radius: calc(34 * var(--u)); background: #000; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.35); }
.em-reels figcaption { margin-top: calc(14 * var(--u)); color: rgba(255, 255, 255, 0.8); font-size: calc(17 * var(--u)); }
.em-reels__sticker { position: absolute; top: calc(30 * var(--u)); right: calc(60 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: 999px; background: var(--em-yellow); color: var(--em-blue); font-weight: 600; font-size: calc(18 * var(--u)); transform: rotate(8deg); animation: emWiggle 3s ease-in-out infinite; }
.em-fan { display: flex; justify-content: center; margin: calc(40 * var(--u)) 0 0; padding: 0 calc(20 * var(--u)); }
.cs-body .em-fan .sp-img { width: 24%; background: none; border-radius: 0; margin: 0 -1.5%; transition: transform 500ms var(--ease-out); filter: drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) rgba(11, 30, 70, 0.18)); }
.cs-body .em-fan .sp-img:nth-child(1) { transform: rotate(-8deg) translateY(calc(30 * var(--u))); }
.cs-body .em-fan .sp-img:nth-child(2) { transform: rotate(-3deg); z-index: 1; }
.cs-body .em-fan .sp-img:nth-child(3) { transform: rotate(3deg); z-index: 1; }
.cs-body .em-fan .sp-img:nth-child(4) { transform: rotate(8deg) translateY(calc(30 * var(--u))); }
.cs-body .em-fan .sp-img:hover { transform: rotate(0) translateY(calc(-24 * var(--u))) scale(1.06); z-index: 2; box-shadow: none; }

/* ---------- decisions + paths ---------- */
.em-duo { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.em-duo > div { padding: calc(30 * var(--u)); border-radius: calc(24 * var(--u)); background: var(--bg); }
.em-duo__icon { display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: var(--em-yellow); color: var(--em-blue); font-size: calc(24 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.em-duo strong { display: block; font-size: calc(26 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.cs-body .em-duo p { font-size: calc(19 * var(--u)); margin: 0; }
.em-paths { padding: calc(32 * var(--u)); border-radius: calc(28 * var(--u)); background: #0f1a33; color: #fff; }
.em-paths__head { display: flex; align-items: center; justify-content: space-between; gap: calc(14 * var(--u)); flex-wrap: wrap; margin-bottom: calc(30 * var(--u)); }
.em-paths .sp-label { color: rgba(255,255,255,0.6) !important; }
.em-paths__togs { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.em-tog { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; background: transparent; color: #fff; font: calc(16 * var(--u)) var(--font); cursor: pointer; transition: background-color 300ms, border-color 300ms; }
.em-tog i { position: relative; width: calc(36 * var(--u)); height: calc(20 * var(--u)); border-radius: 999px; background: rgba(255,255,255,0.2); transition: background-color 300ms; }
.em-tog i::after { content: ""; position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; background: #fff; transition: transform 300ms var(--ease-out); }
.em-tog[aria-pressed="true"] { border-color: #ff8a73; background: rgba(255,138,115,0.12); }
.em-tog[aria-pressed="true"] i { background: #ff8a73; }
.em-tog[aria-pressed="true"] i::after { transform: translateX(calc(16 * var(--u))); }
.em-path { display: flex; align-items: center; flex-wrap: wrap; row-gap: calc(18 * var(--u)); }
.em-node { position: relative; display: inline-flex; align-items: center; padding: calc(12 * var(--u)) calc(18 * var(--u)); margin-right: calc(34 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(255,255,255,0.1); font-size: calc(17 * var(--u)); white-space: nowrap; transition: opacity 400ms, transform 500ms cubic-bezier(.3,1.5,.5,1), max-width 500ms var(--ease-out), padding 500ms, margin 500ms, background-color 400ms; max-width: calc(300 * var(--u)); overflow: visible; }
.em-node:not(:last-child)::after { content: "→"; position: absolute; right: calc(-26 * var(--u)); color: rgba(255,255,255,0.45); }
.em-node--fb { background: #ff8a73; color: #2a0f08; max-width: 0; padding-left: 0; padding-right: 0; margin-right: 0; opacity: 0; transform: scale(0.5); overflow: hidden; }
.em-node--fb::after { opacity: 0; }
.is-veh .em-node--veh, .is-price .em-node--quote { max-width: calc(300 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); margin-right: calc(34 * var(--u)); opacity: 1; transform: none; overflow: visible; }
.is-veh .em-node--veh::after, .is-price .em-node--quote::after { opacity: 1; color: rgba(255,255,255,0.45); }
.is-price .em-node--cal { max-width: 0; padding-left: 0; padding-right: 0; margin-right: 0; opacity: 0; transform: scale(0.5); overflow: hidden; }
.em-node--end { background: var(--em-green); }
.em-end--quote, .is-price .em-end--book { display: none; }
.is-price .em-end--quote { display: inline; }
.em-node--end b { font-weight: 500; }
.cs-body .em-paths__foot { margin: calc(26 * var(--u)) 0 0; font-size: calc(18 * var(--u)); color: #dfffa0; }

/* ---------- challenges ---------- */
.em-chal { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(20 * var(--u)); align-items: center; margin-bottom: calc(20 * var(--u)); }
.em-chal .sp-flip { margin: 0; }
.cs-body .em-chal .sp-flip p { font-size: calc(20 * var(--u)); margin: 0; }
.em-tiers { padding: calc(20 * var(--u)); }
.cs-body .em-tiers__hint { margin: 0 0 calc(12 * var(--u)); font-size: calc(16 * var(--u)); color: var(--ink-3); display: flex; justify-content: space-between; }
.em-tier { display: flex; gap: calc(16 * var(--u)); width: 100%; padding: calc(18 * var(--u)); border: calc(2 * var(--u)) solid #e3e8f0; border-radius: calc(18 * var(--u)); background: #fff; text-align: left; font: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(11, 30, 70, 0.08); transition: border-color 300ms, transform 300ms var(--ease-out); }
.em-tier:hover { transform: translateY(calc(-3 * var(--u))) rotate(-0.5deg); border-color: var(--em-blue); }
.em-tier img { width: calc(58 * var(--u)); height: calc(58 * var(--u)); object-fit: contain; border-radius: 0 !important; }
.em-tier__body { display: flex; flex-direction: column; gap: calc(4 * var(--u)); font-size: calc(17 * var(--u)); color: var(--ink-2); }
.em-tier b { font-size: calc(20 * var(--u)); font-weight: 500; color: var(--ink); }
.em-tier__badge, .em-tier__l2 { display: none; }
.em-tier__badge { align-self: flex-start; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; background: #e4f6e9; color: var(--em-green); font-size: calc(13 * var(--u)); }
.em-tier__l2 { flex-direction: column; margin-top: calc(6 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px dashed #dfe4ec; font-size: calc(15 * var(--u)); line-height: 1.45; }
.em-tier__l2 em { font-style: normal; font-size: calc(12 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: calc(4 * var(--u)); }
[data-tier="2"] .em-tier__l2, [data-tier="3"] .em-tier__l2 { display: flex; animation: emFade 400ms; }
[data-tier="3"] .em-tier__badge { display: inline-block; animation: emPop 500ms cubic-bezier(.3,1.6,.5,1); }
.em-gcards { display: grid; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)); }
.em-gcard { display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff; border: calc(2 * var(--u)) solid #e3e8f0; font-size: calc(16 * var(--u)); transition: transform 300ms var(--ease-out); }
.em-gcard:first-child { transform: rotate(-1.5deg); }
.em-gcard:last-child { transform: rotate(1.5deg); background: #f5f9ff; border-style: dashed; border-color: #bcd2f5; }
.em-gcard:hover { transform: none scale(1.02); }
.em-gcard b { font-size: calc(19 * var(--u)); font-weight: 500; color: var(--ink); }
.em-gcard small { color: var(--ink-3); font-size: calc(14 * var(--u)); }
.em-gcard__tag { align-self: flex-start; padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: 999px; font-size: calc(13 * var(--u)); background: #e4f6e9; color: var(--em-green); margin-bottom: calc(4 * var(--u)); }
.em-gcard--quote .em-gcard__tag { background: #dcebff; color: var(--em-blue); }
.em-gcard__price { display: flex; justify-content: space-between; align-items: baseline; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); padding-top: calc(10 * var(--u)); border-top: 1px solid #edf0f5; font-size: calc(14 * var(--u)); color: var(--ink-2); }
.em-gcard__price strong { font-size: calc(18 * var(--u)); color: var(--ink); }
.em-gcard--quote .em-gcard__price { color: var(--em-blue); }

/* ---------- results ---------- */
.em-ticks li::before { background: var(--em-yellow) !important; color: var(--em-blue) !important; font-weight: 700; }
.em-ticks li:nth-child(odd) { transform: rotate(-0.4deg); }
.em-live { position: relative; display: grid; grid-template-columns: calc(230 * var(--u)) 1fr; gap: calc(14 * var(--u)); margin-top: calc(34 * var(--u)); text-decoration: none; }
.cs-body .em-live img { width: 100%; height: calc(300 * var(--u)); object-fit: cover; border-radius: calc(22 * var(--u)); transition: transform 500ms var(--ease-out); }
.cs-body .em-live__banner { object-position: 0% 50%; }
.em-live:hover img { transform: scale(1.015); }
.em-live__btn { position: absolute; left: 50%; bottom: calc(-22 * var(--u)); transform: translateX(-50%) rotate(-2deg); padding: calc(14 * var(--u)) calc(26 * var(--u)); border-radius: 999px; background: var(--em-yellow); color: var(--em-blue); font-weight: 600; font-size: calc(20 * var(--u)); box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(11, 30, 70, 0.2); transition: transform 300ms cubic-bezier(.3,1.6,.5,1); }
.em-live:hover .em-live__btn { transform: translateX(-50%) rotate(2deg) scale(1.08); }

@media (max-aspect-ratio: 1/1) {
  .em-play { grid-template-columns: 1fr; justify-items: center; }
  .em-play__info { width: 100%; min-height: calc(360 * var(--u)); }
  .em-proc, .em-duo, .em-chal { grid-template-columns: 1fr 1fr; }
  .em-chal { grid-template-columns: 1fr; }
  .em-meta { grid-template-columns: 1fr 1fr !important; }
  .em-reels video { width: calc(260 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .em-scr, .em-info, .em-phone, .em-node { transition-duration: 1ms !important; }
  .em-auto, .em-reels__sticker { animation: none !important; }
}
.em [hidden] { display: none !important; }
.em-reels video { aspect-ratio: 748 / 1460; object-fit: cover; }
.em-reels video { aspect-ratio: 588 / 1306; border: calc(12 * var(--u)) solid #16181d; border-radius: calc(44 * var(--u)); background: #fff; box-sizing: border-box; }

/* ---------- real prototype player ---------- */
.em-play__side { display: flex; flex-direction: column; gap: calc(22 * var(--u)); align-self: stretch; justify-content: center; }
.em-play__side .em-play__info { min-height: calc(300 * var(--u)); }
.em-note { margin: 0 !important; padding: calc(14 * var(--u)) calc(18 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff3cc; color: #5b4a00; font-size: calc(18 * var(--u)) !important; line-height: 1.45 !important; }
.em-note::before { content: "↪ Branch · "; font-weight: 600; }
.em-note.pop { animation: emPop 500ms cubic-bezier(.3,1.6,.5,1); }
.em-scen { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); }
.em-scen .em-sim { margin: 0; }
.em-tools { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; }
.em-tool { padding: calc(10 * var(--u)) calc(18 * var(--u)); border: 1px solid rgba(11, 59, 143, 0.2); border-radius: 999px; background: transparent; color: var(--em-blue); font: calc(16 * var(--u)) var(--font); cursor: pointer; transition: background-color 250ms, transform 250ms var(--ease-out); }
.em-tool:hover { background: #fff; transform: translateY(calc(-2 * var(--u))); }
.em-tool[aria-pressed="true"] { background: var(--em-blue); color: #fff; }

.em-phone--proto { height: calc(867 * var(--u)); }
.em-phone--proto .em-phone__screen { display: block; }
.em-pv { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.em-pv::-webkit-scrollbar { display: none; }
.em-pl { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateX(calc(var(--dir, 1) * 18%)); transition: opacity 380ms var(--ease-out), transform 420ms var(--ease-out); }
.em-pl.is-in { opacity: 1; transform: none; }
.em-pl.is-out { opacity: 0; transform: translateX(calc(var(--dir, 1) * -10%)); pointer-events: none; }
.em-pl__img { position: relative; width: 100%; }
.cs-body .em-pl__img img { display: block; width: 100%; height: 100%; border-radius: 0; user-select: none; }
.em-hs { position: absolute; padding: 0; border: 0; border-radius: calc(8 * var(--u)); background: transparent; cursor: pointer; }
.em-hs:focus-visible { outline: calc(3 * var(--u)) solid var(--em-yellow); }
.em-hs--hint::after { content: ""; position: absolute; inset: calc(-3 * var(--u)); border-radius: inherit; border: calc(2 * var(--u)) solid var(--em-yellow); opacity: 0; animation: emHint 2.4s ease-out 1.2s infinite; pointer-events: none; }
.em-pv.flash .em-hs, .show-hs .em-hs { background: rgba(21, 84, 192, 0.22); box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(21, 84, 192, 0.7); }
.em-pv.flash .em-hs { animation: emFlash 900ms ease-out forwards; }
.em-phone__tag { position: absolute; left: calc(-40 * var(--u)); bottom: calc(80 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: var(--em-yellow); color: var(--em-blue); font-weight: 600; font-size: calc(16 * var(--u)); transform: rotate(-8deg); box-shadow: 0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(11, 30, 70, 0.18); z-index: 4; animation: emWiggle 3.2s ease-in-out infinite; }
.em-phone--proto .em-confetti { position: absolute; inset: calc(14 * var(--u)); border-radius: calc(46 * var(--u)); z-index: 5; }
@keyframes emHint { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.06, 1.25); } }
@keyframes emFlash { 0%, 60% { opacity: 1; } 100% { background: transparent; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .em-hs--hint::after, .em-phone__tag { animation: none !important; } .em-pl { transition-duration: 1ms !important; } }
.em-phone__tag { left: auto; bottom: auto; right: calc(-34 * var(--u)); top: calc(-16 * var(--u)); transform: rotate(8deg); }

/* ---------- prototype v2: real-app motion ---------- */
.em-pv { overflow: hidden; cursor: none; touch-action: pan-y; }
.em-pl { position: absolute; inset: 0; width: auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; background: #fff; opacity: 1; transform: none; transition: transform 460ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease, filter 460ms ease; will-change: transform; }
.em-pl::-webkit-scrollbar { display: none; }
.em-pl.from-right { transform: translateX(100%); box-shadow: calc(-12 * var(--u)) 0 calc(30 * var(--u)) rgba(0, 0, 0, 0.12); }
.em-pl.from-left { transform: translateX(-28%); filter: brightness(0.92); }
.em-pl.is-state { opacity: 0; transform: none; transition: opacity 240ms ease; }
.em-pl.is-in { transform: none; opacity: 1; filter: none; }
.em-pl.to-left { transform: translateX(-28%); filter: brightness(0.9); pointer-events: none; }
.em-pl.to-right { transform: translateX(100%); pointer-events: none; z-index: 2; }
.em-pl.to-fade { pointer-events: none; }
.em-pl.is-out { opacity: 1; transform: none; }

/* hotspots: invisible until you touch them, like the real app */
.em-hs { overflow: hidden; cursor: none; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease; }
.em-hs:hover { background: rgba(3, 77, 162, 0.05); }
.em-hs--blue:hover { background: rgba(255, 255, 255, 0.08); }
.em-hs.is-pressed { background: rgba(3, 77, 162, 0.1); }
.em-hs--blue.is-pressed { background: rgba(0, 0, 0, 0.14); }
.em-ripple { position: absolute; border-radius: 50%; background: rgba(3, 77, 162, 0.16); transform: scale(0); animation: emRipple 600ms cubic-bezier(.2, .8, .2, 1) forwards; pointer-events: none; }
.em-hs--blue .em-ripple { background: rgba(255, 255, 255, 0.35); }
@keyframes emRipple { to { transform: scale(1); opacity: 0; } }

/* loading state on a real button */
.em-load { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.85); border-radius: inherit; animation: emFade 150ms; }
.em-load--blue { background: #034da2; }
.em-load i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid rgba(3, 77, 162, 0.25); border-top-color: #034da2; animation: emSpin 700ms linear infinite; }
.em-load--blue i { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; }

/* form fields filling in one by one */
.em-type { position: absolute; background-repeat: no-repeat; clip-path: inset(0 100% 0 0); animation: emTypeIn 480ms steps(14, end) forwards; pointer-events: none; }
@keyframes emTypeIn { to { clip-path: inset(0 0 0 0); } }

/* touch cursor */
.em-touch { position: absolute; left: 0; top: 0; z-index: 6; width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin: calc(-17 * var(--u)) 0 0 calc(-17 * var(--u)); border-radius: 50%; background: rgba(20, 24, 33, 0.22); border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.85); box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.2); pointer-events: none; opacity: 0; transition: opacity 200ms, width 150ms, height 150ms, margin 150ms; }
.em-touch.is-on { opacity: 1; }
.em-touch.is-down { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(-13 * var(--u)) 0 0 calc(-13 * var(--u)); background: rgba(20, 24, 33, 0.35); }
.em-phone--proto .em-phone__screen { position: relative; }
@media (hover: none) { .em-pv, .em-hs { cursor: auto; } .em-touch { display: none; } }

/* gentle nudge to the next tap */
.em-hs--hint::after { inset: 0; border: 0; border-radius: inherit; background: rgba(255, 209, 0, 0.28); animation: emHint2 2.6s ease-in-out 1.4s infinite; }
@keyframes emHint2 { 0%, 100% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: 0; } }
.em-scrollhint { position: absolute; left: 50%; bottom: calc(18 * var(--u)); z-index: 5; transform: translateX(-50%); padding: calc(8 * var(--u)) calc(16 * var(--u)); border: 0; border-radius: 999px; background: rgba(20, 24, 33, 0.78); color: #fff; font: 500 calc(14 * var(--u)) var(--font); cursor: pointer; backdrop-filter: blur(6px); animation: emBob 1.6s ease-in-out infinite; }
.em-scrollhint[hidden] { display: none; }
@keyframes emBob { 50% { transform: translate(-50%, calc(-4 * var(--u))); } }
@media (prefers-reduced-motion: reduce) { .em-scrollhint, .em-hs--hint::after, .em-type { animation: none !important; } .em-type { clip-path: none; } }

/* ================= Euromaster interactive prototype v3 ================= */
.em-pv { --s: 1; overflow: hidden; background: #fff; }
.em-pv .em-hdr { position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: calc(148px * var(--s)); background: #fff; transition: box-shadow 250ms ease; }
.cs-body .em-pv .em-hdr img, .cs-body .em-pv img { display: block; width: 100%; height: auto; border-radius: 0; user-select: none; -webkit-user-drag: none; }
.em-pv .em-hdr.is-lifted { box-shadow: 0 calc(6px * var(--s)) calc(14px * var(--s)) rgba(16, 32, 64, 0.08); }
.em-pv .em-body { position: absolute; top: calc(148px * var(--s)); left: 0; right: 0; bottom: 0; overflow: hidden; }

.em-pv .em-pl { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; background: #fff; opacity: 1; transform: none; filter: none; box-shadow: none; will-change: auto; transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 280ms cubic-bezier(.22, 1, .36, 1), clip-path 420ms cubic-bezier(.22, 1, .36, 1); }
.em-pv .em-pl::-webkit-scrollbar { display: none; }
.em-pv .em-pl--from-r { transform: translateX(11%); opacity: 0; }
.em-pv .em-pl--from-l { transform: translateX(-11%); opacity: 0; }
.em-pv .em-pl--fade { opacity: 0; transition-duration: 240ms; }
.em-pv .em-pl.is-in { transform: none; opacity: 1; }
.em-pv .em-pl--to-l { transform: translateX(-7%); opacity: 0; pointer-events: none; transition-duration: 300ms, 200ms; }
.em-pv .em-pl--to-r { transform: translateX(7%); opacity: 0; pointer-events: none; transition-duration: 300ms, 200ms; }
.em-pv .em-pl--wipe { z-index: 1; }
.em-pv .em-pl__img { position: relative; width: 100%; }

/* pinned footer */
.em-pv .em-ftr { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
.em-pv .em-ftr::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(18px * var(--s)); background: linear-gradient(to top, rgba(16, 32, 64, 0.07), transparent); opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.em-pv .em-ftr.is-lifted::before { opacity: 1; }
.em-pv .em-fl { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; transition: opacity 240ms ease, transform 380ms cubic-bezier(.22, 1, .36, 1); }
.em-pv .em-fl--fade { opacity: 0; }
.em-pv .em-fl--rise { transform: translateY(100%); }
.em-pv .em-fl.is-in { opacity: 1; transform: none; }
.em-pv .em-fl.is-gone { opacity: 0; transition-delay: 60ms; }
.em-pv .em-fl.is-down { transform: translateY(100%); }

/* iOS-style scroll indicator */
.em-pv .em-sbar { position: absolute; z-index: 5; right: calc(3px * var(--s)); top: calc(152px * var(--s)); width: calc(3px * var(--s)); min-width: 3px; border-radius: 3px; background: rgba(20, 24, 33, 0.35); opacity: 0; transition: opacity 300ms ease; pointer-events: none; }
.em-pv .em-sbar.is-on { opacity: 1; transition-duration: 80ms; }

/* animated pieces of the real screen */
.em-under { position: absolute; z-index: 1; background: #fff; pointer-events: none; }
.em-under i { position: absolute; inset: 0; background-repeat: no-repeat; }
.em-pop i { opacity: 0; transform: scale(.94); animation: emPiece var(--d, 260ms) cubic-bezier(.3, 1.4, .5, 1) var(--delay, 0ms) forwards; }
.em-pop { background: transparent; }
@keyframes emPiece { to { opacity: 1; transform: none; } }
.em-type2 { background: transparent; }
.em-type2 i { clip-path: inset(0 100% 0 0); animation: emTypeIn var(--d, 300ms) steps(var(--steps, 8), end) var(--delay, 0ms) forwards; }
.em-type2::after { content: ""; position: absolute; top: 12%; bottom: 12%; left: 0; width: calc(1.5px * var(--s)); background: #034da2; opacity: 0; animation: emCaret var(--d, 300ms) steps(var(--steps, 8), end) var(--delay, 0ms) forwards; }
@keyframes emCaret { 0% { opacity: 1; left: 0; } 99% { opacity: 1; left: 100%; } 100% { opacity: 0; left: 100%; } }
.em-press { z-index: 0; border-radius: calc(6px * var(--s)); }
.em-press i { transform: scale(.965); transition: transform 90ms ease-out; border-radius: calc(6px * var(--s)); }
.em-press.is-up i { transform: none; transition-duration: 180ms; }
.em-fx--ring { background: transparent; }
.em-fx--ring i { display: none; }
.em-fx--ring::after { content: ""; position: absolute; inset: calc(-3px * var(--s)); border-radius: calc(10px * var(--s)); box-shadow: 0 0 0 calc(2px * var(--s)) #ffd100, 0 0 calc(18px * var(--s)) rgba(255, 209, 0, 0.55); opacity: 0; animation: emRing 1.5s ease-out forwards; }
@keyframes emRing { 15% { opacity: 1; } 45% { opacity: .35; } 65% { opacity: 1; } 100% { opacity: 0; } }
.em-fx--shake i { animation: emShake 520ms cubic-bezier(.36, .07, .19, .97); }
@keyframes emShake { 15%, 55% { transform: translateX(calc(-5px * var(--s))); } 35%, 75% { transform: translateX(calc(5px * var(--s))); } 90% { transform: translateX(calc(-2px * var(--s))); } }
.em-fx--pop i { animation: emIconPop 620ms cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes emIconPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
.em-fx--nudge { background: transparent; }
.em-fx--nudge i { animation: emShake 460ms cubic-bezier(.36, .07, .19, .97); }
.em-fx--nudge::after { content: ""; position: absolute; inset: calc(-4px * var(--s)); border-radius: calc(10px * var(--s)); box-shadow: 0 0 0 calc(2px * var(--s)) #ffd100; opacity: 0; animation: emRing 900ms ease-out forwards; }
.em-fx--nudge { z-index: 3; }
.em-fx--nudge i { background-color: #fff; }

/* hotspots */
.em-pv .em-hs { z-index: 2; }
.em-pv .em-hs:hover { background: rgba(3, 77, 162, 0.045); }
.em-pv .em-hs--blue:hover { background: rgba(255, 255, 255, 0.07); }
.em-pv.is-dragging, .em-pv.is-dragging .em-hs { cursor: none; }
.em-pv.is-dragging .em-hs:hover { background: transparent; }
.em-pv .em-ripple { z-index: 1; }
.em-touch.is-hot { background: rgba(3, 77, 162, 0.16); border-color: #fff; box-shadow: 0 0 0 calc(4px * var(--s)) rgba(3, 77, 162, 0.18), 0 2px 8px rgba(0, 0, 0, 0.18); }
.em-pv .em-scrollhint { bottom: 140px; transition: opacity 200ms; }
.em-pv .em-touch { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  .em-pv .em-pl, .em-pv .em-fl { transition-duration: 1ms !important; }
  .em-under i, .em-under::after { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
}
.em-type2 { animation: emBlank 1ms linear var(--delay, 0ms) forwards; }
@keyframes emBlank { to { background: #fff; } }

/* pinned stepper */
.em-pv { --stk: 0; }
.em-pv .em-stk { position: absolute; left: 0; right: 0; top: calc(148px * var(--s)); z-index: 4; height: calc(var(--stk) * 1px * var(--s)); overflow: visible; background: #fff; transition: height 380ms cubic-bezier(.22, 1, .36, 1), box-shadow 250ms ease; }
.em-pv .em-stk::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(14px * var(--s)); background: linear-gradient(rgba(16, 32, 64, 0.08), transparent); opacity: 0; transition: opacity 250ms ease; pointer-events: none; }
.em-pv .em-stk.is-lifted::after { opacity: 1; }
.em-pv .em-sl { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateX(calc(var(--dir, 1) * 24px * var(--s))); transition: opacity 300ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1); }
.em-pv .em-sl.is-in { opacity: 1; transform: none; }
.em-pv .em-sl.is-out { opacity: 0; transform: translateX(calc(var(--dir, 1) * -16px * var(--s))); }
.em-pv .em-body { top: calc((148px + var(--stk) * 1px) * var(--s)); transition: top 380ms cubic-bezier(.22, 1, .36, 1); }
.em-pv .em-sbar { top: calc((152px + var(--stk) * 1px) * var(--s)); }
.em-load.is-done { opacity: 0; transition: opacity 160ms ease; }
.em-pv .em-pl--to-l .em-load, .em-pv .em-pl--to-r .em-load { display: none; }

/* flow map under the prototype */
.em-map { grid-column: 1 / -1; margin-top: calc(8 * var(--u)); padding-top: calc(28 * var(--u)); border-top: 1px dashed rgba(11, 59, 143, 0.18); }
.em-map__title { margin: 0 0 calc(18 * var(--u)) !important; color: var(--em-blue); font-weight: 500; font-size: calc(20 * var(--u)) !important; }
.em-map__title span { margin-left: calc(10 * var(--u)); color: #6b7489; font-weight: 400; font-size: calc(16 * var(--u)); }
.em-map__track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(14 * var(--u)); }
.em-map__track::before, .em-map__fill { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); bottom: calc(15 * var(--u)); height: calc(3 * var(--u)); border-radius: 3px; background: rgba(11, 59, 143, 0.12); }
.em-map__fill { background: var(--em-blue); transform-origin: left; transform: scaleX(0); transition: transform 600ms cubic-bezier(.22, 1, .36, 1); }
.em-map__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); padding: 0; border: 0; background: none; font: inherit; color: #6b7489; cursor: pointer; }
.em-map__thumb { display: block; width: 100%; aspect-ratio: 360 / 300; overflow: hidden; border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 0 0 1px rgba(11, 59, 143, 0.1), 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(11, 30, 70, 0.08); opacity: 0.55; filter: saturate(0.6); transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 300ms, filter 300ms, box-shadow 300ms; }
.cs-body .em-map__thumb img { display: block; width: 100%; height: auto; border-radius: 0; }
.em-map__label { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(15 * var(--u)); white-space: nowrap; }
.em-map__label b { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(11, 59, 143, 0.2); color: #6b7489; font-weight: 600; font-size: calc(14 * var(--u)); transition: background-color 300ms, color 300ms, box-shadow 300ms, transform 400ms cubic-bezier(.3, 1.6, .5, 1); }
.em-map__step:hover .em-map__thumb { transform: translateY(calc(-6 * var(--u))); opacity: 0.9; filter: none; }
.em-map__step.is-done .em-map__thumb { opacity: 0.85; filter: none; }
.em-map__step.is-done .em-map__label b { background: var(--em-blue); color: #fff; box-shadow: none; }
.em-map__step.is-cur { color: var(--em-blue); font-weight: 500; }
.em-map__step.is-cur .em-map__thumb { opacity: 1; filter: none; transform: translateY(calc(-8 * var(--u))); box-shadow: 0 0 0 calc(3 * var(--u)) var(--em-yellow), 0 calc(14 * var(--u)) calc(26 * var(--u)) rgba(11, 30, 70, 0.16); }
.em-map__step.is-cur .em-map__label b { background: var(--em-yellow); color: var(--em-blue); box-shadow: none; transform: scale(1.12); }
.em-map__step:focus-visible { outline: none; }
.em-map__step:focus-visible .em-map__thumb { box-shadow: 0 0 0 calc(3 * var(--u)) var(--em-blue); }
@media (max-width: 760px) {
  .em-map__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: calc(10 * var(--u)) 0 calc(4 * var(--u)); }
  .em-map__step { flex: 0 0 36%; scroll-snap-align: start; }
  .em-map__track::before, .em-map__fill { display: none; }
  .em-map__title span { display: block; margin: calc(4 * var(--u)) 0 0; }
}
.em-map__label { flex-direction: column; gap: calc(6 * var(--u)); line-height: 1.2; }
.em-map__track::before, .em-map__fill { bottom: calc(33 * var(--u)); }

/* ======================= Sunrise case study ======================= */
.sr { --sr: #da291c; --sr-soft: #fdeceb; --sr-ink: #3d3935; }
.sr .sp-kicker b { background: var(--sr); color: #fff; }
.sr .sp-chip--1 { background: #fde2df; } .sr .sp-chip--2 { background: #ffe9d6; } .sr .sp-chip--3 { background: #f3e8e6; } .sr .sp-chip--4 { background: #eceae8; }
.sr-hero img { object-position: 30% 50%; }

.sr-note { display: flex; gap: calc(16 * var(--u)); align-items: flex-start; margin-top: calc(28 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--sr-soft); }
.sr-note p { margin: 0 !important; }
.sr-note__icon { flex: none; display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--sr); color: #fff; font-weight: 600; }

/* timeline */
.sr-gantt { padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u)); border-radius: calc(28 * var(--u)); background: var(--bg); }
.sr-gantt__rows { display: flex; flex-direction: column; gap: calc(12 * var(--u)); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 1px), rgba(0, 0, 0, 0.06) calc(100% / 9 - 1px) calc(100% / 9)); }
.sr-gantt__row { position: relative; height: calc(44 * var(--u)); }
.sr-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 9 * 100%); width: calc((var(--e) - var(--s)) / 9 * 100%); display: flex; align-items: center; min-width: max-content; padding: 0 calc(16 * var(--u)); border-radius: 999px; background: var(--sr); color: #fff; font-size: calc(16 * var(--u)); text-decoration: none; white-space: nowrap; transform-origin: left center; transform: scaleX(0); transition: transform 900ms cubic-bezier(.22, 1, .36, 1), box-shadow 300ms, filter 300ms; }
.sr-bar b { font-weight: 500; opacity: 0; transition: opacity 400ms 500ms; }
.sr-bar--muted { background: #e8e4e1; color: var(--sr-ink); }
a.sr-bar:hover { filter: brightness(1.08); box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(218, 41, 28, 0.3); }
a.sr-bar::after { content: "↓"; margin-left: calc(10 * var(--u)); opacity: 0; transform: translateY(-3px); transition: opacity 250ms, transform 250ms; }
a.sr-bar:hover::after { opacity: 1; transform: none; }
.sr-gantt.is-in .sr-bar { transform: scaleX(1); }
.sr-gantt.is-in .sr-bar b { opacity: 1; }
.sr-gantt.is-in .sr-gantt__row:nth-child(2) .sr-bar { transition-delay: 120ms; }
.sr-gantt.is-in .sr-gantt__row:nth-child(3) .sr-bar { transition-delay: 240ms; }
.sr-gantt.is-in .sr-gantt__row:nth-child(4) .sr-bar { transition-delay: 360ms; }
.sr-gantt.is-in .sr-gantt__row:nth-child(5) .sr-bar { transition-delay: 480ms; }
.sr-gantt__axis { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: calc(12 * var(--u)); color: #8a8580; font-size: calc(14 * var(--u)); }

/* evidence + sketches */
.sr-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); align-items: center; margin: calc(36 * var(--u)) 0; }
.sr-sketches { display: flex; justify-content: center; margin: calc(8 * var(--u)) 0 calc(48 * var(--u)); padding: calc(20 * var(--u)) 0; }
.cs-body .sr-sketches img { width: 26%; margin: 0 -1.5%; border-radius: calc(6 * var(--u)); background: #fff; padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(34 * var(--u)); box-shadow: 0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(40, 20, 10, 0.16); cursor: zoom-in; transition: transform 500ms var(--ease-out); }
.cs-body .sr-sketches img:nth-child(1) { transform: rotate(-7deg) translateY(calc(18 * var(--u))); }
.cs-body .sr-sketches img:nth-child(2) { transform: rotate(3deg); z-index: 1; }
.cs-body .sr-sketches img:nth-child(3) { transform: rotate(-2deg) translateY(calc(10 * var(--u))); z-index: 1; }
.cs-body .sr-sketches img:nth-child(4) { transform: rotate(6deg) translateY(calc(24 * var(--u))); }
.cs-body .sr-sketches img:hover { transform: rotate(0) translateY(calc(-16 * var(--u))) scale(1.05); z-index: 2; }

/* phone frame for the real recordings */
.sr-phone { position: relative; width: calc(300 * var(--u)); aspect-ratio: 490 / 1070; padding: calc(10 * var(--u)); border-radius: calc(46 * var(--u)); background: #16181d; box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(60, 10, 0, 0.25), inset 0 0 0 calc(2 * var(--u)) #3a3d44; }
.sr-phone video, .sr-phone .sr-app { position: absolute; inset: calc(10 * var(--u)); width: calc(100% - 20 * var(--u)); height: calc(100% - 20 * var(--u)); object-fit: cover; border-radius: calc(36 * var(--u)); background: #fff; }
.sr-phone--sm { width: calc(250 * var(--u)); aspect-ratio: 334 / 728; }
[data-iter] .sr-phone video { opacity: 0; transition: opacity 450ms ease; }
[data-iter] .sr-phone video.is-active { opacity: 1; }

.sr-iter { display: grid; grid-template-columns: 1fr auto; gap: calc(48 * var(--u)); align-items: center; margin: 0 0 calc(56 * var(--u)); padding: calc(44 * var(--u)); border-radius: calc(32 * var(--u)); background: radial-gradient(120% 100% at 100% 0%, #ffd9d3 0%, #fdeceb 45%, #f7f5f4 100%); }
.sr-iter .sp-switch { margin-bottom: calc(28 * var(--u)); }
.sr-iter__side { position: relative; min-height: calc(220 * var(--u)); }
.sr-iter__txt { position: absolute; left: 0; right: 0; top: calc(80 * var(--u)); opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity 350ms, transform 450ms var(--ease-out); pointer-events: none; }
.sr-iter__txt.is-active { opacity: 1; transform: none; pointer-events: auto; }
.sr-iter__txt h4 { margin: 0 0 calc(10 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 500; }

.sr-steps { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.sr-steps span { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: 999px; background: var(--bg); font-size: calc(16 * var(--u)); }
.sr-steps b { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; background: var(--sr); color: #fff; font-weight: 500; font-size: calc(14 * var(--u)); }
.sr-steps span + span::before { content: "→"; margin-right: calc(4 * var(--u)); color: #b5aea9; order: -1; }

/* background checks demo */
.sr-checks { display: grid; grid-template-columns: 1fr auto; gap: calc(48 * var(--u)); align-items: center; margin-top: calc(36 * var(--u)); padding: calc(44 * var(--u)); border-radius: calc(32 * var(--u)); background: var(--sr-ink); color: #fff; }
.sr-checks .sp-label { color: #ffb3aa !important; }
.sr-checks h4 { margin: 0 0 calc(12 * var(--u)); font-size: calc(28 * var(--u)); font-weight: 500; color: #fff; }
.sr-checks p { color: rgba(255, 255, 255, 0.78) !important; }
.sr-run { margin-top: calc(18 * var(--u)); padding: calc(14 * var(--u)) calc(24 * var(--u)); border: 0; border-radius: 999px; background: var(--sr); color: #fff; font: 500 calc(17 * var(--u)) var(--font); cursor: pointer; transition: transform 250ms var(--ease-out), background-color 250ms; }
.sr-run:hover { transform: translateY(calc(-2 * var(--u))); background: #ef3a2c; }
.sr-run span { margin-right: calc(6 * var(--u)); }
.is-running .sr-run span { animation: srBlink 900ms infinite; }
@keyframes srBlink { 50% { opacity: 0.2; } }
.sr-app { overflow: hidden; color: #1f1d1b; font-size: calc(13 * var(--u)); background: #f4f3f2 !important; }
.sr-app__bar { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(40 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); background: #fff; border-bottom: calc(2 * var(--u)) solid var(--sr); }
.sr-app__bar b { flex: 1; color: var(--sr); font-size: calc(17 * var(--u)); }
.sr-app__bar i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: calc(1.6 * var(--u)) solid #333; }
.sr-app__back { margin: calc(12 * var(--u)) calc(16 * var(--u)) !important; color: var(--sr) !important; font-size: calc(13 * var(--u)) !important; }
.sr-app__card { margin: 0 calc(12 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(8 * var(--u)); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.sr-app__title { display: flex; justify-content: space-between; margin: 0 0 calc(10 * var(--u)) !important; font-weight: 600; font-size: calc(14 * var(--u)) !important; color: #1f1d1b !important; }
.sr-app__title span { color: #8a8580; font-weight: 400; font-variant-numeric: tabular-nums; }
.sr-app__meter { height: calc(4 * var(--u)); margin-bottom: calc(12 * var(--u)); border-radius: 4px; background: #eee; overflow: hidden; }
.sr-app__meter i { display: block; width: 0; height: 100%; background: #2e9e4a; transition: width 500ms var(--ease-out); }
.sr-app ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.sr-app li { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); border: 1px solid #e6e3e0; border-radius: calc(6 * var(--u)); opacity: 0.55; transition: opacity 300ms, border-color 300ms, background-color 300ms; }
.sr-app li b { display: block; font-weight: 500; font-size: calc(13 * var(--u)); }
.sr-app li small { display: block; color: #8a8580; font-size: calc(11.5 * var(--u)); }
.sr-st { flex: none; position: relative; width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid #cfcac6; }
.sr-app li.is-checking { opacity: 1; border-color: #f2c2bd; }
.sr-app li.is-checking .sr-st { border-color: #f1d1ce; border-top-color: var(--sr); animation: emSpin 700ms linear infinite; }
.sr-app li.is-ok, .sr-app li.is-warn { opacity: 1; }
.sr-app li.is-ok .sr-st { border-color: #2e9e4a; background: #2e9e4a; animation: srPop 380ms cubic-bezier(.3, 1.6, .5, 1); }
.sr-app li.is-ok .sr-st::after { content: ""; position: absolute; left: 32%; top: 18%; width: 28%; height: 48%; border: solid #fff; border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; transform: rotate(45deg); }
.sr-app li.is-ok small { color: #2e9e4a; }
.sr-app li.is-warn { border-color: #f5c16c; background: #fff8ea; }
.sr-app li.is-warn .sr-st { border-color: #e59a0b; background: #e59a0b; animation: srPop 380ms cubic-bezier(.3, 1.6, .5, 1); }
.sr-app li.is-warn .sr-st::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: calc(12 * var(--u)); }
.sr-app li.is-warn small { color: #b06f00; }
@keyframes srPop { 0% { transform: scale(.4); } 100% { transform: none; } }
.sr-caption { margin-top: calc(12 * var(--u)) !important; color: #8a8580 !important; font-size: calc(15 * var(--u)) !important; text-align: center; }

.sr-flows { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: calc(16 * var(--u)); align-items: start; margin: calc(40 * var(--u)) 0; }

/* results: the red half circle from the Figma, now counting up */
.sr-result { position: relative; display: grid; grid-template-columns: auto 1fr; gap: calc(48 * var(--u)); align-items: center; padding: calc(48 * var(--u)) calc(56 * var(--u)); border-radius: calc(32 * var(--u)); background: var(--sr); color: #fff; overflow: hidden; }
.sr-result::before { content: ""; position: absolute; right: -18%; bottom: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.sr-result .sr-phone { box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(80, 0, 0, 0.35); transform: rotate(-4deg); }
.sr-result__nums { position: relative; display: grid; gap: calc(30 * var(--u)); }
.sr-result__nums strong { display: block; font-size: calc(92 * var(--u)); font-weight: 400; line-height: 1; letter-spacing: -0.03em; }
.sr-result__nums span { display: block; max-width: calc(360 * var(--u)); margin-top: calc(6 * var(--u)); color: rgba(255, 255, 255, 0.85); font-size: calc(18 * var(--u)); }

/* future vision */
.sr-vision { display: grid; grid-template-columns: auto 1fr; gap: calc(48 * var(--u)); align-items: start; margin-top: calc(36 * var(--u)); }
.sr-vision__txt h4 { margin: 0 0 calc(10 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 500; }
.sr-vision__txt .sp-img { margin-top: calc(20 * var(--u)); }

/* before / after compare */
.sr-compare { --pos: 50%; position: relative; max-width: calc(560 * var(--u)); margin: calc(8 * var(--u)) auto 0; border-radius: calc(20 * var(--u)); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 calc(20 * var(--u)) calc(40 * var(--u)) rgba(40, 20, 10, 0.12); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.cs-body .sr-compare img { display: block; width: 100%; height: auto; border-radius: 0; pointer-events: none; }
.sr-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.sr-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: calc(4 * var(--u)); margin-left: calc(-2 * var(--u)); padding: 0; border: 0; background: var(--sr); cursor: ew-resize; }
.sr-compare__handle span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: var(--sr); color: #fff; font-size: calc(18 * var(--u)); letter-spacing: 0.1em; transform: translate(-50%, -50%); box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(218, 41, 28, 0.45); transition: transform 250ms var(--ease-out); }
.sr-compare.is-drag .sr-compare__handle span, .sr-compare__handle:hover span { transform: translate(-50%, -50%) scale(1.12); }
.sr-compare__handle:focus-visible { outline: calc(3 * var(--u)) solid var(--sr-ink); }
.sr-compare__tag { position: absolute; top: calc(14 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: 999px; background: rgba(31, 29, 27, 0.78); color: #fff; font-size: calc(14 * var(--u)); pointer-events: none; }
.sr-compare__tag--b { left: calc(14 * var(--u)); }
.sr-compare__tag--a { right: calc(14 * var(--u)); background: var(--sr); }
.sr-diffs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); max-width: calc(760 * var(--u)); margin: calc(28 * var(--u)) auto 0; padding: 0; list-style: none; }
.sr-diffs li { padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--bg); font-size: calc(16 * var(--u)); line-height: 1.45; }
.sr-diffs b { color: var(--sr); font-weight: 500; }

@media (max-width: 760px) {
  .sr-evidence, .sr-iter, .sr-checks, .sr-vision, .sr-result { grid-template-columns: 1fr; justify-items: center; }
  .sr-iter, .sr-checks, .sr-result { padding: calc(28 * var(--u)) calc(22 * var(--u)); }
  .sr-iter__side { min-height: calc(260 * var(--u)); width: 100%; }
  .sr-flows, .sr-diffs { grid-template-columns: 1fr; }
  .cs-body .sr-sketches img { width: 30%; }
  .sr-bar b { font-size: calc(14 * var(--u)); }
  .sr-result__nums { text-align: center; }
  .sr-result__nums span { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .sr-bar, .sr-bar b { transition: none !important; } }
.cs-body .sr-checks h4 { color: #fff; }
.cs-body .sr-checks .sr-app p.sr-app__back { color: var(--sr) !important; }
.cs-body .sr-checks .sr-app p.sr-app__title { color: #1f1d1b !important; }
.cs-body .sr-result__nums strong { color: #fff; }

/* ---------- Sunrise: composed stages ---------- */
.sr-stage { position: relative; margin: calc(8 * var(--u)) 0 calc(48 * var(--u)); padding: calc(44 * var(--u)); border-radius: calc(32 * var(--u)); background: linear-gradient(160deg, #f6f2ee 0%, #efe9e3 100%); overflow: hidden; }
.sr-stage--red { background: radial-gradient(120% 110% at 100% 0%, #ffd6cf 0%, #fdeae7 45%, #f8f3f1 100%); }
.sr-stage h4 { margin: 0 0 calc(12 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 500; line-height: 1.2; }
.sr-shot { position: relative; margin: 0; border-radius: calc(14 * var(--u)); background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(60, 30, 20, 0.06), 0 calc(24 * var(--u)) calc(48 * var(--u)) rgba(60, 30, 20, 0.14); }
.cs-body .sr-shot img { display: block; width: 100%; height: auto; border-radius: 0; cursor: zoom-in; }
.sr-shot__bar { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid #eee7e2; background: #faf8f6; }
.sr-shot__bar i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #e3dcd6; }
.sr-shot__bar i:first-child { background: #f0776c; } .sr-shot__bar i:nth-child(2) { background: #f4c05a; } .sr-shot__bar i:nth-child(3) { background: #6cc987; }
.sr-shot__bar em { margin-left: calc(10 * var(--u)); color: #8a8580; font-style: normal; font-size: calc(13 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* evidence */
.sr-evidence { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: calc(44 * var(--u)); align-items: center; }
.sr-evidence .sr-shot { transform: rotate(1.5deg); }

/* iteration card on the sketch collage */
.sr-iter { position: relative; isolation: isolate; background: #f1ebe4 var(--sketch) center / cover no-repeat; overflow: hidden; }
.sr-iter::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(250, 246, 242, 0.96) 0%, rgba(250, 246, 242, 0.9) 38%, rgba(250, 246, 242, 0.2) 70%, rgba(250, 246, 242, 0) 100%); }
.sr-iter .sr-phone { box-shadow: 0 calc(34 * var(--u)) calc(70 * var(--u)) rgba(70, 40, 20, 0.3), inset 0 0 0 calc(2 * var(--u)) #3a3d44; }

/* workshop boards */
.sr-board { padding: calc(32 * var(--u)); }
.sr-board__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); margin-bottom: calc(22 * var(--u)); }
.sr-board .sr-steps { margin: 0; }
.sr-board .sr-steps span { background: #fff; }
.sr-board__time { padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: var(--sr-ink); color: #fff; font-size: calc(14 * var(--u)); }
.sr-shot--board { padding: calc(14 * var(--u)); background: #fbfaf8; }
.cs-body .sr-shot--board img { border-radius: calc(8 * var(--u)); }
.sr-board__foot { max-width: calc(720 * var(--u)); margin: calc(22 * var(--u)) 0 0 !important; }

/* DTS flows */
.sr-flows { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: calc(40 * var(--u)); align-items: center; margin-top: calc(40 * var(--u)); background: linear-gradient(160deg, #3d3935 0%, #2c2926 100%); color: #fff; }
.sr-flows .sp-label { color: #ffb3aa !important; }
.cs-body .sr-flows h4 { color: #fff; }
.sr-flows p { color: rgba(255, 255, 255, 0.78) !important; }
.sr-flows__pile { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: calc(16 * var(--u)); align-items: start; }
.sr-flows__pile .sr-shot { box-shadow: 0 calc(20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.35); }
.sr-flows__pile .sr-shot:first-child { grid-row: 1 / 3; transform: rotate(-2deg); }
.sr-flows__pile .sr-shot:nth-child(2) { transform: rotate(2deg) translateY(calc(10 * var(--u))); }
.sr-flows__pile .sr-shot:nth-child(3) { transform: rotate(-1deg) translateY(calc(6 * var(--u))); }

/* future vision */
.sr-vision { display: grid; grid-template-columns: auto 1fr; gap: calc(48 * var(--u)); align-items: center; margin-top: calc(36 * var(--u)); }
.sr-vision .sr-phone { transform: rotate(-3deg); }
.sr-shot--journey { margin-top: calc(24 * var(--u)); }

/* compare */
.sr-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: calc(44 * var(--u)); align-items: center; }
.sr-cmp .sr-compare { margin: 0; max-width: none; }
.sr-cmp .sr-diffs { display: flex; flex-direction: column; gap: calc(14 * var(--u)); max-width: none; margin: 0; counter-reset: d; }
.sr-cmp .sr-diffs li { position: relative; display: block; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u)) calc(62 * var(--u)); background: #fff; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(60, 30, 20, 0.06); counter-increment: d; }
.sr-cmp .sr-diffs li span { position: absolute; left: calc(16 * var(--u)); top: calc(14 * var(--u)); display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--sr); color: #fff; font-size: calc(14 * var(--u)); font-weight: 500; }
.sr-cmp .sr-diffs li span::before { content: counter(d); }
.sr-cmp .sr-diffs b { display: block; margin-bottom: calc(2 * var(--u)); }

@media (max-width: 760px) {
  .sr-stage { padding: calc(26 * var(--u)) calc(20 * var(--u)); }
  .sr-evidence, .sr-flows, .sr-vision, .sr-cmp { grid-template-columns: 1fr; }
  .sr-vision { justify-items: center; }
  .sr-iter::before { background: linear-gradient(180deg, rgba(250, 246, 242, 0.95) 0%, rgba(250, 246, 242, 0.85) 45%, rgba(250, 246, 242, 0.25) 75%); }
}
.sr-iter { background: #f1ebe4 url(../images/sr/sketch-bg.jpg) center / cover no-repeat; }
.sr-iter::before { background: linear-gradient(90deg, rgba(250, 246, 242, 0.94) 0%, rgba(250, 246, 242, 0.74) 40%, rgba(250, 246, 242, 0.1) 68%, rgba(250, 246, 242, 0) 100%); }
.cs-body .sr-shot--journey img { height: calc(300 * var(--u)); object-fit: cover; object-position: 50% 0; }
.sr-shot--journey::after { content: "Click to see the full journey"; position: absolute; left: 0; right: 0; bottom: 0; padding: calc(60 * var(--u)) 0 calc(14 * var(--u)); background: linear-gradient(transparent, #fff 75%); color: #8a8580; font-size: calc(13 * var(--u)); text-align: center; pointer-events: none; }

/* first / second version, over the hand sketches (as in the Figma) */
.sr-vers { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); margin: calc(8 * var(--u)) 0 calc(56 * var(--u)); padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u)); border-radius: calc(32 * var(--u)); background:
  url(../images/sr/sketch-strip.jpg) center calc(62%) / auto 46% repeat-x,
  linear-gradient(var(--sr) 0 38%, #fff 38%); overflow: hidden; }
.sr-vers__col { display: flex; flex-direction: column; align-items: center; }
.sr-vers__label { align-self: center; width: calc(280 * var(--u)); margin: 0 0 calc(26 * var(--u)) !important; padding-top: calc(10 * var(--u)); border-top: calc(5 * var(--u)) solid #fff; color: #fff !important; font-weight: 500; font-size: calc(18 * var(--u)) !important; }
.sr-vers .sr-phone { width: calc(280 * var(--u)); }
.sr-vers__cap { width: calc(280 * var(--u)); margin: calc(22 * var(--u)) 0 0 !important; color: #6b6560 !important; font-size: calc(16 * var(--u)) !important; line-height: 1.5 !important; }
@media (max-width: 760px) {
  .sr-vers { grid-template-columns: 1fr; gap: calc(36 * var(--u)); background: url(../images/sr/sketch-strip.jpg) center 60% / auto 28% repeat-x, linear-gradient(var(--sr) 0 16%, #fff 16%); }
  .sr-vers__col:nth-child(2) .sr-vers__label { color: var(--sr-ink) !important; border-top-color: var(--sr); }
}
@media (max-width: 760px) {
  .sr-vers { background: url(../images/sr/sketch-strip.jpg) center 27% / auto 13% repeat-x, linear-gradient(var(--sr) 0 16%, #fff 16%); }
}

/* "Email copied" note on the contact button */
.ctrl--social[data-link="email"] { position: relative; }
.ctrl--social[data-link="email"]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); padding: 6px 12px; border-radius: 999px; background: #111; color: #fff; font-size: 13px; font-weight: 400; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity 200ms, transform 300ms cubic-bezier(.22, 1, .36, 1); }
.ctrl--social[data-link="email"].show-tip::after { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   PHONE MODE: native-feeling layout (≤ 760 px wide). Desktop untouched.
   ===================================================================== */
.m-bar, .m-pager, .m-scrim, .m-sheet, .m-grab, .m-close { display: none; }

@media (max-width: 760px) {
  :root { --m-ease: cubic-bezier(.32, .72, 0, 1); --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
  html, body { height: 100%; overscroll-behavior: none; }
  body { -webkit-tap-highlight-color: transparent; }
  body.m-lock { overflow: hidden; }

  /* ---- Home ---- */
  .stage { position: fixed; inset: 0; width: auto; height: 100dvh; top: 0; transform: none; display: flex; flex-direction: column; padding: calc(var(--sat) + 22px) 0 calc(var(--sab) + 14px); }
  .glow { position: absolute; left: 50%; top: 42%; width: 130vw; height: 130vw; transform: translate(-50%, -50%); }
  .peek { display: none; }
  .intro { position: relative; inset: auto; flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 22px; }
  .intro__text, .intro__text--home { position: relative; left: auto; top: auto; width: auto; transform: none !important; opacity: 1 !important; }
  .intro__text--case { display: none; }
  .intro__title, .intro__subtitle { font-size: 26px; line-height: 1.12; }
  .controls { position: relative; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; gap: 8px; }
  .controls--case { display: none; }
  .ctrl { width: 46px; height: 46px; border-radius: 15px; font-size: 17px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
  .ctrl:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
  .ctrl:active { transform: scale(0.94); }
  .ctrl svg { width: 22px; height: 22px; }
  .ctrl--toggle[aria-expanded="true"] { background: var(--white); color: var(--ink); }
  .ctrl--toggle[aria-expanded="true"] .icon-open { display: block; }
  .ctrl--toggle[aria-expanded="true"] .icon-close { display: none; }
  .socials { display: none; }

  .carousel { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 1 1 auto; min-height: 0; margin-top: 22px; display: flex; gap: 12px; padding: 4px 28px 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 28px; transform-style: flat; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .carousel::-webkit-scrollbar { display: none; }
  .card { --u: calc(100vw / 560); position: relative; inset: auto; flex: 0 0 calc(100vw - 56px); height: 100%; max-height: 620px; align-self: center; scroll-snap-align: center; scroll-snap-stop: always; transform: none !important; opacity: 1 !important; pointer-events: auto !important; z-index: auto !important; border-radius: 28px; padding: 14px 14px 18px; box-shadow: 0 10px 30px rgba(30, 40, 60, 0.06); transition: transform 200ms var(--ease-out), box-shadow 300ms; }
  .card::after { display: none; }
  .card:active { transform: scale(0.98) !important; }
  .card__media { border-radius: 18px; }
  .card__title { margin-top: 16px; font-size: 18px; line-height: 1.25; }
  .tags { gap: 6px; margin-top: 10px; }
  .tag { height: 28px; padding: 0 10px; border-radius: 9px; font-size: 13px; border-width: 1.5px; }
  [data-view="about"] .card[data-pos="0"] { opacity: 1 !important; }
  [data-view="about"] .card:not([data-pos="0"]) { opacity: 1; }
  [data-view="about"] .carousel { pointer-events: auto; }

  .dots { position: relative; left: auto; top: auto; flex: none; flex-direction: row; justify-content: center; gap: 0; margin-top: 6px; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; }
  .dot { width: 26px; height: 30px; }
  .dot::before { width: 7px; height: 7px; border-radius: 4px; transition: width 350ms var(--m-ease), background-color 300ms; }
  .dot[aria-current="true"]::before { width: 20px; }

  /* ---- Case study: full-screen page that slides in ---- */
  .panel { --u: calc(100vw / 600); position: fixed; inset: 0; left: 0; top: 0; width: 100%; height: 100dvh; border-radius: 0; transform: translateX(100%); visibility: hidden; z-index: 40; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.08); transition: transform 440ms var(--m-ease), visibility 0s linear 440ms; }
  .panel.m-in { transform: none; visibility: visible; transition: transform 440ms var(--m-ease), visibility 0s; }
  .panel__bar { display: none; }
  .panel__scroll { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .panel__inner { padding: calc(var(--sat) + 70px) 20px calc(var(--sab) + 110px); }
  .panel__inner.is-leaving-up { transform: translateX(-24px); }
  .panel__inner.is-leaving-down { transform: translateX(24px); }
  .panel__inner.is-entering-up { transform: translateX(24px); }
  .panel__inner.is-entering-down { transform: translateX(-24px); }
  .cs-title { font-size: 28px; line-height: 1.15; }
  .panel .tags { margin-bottom: 4px; }
  /* home slides slightly left under the page, like iOS */
  .stage { transition: transform 440ms var(--m-ease), filter 440ms var(--m-ease); }
  body.m-lock[data-view="case"] .stage { transform: translateX(calc(-22% + 22% * var(--m-back, 0))); filter: brightness(calc(0.94 + 0.06 * var(--m-back, 0))); }

  .m-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: calc(var(--sat) + 6px) 12px 6px 6px; min-height: 52px; background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); transition: box-shadow 250ms; }
  .m-bar.is-lifted { box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12); }
  .m-bar__back { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 10px 0 4px; border: 0; background: none; color: var(--ink); font: 400 17px var(--font); cursor: pointer; }
  .m-bar__back svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .m-bar__back:active { opacity: 0.5; }
  .m-bar__title { margin: 0; overflow: hidden; font-weight: 500; font-size: 15px; text-align: center; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity 250ms, transform 300ms var(--m-ease); }
  .m-bar.has-title .m-bar__title { opacity: 1; transform: none; }
  .m-bar__count { min-width: 64px; color: var(--ink-3); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }

  .m-pager { position: absolute; left: 50%; bottom: calc(var(--sab) + 16px); z-index: 3; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(26, 26, 26, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transform: translateX(-50%); transition: transform 380ms var(--m-ease), opacity 250ms; }
  .m-pager.is-hidden { opacity: 0; transform: translate(-50%, calc(100% + 30px)); pointer-events: none; }
  .m-pager button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
  .m-pager button:active { background: rgba(255, 255, 255, 0.15); }
  .m-pager svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .m-pager span { min-width: 52px; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }

  /* ---- Bottom sheets ---- */
  .m-scrim { position: fixed; inset: 0; z-index: 45; display: block; background: rgba(0, 0, 0, 0.32); opacity: 0; visibility: hidden; transition: opacity 360ms var(--m-ease), visibility 0s 360ms; }
  .m-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 360ms var(--m-ease); }
  .m-grab { display: flex; justify-content: center; padding: 10px 0 6px; cursor: grab; touch-action: none; }
  .m-grab span { width: 38px; height: 5px; border-radius: 3px; background: #d4d4d4; }

  .about-card { --u: calc(100vw / 600); position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: calc(100dvh - var(--sat) - 14px); border-radius: 24px 24px 0 0; clip-path: none !important; opacity: 1; z-index: 50; transform: translateY(105%); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12); transition: transform 480ms var(--m-ease), visibility 0s linear 480ms; }
  [data-view="about"] .about-card { transform: none; transition: transform 480ms var(--m-ease), visibility 0s; clip-path: none !important; }
  .about-card .m-grab { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 34px; }
  .m-close { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f0f0f0; color: #555; font-size: 22px; line-height: 1; cursor: pointer; }
  .about-card__scroll { display: block; height: 100%; padding: 40px 22px calc(var(--sab) + 40px); }
  .about-card__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 52vh; border-radius: 20px; }
  .about-card__text { padding: 26px 0 0; }
  .about-card p { font-size: 16px; }
  .about-card p.about-card__lead { font-size: 19px; }
  .about-card__title { font-size: 32px; }

  .m-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(var(--sab) + 8px); z-index: 50; display: block; padding: 0 0 8px; transform: translateY(calc(100% + 30px)); visibility: hidden; transition: transform 440ms var(--m-ease), visibility 0s linear 440ms; }
  .m-sheet.is-open { transform: none; visibility: visible; transition: transform 440ms var(--m-ease), visibility 0s; }
  .m-sheet .m-grab { display: none; }
  .m-sheet__title { margin: 0; padding: 14px 16px 10px; border-radius: 16px 16px 0 0; background: rgba(250, 250, 250, 0.96); color: var(--ink-3); font-size: 13px; text-align: center; }
  .m-sheet__group { overflow: hidden; border-radius: 0 0 16px 16px; background: rgba(250, 250, 250, 0.96); backdrop-filter: blur(20px); }
  .m-sheet__row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; border-top: 0.5px solid rgba(0, 0, 0, 0.1); color: var(--ink); text-decoration: none; }
  .m-sheet__row:active { background: rgba(0, 0, 0, 0.05); }
  .m-sheet__row > span:nth-child(2) { flex: 1; min-width: 0; }
  .m-sheet__row b { display: block; font-weight: 500; font-size: 17px; }
  .m-sheet__row small { display: block; overflow: hidden; color: var(--ink-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
  .m-sheet__ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; font-weight: 600; font-size: 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
  .m-sheet__row i { color: var(--ink-3); font-style: normal; font-size: 18px; }
  .m-sheet__row em { display: none; padding: 4px 10px; border-radius: 999px; background: #1a1a1a; color: #fff; font-style: normal; font-size: 12px; }
  .m-sheet__row.is-copied em { display: inline-block; animation: pop 350ms var(--ease-out); }
  .m-sheet__cancel { display: block; width: 100%; height: 56px; margin-top: 8px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); font: 600 17px var(--font); cursor: pointer; }
  .m-sheet__cancel:active { background: #f0f0f0; }

  .lightbox { z-index: 60; padding: calc(var(--sat) + 12px) 10px calc(var(--sab) + 12px); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .panel, .about-card, .m-sheet, .m-pager, .stage { transition-duration: 1ms !important; }
}
@media (max-width: 760px) {
  .stage { transition: none; filter: none; }
  body.m-lock[data-view="case"] .stage { transform: none; filter: none; }
  .stage > .intro, .stage > .carousel, .stage > .dots, .stage > .glow { transition: transform 440ms var(--m-ease), opacity 440ms var(--m-ease); }
  body.m-lock[data-view="case"] .stage > :is(.intro, .carousel, .dots) { transform: translateX(calc(-22% + 22% * var(--m-back, 0))); opacity: calc(0.6 + 0.4 * var(--m-back, 0)); }
  .m-sheet { z-index: 60; }
  .m-scrim { z-index: 45; }
}
@media (max-width: 760px) {
  .em-play { padding: 22px 16px; gap: 22px; }
  .em-play__side .em-play__info, .em-play__info { display: grid; min-height: 0 !important; }
  .em-info { position: relative; inset: auto; grid-area: 1 / 1; }
  .em-play__side { gap: 16px; }
  .em-phone--proto { transform: none; }
}

/* ---------- Phone mode v2 ---------- */
.card--clone { display: none; }
@media (max-width: 760px) {
  /* home: square cards, endless loop */
  .card--clone { display: flex; }
  .carousel { align-items: center; margin-top: 10px; gap: 14px; padding: 10px 0 16px; scroll-padding: 0; touch-action: pan-x; transition: opacity 500ms var(--ease); }
  .card { flex: 0 0 min(74vw, 46vh); width: min(74vw, 46vh); height: auto; max-height: none; aspect-ratio: 1 / 1; padding: 12px 12px 14px; border-radius: 26px; scroll-snap-stop: normal; }
  .card__media { flex: 1 1 auto; min-height: 0; border-radius: 16px; }
  .card__title { margin-top: 12px; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card .tags { flex-wrap: nowrap; overflow: hidden; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .card .tag { height: 26px; font-size: 12px; }
  /* first and last real card keep space so looping feels seamless */
  .carousel::before, .carousel::after { content: ""; flex: 0 0 calc((100vw - min(74vw, 46vh)) / 2 - 14px); }

  /* header: buttons on the right; contact expands into a column below */
  .intro { align-items: center; }
  .controls--home { position: relative; }
  .socials { display: flex; position: absolute; top: calc(100% + 10px); right: 0; flex-direction: column; gap: 8px; z-index: 6; }
  .socials .ctrl { width: 46px; height: 46px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transform: translateY(-10px) scale(0.9); }
  .socials.is-open .ctrl { transform: none; }
  .socials.is-open .ctrl:hover { transform: none; }
  .ctrl--toggle[aria-expanded="true"] { background: var(--ink); color: var(--white); }
  .ctrl--toggle[aria-expanded="true"] .icon-open { display: none; }
  .ctrl--toggle[aria-expanded="true"] .icon-close { display: block; }
  #aboutBtn[aria-expanded="true"] { background: var(--white); color: var(--ink); }
  #aboutBtn[aria-expanded="true"] .icon-open { display: block; }
  #aboutBtn[aria-expanded="true"] .icon-close { display: none; }
  .ctrl--social[data-link="email"]::after { left: auto; right: calc(100% + 10px); bottom: auto; top: 50%; transform: translate(6px, -50%); }
  .ctrl--social[data-link="email"].show-tip::after { transform: translate(0, -50%); }

  /* case study: grows out of the card like on the web */
  .panel { transform: none; visibility: hidden; transition: none; border-radius: 0; box-shadow: none; }
  .panel.is-open { visibility: visible; }
  .panel.is-animating { transition: clip-path 760ms var(--ease); }
  .panel.m-in { transition: none; }
  .stage > .intro, .stage > .carousel, .stage > .dots { transition: opacity 400ms var(--ease); }
  body.m-lock[data-view="case"] .stage > :is(.intro, .carousel, .dots) { transform: none; opacity: 1; }
  .m-pager { display: none !important; }

  /* reading: vertical only, never sideways */
  .panel__scroll { overflow-x: hidden; touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
  .panel__inner { overflow-x: clip; max-width: 100vw; }
  .panel__inner { padding-top: calc(var(--sat) + 76px); }

  /* top bar: label/title left, buttons right (always visible) */
  .m-bar { grid-template-columns: 1fr auto; padding: calc(var(--sat) + 10px) 12px 10px 20px; }
  .m-bar__label { position: relative; min-width: 0; height: 22px; overflow: hidden; }
  .m-bar__label span { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; font-size: 16px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; transition: opacity 250ms, transform 300ms var(--m-ease); }
  #mCount { color: var(--ink-2); font-weight: 500; }
  #mTitle { font-weight: 500; color: var(--ink); opacity: 0; transform: translateY(12px); }
  .m-bar.has-title #mCount { opacity: 0; transform: translateY(-12px); }
  .m-bar.has-title #mTitle { opacity: 1; transform: none; }
  .m-bar__btns { display: flex; gap: 6px; }
  .m-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; background: var(--bg); color: var(--ink); cursor: pointer; }
  .m-btn:active { transform: scale(0.92); }
  .m-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .m-btn--dark { background: var(--ink); color: #fff; }

  /* about: opens at the top, with room above the sheet */
  .about-card { top: calc(var(--sat) + 56px); bottom: 0; height: auto !important; }
  .about-card__scroll { padding-top: 44px; }

  /* touch: what reacts to hover on desktop reacts to a tap here */
  a.sr-bar::after { opacity: 1; transform: none; }
  .ds-lego.is-tap span:not(.ds-lego__block) { transform: translateX(calc(12 * var(--u))) rotate(-4deg); }
  .ds-lego.is-tap .ds-lego__block { transform: scale(1.1); }
  .sp-questions > div.is-tap { transform: translateY(calc(-4 * var(--u))); background: rgba(166, 160, 255, 0.22); }
  .sp-questions > div.is-tap::before { transform: rotate(-15deg) scale(1.3); }
  .hl.is-tap { background-size: 100% 88%; transition-delay: 0ms; transition-duration: 300ms; }
  .ds-chaos__fix.is-tap { transform: translateY(-2px) scale(1.03); }
  .sp-stat.is-tap, .sp-chip.is-tap { transform: translateY(-3px); }
}
@media (max-width: 760px) and (hover: none) {
  /* stop "sticky" hover states after a tap */
  .card[data-pos="0"]:hover, .sp-stat:hover, .sp-chip:hover, .sp-img:hover, .em-map__step:hover .em-map__thumb, .sp-outcomes > div:hover, .em-gcard:hover, .em-tier:hover, .sp-ba__m:hover, .em-proc > div:hover, .ds-duo > div:hover { transform: none; }
}

/* animated recordings (animated WebP instead of video: always plays, incl. Safari & Low Power Mode) */
.sp-show__card img.anim { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0e1a3a; border-radius: 0; }
.cs-body .sp-show__card img.anim { border-radius: 0; cursor: default; }
.sr-phone img.anim { position: absolute; inset: calc(10 * var(--u)); width: calc(100% - 20 * var(--u)); height: calc(100% - 20 * var(--u)); object-fit: cover; object-position: top; border-radius: calc(36 * var(--u)); background: #fff; }
.cs-body .sr-phone img.anim { border-radius: calc(36 * var(--u)); max-width: none; }
img.media-video { object-fit: cover; }

/* ======================= Password gate ======================= */
.gate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; visibility: hidden; pointer-events: none; }
.gate.is-open { visibility: visible; pointer-events: auto; }
.gate__scrim { position: absolute; inset: 0; background: rgba(243, 243, 243, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 400ms var(--ease); }
.gate.is-open .gate__scrim { opacity: 1; }
.gate__card { position: relative; width: min(440px, 100%); padding: 34px 32px 26px; border-radius: 32px; background: #fff; box-shadow: 0 30px 80px rgba(30, 40, 60, 0.16); text-align: center; overflow: visible; opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 350ms var(--ease), transform 600ms cubic-bezier(.3, 1.4, .5, 1); }
.gate.is-open .gate__card { opacity: 1; transform: none; }
.gate.is-done .gate__card { transform: scale(1.02); }
.gate__x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink-2); font-size: 22px; line-height: 1; cursor: pointer; transition: transform 200ms; }
.gate__x:hover { transform: rotate(90deg); }

/* the lock character */
.gate__lock { --px: -3px; width: 108px; margin: -86px auto 10px; filter: drop-shadow(0 14px 18px rgba(30, 40, 60, 0.16)); animation: gateBob 3.2s ease-in-out infinite; }
.gate__lock svg { display: block; width: 100%; overflow: visible; }
.gate__shackle { transform-origin: 86px 58px; transition: transform 550ms cubic-bezier(.3, 1.8, .5, 1); }
.gate__pupil { transform: translate(var(--px), 0); transition: transform 180ms ease-out; }
.gate__lock.is-looking .gate__pupil { transform: translate(var(--px), 2.5px); }
.gate__lids { opacity: 0; transition: opacity 150ms; }
.gate__eyes { transition: opacity 150ms; animation: gateBlink 4.5s infinite; transform-origin: 60px 84px; }
.gate__lock.is-shy .gate__eyes { opacity: 0; }
.gate__lock.is-shy .gate__lids { opacity: 1; }
.gate__mouth { transition: d 300ms; }
.gate__sweat { opacity: 0; transform: translateY(-4px); }
.gate__lock.is-sad { animation: gateShake 520ms cubic-bezier(.36, .07, .19, .97); }
.gate__lock.is-sad .gate__mouth { d: path("M50 108q10 -7 20 0"); }
.gate__lock.is-sad .gate__sweat { animation: gateSweat 1.4s ease-in forwards; }
.gate__lock.is-open { animation: gateHop 700ms cubic-bezier(.3, 1.6, .5, 1); }
.gate__lock.is-open .gate__shackle { transform: translateY(-14px) rotate(28deg); }
.gate__lock.is-open .gate__mouth { d: path("M46 101q14 14 28 0"); }
.gate__lock.is-open .gate__body { fill: #c8f7a8; transition: fill 300ms; }
@keyframes gateBob { 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes gateBlink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
@keyframes gateShake { 15%, 55% { transform: translateX(-10px) rotate(-6deg); } 35%, 75% { transform: translateX(10px) rotate(6deg); } }
@keyframes gateSweat { 0% { opacity: 0; transform: translateY(-4px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px); } }
@keyframes gateHop { 40% { transform: translateY(-18px) scale(1.06); } }

.gate__kicker { margin: 0 0 8px; color: var(--ink-3); font-size: 13px; letter-spacing: 0.04em; }
.gate__title { margin: 0 0 10px; font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.gate__lead { margin: 0 auto 20px; max-width: 330px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.gate__field { position: relative; }
.gate__field input { width: 100%; height: 54px; padding: 0 52px 0 20px; border: 2px solid transparent; border-radius: 16px; background: var(--bg); color: var(--ink); font: 400 17px var(--font); letter-spacing: 0.02em; outline: none; transition: border-color 200ms, background-color 200ms; }
.gate__field input:focus { border-color: #1a1a1a; background: #fff; }
.gate__peek { position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-3); cursor: pointer; }
.gate__peek svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gate__peek[aria-pressed="true"] { color: var(--ink); }
.gate__msg { min-height: 22px; margin: 10px 0 6px; color: #c2410c; font-size: 14px; }
.gate.is-done .gate__msg { color: #15803d; font-weight: 500; }
.gate__go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 0; border-radius: 16px; background: #1a1a1a; color: #fff; font: 500 17px var(--font); cursor: pointer; transition: transform 200ms var(--ease-out), background-color 200ms; }
.gate__go:hover { transform: translateY(-2px); }
.gate__go:active { transform: scale(0.98); }
.gate.is-done .gate__go { background: #15803d; }
.gate__hints { margin: 14px 0 0; padding: 0; list-style: none; text-align: left; }
.gate__hints li { position: relative; margin-top: 8px; padding: 10px 14px 10px 40px; border-radius: 14px; background: #fff7d1; color: var(--ink); font-size: 14px; line-height: 1.4; animation: gatePop 450ms cubic-bezier(.3, 1.6, .5, 1); }
.gate__hints li::before { content: "💡"; position: absolute; left: 13px; top: 9px; }
@keyframes gatePop { 0% { opacity: 0; transform: translateY(8px) scale(0.95); } }
.gate__help { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.gate__hint, .gate__ask { padding: 8px 4px; border: 0; background: none; color: var(--ink-2); font: 400 14px var(--font); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(0, 0, 0, 0.2); cursor: pointer; }
.gate__hint:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.gate__ask { color: var(--ink); }
.gate__confetti { position: absolute; left: 50%; top: 40px; pointer-events: none; }
.gate__confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: gateBurst 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes gateBurst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 160px)) rotate(var(--r)); opacity: 0; } }

/* lock badge on the home cards */
.card__lock { position: absolute; top: calc(14 * var(--u)); right: calc(14 * var(--u)); z-index: 2; display: grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); font-size: calc(22 * var(--u)); transition: opacity 400ms, transform 400ms; }
.is-unlocked .card__lock { opacity: 0; transform: scale(0.6); }

@media (max-width: 760px) {
  .gate { place-items: end center; padding: 0; }
  .gate__card { width: 100%; border-radius: 28px 28px 0 0; padding: 30px 22px calc(env(safe-area-inset-bottom, 0px) + 22px); transform: translateY(100%); transition: opacity 250ms, transform 480ms cubic-bezier(.32, .72, 0, 1); }
  .gate__lock { width: 92px; margin-top: -76px; }
  .gate__title { font-size: 22px; }
  .card__lock { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gate__lock, .gate__eyes { animation: none !important; } }