/* ============================================================
   Portfolio theme layer — page-scoped overrides on the
   Liquid Glass design system.

   Glass approach (per Apple Liquid Glass technique):
   · low backdrop blur + saturate so the material stays see-through
   · an SVG feDisplacementMap (#pf-distort) refracts the backdrop at
     the edges — the real "liquid" tell, with a blur-only fallback
   · bright rim border + inset specular highlight = the glass body
   · almost no drop shadow — glass separates blocks, not shadows
   ============================================================ */

:root {
  /* Accent: dark blue (light mode), light blue (dark mode) */
  --pf-navy: #1b3a5c;
  --pf-navy-deep: #0f2740;
  --pf-sky: #aac8e6;
  --pf-sky-soft: #cadcef;
  --accent: var(--pf-navy);
  --accent-pressed: var(--pf-navy-deep);

  /* Glass material */
  --pf-blur: 10px;
  --pf-blur-thick: 16px;
  --pf-sat: 175%;

  /* Light mode: light blue / grey wash — kept pale so thin dark text stays legible */
  --pf-page-1: #e7edf3;
  --pf-page-2: #f4f7fa;
  --pf-glass-tint: rgba(255, 255, 255, 0.56);
  --pf-glass-tint-thick: rgba(255, 255, 255, 0.68);
  --pf-border: rgba(255, 255, 255, 0.85);
  --pf-hairline: rgba(20, 32, 46, 0.14);
  --pf-placeholder: rgba(24, 38, 54, 0.07);
  --pf-placeholder-line: rgba(24, 38, 54, 0.16);

  /* Grayish background blocks (give the glass something to refract) —
     softened so they never dim the text sitting above them */
  --pf-blob-a: rgba(165, 185, 207, 0.44);
  --pf-blob-b: rgba(146, 163, 184, 0.38);
  --pf-blob-c: rgba(198, 210, 224, 0.48);

  /* Higher-contrast text than the system defaults */
  --label-primary: #10161d;
  --label-secondary: rgba(16, 22, 29, 0.86);
  --label-tertiary: rgba(16, 22, 29, 0.72);

  --pf-shadow: 0 2px 10px rgba(16, 28, 42, 0.05);
  --pf-shadow-thick: 0 4px 16px rgba(16, 28, 42, 0.07);
}

:root[data-theme="dark"] {
  /* Dark mode: black + dark grey, NO blue surfaces. Accent = light blue. */
  --accent: var(--pf-sky);
  --accent-pressed: var(--pf-sky-soft);

  --pf-page-1: #0a0a0b;
  --pf-page-2: #19191b;
  --pf-glass-tint: rgba(46, 46, 48, 0.5);
  --pf-glass-tint-thick: rgba(38, 38, 40, 0.62);
  --pf-border: rgba(255, 255, 255, 0.18);
  --pf-hairline: rgba(255, 255, 255, 0.12);
  --pf-placeholder: rgba(255, 255, 255, 0.06);
  --pf-placeholder-line: rgba(255, 255, 255, 0.16);

  --pf-blob-a: rgba(86, 86, 90, 0.34);
  --pf-blob-b: rgba(60, 60, 64, 0.38);
  --pf-blob-c: rgba(110, 110, 116, 0.26);

  --label-primary: #ffffff;
  --label-secondary: rgba(255, 255, 255, 0.88);
  --label-tertiary: rgba(255, 255, 255, 0.72);

  --pf-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  --pf-shadow-thick: 0 4px 18px rgba(0, 0, 0, 0.34);
}

/* ---------- Base typography: light but high-contrast ---------- */
body {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--label-primary);
  background-color: var(--pf-page-1);
}

/* ---------- The portfolio glass material ---------- */
.pf-glass {
  position: relative;
  isolation: isolate;
  background: var(--pf-glass-tint);
  border: 1px solid var(--pf-border);
  border-radius: 28px;
  /* fallback: blur only (Safari / Firefox) */
  -webkit-backdrop-filter: blur(var(--pf-blur)) saturate(var(--pf-sat));
  backdrop-filter: blur(var(--pf-blur)) saturate(var(--pf-sat));
  /* enhanced: blur + refraction (Chromium) — last valid decl wins */
  -webkit-backdrop-filter: blur(calc(var(--pf-blur) * 0.6)) saturate(var(--pf-sat)) url(#pf-distort);
  backdrop-filter: blur(calc(var(--pf-blur) * 0.6)) saturate(var(--pf-sat)) url(#pf-distort);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 1px rgba(255, 255, 255, 0.14),
    var(--pf-shadow);
}
:root[data-theme="dark"] .pf-glass {
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    var(--pf-shadow);
}
.pf-glass--thick {
  background: var(--pf-glass-tint-thick);
  -webkit-backdrop-filter: blur(var(--pf-blur-thick)) saturate(var(--pf-sat));
  backdrop-filter: blur(var(--pf-blur-thick)) saturate(var(--pf-sat));
  -webkit-backdrop-filter: blur(calc(var(--pf-blur-thick) * 0.7)) saturate(var(--pf-sat)) url(#pf-distort);
  backdrop-filter: blur(calc(var(--pf-blur-thick) * 0.7)) saturate(var(--pf-sat)) url(#pf-distort);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1px 1px rgba(255, 255, 255, 0.16),
    var(--pf-shadow-thick);
}
/* top-edge specular sheen */
.pf-glass::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 44%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}
:root[data-theme="dark"] .pf-glass::after { opacity: 0.16; }
/* Dark mode: flat surfaces, no grain. */
:root[data-theme="dark"] .pf-glass::before { content: none; }
/* Dark mode: no glow, no motion. Flat black + grey shades only. */
:root[data-theme="dark"] .gv-blob { display: none !important; }
:root[data-theme="dark"] .pf-glass,
:root[data-theme="dark"] .pf-glass--thick { --pf-sat: 105%; }

/* ---------- Layout ---------- */
.pf-container {
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding-inline: clamp(24px, 4.5vw, 104px);
}
.pf-section {
  padding-block: clamp(88px, 11vh, 150px);
  position: relative;
  z-index: 1;
}

/* ---------- Type utilities ---------- */
.pf-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-tertiary);
}
.pf-h1 {
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.0;
  color: var(--label-primary);
}
.pf-h2 {
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.18;
  color: var(--label-primary);
  text-wrap: pretty;
}
.pf-h3 {
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.34;
  color: var(--label-primary);
  text-wrap: pretty;
}
.pf-lead {
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--label-secondary);
  text-wrap: pretty;
}
.pf-body {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--label-secondary);
  text-wrap: pretty;
}
.pf-num {
  font-weight: 300;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--label-primary);
}

