/* ==========================================================================
   Irhah Arshad Siddiqui — Portfolio Design System
   Two-typeface pairing: Red Hat Display (--font-serif, the site's "display"
   token — kept the same variable name so every existing heading/button rule
   that already reads it just picks up the new face) for headings (h1–h4)
   and buttons, Plus Jakarta Sans (--font) for body copy, nav, and labels.
   White base, glass nav, per-project accent color.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  /* Neutrals — a cool, faintly violet-leaning gray scale (not pure gray),
     tuned to sit near the purple accent rather than fight it. */
  --bg: #ffffff;
  --bg-soft: #f6f5f9;
  --ink: #34323e;
  --ink-soft: #57566a;
  --ink-faint: #94929f;
  --border: #e6e4ee;
  --card-bg: #ffffff;

  --nav-bg: rgba(255, 255, 255, 0.68);
  --nav-border: rgba(22, 21, 29, 0.08);

  /* Default accent — neutral ink everywhere except inside a project, where
     each case study overrides these three via inline style on <body> */
  --accent: var(--ink);
  --accent-ink: #ffffff;
  --accent-tint: var(--bg-soft);
  --accent-tint-strong: var(--border);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Red Hat Display', var(--font);
  --font-mono: var(--font);

  /* Type scale — one family, wide weight range */
  --fs-display: clamp(38px, 6vw, 60px);
  --fs-h1: clamp(32px, 4.6vw, 48px);
  --fs-h2: clamp(24px, 3vw, 32px);
  --fs-h3: 19px;
  --fs-body-lg: 17px;
  --fs-body: 15.5px;
  --fs-small: 13.5px;
  --fs-label: 12px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 12px rgba(22, 21, 29, 0.06);
  --shadow-md: 0 14px 34px rgba(22, 21, 29, 0.11);

  --gap-md: 28px;
  --gap-lg: 52px;
  --gap-xl: 96px;

  color-scheme: light;
}


/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
/* overflow-x: hidden lives on <html> only. Setting it on <body> too used
   to create a second, independent scroll box: whenever body's own content
   box ended up a few pixels taller than body itself (easy to trigger with
   margin-collapsing on some page layouts, e.g. the homepage hero), body
   silently became the element wheel/trackpad scrolling landed on. It had
   almost no room to scroll, so it absorbed the input and never handed it
   off to <html> -- the page looked stuck and only the native scrollbar
   (which always targets <html>) still worked. One element owning the
   horizontal clip avoids the whole class of bug. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.25s ease, color 0.25s ease;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 32px; }
/* Case-study pages read as long-form text, not a dashboard — a narrower, editorial
   column keeps body copy and full-width elements (grids, banners) from reading as
   mismatched at large viewport widths. Scoped so the homepage's wider gallery layout
   is untouched. */
main.wrap:has(.cs-header) { max-width: 980px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; line-height: 1.65; color: var(--ink-soft); font-size: var(--fs-body-lg); max-width: 78ch; }
strong { color: var(--ink); font-weight: 700; }
::selection { background: var(--accent-tint-strong); color: var(--ink); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14.5px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: none;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.25s ease, background 0.2s ease;
}
.btn-primary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-primary:hover { transform: translateY(-2px) scale(1.02); background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border-strong, var(--border)); }
.btn-secondary:hover { transform: translateY(-2px) scale(1.02); background: var(--card-bg); }
.btn-secondary:active { transform: translateY(0) scale(0.99); }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1140px, calc(100% - 32px));
  z-index: 100;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-nav .nav-row { display: flex; align-items: center; justify-content: space-between; padding: 26px 30px; }
.site-nav .nav-right { display: flex; align-items: center; gap: 28px; }
.site-nav .logo { font-weight: 800; font-size: 16.5px; letter-spacing: -0.01em; }
.site-nav .logo img { height: 54px; width: auto; }
.site-nav .logo .logo-light { display: block; }
.site-nav .logo .logo-dark { display: none; }

.coe-logo-light { display: block; }

.nav-links { display: flex; gap: 30px; font-size: 14.5px; font-weight: 600; }
.nav-links a { opacity: 0.78; transition: opacity 0.2s ease, transform 0.2s ease; display: inline-block; }
.nav-links a:hover { opacity: 1; transform: translateY(-1px); }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: none; background: transparent;
  color: var(--ink); cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover { background: var(--bg-soft); transform: scale(1.06); }
.icon-btn svg { width: 18px; height: 18px; }
.hamburger { display: none; }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0 22px 16px;
  font-size: 14.5px;
  font-weight: 600;
}
.mobile-menu a { padding: 9px 0; opacity: 0.8; }
.mobile-menu a:hover { opacity: 1; }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu.open { display: flex; }
}

/* ---------- Section nav (right-side jump list) ----------
   A standing vertical list of section names, always visible (not a
   hover-only dot), right-aligned against the edge of the viewport so it
   reads like a sidebar without taking layout space from the column of
   text beside it. Inactive labels sit in a quiet, muted tone; the
   section currently in view is picked out in the page's accent color
   with a small tick mark, so it is legible at a glance on a long page. */
.section-rail {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 13px;
}
@media (max-width: 1100px) { .section-rail { display: none; } }
.section-rail .dot {
  position: relative; width: auto; height: auto; background: none; border-radius: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 1px 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}
.section-rail .dot:hover { color: var(--ink-soft); }
.section-rail .dot.active { color: var(--accent); }
.section-rail .dot::after {
  content: ""; width: 14px; height: 1.5px; border-radius: 1px;
  background: var(--border); flex-shrink: 0;
  transition: background 0.2s ease, width 0.2s ease;
}
.section-rail .dot.active::after { background: var(--accent); width: 22px; }
.section-rail .dot .dot-label { position: static; opacity: 1; pointer-events: none; background: none; border: none; padding: 0; }

/* ---------- Hero ---------- */
.hero { padding: clamp(200px, 34vh, 360px) 0 110px; position: relative; }
.hero-copy { text-align: left; position: relative; z-index: 1; max-width: none; }
.hero-copy h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 400; line-height: 1.1; max-width: none; }
.hero-copy h1 .hero-lead { display: block; font-weight: 400; color: var(--ink); }
.hero-copy h1 .hl-2 { display: block; margin-top: 4px; font-size: clamp(30px, 4.6vw, 48px); font-weight: 400; line-height: 1.2; color: var(--ink-soft); max-width: none; }
/* Plain stacked sentences, no uppercase labels -- matches the placement
   of the meta line under the headline on dannyckm.com (role/status line,
   then a second line), rather than a label/value fact grid. */
.hero-copy .hero-meta { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
.hero-copy .hero-meta p { margin: 0; font-size: clamp(15px, 1.6vw, 17px); color: var(--ink-soft); line-height: 1.5; }
.hero-copy .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* ---------- Hero: orb glow ----------
   A blurred canvas orb in the top-right of the hero: crisp, hard-edged
   shapes drawn on the canvas, with the actual softness coming entirely
   from the CSS blur on the outer wrapper (see initHeroGlow in main.js).
   Colors, pattern ("marbled waves") and motion ("wave", speed 1.4x /
   movement 2.5x) are fixed to what was approved in the hero redesign lab. */
.hero-orb-wrap {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(240px, 27vw, 420px); height: clamp(240px, 27vw, 420px);
  top: 50%; right: clamp(-10px, 1vw, 30px);
  transform: translateY(-50%);
  filter: blur(clamp(22px, 3.2vw, 48px));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, black 32%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, black 0%, black 32%, transparent 68%);
  mix-blend-mode: normal;
}
.hero-orb-clip { position: relative; width: 100%; height: 100%; overflow: hidden; clip-path: circle(50% at 50% 50%); }
#heroGlow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* film-grain layer -- sits outside the blurred canvas so the texture
   itself stays crisp on top of the soft blurred color field underneath. */
.hero-orb-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.22;
  clip-path: circle(50% at 50% 50%);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
@media (max-width: 700px) {
  .hero { min-height: 0; display: block; padding: 140px 0 60px; }
  .hero-orb-wrap { position: relative; width: min(50vw, 180px); height: min(50vw, 180px); top: 0; right: 0; transform: none; margin: 0 auto 24px; filter: blur(clamp(12px, 4vw, 20px)); }
  .hero-copy { text-align: center; max-width: none; }
  .hero-copy h1 { max-width: none; margin-left: auto; margin-right: auto; }
  .hero-copy h1 .hl-2 { max-width: none; margin-left: auto; margin-right: auto; }
  .hero-copy .hero-meta { align-items: center; }
  .hero-copy .hero-actions { justify-content: center; }
}

/* ---------- Playground: moving gradient background ----------
   Same marbled-wave canvas/palette as the hero orb (#heroGlow), drawn
   full-viewport behind the Playground page's content instead of inside
   a small blurred circle. Softness still comes entirely from the CSS
   blur on the wrapper, not a pre-blurred gradient; drawn on #pageGradient
   by initMarbledGradient("pageGradient") in main.js. */
body.gradient-page {
  background: #f6f0e4;
  background-attachment: fixed;
}
body.gradient-page .mw-tile { border-color: rgba(22, 21, 29, 0.1); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); }
body.gradient-page .mw-tile:hover { box-shadow: 0 16px 40px rgba(220, 140, 120, 0.28), 0 6px 20px rgba(0, 0, 0, 0.1); }
body.gradient-page .site-nav { background: rgba(255, 255, 255, 0.6); }

.page-gradient-wrap {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  filter: blur(clamp(50px, 6vw, 120px));
}
.page-gradient-clip { position: relative; width: 100%; height: 100%; overflow: hidden; }
#pageGradient { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.page-gradient-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- How I Work: icon grid (after Explore My Work) ---------- */
.hiw-section { margin-top: 70px; padding-bottom: var(--gap-xl); }
.hiw-frame { padding: 0; }
.hiw-head { max-width: 640px; margin: 0 auto; text-align: center; }
.hiw-eyebrow {
  display: block; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
.hiw-title { margin-top: 0; }
.hiw-title em { font-style: italic; }
.hiw-location {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--ink-faint);
}
.hiw-location svg { width: 13px; height: 13px; stroke: var(--ink-faint); flex-shrink: 0; }
.hiw-intro { margin: 16px auto 0; text-align: center; }
.hiw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 44px;
}
@media (max-width: 900px) { .hiw-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hiw-grid { grid-template-columns: 1fr; } }
.hiw-tile {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 24px; transition: transform 0.3s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s ease, border-color 0.3s ease;
}
.hiw-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-tint-strong); }
.hiw-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--accent-tint); margin-bottom: 16px;
}
.hiw-icon svg { width: 20px; height: 20px; stroke: var(--ink); }
.hiw-tile h3 { font-size: 16.5px; font-weight: 600; font-family: var(--font); color: var(--ink); letter-spacing: -0.005em; }
.hiw-tile p { font-size: 13.5px; margin-top: 8px; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Toolkit: categorized tag-cloud ---------- */
.tools-cloud { margin-top: 60px; padding-top: 44px; border-top: 1px solid var(--border); }
.tools-cloud > .hiw-eyebrow { text-align: center; }
.tools-groups { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; max-width: 760px; margin-left: auto; margin-right: auto; }
.tools-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 18px; justify-content: center; }
.tools-cat {
  font-family: var(--font); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); flex: 0 0 auto; min-width: 168px; text-align: right;
}
.tools-row { display: flex; flex-wrap: wrap; gap: 9px; flex: 1 1 auto; }
@media (max-width: 700px) {
  .tools-group { flex-direction: column; align-items: center; gap: 8px; }
  .tools-cat { text-align: center; min-width: 0; }
  .tools-row { justify-content: center; }
}
.tools-note { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 22px 0 0; font-style: italic; }

/* ---------- Toolkit: outline logo/icon tiles (sampopek-style) ---------- */
.tools-cat-block { max-width: 820px; margin: 0 auto 34px; }
.tools-cat-block:last-child { margin-bottom: 0; }
.tools-cat-label {
  display: block; font-family: var(--font); font-weight: 700; font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px;
  text-align: center;
}
.tools-cat-label em { font-style: normal; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.tools-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
.tools-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-bg);
  padding: 16px 8px; text-align: center;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tools-tile:hover { border-color: var(--ink-faint); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* Every icon slot shares one frame — 28x28, 1px border, same background —
   whatever sits inside it (a bare svg, initials, or a real logo image). */
.tools-tile-icon {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
}
.tools-tile-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.tools-tile-icon.badge { font-family: var(--font); font-weight: 800; font-size: 11px; letter-spacing: 0.01em; }
.tools-tile-icon.img { padding: 5px; overflow: hidden; }
.tools-tile-icon.img img { width: 100%; height: 100%; object-fit: contain; }
.tools-tile span:last-child { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tools-tile span:last-child em { font-style: normal; color: var(--ink-faint); font-weight: 500; }
@media (max-width: 500px) { .tools-tile-grid { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); } }

/* ---------- More of My Work: posters / 3D / illustration gallery ---------- */
.more-work { margin-top: 30px; padding-bottom: var(--gap-xl); }
.more-work .work-title { margin-top: 0; }
.more-work-intro { max-width: 620px; margin: 16px auto 0; text-align: center; }
.mw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 44px;
}
@media (max-width: 900px) { .mw-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mw-grid { grid-template-columns: 1fr; } }
.mw-tile {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(155deg, var(--mw-a, #d8cdf0), var(--mw-b, #f3e4ff));
  transition: transform 0.35s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.35s ease;
}
.mw-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mw-tile.mw-wide { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .mw-tile, .mw-tile.mw-wide { aspect-ratio: 4 / 3; } }
.mw-cat {
  position: absolute; top: 14px; left: 14px; font-family: var(--font); font-weight: 700;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #2c1f45;
  background: rgba(255,255,255,0.72); padding: 5px 10px; border-radius: var(--r-pill);
}
.mw-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 14px;
  background: linear-gradient(to top, rgba(20,14,32,0.68), transparent);
}
.mw-title-text {
  display: block; font-family: var(--font-serif); font-weight: 500; font-size: 14.5px;
  color: #fff; line-height: 1.3;
}
.mw-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.more-work-note { max-width: 620px; margin: 30px auto 0; text-align: center; font-size: 13px; color: var(--ink-faint); }

/* ---------- Origin story (personal narrative, before footer) ---------- */
.origin-section { margin-top: 90px; padding-bottom: 90px; }
.origin-grid { display: grid; grid-template-columns: 230px 1fr; gap: 48px; }
@media (max-width: 760px) { .origin-grid { grid-template-columns: 1fr; gap: 22px; } }
.origin-heading {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.3; color: var(--ink);
}
.origin-copy { columns: 2; column-gap: 40px; }
.origin-copy p {
  font-family: var(--font); font-size: var(--fs-small); line-height: 1.8;
  color: var(--ink-soft); max-width: none;
  break-inside: avoid; margin: 0 0 22px;
}
@media (max-width: 760px) { .origin-copy { columns: 1; } }
.origin-glow-wrap { position: relative; overflow: visible; }
.origin-glow-wrap::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:750px; height:680px; left:-260px; top:-40px;
  background:
    radial-gradient(circle at 32% 30%, rgba(236,196,216,0.9) 0%, rgba(236,196,216,0) 62%),
    radial-gradient(circle at 60% 55%, rgba(243,179,147,0.8) 0%, rgba(243,179,147,0) 66%),
    radial-gradient(circle at 45% 68%, rgba(244,231,210,0.85) 0%, rgba(244,231,210,0) 70%);
  filter: blur(100px);
  animation: origin-glow-drift 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes origin-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(26px, -22px) scale(1.06); }
  50%  { transform: translate(-16px, 18px) scale(0.97); }
  75%  { transform: translate(-30px, -10px) scale(1.03); }
  100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .origin-glow-wrap::before { animation: none; }
}
@media (max-width: 760px) {
  .origin-glow-wrap::before { width: 420px; height: 380px; left: -60px; top: -20px; }
}
.origin-rule, .origin-statement, .origin-cta { position: relative; z-index: 1; }
.origin-rule { border: none; border-top: 1px dashed var(--border-strong, var(--border)); margin: 64px 0 40px; }
.origin-statement {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 6vw, 62px);
  line-height: 1.12; color: var(--ink); text-align: left; margin: 0;
}
.origin-statement em { font-style: italic; }
.origin-cta { margin-top: 32px; }