/* ---------- Pills / chips ---------- */
.pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--label-primary);
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--label-secondary);
  background: var(--fill-tertiary);
  border: 1px solid var(--pf-hairline);
}

/* ---------- Image placeholder (project thumbnails the user fills) ---------- */
.pf-ph {
  position: relative;
  width: 100%;
  border-radius: 18px;
  background: var(--pf-placeholder);
  border: 1px solid var(--pf-placeholder-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-tertiary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Bento grid ---------- */
.pf-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: clamp(16px, 1.4vw, 22px);
}
.pf-bento > * { min-width: 0; }

/* ---------- Buttons (glass, no color fills) ---------- */
.pf-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--pf-border);
  background: var(--pf-glass-tint);
  -webkit-backdrop-filter: blur(var(--pf-blur)) saturate(var(--pf-sat));
  backdrop-filter: blur(var(--pf-blur)) saturate(var(--pf-sat));
  color: var(--label-primary);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.5), var(--pf-shadow);
  transition: transform 240ms var(--glass-spring), border-color 240ms var(--glass-ease);
}
:root[data-theme="dark"] .pf-btn {
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.2), var(--pf-shadow);
}
.pf-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.pf-btn--primary { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.pf-btn--primary:hover { border-color: var(--accent); }

/* Thin hairline separators */
.pf-rule { height: 1px; border: 0; background: var(--pf-hairline); }

/* ---------- Interaction effects ---------- */
/* Lift + brighten rim on hover for any clickable glass element */
.gv-lift {
  transition: transform 260ms var(--glass-spring), border-color 260ms var(--glass-ease), box-shadow 260ms var(--glass-ease);
}
.gv-lift:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.55), 0 10px 26px rgba(16,28,42,0.14);
}
:root[data-theme="dark"] .gv-lift:hover {
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.24), 0 12px 30px rgba(0,0,0,0.4);
}
.gv-lift:active { transform: translateY(-1px); }

/* Animated underline for text links */
.gv-underline { position: relative; }
.gv-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; opacity: 0.55;
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--glass-ease);
}
.gv-underline:hover::after { transform: scaleX(1); }

/* Nav link subtle wash on hover (when not active) */
.gv-navlink:hover { color: var(--label-primary) !important; }

/* Social row slides + accent on hover */
.gv-social { transition: color 220ms var(--glass-ease), padding-left 220ms var(--glass-ease); }
.gv-social:hover { color: var(--label-primary) !important; padding-left: 6px; }
.gv-social:hover i { opacity: 0.9 !important; }

/* ---------- Live label ---------- */
.pf-live {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--label-primary);
  background: var(--pf-glass-tint-thick);
  border: 1px solid var(--pf-border);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
.pf-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2fbf57;
  box-shadow: 0 0 0 3px rgba(47,191,87,0.25);
}
.gv-pulse, .pf-live-dot { animation: gvPulse 2.4s ease-out infinite; }
@keyframes gvPulse {
  0%   { box-shadow: 0 0 0 0 rgba(47,191,87,0.4); }
  70%  { box-shadow: 0 0 0 7px rgba(47,191,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(47,191,87,0); }
}

/* Rotating flight destination — slow ease in, brief hold, ease out */
@keyframes gvTrip {
  0%   { opacity: 0; transform: translateY(12px); }
  25%  { opacity: 1; transform: translateY(0); }
  62%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}
.gv-trip { animation: gvTrip 3s ease-in-out both; }

/* ---------- Live nomi orb ---------- */
.nomi-orb-word {
  font-size: clamp(15px, 3vw, 22px);
  font-weight: 300;
  letter-spacing: 0.14em;
}
.nomi-orb { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 10px 26px rgba(20,60,110,0.45), inset 0 2px 4px rgba(255,255,255,0.65),
    inset 0 -14px 22px rgba(9,58,102,0.55);
  animation: nomiBreath 6s ease-in-out infinite;
}
.nomi-orb-body { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #e4f3ff 0%, #a9daf7 26%, #5cb4ef 52%, #2f8fd8 74%, #1f6fb0 100%);
}
/* the liquid crescent — a lighter lobe that slowly rotates around the sphere */
.nomi-orb-swirl { position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(closest-side at 68% 40%, rgba(240,250,255,0.95) 0%, rgba(215,240,255,0.5) 34%, rgba(215,240,255,0) 60%);
  transform-origin: 50% 50%;
  animation: nomiSpin 15s linear infinite;
}
.nomi-orb-spec { position: absolute; top: 12%; left: 16%; width: 42%; height: 34%; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%);
  filter: blur(1px);
}
.nomi-orb-halo { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(92,192,242,0.5) 0%, rgba(92,192,242,0) 68%);
  animation: nomiRipple 4.2s ease-out infinite;
}
@keyframes nomiSpin { to { transform: rotate(360deg); } }
@keyframes nomiBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes nomiRipple {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nomi-orb, .nomi-orb-swirl, .nomi-orb-halo { animation: none !important; }
  .nomi-orb-halo { opacity: 0.25; }
}

/* ---------- Onboarding anchor map ---------- */
.onb-map-enlarge { transition: transform 420ms cubic-bezier(.34,1.2,.5,1), box-shadow 420ms var(--glass-ease); transform-origin: center; }
.onb-map-enlarge:hover { transform: scale(1.035); box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.65), 0 26px 70px rgba(16,28,42,0.22); z-index: 5; position: relative; }
@media (prefers-reduced-motion: reduce) { .onb-map-enlarge:hover { transform: none; } }