/* ---------- Work section heading ---------- */
.work-title {
  text-align: center; margin: 90px 0 0;
  font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2);
  color: var(--ink);
}

/* ---------- Category tabs ----------
   Plain text by default, a soft fill on hover, and a 1px border only
   on the active tab -- no default border/background, matching the
   dannyckm.com filter-pill reference (icon + label, border appears only
   for the selected state; a hover fill, not a border, marks the rest). */
.cat-tabs { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 26px 0 44px; flex-wrap: wrap; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 13.5px; font-weight: 700; padding: 12px 20px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cat-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.cat-tab.active { background: transparent; color: var(--ink); border-color: var(--ink); }
.cat-tab:hover:not(.active) { background: var(--bg-soft); color: var(--ink); }

/* ---------- Project grid / cards ---------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md) 22px; padding-bottom: var(--gap-xl); }
@media (max-width: 900px) { .project-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .project-grid { grid-template-columns: 1fr; } }
.project-card { display: block; opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.project-card.in { opacity: 1; transform: translateY(0); }
.project-card .thumb {
  position: relative;
  aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-soft); border: 1px solid var(--border);
  transition: transform 0.4s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.4s ease;
}
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
/* Hover effects are limited to devices with a real hover pointer: on touch
   screens (iOS especially) a hover that changes what is shown makes the first
   tap only "hover" and the second tap follow the link. */
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .thumb { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .project-card:hover .thumb:not(.thumb-flip-hover):not(.thumb-hover-video) img { transform: scale(1.04); }
}

/* How Do We Love?: the still cubot art fades into the looping motion
   clip on hover, sized so the character matches the still art's scale. */
.thumb-hover-video .hover-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .thumb-hover-video .hover-video { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .thumb-hover-video .hover-video { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card .thumb img { transition: none; }
}

/* ---------- Flipped: a normal i at rest; hover bounces the dot down into
   the brand's own upside-down i (bar on top, dot below). Hovering the whole
   card triggers it, same gesture as the card's lift-on-hover. ---------- */
.thumb-flip-hover { position: relative; }
.thumb-flip-hover .flip-letters { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-flip-hover .flip-bar {
  position: absolute;
  left: 27.130%; width: 3.611%; height: 14.444%;
  top: 56.852%;
  background: #fec00f;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: top 0.5s cubic-bezier(.30, 1.65, .5, 1);
}
.thumb-flip-hover .flip-dot {
  position: absolute;
  left: 27.130%; width: 3.565%; height: 3.565%;
  top: 46.481%;
  background: #fec00f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.62s cubic-bezier(.27, 2.1, .42, 1);
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover .thumb-flip-hover .flip-bar { top: 51.907%; }
  .project-card:hover .thumb-flip-hover .flip-dot { top: 62.241%; }
}
@media (prefers-reduced-motion: reduce) {
  .thumb-flip-hover .flip-bar, .thumb-flip-hover .flip-dot { transition: none; }
}
.project-card .meta { padding: 18px 2px 0; }
.project-card .cat-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px; display: block;
}
.project-card h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; }
.project-card .cats { font-size: var(--fs-small); color: var(--ink-faint); margin-top: 4px; }

/* ---------- Case study header ---------- */
.cs-header { padding: 172px 0 30px; }
.cs-header .tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-pill {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent);
}
.tag-outline {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--ink-soft);
}
.cs-header h1 { font-size: var(--fs-display); margin-top: 16px; }
.cs-header .hmw {
  font-style: normal; font-weight: 400;
  font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-soft);
  max-width: 66ch; margin-top: 16px; line-height: 1.5;
}
.cs-header .lead {
  font-style: normal; font-weight: 400;
  font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-soft);
  max-width: 66ch; margin-top: 16px; line-height: 1.5;
}

/* Quick facts: a row of bordered chips, sized to their content, sitting under the lead paragraph */
.quick-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; max-width: none; }
.quick-facts .fact {
  padding: 13px 20px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card-bg);
}
.quick-facts .fact .label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.quick-facts .fact .value { font-size: 14.5px; font-weight: 600; margin-top: 5px; color: var(--ink); }
@media (max-width: 640px) { .quick-facts { gap: 10px; } .quick-facts .fact { flex: 1 1 auto; } }

.cs-header-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.closing-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 560px) { .closing-actions { flex-direction: column; } .closing-actions .btn { width: 100%; text-align: center; justify-content: center; } }

.cs-hero-image { margin-top: 44px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
/* In the case-study header the hero image now leads (comes before the
   title/text block), so it needs space below instead of above. Scoped to
   .cs-header so cs-hero-image used further down a page (after a
   paragraph) keeps its normal margin-top. */
.cs-header .cs-hero-image { margin-top: 0; margin-bottom: 44px; }

/* ---------- Stat row (top of case study — quiet, tinted) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 44px 0; }
@media (max-width: 720px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat-tile {
  background: var(--accent-tint); border: 1px solid var(--accent-tint-strong);
  border-radius: var(--r-md); padding: 18px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}
.stat-tile.in { opacity: 1; transform: translateY(0); }
.stat-tile:hover { box-shadow: var(--shadow-sm); }
.stat-tile .num { font-size: 25px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat-tile .label { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; font-weight: 500; }

/* ---------- Section rhythm ---------- */
.cs-section { padding: var(--gap-lg) 0; border-top: 1px solid var(--border); }
.cs-section h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.cs-section p { font-size: 16px; }

/* ---------- Research Findings block (the bold moment — solid accent) ---------- */
.research-findings { padding: var(--gap-xl) 0; border-top: 1px solid var(--border); }
.research-findings .rf-kicker { margin-bottom: 10px; }
.research-findings .rf-title { font-size: var(--fs-display); font-weight: 800; margin-bottom: 44px; }

.rf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 44px; }
@media (max-width: 720px) { .rf-stats { grid-template-columns: 1fr; } }
.rf-stat {
  background: var(--accent); border-radius: var(--r-md); padding: 24px;
  opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.rf-stat.in { opacity: 1; transform: translateY(0); }
.rf-stat .num { font-size: 32px; font-weight: 800; color: #ffffff !important; font-variant-numeric: tabular-nums; }
.rf-stat .desc { font-size: 14px; color: rgba(255,255,255,0.88) !important; margin-top: 6px; line-height: 1.5; }

.rf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .rf-grid { grid-template-columns: 1fr; } }
.rf-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 28px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.rf-card.in { opacity: 1; transform: translateY(0); }
.rf-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--accent-tint-strong); }
.rf-card .idx { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.rf-card h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: 9px; letter-spacing: -0.01em; }
.rf-card p { font-size: 14.5px; margin-top: 9px; font-weight: 400; color: var(--ink-soft); }
.rf-card .quote {
  position: relative;
  margin-top: 18px; padding: 4px 0 0 20px; border-left: 2px solid var(--accent-tint-strong);
  font-style: italic; font-weight: 400; font-size: 14.5px; color: var(--ink); line-height: 1.55;
}
.rf-card .quote .cite { display: block; margin-top: 7px; font-style: normal; font-weight: 600; font-size: 12px; color: var(--ink-faint); }

/* ---------- Pillar cards (image + pill caption) ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-card {
  background: transparent; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pillar-card:hover { box-shadow: none; border-color: transparent; transform: translateY(-4px); }
.pillar-img-wrap {
  width: 100%; height: 270px; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 16px; transition: transform 0.3s ease;
}
.pillar-card:hover .pillar-img-wrap { transform: translateY(-4px); }
.pillar-img-wrap img {
  height: 100%; width: auto; max-width: 100%; display: block; object-fit: contain;
}
.pillar-pill {
  display: inline-block; background: var(--accent-tint); color: #0e3322;
  border: 1.5px solid var(--accent-tint-strong); border-radius: 999px;
  font-weight: 700; font-size: 14px; padding: 8px 20px; margin-bottom: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pillar-card:hover .pillar-pill { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14,51,34,0.14); }
.pillar-card p { font-size: 12.5px; margin-top: 0; font-weight: 400; color: var(--ink-faint); max-width: 200px; line-height: 1.45; }

/* ---------- Gallery block ---------- */
.gallery-block { margin: 34px 0; }
.gallery-block.layout-side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 760px) { .gallery-block.layout-side { grid-template-columns: 1fr; } }
.gallery-block .gb-title { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.gallery-block .gb-caption { font-size: var(--fs-small); color: var(--ink-faint); margin-top: 10px; }
.gallery-block .gb-media { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.gallery-block .gb-media img, .gallery-block .gb-media video { width: 100%; }

.storyboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 36px 0; }
@media (max-width: 760px) { .storyboard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .storyboard-grid { grid-template-columns: 1fr; } }
.storyboard-panel { border-radius: var(--r-sm); border: 1px solid var(--border); overflow: hidden; background: var(--card-bg); }
.storyboard-panel .ph { aspect-ratio: 4/3; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.storyboard-panel .panel-num {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  padding: 10px 12px 0; color: var(--accent); font-variant-numeric: tabular-nums;
}
.storyboard-panel .panel-cap { font-size: 12.5px; padding: 4px 12px 12px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- HMW / guiding-question block (reusable across case studies) ---------- */
.hmw-block {
  margin: var(--gap-lg) 0; padding: 40px 44px;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-strong);
  border-radius: var(--r-lg);
}
.hmw-block p {
  font-style: italic; font-weight: 600;
  font-size: clamp(19px, 2.4vw, 25px); color: var(--ink);
  line-height: 1.5; max-width: 62ch; margin: 0;
}
@media (max-width: 640px) { .hmw-block { padding: 28px 26px; } }

/* ---------- Guiding-question banner: white card + compass icon (reusable) ---------- */
.hmw-banner {
  display: flex; align-items: center; gap: 18px; margin: var(--gap-lg) auto;
  max-width: 800px;
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 32px 24px 24px;
  transition: transform 0.3s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s ease, border-color 0.3s ease;
}
.hmw-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.hmw-banner .hmw-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hmw-banner .hmw-icon svg { width: 26px; height: 26px; }
.hmw-banner .compass-needle { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.5s cubic-bezier(.34,1.56,.64,1); }
.hmw-banner:hover .compass-needle { transform: rotate(38deg); }
.hmw-banner:active .compass-needle { transform: rotate(-18deg); }
.hmw-banner p { margin: 0; font-size: 15.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.55; }
.hmw-banner p strong { color: var(--ink); font-weight: 700; }
@media (max-width: 640px) {
  .hmw-banner { flex-direction: row; align-items: flex-start; padding: 18px 22px 18px 16px; gap: 14px; border-radius: var(--r-lg); }
  .hmw-banner .hmw-icon { width: 42px; height: 42px; }
  .hmw-banner .hmw-icon svg { width: 22px; height: 22px; }
}

/* ---------- Turning point (single elevated quote moment) ---------- */
.turning-point { padding: var(--gap-lg) 0; border-top: 1px solid var(--border); }
.turning-point blockquote {
  margin: 0; padding-left: 26px; border-left: 3px solid var(--accent);
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 600; font-style: italic;
  color: var(--ink); line-height: 1.5; max-width: 62ch;
}
.turning-point cite {
  display: block; margin-top: 16px; padding-left: 29px; font-style: normal; font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint);
}

/* ---------- Outcome trace (feature cards traced back to research) ---------- */
.trace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 780px) { .trace-grid { grid-template-columns: 1fr; } }
.trace-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px;
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.trace-card:hover { box-shadow: var(--shadow-sm); border-color: var(--accent-tint-strong); }
.trace-card .eyebrow { display: block; margin-bottom: 10px; }
.trace-card h3 { font-size: var(--fs-h3); }
.trace-card p { font-size: 14.5px; margin-top: 9px; color: var(--ink-soft); }
.trace-note { margin-top: 22px; font-size: 14px; color: var(--ink-soft); max-width: 64ch; }