/* ---------- Kiosk tour animated cursor ---------- */
.kiosk-cur { display: none !important; }
.kiosk-cur-press { transform-origin: center; animation: kioskPress 260ms ease; }
@keyframes kioskPress { 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0.18), 0 2px 10px rgba(0,0,0,0.35); } }
@media (max-width: 860px) {
  .onb-track { grid-template-columns: 1fr 1fr !important; }
  .onb-detail { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .onb-track { grid-template-columns: 1fr !important; }
  .onb-map-row { grid-template-columns: 1fr !important; }
  .onb-arrow { display: none !important; }
  .onb-map { position: static !important; }
}

/* ---------- Responsive bento collapse ---------- */
@media (max-width: 1000px) {
  .pf-bento > * { grid-column: span 6 !important; grid-row: auto !important; }
}
@media (max-width: 600px) {
  .pf-bento > * { grid-column: span 12 !important; }
}

/* ---------- Case-study type scale ----------
   Sizes adopted from the nomi RedNote MVP case study
   (assets/nomi-rednote-flow-v4.html) and applied to every
   case-study page. !important is needed because panel
   components set clamp() sizes inline. */
.gv-case .pf-eyebrow { font-size: 11.5px !important; letter-spacing: 0.13em !important; }
.gv-case .pf-h2 { font-size: 26px !important; line-height: 1.22 !important; }
.gv-case .pf-h3 { font-size: 17px !important; }
.gv-case .pf-lead { font-size: 15.5px !important; line-height: 1.65 !important; }
.gv-case .pf-body { font-size: 13.5px !important; line-height: 1.65 !important; }

/* ---------- nomi case chapters, native layout ---------- */
.nmc { display: flex; flex-direction: column; }
/* Rhythm token: a case tab is a flow of concept sections, and each new
   concept opens with the same generous breath of space. Every tab root
   carries this class instead of choosing its own number. */
.cs-tab { gap: clamp(72px, 7vw, 112px); }
.nmc-sub { font-size: 15.5px; line-height: 1.65; color: var(--label-secondary); max-width: 70ch; margin: 0; text-wrap: pretty; }
.nmc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.nmc-idx { font-size: 11px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.nmc-card { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; height: 100%; }
.nmc-card h4 { margin: 0 0 8px; font-size: 17px; font-weight: 400; letter-spacing: 0.005em; color: var(--label-primary); line-height: 1.34; text-wrap: pretty; }
.nmc-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--label-secondary); }
.nmc-ev { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--pf-border); font-size: 12.5px; line-height: 1.6; color: var(--label-tertiary); }
.nmc-chip { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 999px; background: var(--fill-secondary); border: 1px solid var(--pf-border); color: var(--label-secondary); }
.nmc-cover { font-size: 12px; color: var(--label-tertiary); border: 1.5px dashed var(--pf-border); border-radius: 10px; padding: 8px 12px; line-height: 1.5; }
.nmc-pre { white-space: pre-line; }

/* flow chains */
.nmc-map { padding: clamp(20px, 2vw, 26px); overflow-x: auto; }
.nmc-chain { display: flex; align-items: center; min-width: max-content; }
.nmc-node { border: 1px solid var(--pf-border); border-radius: 9px; padding: 8px 13px; font-size: 12.5px; background: var(--fill-secondary); color: var(--label-primary); white-space: nowrap; }
.nmc-node small { display: block; font-size: 10.5px; color: var(--label-tertiary); }
.nmc-node.cut { opacity: 0.5; text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.nmc-node.cut small { text-decoration: none; }
.nmc-arr { color: var(--label-tertiary); padding: 0 9px; font-size: 13px; flex: none; }
.nmc-loop { margin-top: 12px; font-size: 12.5px; color: var(--accent); }

/* stat rows */
.nmc-stat { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--label-secondary); border-bottom: 1px dashed var(--pf-border); padding-bottom: 6px; }
.nmc-stat b { font-weight: 500; color: var(--label-primary); font-variant-numeric: tabular-nums; }

/* question / decision / trade-off blocks */
.nmc-blk { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--label-secondary); max-width: 74ch; }
.nmc-blk b { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-tertiary); margin-bottom: 3px; }
.nmc-blk.dec { background: color-mix(in srgb, var(--accent) 9%, transparent); border-left: 2px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 16px; color: var(--label-primary); }
.nmc-blk.dec b { color: var(--accent); }
.nmc-blk.trade { background: var(--fill-tertiary); border-radius: 10px; padding: 12px 16px; }

/* screen switcher: chevron pager, same pattern as the Testing rounds */
.nmc-switch { display: flex; align-items: center; gap: 16px; }
.nmc-switch .nmc-swmid { text-align: center; flex: 1; min-width: 0; }