/* ---------- Brand swatches (used in a "Building the Brand" section) ---------- */
.brand-swatches { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.brand-swatches .swatch { width: 140px; height: 90px; border-radius: var(--r-md); display: flex; align-items: flex-end; padding: 12px; }
.brand-swatches .swatch span { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
@media (max-width: 640px) { .brand-swatches .swatch { width: calc(50% - 6px); } }

/* ---------- Brand specimen: typeface card + interactive color stack (reusable) ---------- */
.brand-specimen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; align-items: stretch; }
@media (max-width: 720px) { .brand-specimen-row { grid-template-columns: 1fr; } }
#cubot .brand-specimen-row { grid-template-columns: 1fr 1fr 1fr; max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { #cubot .brand-specimen-row { grid-template-columns: 1fr 1fr; max-width: 500px; } }
@media (max-width: 560px) { #cubot .brand-specimen-row { grid-template-columns: 1fr; max-width: 320px; } }
.type-specimen { background: var(--accent-tint); border: 1.5px solid var(--accent); border-radius: var(--r-lg); padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; }
.type-specimen .row-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.type-specimen .row-top .val { color: var(--accent); font-weight: 800; text-transform: none; letter-spacing: normal; font-family: var(--specimen-font, 'Poppins'), var(--font); }
.type-specimen .glyph { font-family: var(--specimen-font, 'Poppins'), var(--font); font-size: clamp(64px, 9vw, 96px); font-weight: 700; color: var(--ink); text-align: center; margin: 14px 0; line-height: 1; }
.type-specimen .row-bottom { display: flex; gap: 18px; justify-content: space-between; font-family: var(--specimen-font, 'Poppins'), var(--font); font-size: 13px; color: var(--ink-soft); }
.type-specimen .row-bottom:has(span:only-child) { justify-content: flex-start; }
.type-specimen .row-bottom span:nth-child(1) { font-weight: 400; }
.type-specimen .row-bottom span:nth-child(2) { font-weight: 500; }
.type-specimen .row-bottom span:nth-child(3) { font-weight: 600; }
.color-stack { display: flex; flex-direction: column; justify-content: center; }
.color-stack .band { position: relative; height: 74px; border-radius: var(--r-md); border: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; margin-top: -16px; padding: 0 20px; transition: transform 0.25s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.25s ease; box-shadow: 0 -6px 14px rgba(22,21,29,0.07); cursor: default; }
.color-stack .band:first-child { margin-top: 0; }
.color-stack .band:hover { transform: translateX(10px) scale(1.03); box-shadow: var(--shadow-md); z-index: 9 !important; }
.color-stack .band .hex-pill { margin-left: auto; background: #fff; color: #16151d; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 6px 13px; border-radius: var(--r-pill); }

/* ---------- Guiding-question banner (rounded rectangle, icon + serif line) ---------- */
.love-banner {
  display: flex; align-items: center; justify-content: center; gap: 16px; background: var(--accent); border-radius: 26px; padding: 18px 28px;
  border: 2px solid #eceacc; cursor: default;
  transition: transform 0.25s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.25s ease;
}
.love-banner:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(14,51,34,0.22); }
.love-banner .lb-icon { width: 38px; height: 38px; flex-shrink: 0; transition: transform 0.25s ease; }
.love-banner:hover .lb-icon { transform: scale(1.08) rotate(-4deg); }
.love-banner p { margin: 0; font-weight: 600; font-size: clamp(16px, 2vw, 19px); line-height: 1.4; color: #eceacc; text-shadow: 0 1px 3px rgba(14,51,34,0.25); text-align: center; }
@media (max-width: 640px) {
  .love-banner { padding: 18px 22px; border-radius: 22px; flex-direction: column; gap: 10px; text-align: center; }
  .love-banner .lb-icon { width: 34px; height: 34px; }
}

/* ---------- Palette cards (flat rectangular swatches, tilt on hover) ---------- */
.palette-cards { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.palette-rect-card {
  position: relative; flex: 1 1 0; min-width: 140px; height: 120px; border-radius: 14px;
  background: var(--bg); color: var(--fg); padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; cursor: default;
  box-shadow: 0 4px 12px rgba(14,51,34,0.10);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.palette-rect-card:hover { transform: rotate(var(--tilt, -2deg)); box-shadow: 0 10px 20px rgba(14,51,34,0.18); }
.palette-rect-card svg { width: 20px; height: 20px; }
.prc-name { font-size: 15px; font-weight: 700; }
.prc-hex {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: 0.02em;
  opacity: 0.85; margin-top: 2px;
}
@media (max-width: 640px) {
  .palette-cards { gap: 10px; }
  .palette-rect-card { min-width: 132px; height: 108px; padding: 14px 16px; }
}

/* ---------- Cubot evolution gallery (process sketches, prototype photos, video) ---------- */
.cubot-gallery { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 28px 0; }
.cubot-gallery.cols-2 { grid-template-columns: 1fr 1fr; }
.cubot-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cubot-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cubot-gallery.cols-4, .cubot-gallery.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cubot-gallery.cols-2, .cubot-gallery.cols-4, .cubot-gallery.cols-3 { grid-template-columns: 1fr; } }
.cubot-gallery figure { margin: 0; }
.cubot-gallery img, .cubot-gallery video { width: 100%; display: block; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-soft); }
.cubot-gallery figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 9px; line-height: 1.5; }

/* Uniform-height frame for sheets whose source images have different aspect ratios,
   so every box in a row matches regardless of the art inside it. */
.char-sheet-frame {
  height: 320px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-soft);
  padding: 20px; overflow: hidden;
}
.char-sheet-row .char-sheet-frame img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; border: none; border-radius: 0; background: none;
}
@media (max-width: 640px) { .char-sheet-frame { height: 240px; } }

/* ---------- Finished-space gallery: click-to-open slideshow ---------- */
.finished-space-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; }
@media (max-width: 900px) { .finished-space-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .finished-space-gallery { grid-template-columns: 1fr; } }
.fsg-thumb {
  position: relative; display: block; width: 100%; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-soft); cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.fsg-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.35s ease; }
.fsg-thumb:focus-visible img { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
  .fsg-thumb:hover img { transform: scale(1.05); }
}
.fsg-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsg-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  font-size: 12.5px; line-height: 1.5; color: #fff;
  background: linear-gradient(to top, rgba(10,9,16,0.8), rgba(10,9,16,0));
  opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease;
}
.fsg-thumb:focus-visible .fsg-cap { opacity: 1; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .fsg-thumb:hover .fsg-cap { opacity: 1; transform: translateY(0); }
}
.fsg-expand {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,9,16,0.55); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
}
.fsg-thumb:focus-visible .fsg-expand { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fsg-thumb:hover .fsg-expand { opacity: 1; }
}
.fsg-expand svg { width: 15px; height: 15px; }

.fsg-overlay {
  position: fixed; inset: 0; z-index: 999; background: rgba(10,9,16,0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
}
.fsg-overlay.open { opacity: 1; visibility: visible; }
.fsg-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-height: 0; }
.fsg-stage img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.fsg-nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease;
}
.fsg-nav-btn:hover { background: rgba(255,255,255,0.22); }
.fsg-nav-btn.prev { left: 0; }
.fsg-nav-btn.next { right: 0; }
.fsg-nav-btn svg { width: 20px; height: 20px; }
.fsg-close {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; z-index: 2;
}
.fsg-close:hover { background: rgba(255,255,255,0.22); }
.fsg-close svg { width: 20px; height: 20px; }
.fsg-caption { color: rgba(255,255,255,0.85); font-size: 13.5px; line-height: 1.5; text-align: center; max-width: 60ch; margin: 14px auto 0; }
.fsg-counter { color: rgba(255,255,255,0.5); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; margin-top: 4px; }
.fsg-thumbs { display: flex; gap: 8px; margin-top: 16px; max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.fsg-thumbs button { flex-shrink: 0; width: 56px; height: 42px; padding: 0; border-radius: 6px; border: 2px solid transparent; overflow: hidden; cursor: pointer; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; }
.fsg-thumbs button.active { opacity: 1; border-color: #fff; }
.fsg-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.fsg-locked, html.fsg-locked body { overflow: hidden; }
@media (max-width: 640px) {
  .fsg-overlay { padding: 16px; }
  .fsg-nav-btn { width: 38px; height: 38px; }
  .fsg-thumbs { display: none; }
}

/* ---------- Process phase grid (numbered step cards) ---------- */
.process-phase-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 900px) { .process-phase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process-phase-grid { grid-template-columns: 1fr; } }
.process-phase-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 16px; background: var(--bg-soft); }
.process-phase-card .ppc-num { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.process-phase-card h4 { font-size: 14.5px; margin: 6px 0 8px; color: var(--ink); }
.process-phase-card p { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
@keyframes cubot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.cubot-cherub { display: block; margin: 0 auto 36px; max-width: 760px; width: 100%; animation: cubot-float 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cubot-cherub { animation: none; } }

/* ---------- Exhibition gallery (clean grid of concept renders) ---------- */
.exhibition-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 14px; }
@media (max-width: 900px) { .exhibition-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .exhibition-gallery { grid-template-columns: 1fr; } }
.exhibition-gallery figure { margin: 0; }
.exhibition-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-soft);
  cursor: zoom-in; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.exhibition-gallery img:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.exhibition-gallery figcaption { margin-top: 10px; }