/* compare row: original dark mock + changes */
.nmc-compare { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.nmc-olabel { font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label-tertiary); margin-bottom: 10px; }
.nmc-oframe { background: #2a2a32; border-radius: 12px; padding: 5% 5.5%; min-height: 220px; display: flex; flex-direction: column; font-size: 10px; color: #c9c7cf; }
.nmc-oframe .ttl { font-size: 11px; font-weight: 500; color: #b9b7c2; }
.nmc-obtn { border: 1px solid #4a4a56; border-radius: 7px; padding: 7px 10px; font-size: 9.5px; color: #c9c7cf; background: #33333d; text-align: center; }
.nmc-obtn.sel { background: #e8e6ef; color: #26252b; }
.nmc-obtn.cta { background: #2a2a6a; border-color: #2a2a6a; color: #ddddf2; }
.nmc-ocard { background: #e8e6ef; color: #33323a; border-radius: 6px; padding: 8px 10px; font-size: 8.5px; line-height: 1.5; }
.nmc-ogrey { background: #3a3a45; border-radius: 6px; padding: 8px 10px; font-size: 8.5px; color: #b9b7c2; line-height: 1.5; }
.nmc-otag { display: inline-block; border-radius: 999px; padding: 1px 7px; font-size: 7.5px; background: #4a4a56; color: #c9c7cf; margin: 1px; }
.nmc-changes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.nmc-changes li { font-size: 13px; line-height: 1.55; color: var(--label-secondary); padding-left: 14px; position: relative; }
.nmc-changes li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* wireframe frames + annotations — the frame hugs its content so the
   annotation cards below stay within reach */
.nmc-frame { position: relative; border-radius: 18px; border: 1px solid var(--pf-border); background: var(--fill-tertiary); overflow: hidden; }
.nmc-fz { position: relative; padding: clamp(18px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.nmc-logo { font-size: 12px; font-weight: 500; color: var(--label-tertiary); letter-spacing: -0.02em; }
.nmc-pcard { background: var(--fill-secondary); border: 1px solid var(--pf-border); border-radius: 10px; color: var(--label-primary); }
.nmc-gcard { background: transparent; border: 1px solid var(--pf-border); border-radius: 10px; color: var(--label-secondary); }
.nmc-dot { position: absolute; z-index: 5; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11.5px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; padding: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); transition: transform 220ms var(--glass-ease, ease); }
.nmc-dot[aria-pressed="true"] { transform: scale(1.15); }
.nmc-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.nmc-note { text-align: left; border: 1px solid var(--pf-border); border-left: 2px solid var(--pf-border); border-radius: 12px; padding: 16px 18px; cursor: pointer; background: transparent; color: inherit; font-family: inherit; transition: all 220ms var(--glass-ease, ease); }
.nmc-note.on { border-left-color: var(--accent); background: var(--fill-tertiary); }
.nmc-note .nmc-nidx { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.nmc-note h5 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--label-primary); }
.nmc-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--label-secondary); }

/* interim-build reference mocks */
.nmc-mock { background: var(--fill-tertiary); border: 1px solid var(--pf-border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 7px; font-size: 10px; color: var(--label-secondary); min-height: 230px; }
.nmc-mock .mt { font-size: 12px; font-weight: 500; color: var(--label-primary); }
.nmc-lpill { display: inline-block; border: 1px solid var(--pf-border); border-radius: 999px; padding: 2px 9px; font-size: 8.5px; color: var(--label-secondary); background: var(--fill-secondary); margin: 1px; }
.nmc-lpill.dim { color: var(--label-tertiary); background: transparent; }
.nmc-lbox { background: var(--fill-secondary); border: 1px solid var(--pf-border); border-radius: 8px; padding: 7px 9px; font-size: 9px; line-height: 1.5; color: var(--label-secondary); }
.nmc-lvar { flex: 1; background: var(--fill-secondary); border: 1px solid var(--pf-border); border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; }
.nmc-lvar .lc { aspect-ratio: 16 / 9; background: var(--fill-secondary); border-bottom: 1px solid var(--pf-border); }
.nmc-lvar .lb { padding: 5px 6px; font-size: 7.5px; line-height: 1.35; }
.nmc-lvar .lb b { display: block; font-size: 8px; color: var(--label-primary); font-weight: 500; }

/* outcome funnel */
.nmc-funnel { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.nmc-fstep { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: center; border: 1px solid var(--pf-border); border-radius: 12px; padding: 14px 18px; background: var(--fill-tertiary); }
.nmc-fstep .fn { font-weight: 500; font-size: 14px; color: var(--label-primary); }
.nmc-fstep .fm { font-size: 12.5px; line-height: 1.55; color: var(--label-secondary); }

@media (max-width: 900px) {
  .nmc-compare { grid-template-columns: 1fr; }
  .nmc-frame { aspect-ratio: auto; min-height: 0; }
  .nmc-fz { position: relative; inset: auto; gap: 14px; }
  .nmc-dot { display: none; }
  .nmc-row3, .nmc-rowshelf, .nmc-rowstudio { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .nmc-fstep { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- nomi case — visibility & responsive refinements ---------- */
/* Testing stats read as data: bigger figures plus a quiet bar. */
.nmc-stat { border-bottom: 0; padding-bottom: 0; font-size: 13px; align-items: baseline; }
.nmc-stat b { font-size: 16px; }
.nmc-bar { height: 3px; border-radius: 99px; background: var(--fill-secondary); overflow: hidden; margin-top: 5px; }
.nmc-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

/* Eight design questions: two columns on wide screens, one on narrow. */
.nmc-qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 16px; align-items: start; }

/* Interim "five variations" strip wraps instead of crushing on phones. */
.nmc-varrow { display: flex; gap: 5px; flex: 1; margin-bottom: 8px; }

/* Compose wireframe inner column. */
.nmc-composewrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; max-width: 78%; margin: 0 auto; width: 100%; }

/* Annotation affordance hint (desktop only — dots are hidden on phones). */
.nmc-hint { font-size: 12px; color: var(--label-tertiary); }

@media (max-width: 900px) {
  .nmc-hint { display: none; }
  .nmc-composewrap { max-width: 100%; }
  .nmc-fz { padding: 18px; gap: 12px; }
}
@media (max-width: 700px) {
  /* Mock content keeps desktop micro-type by design; once stacked on a
     phone it can afford to breathe. */
  .nmc-mock { font-size: 12px; }
  .nmc-lbox { font-size: 12px !important; }
  .nmc-lpill { font-size: 10.5px !important; }
  .nmc-lvar .lb { font-size: 10px; }
  .nmc-lvar .lb b { font-size: 10.5px; }
  .nmc-oframe { font-size: 11px; }
  .nmc-ocard, .nmc-ogrey { font-size: 10.5px !important; }
  .nmc-obtn { font-size: 10.5px !important; }
  .nmc-otag { font-size: 9px !important; }
  .nmc-cover { font-size: 11.5px; }
  .nmc-varrow { display: grid; grid-template-columns: repeat(2, 1fr); }
  .nmc-map { padding: 16px; }
  .nmc-card { padding: 18px; }
  .nmc-frame { border-radius: 14px; }
}

/* Case header on small screens: page prev/next moves to the bottom nav,
   so the title and controls stop colliding. */
@media (max-width: 640px) {
  .gv-casehead { padding: 14px 16px !important; gap: 10px !important; }
  .gv-casehead .gv-pgbtn { display: none !important; }
}

/* ---------- nyla case — shares the nomi chapter vocabulary ---------- */
.nmc-bar { position: relative; overflow: visible; }
.nmc-bar em { position: absolute; top: -2.5px; width: 2px; height: 8px; background: var(--label-tertiary); border-radius: 1px; }
.nmc-badge { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--pf-border); color: var(--label-tertiary); white-space: nowrap; }
.nmc-badge.val { border-color: var(--accent); color: var(--accent); }
.nmc-badge.hyp { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--label-secondary); }
.nmc-evrow { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: stretch; }
.nmc-evrow .ar { display: flex; align-items: center; justify-content: center; color: var(--label-tertiary); font-size: 15px; }
.nmc-stack { display: flex; flex-direction: column; max-width: 720px; }
.nmc-stack .dn { text-align: center; color: var(--label-tertiary); font-size: 15px; padding: 5px 0; }
@media (max-width: 700px) {
  .nmc-evrow { grid-template-columns: 1fr; gap: 4px; }
  .nmc-evrow .ar { transform: rotate(90deg); padding: 4px 0; }
}

/* ---------- hero: Claude Code session window (light, fixed height) ---------- */
.gv-term { flex: none; height: 148px; background: var(--pf-page-2); border: 1px solid var(--pf-hairline); border-radius: 14px; padding: 11px 13px 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.72; color: var(--label-secondary); overflow: hidden; }
:root[data-theme="dark"] .gv-term { background: rgba(255,255,255,0.045); }
.gv-term-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.gv-term-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--pf-hairline); }
.gv-term-bar span { margin-left: 6px; font-size: 10px; letter-spacing: 0.08em; color: var(--label-tertiary); }
.gv-term-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 320ms var(--glass-ease); }
.gv-term-line .pr { color: var(--accent); margin-right: 7px; }
.gv-term-line .ok { color: var(--accent); }
.gv-term-line.dim { color: var(--label-tertiary); }

/* ---------- nav: hover peek menus ---------- */
.gv-navitem { position: relative; display: inline-flex; }
.gv-navmenu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 258px; padding: 8px; border-radius: 20px; display: flex; flex-direction: column; gap: 2px; z-index: 60; animation: gvMenuIn 260ms var(--glass-spring) both;
  /* opaque enough that page text never reads through the menu */
  background: color-mix(in srgb, var(--pf-page-2) 94%, transparent);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.6), 0 18px 40px rgba(16,28,42,0.16); }
:root[data-theme="dark"] .gv-navmenu { background: #232326; box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.14), 0 18px 44px rgba(0,0,0,0.5); }
@keyframes gvMenuIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.gv-navmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.gv-navmenu-item { display: flex; flex-direction: column; gap: 1px; text-align: left; text-decoration: none; padding: 10px 14px; border-radius: 13px; border: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; color: inherit; transition: background 200ms var(--glass-ease), border-color 200ms var(--glass-ease); }
.gv-navmenu-item:hover, .gv-navmenu-item:focus-visible { background: var(--pf-glass-tint-thick); border-color: var(--pf-border); }
.gv-navmenu-item .t { font-size: 13.5px; color: var(--label-primary); letter-spacing: 0.01em; }
.gv-navmenu-item .d { font-size: 11.5px; color: var(--label-tertiary); }
@media (prefers-reduced-motion: reduce) { .gv-navmenu { animation: none; } }

/* ---------- hero: tiny equalizer for the on-repeat tile ---------- */
.gv-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; flex: none; }
.gv-eq i { width: 3px; border-radius: 2px; background: var(--accent); opacity: 0.75; animation: gvEq 1.1s ease-in-out infinite; height: 40%; }
.gv-eq i:nth-child(2) { animation-delay: 0.2s; height: 90%; }
.gv-eq i:nth-child(3) { animation-delay: 0.45s; height: 60%; }
@keyframes gvEq { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .gv-eq i { animation: none; } }

/* ---------- About: hover-to-flip credential cards ---------- */
.gv-flip { perspective: 1000px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: default; text-align: left; }
.gv-flip-in { position: relative; width: 100%; min-height: 158px; transform-style: preserve-3d; transition: transform 640ms var(--glass-spring); }
.gv-flip:hover .gv-flip-in, .gv-flip:focus-visible .gv-flip-in { transform: rotateY(180deg); }
.gv-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; padding: clamp(18px, 1.6vw, 24px); display: flex; flex-direction: column; }
.gv-face.front { justify-content: space-between; }
.gv-face.back { transform: rotateY(180deg); justify-content: center; gap: 7px; }
.gv-flip-in::after { content: ""; display: block; min-height: 158px; }
.gv-face .yr { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-tertiary); }
.gv-face .nm { font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; line-height: 1.25; color: var(--label-primary); letter-spacing: 0.005em; }
.gv-face .hint { font-size: 11px; color: var(--label-tertiary); display: inline-flex; align-items: center; gap: 6px; }
.gv-face .bl { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.gv-face .bt { font-size: 14px; line-height: 1.5; color: var(--label-primary); }
.gv-face .bd { font-size: 12.5px; line-height: 1.55; color: var(--label-secondary); }
@media (prefers-reduced-motion: reduce) {
  .gv-flip-in { transition: none; }
  .gv-flip:hover .gv-flip-in, .gv-flip:focus-visible .gv-flip-in { transform: none; }
  .gv-face.back { transform: none; opacity: 0; transition: opacity 200ms; }
  .gv-flip:hover .gv-face.back, .gv-flip:focus-visible .gv-face.back { opacity: 1; }
  .gv-flip:hover .gv-face.front, .gv-flip:focus-visible .gv-face.front { opacity: 0; }
}
@media (hover: none) {
  /* touch: no hover, so show the detail side directly */
  .gv-flip-in { transform: rotateY(180deg); }
}

/* ---------- hero: shipped-impact strip ---------- */
.gv-impact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gv-impact-cell { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; cursor: default; transition: border-color 320ms var(--glass-ease), background 320ms var(--glass-ease); }
.gv-impact-cell[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 7%, transparent); }
@media (max-width: 860px) { .gv-impact-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gv-impact-row { grid-template-columns: 1fr; } }

/* ---------- Work cards: outcomes read in the first scan ---------- */
.gv-outcomes { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gv-outcomes li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.5; color: var(--label-primary); }
.gv-outcomes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.gv-livelink { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 12.5px; letter-spacing: 0.01em; color: var(--accent); }

/* ============================================================
   Cover v2 — full-bleed editorial bands.
   Hairlines separate the bands; glass is reserved for the
   pieces that are actually interactive or live.
   ============================================================ */
.gv-cover { position: relative; z-index: 5; width: 100%; }
.gv-band { width: 100%; padding-inline: clamp(24px, 5vw, 88px); }
.gv-band + .gv-band { border-top: 1px solid var(--pf-hairline); }

/* --- hero --- */
.gv-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr); gap: clamp(32px, 4vw, 72px); align-items: center; min-height: 100svh; padding-block: clamp(120px, 15vh, 180px) clamp(48px, 7vh, 88px); }
.gv-hero-main { display: flex; flex-direction: column; min-width: 0; }
.gv-kicker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-tertiary); }
.gv-kicker .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.gv-h1 { margin: clamp(22px, 2.8vh, 36px) 0 0; font-size: clamp(34px, 4.4vw, 64px); font-weight: 200; line-height: 1.06; letter-spacing: -0.015em; color: var(--label-primary); max-width: 16ch; text-wrap: balance; }
.gv-h1 em { font-style: normal; color: var(--label-tertiary); }
.gv-hero-body { margin: clamp(22px, 2.6vh, 34px) 0 0; max-width: 62ch; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; color: var(--label-secondary); }
.gv-hero-body strong { font-weight: 500; color: var(--label-primary); }
.gv-hero-body + .gv-hero-body { margin-top: 14px; font-size: clamp(14px, 1vw, 15.5px); color: var(--label-tertiary); }
.gv-proof { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 3vh, 36px); }
.gv-proof span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--pf-hairline); font-size: 12.5px; color: var(--label-secondary); letter-spacing: 0.01em; }
.gv-proof span b { font-weight: 500; color: var(--label-primary); }
.gv-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(26px, 3.4vh, 40px); }