.exhibition-gallery .eg-tag {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: #0e3322; margin-bottom: 4px;
}
.exhibition-gallery .eg-cap { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---------- Trailer video (video left, copy right) ---------- */
.trailer-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
.trailer-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border); }
.trailer-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.trailer-copy h2 { margin-bottom: 16px; }
.trailer-copy p { font-size: 16px; }
.trailer-copy .ai-disclosure { margin-top: 16px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 860px) {
  .trailer-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Task flow cards + core-differentiator callout (reusable across case studies) ---------- */
.task-flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 780px) { .task-flow-grid { grid-template-columns: 1fr; } }
.task-flow-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; }
.task-flow-card .step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 14px; }
.task-flow-card h3 { font-size: var(--fs-h3); }
.task-flow-card p { font-size: 14.5px; margin-top: 9px; color: var(--ink-soft); }
.differentiator-callout { margin-top: 22px; padding: 24px 28px; background: var(--accent); border-radius: var(--r-md); }
.differentiator-callout p { color: #fff; font-size: 15px; line-height: 1.6; margin: 0; max-width: 68ch; }
.differentiator-callout strong { color: #fff; }

/* ---------- Final-design mockup showcase pair (reusable across case studies) ---------- */
.mockup-showcase { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.mockup-showcase .frame { height: 300px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.mockup-showcase .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mockup-showcase .frame.square { aspect-ratio: 1 / 1; }
.mockup-showcase .frame.wide { aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
  .mockup-showcase { align-items: center; }
  .mockup-showcase .frame { height: auto; width: 100%; max-width: 320px; }
}

/* ---------- Key Takeaways closing card (reusable across case studies) ---------- */
.key-takeaways-card { background: var(--accent-tint); border: 1.5px solid var(--accent); border-radius: var(--r-lg); padding: 30px 34px; }
.key-takeaways-card h2 { font-size: var(--fs-h3); }
.key-takeaways-card ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.key-takeaways-card li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.key-takeaways-card li::before { content: "\2022"; position: absolute; left: 2px; top: 0; color: var(--accent); font-weight: 700; }

/* ---------- Caption under a small square brand tile (reusable across case studies) ---------- */
.brand-tile-caption { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; text-align: center; }

/* ---------- Prototype summary list (reusable across case studies) ---------- */
.prototype-list { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prototype-list li { position: relative; padding-left: 26px; font-size: 16px; }
.prototype-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* ---------- Fluid gallery (marquee) ---------- */
.fluid-gallery { overflow: hidden; border-radius: var(--r-md); }
.fluid-gallery .track { display: flex; gap: 14px; width: max-content; animation: marquee 26s linear infinite; }
.fluid-gallery:hover .track { animation-play-state: paused; }
.fluid-gallery .track img { height: 260px; width: auto; border-radius: var(--r-sm); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Next project card ---------- */
.next-project { margin: var(--gap-xl) 0 var(--gap-lg); }
.next-project .label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.next-project a { display: block; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.3s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  .next-project a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}
.next-project .thumb { aspect-ratio: 16/8; background: var(--bg-soft); overflow: hidden; }
.next-project .thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-project .info { padding: 22px; }
.next-project h3 { font-size: 21px; margin-top: 8px; }

/* Previous / next project row: the same two cards at the end of every case study */
.pn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: var(--gap-xl) 0 var(--gap-lg); }
.pn-row .next-project { margin: 0; min-width: 0; }
@media (max-width: 760px) { .pn-row { grid-template-columns: 1fr; } }
/* Flipped card reuses the homepage flip thumbnail (a normal i at rest, the dot bounces on hover) */
.next-project .thumb-flip-hover { position: relative; background: #593e99; }
.next-project .thumb-flip-hover .flip-stage { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); aspect-ratio: 1 / 1; }
.next-project .thumb-flip-hover .flip-letters { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .next-project a:hover .thumb-flip-hover .flip-bar { top: 51.907%; }
  .next-project a:hover .thumb-flip-hover .flip-dot { top: 62.241%; }
}

/* ---------- Process steps: editorial ledger, one layout for every case study ----------
   <ol class="process-steps"><li><h3>Title</h3><p>Description</p></li>…</ol>
   Plain ordered list: number | title | description, divided by hairlines.
   No boxes, no connectors, nothing that depends on color, hover or JS.
   The number is the accent mixed toward --ink so it stays >= 4.4:1 against
   the page in both themes, for every project accent. */
.process-steps { display: block; margin: 32px 0 8px; counter-reset: ps; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.process-steps li {
  counter-increment: ps; display: grid; grid-template-columns: 72px minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 6px 28px; align-items: baseline; padding: 26px 0; margin: 0;
  border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none;
  transition: padding-left 0.25s ease, background-color 0.25s ease;
}
.process-steps li::before {
  content: "0" counter(ps); margin: 0; font-family: var(--font-serif); font-size: 30px; font-weight: 700; line-height: 1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}
.process-steps h3 { font-family: var(--font-serif); font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0; color: var(--ink); }
.process-steps p { font-size: 15px; line-height: 1.6; margin: 0; max-width: 62ch; }
@media (hover: hover) {
  .process-steps li:hover { padding-left: 14px; background-color: color-mix(in srgb, var(--accent) 7%, transparent); }
}
@media (max-width: 760px) {
  .process-steps li { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 16px; padding: 22px 0; }
  .process-steps li::before { grid-row: 1 / span 2; font-size: 24px; }
  .process-steps li:hover { padding-left: 0; background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .process-steps li { transition: none; } .process-steps li:hover { padding-left: 0; } }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0 80px; border-top: 1px solid var(--border); margin-top: var(--gap-xl); }
.footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: var(--fs-small); color: var(--ink-faint); }
.footer-links { display: flex; gap: 22px; }
.footer-links a { transition: opacity 0.2s ease; opacity: 0.78; font-weight: 500; }
.footer-links a:hover { opacity: 1; color: var(--ink); }

/* ---------- Reveal utility ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Hero text reveal (solid ink color, no gradient) ---------- */
.chroma-text { position: relative; display: inline-block; }
.chroma-text .word { display: inline-block; white-space: nowrap; }
.chroma-text .char { display: inline-block; opacity: 0; filter: blur(9px); }
/* Spaces between words stay as ordinary, collapsible inline whitespace —
   NOT inline-block like the letters — so the browser can break the line
   there cleanly instead of stranding an empty box at the start of a line. */
.chroma-text .char[data-is-space="1"] { display: inline; }
@keyframes chromaReveal {
  0%   { opacity: 0; filter: blur(9px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); }
}
.chroma-text .char.animate { animation: chromaReveal 1.35s cubic-bezier(.16,1,.3,1) forwards; }
.chroma-text .char.settled { animation: none; filter: none; opacity: 1; }

/* ---------- Image zoom / lightbox (sitewide) ---------- */
.zoomable { cursor: zoom-in; transition: opacity 0.2s ease; }
.zoomable:hover, .zoomable:focus-visible { opacity: 0.9; }
.zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10,9,16,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-overlay .lightbox-img {
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.22); }
.lightbox-close svg { width: 20px; height: 20px; }
html.lightbox-locked, html.lightbox-locked body { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox-overlay { padding: 32px 14px; }
  .lightbox-close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Imagin8 V Park: "The Spark" night-sky card ---------- */
.spark-night-card {
  position: relative; margin: var(--gap-lg) 0; padding: 44px 48px; border-radius: 24px; overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, #453a78 0%, #574c8a 30%, #6a5490 55%, #85578a 78%, #9c5f83 100%);
  box-shadow: 0 18px 44px rgba(69,58,120,0.35);
}
.spark-haze { position: absolute; inset: 0; background: radial-gradient(circle at 50% 8%, rgba(255,255,255,0.10), transparent 55%); pointer-events: none; }
.spark-star { position: absolute; border-radius: 50%; background: #fff; animation: spark-tw 2.6s ease-in-out infinite; }
@keyframes spark-tw { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
.spark-icon-wrap {
  position: relative; width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 18px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(255,255,255,0.35);
}
.spark-icon-wrap svg { width: 22px; height: 22px; color: #fff; animation: spark-rot 7s linear infinite; filter: drop-shadow(0 0 5px rgba(255,255,255,0.7)); }
@keyframes spark-rot { to { transform: rotate(360deg); } }
.spark-night-card blockquote {
  position: relative; margin: 0 auto; max-width: 62ch; font-size: clamp(20px, 2.6vw, 27px); font-weight: 600; font-style: italic;
  line-height: 1.5; color: #fdfbff; text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.spark-night-card .spark-cite {
  position: relative; display: block; margin-top: 18px; font-style: normal; font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
@media (max-width: 640px) { .spark-night-card { padding: 30px 26px; } }

/* ---------- Imagin8 V Park: embedded Figma prototype "big screen" ---------- */
.figma-embed-frame {
  margin: var(--gap-lg) 0 12px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(22,21,29,0.10);
  background: #1c1c22;
}
.fef-chrome {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #26262e;
}
.fef-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.fef-chrome-title {
  margin-left: 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fef-iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.fef-caption { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
.fef-caption a { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .fef-iframe { height: 420px; }
}

/* ---------- Imagin8 V Park: "The Story" portal path ---------- */
.portal-path {
  position: relative; margin-top: var(--gap-lg); padding: 44px 30px 34px; border-radius: 20px;
  background: linear-gradient(160deg, #0f2a44, #1c3f66); overflow: hidden;
}
.portal-path::before {
  content: ""; position: absolute; top: 24%; left: 6%; right: 6%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(127,196,255,0.5) 0 8px, transparent 8px 16px);
}
.pp-row { position: relative; display: flex; justify-content: space-between; gap: 14px; }
.pp-stop { flex: 1; text-align: center; }
.pp-ring {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 16px;
  background: radial-gradient(circle, #7fc4ff, #2478c9 70%); box-shadow: 0 0 18px rgba(127,196,255,0.7);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px;
}
.pp-stop h3 { color: #fff; font-size: 15px; margin: 0 0 8px; }
.pp-stop p { color: rgba(255,255,255,0.68); font-size: 12.5px; line-height: 1.55; margin: 0; }
@media (max-width: 780px) {
  .portal-path::before { display: none; }
  .pp-row { flex-direction: column; gap: 28px; }
  .pp-stop { text-align: left; display: flex; align-items: flex-start; gap: 16px; }
  .pp-ring { margin: 0; flex-shrink: 0; }
}

/* ---------- Imagin8 V Park: stakeholder callout (Sharon & Larry Adams) ---------- */
.stakeholder-callout {
  display: flex; align-items: center; gap: 24px; margin-top: 22px; padding: 22px 26px;
  border-radius: 16px; background: var(--accent-tint);
}
.sc-photos { display: flex; flex-shrink: 0; gap: 4px; }
.sc-photos img { width: 130px; height: auto; display: block; }
.sc-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.sc-text p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.sc-link { font-weight: 700; color: var(--accent); }
@media (max-width: 560px) {
  .stakeholder-callout { flex-direction: column; align-items: flex-start; }
  .sc-photos img { width: 105px; }
}

/* ---------- Imagin8 V Park: Branding section ---------- */
.pantone-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.pantone-card {
  width: 128px; border-radius: 12px; overflow: hidden; background: var(--card-bg, #fff);
  box-shadow: 0 10px 22px rgba(22,21,29,0.14); transition: transform .25s ease, box-shadow .25s ease;
}
.pantone-card:nth-child(odd):hover { transform: scale(1.06) rotate(-2deg); box-shadow: 0 16px 30px rgba(22,21,29,0.18); }
.pantone-card:nth-child(even):hover { transform: scale(1.06) rotate(2deg); box-shadow: 0 16px 30px rgba(22,21,29,0.18); }
.pantone-fill { height: 108px; }
.pantone-tab { padding: 10px 12px 12px; }
.pantone-tab .name { font-size: 12px; font-weight: 700; color: var(--ink); }
.pantone-tab .hex { font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; }
.brand-palette-caption { font-size: 13px; color: var(--ink-faint); margin: 4px 0 0; max-width: 62ch; }
.brand-type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.brand-type-card { padding: 26px 24px; border-radius: 16px; }
.btc-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.btc-sample { font-size: 28px; line-height: 1.3; margin-bottom: 10px; word-break: break-word; }
.btc-name { font-size: 13px; font-weight: 700; }
.brand-type-card.tinted-navy { background: #0f2a44; }
.brand-type-card.tinted-navy .btc-label { color: rgba(255,255,255,0.55); }
.brand-type-card.tinted-navy .btc-sample { color: #fff; }
.brand-type-card.tinted-navy .btc-name { color: #fff; }
.brand-type-card.tinted-accent { background: var(--accent-tint); }
.brand-type-card.tinted-accent .btc-label { color: var(--accent); }
.brand-type-card.tinted-accent .btc-sample { color: #16151d; }
.brand-type-card.tinted-accent .btc-name { color: var(--accent); }
@media (max-width: 640px) { .brand-type-row { grid-template-columns: 1fr; } }

/* ---------- Imagin8 V Park: "Sweet & Salty" display font (logo/wordmark typeface) ---------- */
@font-face {
  font-family: 'Sweet and Salty';
  src: url('../assets/imagin8-v-park/sweet-and-salty.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- Imagin8 V Park: full wordmark logo showcase ---------- */
.logo-showcase {
  position: relative; margin: var(--gap-lg) 0 12px; padding: 56px 40px;
  border-radius: 22px; border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(36,120,201,0.10), transparent 70%),
    var(--card-bg, #fff);
  box-shadow: 0 18px 40px rgba(22,21,29,0.08);
  display: flex; align-items: center; justify-content: center;
}
.logo-showcase img { width: 100%; max-width: 480px; display: block; }
@media (max-width: 640px) { .logo-showcase { padding: 32px 20px; } }

/* ---------- Imagin8 V Park: Branding section spacing + block labels ---------- */
.brand-block-label {
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 16px;
}
.logo-showcase { margin-top: 8px; margin-bottom: 56px; }
.pantone-row { margin-top: 8px; margin-bottom: 56px; }
.brand-type-row { margin-top: 8px; }

/* ---------- Imagin8 V Park: Process diagram spacing fix ---------- */

/* ---------- Imagin8 V Park: Terry the ghost dog special mention ---------- */
/* Terry's art is white/glow linework on a transparent background, so it needs
   a dark backdrop to read at all in light mode; kept fixed-dark so it stays legible. */
.terry-callout {
  display: flex; align-items: center; gap: 24px; margin-top: 18px; padding: 22px 26px;
  border-radius: 16px; background: #0f2a44;
}
.terry-photos { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.terry-photos img { width: 150px; height: auto; display: block; }
.terry-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #7fc4ff; margin-bottom: 4px; }
.terry-text h3 { font-size: 17px; color: #fff; margin: 0 0 6px; }
.terry-text p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.55; }
@media (max-width: 560px) {
  .terry-callout { flex-direction: column; align-items: flex-start; }
  .terry-photos img { width: 120px; }
}

/* ---------- Glass cursor ----------
   A single soft, frosted circle that trails the pointer (added via JS
   in main.js so it applies site-wide without per-page markup). */
.glass-cursor {
  position: fixed; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(52, 50, 62, 0.10);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(52, 50, 62, 0.20);
  box-shadow: 0 2px 10px rgba(20, 18, 30, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  transition:
    opacity 0.25s ease,
    width 0.32s cubic-bezier(.2,.8,.2,1),
    height 0.32s cubic-bezier(.2,.8,.2,1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
@media (pointer: coarse) { .glass-cursor { display: none; } }

/* Grown state: the same circle opens into a thin "ghost ring" with a
   straight arrow while hovering a project card (see .project-card
   listeners in main.js) — no fill, just a ring that follows the pointer,
   paired with the fixed corner badge on the thumbnail itself. */
.glass-cursor .cursor-icon {
  width: 20px; height: 20px; flex-shrink: 0; color: #fff;
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.glass-cursor .cursor-icon svg { display: block; width: 100%; height: 100%; }
.glass-cursor.is-project {
  width: 76px; height: 76px;
  background: rgba(20, 14, 34, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px rgba(20, 10, 40, 0.25);
}
.glass-cursor.is-project .cursor-icon {
  opacity: 1; transform: none; transition-delay: 0.06s;
}

/* ---------- About page ---------- */
.about-hero { padding-block: 168px var(--gap-xl); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 80px); align-items: start; }

.about-copy h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 20px; }
.about-copy p { font-size: 17px; max-width: 62ch; }
.about-copy p + p { margin-top: 16px; }
.about-copy .btn { margin-top: 24px; }

.about-block { margin-top: 48px; }
.about-block h3 { font-size: 20px; margin-bottom: 16px; }
.about-block .edu-entry p { margin: 0; font-size: var(--fs-body); }
.about-block .edu-entry p.edu-degree { color: var(--ink); font-weight: 600; }
.about-block .edu-entry + .edu-entry { margin-top: 14px; }
.about-block .tag-row { display: flex; flex-wrap: wrap; gap: 10px; }

.about-visual { display: flex; flex-direction: column; align-items: center; position: sticky; top: 156px; }
/* One column: the photo card sits right after the intro and resume button
   (instead of dropping to the very bottom), and the detail blocks follow. */
@media (max-width: 860px) {
  .about-hero { padding-top: 148px; }
  .about-copy .btn { align-self: flex-start; }
  .about-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .about-copy { display: contents; }
  .about-visual { position: static; order: 1; margin-top: 48px; }
  .about-block { order: 2; }
  .about-block:first-of-type { margin-top: 56px; }
}
@media (max-width: 480px) { .about-hero { padding-top: 140px; padding-inline: 24px; } .about-block { margin-top: 40px; } }

/* ---------- Photo / ID card (about page) ----------
   The graduation photo and the illustrated designer ID share one flip
   card: idle swing, tilt-toward-cursor on hover (works on
   whichever face is showing), click/tap flips the photo over to
   reveal the ID on the back. Card colors are hardcoded (#4C0F4B etc.)
   so they never collide with the site's own --card-bg/--ink tokens. */
.id-card-block { width: 100%; max-width: 280px; margin: 0 auto; container-type: inline-size; }
@media (max-width: 860px) { .id-card-block { max-width: 264px; } }
.id-card-stage { width: 100%; perspective: 1400px; }
.id-card-wrap {
  position: relative; width: 100%;
  animation: id-card-swing 6.5s ease-in-out infinite;
}
@keyframes id-card-swing {
  0%   { transform: rotate(-5deg) translateY(0); }
  50%  { transform: rotate(5deg) translateY(-14px); }
  100% { transform: rotate(-5deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .id-card-wrap { animation: none; } }

.id-card {
  position: relative; transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1.2);
  will-change: transform;
}
.id-card-flip {
  position: relative; width: 100%; aspect-ratio: 275 / 402;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(.45,.15,.2,1);
  cursor: pointer;
}
.id-card-flip.flipped { transform: rotateY(180deg); }
.id-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 15.636% / 10.697%; overflow: hidden; }
.id-card-face.front { border: 1px solid var(--border); box-shadow: var(--shadow-sm); background: var(--bg-soft); }
.id-card-face.back {
  transform: rotateY(180deg);
  background: #F8E8FF; border: 1px solid #4C0F4B;
}

.id-card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip-badge {
  position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); border: 1px solid rgba(76,15,75,.25); color: #4C0F4B;
  box-shadow: var(--shadow-sm); animation: flip-badge-pulse 2.6s ease-in-out infinite;
}
.flip-badge svg { width: 16px; height: 16px; }
@keyframes flip-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .flip-badge { animation: none; } }

.id-card-art { display: block; width: 100%; height: auto; }
.id-card-label {
  position: absolute; top: 4.35%; left: 29.5%; width: 63.5%; height: 9.2%;
  display: flex; align-items: center; padding-left: 8px;
  font-family: var(--font); font-weight: 600; font-size: clamp(12px, 1.3vw, 15px);
  color: #4C0F4B; letter-spacing: .01em; white-space: nowrap;
}
.id-card-fields {
  position: absolute; top: 69.3%; left: 5.27%; width: 88.7%; height: 24.6%;
  padding: 3px 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  text-align: left; overflow: hidden;
}
.id-card-fields .field-line {
  margin: 0; font-family: var(--font); font-weight: 400; font-size: clamp(9.5px, 0.95vw, 11px);
  line-height: 1.25; color: #4C0F4B; overflow-wrap: break-word;
}
@supports (font-size: 1cqw) { .id-card-fields .field-line { font-size: clamp(9px, 4.1cqw, 12px); } .id-card-label { font-size: clamp(11px, 5.4cqw, 15px); } }
.id-card-fields .field-label { font-weight: 600; }
.id-card-fields .caret {
  display: inline-block; width: 1px; background: #4C0F4B; margin-left: 1px;
  height: 0.9em; vertical-align: -0.1em; animation: id-card-caret 0.9s steps(1) infinite;
}
@keyframes id-card-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }


.id-card-hint { margin-top: 14px; text-align: center; font-size: 11.5px; color: var(--ink-faint); }

/* ---------- Playground: space background ----------
   The Playground always shows a starfield, it's just what a playground looks like.
   These tokens/gradient set the still backdrop; the twinkling stars +
   occasional shooting star are drawn on #spaceStars by
   initSpaceStars() in main.js. */
body.space-page {
  --bg: #06060b;
  --bg-soft: #0f0e16;
  --ink: #f3f2f7;
  --ink-soft: #b7b5c4;
  --ink-faint: #86849a;
  --border: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(255, 255, 255, 0.045);
  --nav-bg: rgba(10, 10, 20, 0.55);
  --nav-border: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
  background: #06060b;
  background-attachment: fixed;
}
body.space-page .site-nav .logo .logo-light { display: none; }
body.space-page .site-nav .logo .logo-dark { display: block; }
body.space-page .more-work .hiw-eyebrow { text-align: center; }
body.space-page .mw-tile { border-color: rgba(255, 255, 255, 0.14); }
body.space-page .mw-tile:hover { box-shadow: 0 16px 40px rgba(130, 70, 200, 0.32), 0 6px 20px rgba(0, 0, 0, 0.45); }

.space-stars {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* ---------- Flipped: Logo Variations row ---------- */
.logo-variations-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.logo-variant-card {
  width: 212px; border-radius: 14px; overflow: hidden;
  background: var(--card-bg, #fff); border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(22,21,29,0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.logo-variant-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(22,21,29,0.16); }
.lv-img-wrap {
  height: 172px; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: #fff;
}
.logo-variant-card.on-tint .lv-img-wrap { background: var(--accent); }
.lv-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-variant-card.full-bleed .lv-img-wrap { padding: 0; background: var(--accent); }
.logo-variant-card.full-bleed .lv-img-wrap img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.lv-tab { padding: 10px 14px 13px; }
.lv-tab .name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
@media (max-width: 640px) { .logo-variant-card { width: calc(50% - 8px); } }
.logo-variations-row { margin-bottom: 56px; }

/* ---------- Flipped: Circular color palette, bounce on hover ---------- */
.palette-group { margin-bottom: 22px; }
.palette-group:last-child { margin-bottom: 0; }
.palette-group-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 14px;
}
.palette-circles-row { display: flex; gap: 20px; flex-wrap: wrap; }
.palette-circle {
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; box-shadow: 0 10px 20px rgba(22,21,29,0.16);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
  cursor: default;
}
.palette-circle:hover {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 18px 30px rgba(22,21,29,0.22);
}
.palette-circle.outline { border: 2px solid var(--border); box-shadow: 0 4px 10px rgba(22,21,29,0.08); }
.palette-circle.outline:hover { box-shadow: 0 12px 22px rgba(22,21,29,0.14); }
.palette-circle .pc-name { font-size: 11.5px; font-weight: 700; line-height: 1.3; }
.palette-circle .pc-hex { font-size: 9.5px; opacity: 0.85; margin-top: 2px; font-variant-numeric: tabular-nums; }
.palette-circle.on-light .pc-name, .palette-circle.on-light .pc-hex { color: #16151d; }
.palette-circle.on-dark .pc-name, .palette-circle.on-dark .pc-hex { color: #fff; }
@media (max-width: 480px) {
  .palette-circle { width: 86px; height: 86px; }
  .palette-circle .pc-name { font-size: 10.5px; }
  .palette-circle .pc-hex { font-size: 8.5px; }
}