/* hero rail: the live, moving proof */
.gv-hero-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* --- roles marquee --- */
.gv-marquee { position: relative; overflow: hidden; padding-block: 20px; display: flex; }
.gv-marquee-track { display: flex; gap: 44px; white-space: nowrap; animation: gvMarquee 34s linear infinite; will-change: transform; }
.gv-marquee[data-paused="1"] .gv-marquee-track { animation-play-state: paused; }
.gv-marquee-track span { font-size: clamp(15px, 1.45vw, 20px); font-weight: 300; letter-spacing: 0.02em; color: var(--label-tertiary); display: inline-flex; align-items: center; gap: 44px; }
.gv-marquee-track span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.55; }
@keyframes gvMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gv-marquee-track { animation: none; } }

/* --- impact band --- */
.gv-impact-band { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(40px, 5vh, 64px); }
.gv-impact-band > * { padding-inline: clamp(16px, 2vw, 34px); }
.gv-impact-band > *:first-child { padding-left: 0; }
.gv-impact-band > * + * { border-left: 1px solid var(--pf-hairline); }
.gv-stat .n { display: block; font-size: clamp(30px, 3.4vw, 50px); font-weight: 200; letter-spacing: -0.01em; line-height: 1; color: var(--label-primary); font-variant-numeric: tabular-nums; }
.gv-stat .k { display: block; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--label-secondary); }
.gv-stat .s { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label-tertiary); }

/* --- signals band --- */
.gv-signals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-block: clamp(28px, 4vh, 48px) clamp(52px, 8vh, 96px); }

@media (max-width: 1100px) {
  .gv-hero { grid-template-columns: 1fr; align-items: start; gap: 40px; min-height: 0; padding-block: 128px 56px; }
  .gv-hero-main { max-width: none; }
  .gv-impact-band { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .gv-impact-band > *:nth-child(3) { padding-left: 0; border-left: 0; }
  .gv-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gv-impact-band { grid-template-columns: 1fr; row-gap: 28px; }
  .gv-impact-band > * { padding-inline: 0; border-left: 0 !important; }
  .gv-impact-band > * + * { border-top: 1px solid var(--pf-hairline); padding-top: 26px; }
  .gv-signals { grid-template-columns: 1fr; }
  .gv-h1 { font-size: clamp(32px, 9vw, 44px); }
}

/* ---------- Cover v2.1: same bands, spoken in cards ---------- */
.gv-band + .gv-band { border-top: 0; }
.gv-hero { align-items: stretch; }
.gv-hero-card { padding: clamp(30px, 3.4vw, 56px); justify-content: center; }
.gv-hero-rail { justify-content: center; }
.gv-marquee-wrap { padding-block: 0 14px; }
.gv-marquee { overflow: hidden; padding-block: 18px; border-radius: 999px; }
.gv-marquee-track { padding-inline: 34px; }
.gv-impact-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-block: 0 14px; }
.gv-impact-band > * { padding: clamp(22px, 2vw, 30px); border-left: 0 !important; }
.gv-impact-band > * + * { border-left: 0 !important; }
.gv-signals { padding-block: 0 clamp(52px, 8vh, 96px); gap: 14px; }
.gv-hero { padding-block: clamp(112px, 13vh, 150px) 14px; min-height: 0; }
@media (max-width: 1100px) {
  .gv-hero { padding-block: 118px 14px; }
  .gv-impact-band { grid-template-columns: repeat(2, 1fr); }
  .gv-impact-band > *:nth-child(3) { padding-left: clamp(22px, 2vw, 30px); }
}
@media (max-width: 640px) {
  .gv-impact-band { grid-template-columns: 1fr; }
  .gv-impact-band > * { padding: 22px; }
  .gv-impact-band > * + * { border-top: 0; padding-top: 22px; }
}

/* ---------- Featured work card: stack like every other case card on phones ----------
   The featured card is image-left / text-right on desktop. On narrow screens it
   collapses to one column so the cover sits above the copy, matching the rest
   of the grid, and the cover takes the same height the other cards use. */
@media (max-width: 900px) {
  .gv-featured {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: stretch !important;
    padding: clamp(22px, 2vw, 30px) !important;
  }
  .gv-featured .gv-featured-cover {
    min-height: 390px !important;
    height: 390px !important;
    margin-bottom: 0;
  }
}

/* ============================================================
   Prototype stages (MySubaru)

   Geometry is taken from the interview deck, where every slide was a
   1920x1080 canvas. A phone there rendered at 514x1147 scaled to about
   0.55, so it stood at roughly 15% of the slide's width and 59% of its
   height: a discrete object with air around it, never a full-bleed panel.
   The --pp-s scale steps below keep that proportion as the viewport
   shrinks, which is why the mobile embed is smaller rather than stretched.
   ============================================================ */
/* Rule: a panel never stretches into empty glass to match a taller
   neighbor. Wherever a bento row seats a prototype beside text, every
   column hugs its own content instead of the row's height. */
.pf-bento:has(.pp-stage) > * { align-self: start; }
/* Panel sets height:100% inline for equal-height card grids; beside a
   prototype that reads as an empty glass slab, so this scoped override
   outranks it deliberately. */
.pf-bento:has(.pp-stage) .pf-glass { height: auto !important; }

/* A prototype group (phones plus their words) is a display object in the
   flow, so it takes extra air above and below on top of the section gap. */
.pp-stage { --pp-s: 0.55; --pp-stage-bg: #f2f5f8; display: flex; flex-direction: column; gap: 24px; min-width: 0; margin-block: clamp(26px, 3.2vw, 52px); }
html[data-theme="dark"] .pp-stage { --pp-stage-bg: #05060a; }
.pp-stage-row { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.4vw, 60px); align-items: flex-start; justify-content: center; }
/* Galleries of three or five: a slightly smaller device scale buys one
   consistent, generous gap, so the whole set seats on one line with even
   margins instead of squeezing into the middle or wrapping. */
.pp-stage-row.is-tight { --pp-s: 0.48; gap: clamp(28px, 3vw, 56px); }
/* A wide gallery of four or more runs the full measure: the outermost
   devices align with the text column's edges, and the leftover space
   becomes one even rhythm between them. */
@media (min-width: 1280px) {
  .pp-stage-row.is-tight:has(> :nth-child(4)) { justify-content: space-between; }
}

/* Exactly two phones: the pair sits together, both captions move to a
   shared reading column beside it. Wraps under the pair when narrow. */
.pp-duo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 3vw, 48px); }
.pp-duo > .pp-halo { flex: 0 0 auto; }
.pp-duo-caps { flex: 1 1 300px; min-width: 0; max-width: 52ch; display: flex; flex-direction: column; gap: 34px; }
.pp-duo-caps .pp-cap { display: flex; flex-direction: column; gap: 12px; }
.pp-duo-caps .pp-note { font-size: 14px; line-height: 1.7; }

/* One prototype, cropped to the device itself. The embed's page is
   transparent (PPO-BARE override); its phone bezel is a 426x898 rounded
   frame at (44, 116.5) inside the 514x1147 viewport, with the 404x876
   screen inset 11px within it. The slot is sized to the bezel and the
   iframe is pulled up and left by that margin: the full device frame
   shows, with no backing block and no cast shadow behind it. */
.pp-slot {
  position: relative;
  width: calc(426px * var(--pp-s));
  height: calc(898px * var(--pp-s));
  flex: 0 0 auto;
  border-radius: calc(60px * var(--pp-s));
  overflow: hidden;
  /* border-radius alone does not clip an iframe; clip-path does */
  clip-path: inset(0 round calc(60px * var(--pp-s)));
  background: transparent;
}
.pp-slot > iframe {
  position: absolute;
  left: calc(-44px * var(--pp-s));
  top: calc(-116.5px * var(--pp-s));
  width: 514px; height: 1147px; border: 0; display: block;
  transform: scale(var(--pp-s));
  transform-origin: 0 0;
  background: transparent;
}
/* Layout wrapper only; the device casts no shadow. */
.pp-halo { flex: 0 0 auto; }
/* Hairline ring inside the clip, so the dark bezel keeps an edge on the
   dark page. Painted after the iframe, never intercepts the reader. */
.pp-slot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.pp-slot.is-wide { width: calc(var(--pp-w) * var(--pp-s)); height: calc(var(--pp-h) * var(--pp-s)); border-radius: 14px; clip-path: inset(0 round 14px); }
.pp-slot.is-wide > iframe { width: calc(var(--pp-w) * 1px); height: calc(var(--pp-h) * 1px); }

/* The deck's presenter cursor, ported so the prototype demonstrates itself. */
.pp-cursor {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  pointer-events: none; z-index: 6; left: 0; top: 0;
  transform: translate(-50%, -50%);
  transition: left 0.55s cubic-bezier(0.45, 0, 0.25, 1), top 0.55s cubic-bezier(0.45, 0, 0.25, 1), opacity 0.2s ease;
}
.pp-cursor.tap { animation: ppTap 0.34s ease; }
@keyframes ppTap { 50% { transform: translate(-50%, -50%) scale(0.85); background: rgba(255, 255, 255, 0.8); } }

/* Caption under each prototype: the deck's own label, kept verbatim.
   The column, not the caption, owns the width. In a row of several
   prototypes the column matches the phone so the pairs line up; a lone
   prototype lets its caption run to a readable measure instead of being
   squeezed into the width of a phone. */
/* Air between the device and the words describing it. */
.pp-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; width: calc(426px * var(--pp-s)); }
/* A lone prototype in a row sits beside its description instead of above a
   full-width caption: a phone on the left, a comfortable column of text on
   the right. flex-wrap lets a narrow screen stack them again. */
.pp-stage-row > .pp-col:only-child {
  flex-direction: row; align-items: center; flex-wrap: wrap;
  width: 100%; max-width: none;
  gap: clamp(26px, 4vw, 56px);
}
.pp-stage-row > .pp-col:only-child > .pp-cap {
  flex: 1 1 280px; max-width: 52ch;
  display: flex; flex-direction: column; gap: 12px;
}
.pp-stage-row > .pp-col:only-child .pp-note { font-size: 14.5px; line-height: 1.7; }
.pp-cap { width: 100%; min-width: 0; }
.pp-lab { display: flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label-tertiary); }
.pp-lab b { font-weight: 500; letter-spacing: 0.06em; color: var(--label-secondary); text-transform: none; font-size: 12.5px; }
.pp-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--label-secondary); }
.pp-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-tertiary); }
.pp-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.8; }

/* Scale steps. Desktop matches the deck; smaller viewports step down so the
   phone keeps its slide proportion instead of dominating the screen. */
@media (max-width: 1180px) { .pp-stage { --pp-s: 0.50; } }
@media (max-width: 900px)  { .pp-stage { --pp-s: 0.46; } }
@media (max-width: 700px)  { .pp-stage { --pp-s: 0.42; } }
@media (max-width: 560px)  { .pp-stage { --pp-s: 0.40; } }
@media (max-width: 420px)  { .pp-stage { --pp-s: 0.36; } }

/* Pairs and triplets: on a narrow screen they become a swipeable strip so an
   A/B comparison stays a comparison instead of collapsing into a tall column. */
@media (max-width: 760px) {
  .pp-stage-row.is-compare {
    /* a centered overflow container clips its left edge, so the strip
       anchors to the start and scrolls instead */
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-inline: calc(-1 * var(--pp-bleed, 0px));
    padding-inline: var(--pp-bleed, 0px);
  }
  .pp-stage-row.is-compare > * { scroll-snap-align: center; }
  /* the snap item is wider than the phone inside it, so the caption keeps a
     readable measure while the prototype stays at its slide proportion */
  .pp-stage-row.is-compare > .pp-col { width: min(64vw, 250px); align-items: center; }
  .pp-stage-row.is-compare > .pp-col .pp-cap { align-self: stretch; }
  .pp-stage-row.is-compare::-webkit-scrollbar { height: 3px; }
  .pp-stage-row.is-compare::-webkit-scrollbar-thumb { background: var(--pf-hairline); border-radius: 999px; }
}

/* Wide embeds (dealer console, kiosk board, taxonomy, design system) size to
   the column and keep the source aspect ratio. */
.pp-wide { position: relative; width: 100%; border-radius: 14px; overflow: hidden; clip-path: inset(0 round 14px); border: 1px solid var(--pf-placeholder-line); background: var(--pf-placeholder); }
.pp-wide > iframe { position: absolute; left: 0; top: 0; border: 0; display: block; transform-origin: 0 0; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pp-cursor { display: none !important; }
}

/* ============================================================
   Phone: cover reading order.

   The bento's desktop composition is a deliberate 12-column
   arrangement, so nothing here touches it. Below 600px every tile
   is already full width and stacks, which makes `order` the whole
   fix: the statement leads, then who I am, then what the work
   produced, then the practice, then the live product, then how it
   gets built. Desktop DOM order is unchanged.
   ============================================================ */
@media (max-width: 600px) {
  .gv-hero-bento > *              { order: 9; }
  .gv-hero-bento > .gv-c-statement { order: 1; }
  .gv-hero-bento > .gv-c-about     { order: 2; }
  .gv-hero-bento > .gv-c-impact    { order: 3; }
  .gv-hero-bento > .gv-c-practice  { order: 4; }
  .gv-hero-bento > .gv-c-aipractice{ order: 5; }
  .gv-hero-bento > [data-c="nomi"] { order: 6; }
  .gv-hero-bento > .gv-c-howiwork  { order: 7; }
  .gv-hero-bento > .gv-c-ctas      { order: 8; }
}

/* ============================================================
   Phone: the case study's top area.

   The header is fixed and the tab bar was pinned to a hard-coded
   76px below the top. That number only holds while the case title
   fits one line: on a phone a long title wraps, the header grows
   past 76px, and the tab bar lands on top of it. The header now
   reports its real height as --gv-head-h and the tab bar, the
   article's top padding, and the spacer below the tabs all read
   from it, so the stack stays correct at any title length.
   Desktop keeps its original fixed values.
   ============================================================ */
@media (max-width: 700px) {
  /* side columns hug their buttons so the title gets the leftover width */
  .gv-casehead { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  /* the wordmark is redundant next to the case title on a small screen */
  .gv-casehead .pf-eyebrow { display: none !important; }
  .gv-case { padding-top: var(--gv-head-h, 72px) !important; }
  .gv-casetabs { top: var(--gv-head-h, 72px) !important; }
  .gv-casetabs-spacer { height: var(--gv-tabs-h, 64px) !important; }

  /* The tab bar is a centered pill that sizes to its seven tabs, which is
     wider than a phone. Centering an oversized child overflows both edges,
     and the left overflow cannot be reached, so the active tab was landing
     off-screen. Constraining the wrapper to the container is what lets the
     bar's own max-width and overflow-x take effect: the pill then fits the
     screen and scrolls, and CaseTabs keeps the active tab in view. */
  .gv-casetabs { padding-inline: 12px !important; }
  .gv-casetabs > div { width: 100%; min-width: 0; }
  .gv-casetabs [role="tablist"] { scrollbar-width: none; }
  .gv-casetabs [role="tablist"]::-webkit-scrollbar { display: none; }
}