/* ============================================================
   MO AMRO — v6
   Cinematic landing + three interactive case study experiences
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --bg:        #06080c;
  --bg-1:      #0a0d12;
  --bg-2:      #0f131a;
  --bg-3:      #161b24;
  --bg-card:   #0c1017;
  --bg-cell:   #0a0e15;

  --ink:       #f5f7fb;
  --ink-2:     #c4cad8;
  --ink-3:     #8d96a8;
  --ink-4:     #4d5667;

  --line:      rgba(245, 247, 251, 0.06);
  --line-2:    rgba(245, 247, 251, 0.12);
  --line-3:    rgba(245, 247, 251, 0.20);
  --line-grid: rgba(245, 247, 251, 0.035);

  --accent:        #8ab4ff;
  --accent-2:      #c4d8ff;
  --accent-soft:   rgba(138, 180, 255, 0.10);
  --accent-glow:   rgba(138, 180, 255, 0.45);
  --accent-bleed:  rgba(180, 210, 255, 0.32);

  --hot:           #ffe066;
  --hot-soft:      rgba(255, 224, 102, 0.10);
  --green:         #4ade80;
  --green-soft:    rgba(74, 222, 128, 0.10);
  --purple:        #c084fc;
  --pink:          #f472b6;

  --display: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sans:    'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;

  --maxw:        1240px;
  --maxw-narrow: 880px;
  --maxw-prose:  640px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: var(--accent); color: var(--bg); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ============== ATMOSPHERE ============== */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-grid) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  mask-image: radial-gradient(ellipse 90% 70% at center, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at center, #000 30%, transparent 100%);
}
body::before {
  content: ""; position: fixed; inset: 0;
  background: radial-gradient(ellipse 100% 80% at center, transparent 30%, rgba(0,0,0,0.5) 100%);
  pointer-events: none; z-index: 1001;
}
body::after {
  content: ""; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.22; mix-blend-mode: overlay;
  pointer-events: none; z-index: 1000;
}

/* ============== AMBIENT CANVAS (full page, behind everything) ==============
   Extends the hero's drifting-light-blob aesthetic across the entire page,
   at lower intensity. Fixed to the viewport so it doesn't bloat with page
   height — only the visible area paints each frame. Same blue palette as
   the hero so it reads as one continuous atmosphere, not two effects. */
.ambient-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .ambient-canvas { display: none; }
}

/* ============== CINEMATIC HERO CANVAS (landing hero) ==============
   Replaces the old static gradient + beam-fan with a JS-driven noise field.
   The canvas is rendered every frame; the JS engine in site.js does the work. */
.hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 130vh;
  pointer-events: none;
  z-index: 1;
  display: block;
}

/* Reduced-motion users get a static fallback gradient via background.
   The canvas itself never paints (the JS bails early), but we still need
   visible light in the hero, so we give the canvas a fallback background. */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas {
    background:
      radial-gradient(ellipse 38% 80% at 50% 0%,
        rgba(140, 180, 240, 0.18) 0%,
        transparent 70%),
      radial-gradient(ellipse 18% 90% at 50% 0%,
        rgba(220, 230, 255, 0.5) 0%,
        rgba(180, 210, 255, 0.30) 25%,
        rgba(140, 180, 240, 0.12) 50%,
        transparent 75%);
  }
}


/* Crosshair brackets framing hero title */
.bracket-frame {
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  width: min(700px, 80vw);
  height: 60%;
  pointer-events: none;
  z-index: 4;
}
.bracket-frame span {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(180, 210, 255, 0.35);
}
.bracket-frame span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket-frame span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket-frame span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket-frame span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ============== NAV ============== */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(6, 8, 12, 0.55);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease-snap), background 0.3s var(--ease-snap);
}
nav.site-nav.tight {
  padding: 0.6rem var(--gutter);
  background: rgba(6, 8, 12, 0.92);
}
.mark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  /* The mark is a brand lockup: monogram SVG + wordmark text. */
}
.mark-svg {
  /* Sized at ~28px so the script monogram is visible but not dominant
     over the wordmark text beside it. height drives the size; width
     auto preserves the SVG's natural aspect ratio. */
  height: 28px;
  width: auto;
  flex-shrink: 0;
  /* Slight vertical alignment nudge — script type usually sits a hair
     higher than baseline-aligned sans-serif text. */
  margin-bottom: 1px;
}
.mark-text {
  /* The wordmark text component of the lockup. */
  display: inline-block;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 8px var(--accent); }
  50%      { box-shadow: 0 0 16px var(--accent), 0 0 0 4px rgba(138,180,255,0.15); }
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
nav ul {
  list-style: none;
  display: flex; gap: 1.5rem; align-items: center;
}
nav ul a {
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.25s var(--ease-snap);
}
nav ul a:hover { color: var(--ink); }
nav ul a.cta {
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.82rem;
  transition: background 0.25s, border-color 0.25s;
}
nav ul a.cta:hover {
  background: rgba(138, 180, 255, 0.18);
  border-color: var(--accent);
}
@media (max-width: 720px) {
  nav ul li:not(.cta-li) { display: none; }
}

/* ============== CINEMATIC HERO ============== */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 8rem var(--gutter) 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  text-align: center;
  overflow: hidden;
  /* Establishes 3D viewing distance for cursor-parallax tilt on
     .hero-inner. 1200px is the Apple/Linear sweet spot for hero text. */
  perspective: 1200px;
}

.hero-inner {
  max-width: 880px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 5;
  /* JS sets --rx and --ry based on cursor position. Defaults to flat. */
  --rx: 0deg;
  --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  /* will-change + backface-visibility prevent Safari from dropping
     subpixel anti-aliasing on the gradient-filled headline during
     transforms. */
  will-change: transform;
  backface-visibility: hidden;
  /* Smooth ease-back when cursor leaves the hero. JS uses rAF to lerp
     while active; this transition mainly applies on cursor-exit. */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-inner.is-tilting {
  /* Disable the slow CSS transition while actively tilting. */
  transition: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  margin-bottom: 2rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(10, 13, 18, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.2s forwards;
}
.hero-eyebrow .pulse {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent);
  animation: dotPulse 2s infinite;
}

h1.headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #d8e2f5 60%, #aab8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.4s forwards;
}
h1.headline .accent-word {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero monogram — script Mo logo placed under the subhead. Sits as a
   secondary visual layer at the bottom of the hero text stack. Uses
   currentColor so it picks up var(--ink-2) for a subdued tone. */
.hero-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Sits below the subhead with breathing room above and below. */
  margin: 0.5rem auto 1.5rem;
  /* Modest height — about 1/3 the headline size. */
  height: clamp(70px, 9vw, 110px);
  color: var(--ink-2);
  /* Animation fires after subhead appears (which is at 0.6s). */
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.8s forwards;
}
.hero-mark svg {
  height: 100%;
  width: auto;
  /* Slight transparency so the mark feels layered, not stamped */
  opacity: 0.85;
}

.hero-sub {
  max-width: 56ch;
  margin: 0 auto 2.5rem;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.6s forwards;
}

.hero-actions {
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.8s forwards;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: var(--sans);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--ink);
  transition: background 0.3s var(--ease-snap), border-color 0.3s, transform 0.3s var(--ease-snap);
}
.btn:hover { background: var(--bg-2); border-color: var(--line-3); transform: translateY(-1px); }
.btn.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn.btn-primary:hover { background: #ffffff; }
.btn svg { transition: transform 0.3s var(--ease-snap); }
.btn:hover svg { transform: translate(2px, -2px); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero scroll indicator */
/* ============== SECTION ANNOUNCE (cinematic moments) ============== */
.section-announce {
  position: relative;
  z-index: 5;
  padding: 8rem var(--gutter) 2rem;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.announce-tag {
  /* Plain mono uppercase section label. No pill, no line, no number
     prominence. Reads as a quiet pre-headline tag. */
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  background: none;
  border: none;
  padding: 0;
}
.announce-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 22ch;
  margin: 0 auto 1.25rem;
  color: var(--ink);
}
.announce-sub {
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ============== CASE PREVIEW SECTIONS (on landing) ============== */
.case-preview {
  position: relative;
  z-index: 5;
  padding: 4rem var(--gutter) 8rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

.preview-frame {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 480px;
  cursor: pointer;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
@media (min-width: 900px) {
  .preview-frame { grid-template-columns: 1.1fr 1fr; }
  .preview-frame.reverse { grid-template-columns: 1fr 1.1fr; }
  .preview-frame.reverse .preview-visual { order: 2; }
}
.preview-frame:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6), 0 0 80px -10px rgba(138, 180, 255, 0.15);
}
.preview-visual {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
  min-height: 280px;
}
.preview-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.95);
  transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
}
.preview-frame:hover .preview-visual img {
  transform: scale(1.05);
  filter: brightness(1) saturate(1);
}

/* Logo variant — used when the preview visual is a brand mark / logo
   (e.g. Nan Ya's blue corporate logo) instead of a photo. Drops the
   dimming filter (logos should pop, not recede), uses contain so the
   logo isn't cropped, and scales it up so it fills the frame as a
   centered "zoomed in" brand presentation. The backdrop inherits the
   page's bg so the logo's own embedded background (if any — e.g. the
   Nan Ya SVG carries a white square, the SimpleTouch logo carries
   its own orange gradient) is what reads as the card's identity. */
.preview-visual.is-logo {
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Modifier: white background — for logos with a white-on-color identity
   like Nan Ya's blue corporate mark sitting on a white square. */
.preview-visual.is-logo.is-logo--white {
  background: #ffffff;
}
/* Modifier: orange variant — SimpleTouch. The logo PNG already contains
   its own orange gradient, so the card has no CSS background of its own.
   The image fills the frame edge-to-edge below. */
.preview-visual.is-logo.is-logo--orange {
  background: transparent;
}
.preview-visual.is-logo.is-logo--orange img {
  /* Override the contained sizing — for SimpleTouch we want the logo's
     own embedded orange field to BE the card, so the image fills the
     full frame and no dark backdrop bleeds through at the edges. */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-visual.is-logo img {
  /* Contain ensures the entire logo image is visible — no cropping of
     the wordmark or brand mark. Logos already have their own internal
     padding/empty space (e.g. the SimpleTouch orange gradient extends
     beyond the typography); object-fit:contain preserves that
     intentional whitespace rather than cropping it away. */
  width: 80%;
  height: 80%;
  object-fit: contain;
  /* No dimming filter — the logo's own color carries it */
  filter: none;
}
.preview-frame:hover .preview-visual.is-logo img {
  transform: scale(1.04);
  filter: none;
}
.preview-text {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
.preview-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.preview-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.preview-summary {
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 48ch;
}
.preview-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.preview-stats .ps {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.preview-stats .ps strong {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.preview-stats .ps strong.hot {
  background: linear-gradient(180deg, #ffffff, var(--hot));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.preview-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent-2);
  margin-top: 0.5rem;
  transition: gap 0.3s var(--ease);
}
.preview-frame:hover .preview-cta { gap: 0.8rem; }
.preview-cta svg { transition: transform 0.3s var(--ease); }
.preview-frame:hover .preview-cta svg { transform: translate(2px, -2px); }

/* ============== ABOUT (spec sheet style) ============== */
.about-shell {
  position: relative;
  z-index: 5;
  padding: 5rem var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 280px 1fr; gap: 3rem; }
}
.about-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  position: relative;
}
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.05);
}
.about-portrait::after {
  content: "Mo Amro · Houston, TX";
  position: absolute;
  bottom: 0.7rem; left: 0.7rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  padding: 0.35rem 0.55rem;
  border-radius: 4px;
}
.about-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
.about-text p strong { color: var(--ink); font-weight: 500; }
.about-text p:first-of-type {
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 400;
}
.spec-sheet {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.spec-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec-row .label {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.spec-row .value {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
}
.spec-row .value .meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  margin-top: 0.2rem;
}

/* ============== CONTACT ============== */
section.contact {
  position: relative;
  z-index: 5;
  padding: 8rem var(--gutter) 6rem;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.contact-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #aab8d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-sub {
  color: var(--ink-2);
  max-width: 50ch;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
}
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.3s, transform 0.3s var(--ease-snap);
}
.contact-cta:hover { background: #ffffff; transform: translateY(-2px); }
.contact-cta svg { transition: transform 0.3s var(--ease); }
.contact-cta:hover svg { transform: translate(2px, -2px); }
.contact-meta {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, var(--line) 25%, var(--line) 75%, transparent 100%) 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 700px) { .contact-meta { grid-template-columns: repeat(3, 1fr); } }
.contact-meta div h6 {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.45rem;
  font-weight: 500;
}
.contact-meta div p { font-size: 0.92rem; color: var(--ink); }
.contact-meta a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  transition: color 0.3s, border-color 0.3s;
}
.contact-meta a:hover { color: var(--accent-2); border-color: var(--accent); }

/* ============== FOOTER ============== */
footer.site-footer {
  position: relative;
  z-index: 5;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, var(--line) 25%, var(--line) 75%, transparent 100%) 1;
  padding: 1.5rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  max-width: var(--maxw);
  margin: 0 auto;
}
footer span { color: var(--ink-2); }

/* ============== CASE STUDY HERO ============== */
.case-hero {
  position: relative;
  min-height: 70vh;
  width: 100%;
  overflow: hidden;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding-top: 5rem;
}

/* Text-only hero variant — no background photo, just a subtle gradient
   backdrop. Used when the case study doesn't have a clean hero image
   that works at full-bleed (e.g. when the brand asset has its own
   embedded text that conflicts with the overlay). The hero becomes a
   pure text block with the same eyebrow/title/meta structure. */
.case-hero.is-text-only {
  min-height: 50vh;
  align-items: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 30%, rgba(138, 180, 255, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
  padding: 7rem var(--gutter) 4rem;
}
.case-hero.is-text-only::before,
.case-hero.is-text-only::after {
  display: none;
}
.case-hero.is-text-only .case-hero-overlay {
  padding-bottom: 0;
}
.case-hero-img-wrap { position: absolute; inset: 0; overflow: hidden; }
.case-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Explicit center anchoring — prevents the cropping behavior of object-fit:cover
     from off-centering the visible subject. Some hero photos have the subject in
     the upper-center of the frame (e.g. SimpleTouch POS terminal sits above its
     cash drawer), so default center-center works correctly when the image isn't
     oversized via inset/scale. */
  object-position: center center;
  filter: brightness(0.4) saturate(0.85) contrast(1.05);
}

/* Logo variant — when the case hero is showing a brand mark (e.g. NetTracePro)
   instead of a screenshot. Contains rather than crops, sits on a subtle
   gradient backdrop so the logo reads as a centered brand banner. */
.case-hero-img-wrap.is-logo {
  background:
    radial-gradient(ellipse 60% 90% at 50% 50%, rgba(138, 180, 255, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg) 100%);
}
.case-hero-img-wrap.is-logo .case-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: none;
  transform: none;
  /* Generous padding so the square logo sits as a centered mark with
     breathing room — not stretched, not edge-to-edge. */
  padding: 8% 35%;
  /* Drop a subtle glow under the mark so it reads as luminous, not flat */
  filter: drop-shadow(0 0 24px rgba(138, 180, 255, 0.25));
}
@media (max-width: 720px) {
  .case-hero-img-wrap.is-logo .case-hero-img {
    padding: 12% 18%;
  }
}
/* When the hero is in logo mode, the bottom-darkening gradient (used to
   make text readable over a screenshot) would crush the bottom of the
   logo. Push the dark band higher so the logo stays luminous and the
   title text below still reads. */
.case-hero:has(.case-hero-img-wrap.is-logo)::before {
  background: linear-gradient(to top,
    rgba(6, 8, 12, 0.92) 0%,
    rgba(6, 8, 12, 0.40) 22%,
    rgba(6, 8, 12, 0.0)  45%,
    rgba(6, 8, 12, 0.3)  100%);
}
.case-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6, 8, 12, 0.97) 0%,
    rgba(6, 8, 12, 0.65) 35%,
    rgba(6, 8, 12, 0.25) 60%,
    rgba(6, 8, 12, 0.5) 100%);
  z-index: 2;
}
.case-hero::after {
  content: ""; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 70%; height: 60%;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--accent-bleed) 0%, transparent 70%);
  z-index: 2; pointer-events: none; opacity: 0.5;
}
.case-hero-overlay {
  position: relative; z-index: 3;
  width: 100%;
  padding: 0 var(--gutter) 4rem;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Center the hero content (eyebrow pill, h1, meta block) so it
     matches the rest of the site's centered editorial pattern. */
  text-align: center;
}
.case-hero-eyebrow {
  /* Plain mono uppercase eyebrow for case page heroes — matches
     .announce-tag styling for site-wide consistency. */
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  background: none;
  border: none;
  padding: 0;
}
.case-hero-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 22ch;
  /* margin auto so the constrained-width title centers within the
     overlay's centered text-align column. */
  margin: 0 auto 2rem;
  color: var(--ink);
}
.case-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 720px;
  /* Center the meta-grid block within the overlay, and re-align the
     uppercase mono labels back to left within their cells (centered
     mono labels in narrow columns look broken). */
  margin: 0 auto;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) { .case-hero-meta { grid-template-columns: repeat(4, 1fr); } }
.case-hero-meta span { display: block; color: var(--ink); margin-bottom: 0.25rem; font-weight: 500; }

/* ============== CASE HERO CTA (live-site button) ==============
   Used on case pages where the project shipped to a live URL. Sits
   between the H1 title and the meta block, prominent enough to invite
   a click but quiet enough not to fight the title hierarchy. */
.case-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0 auto 2.5rem;
}
.live-site-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  /* Subtle elevation — looks deliberate, not flat */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
              0 8px 24px -8px rgba(138, 180, 255, 0.25);
  transition:
    transform 0.25s var(--ease),
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.3s var(--ease);
}
.live-site-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset,
              0 14px 36px -10px rgba(138, 180, 255, 0.55);
}
.live-site-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.live-site-btn svg {
  /* Slight nudge so the arrow icon optically aligns with the cap-height
     of the label, not its baseline. */
  margin-top: -1px;
  transition: transform 0.25s var(--ease);
}
.live-site-btn:hover svg {
  /* Icon nudges up-right on hover, matching the visual metaphor of
     "going to an external site." */
  transform: translate(2px, -2px);
}
.live-site-domain {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* Paired-button layout — used when a case ships with two related
   artifacts (e.g. wireframes + live mockup). Side-by-side on desktop,
   stacks gracefully on narrow viewports. */
.case-hero-cta.is-pair {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
@media (max-width: 520px) {
  .case-hero-cta.is-pair {
    flex-direction: column;
    align-items: stretch;
  }
  .case-hero-cta.is-pair .live-site-btn {
    justify-content: center;
  }
}

/* Secondary button variant — used as the lower-emphasis button in a
   paired CTA (the primary stays filled, secondary is outlined). The
   visual hierarchy tells the user which one is the "main" experience. */
.live-site-btn.is-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-3);
  box-shadow: none;
}
.live-site-btn.is-secondary:hover {
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.4);
}

.case-body {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem var(--gutter);
}
.case-summary {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 auto 4rem;
  text-align: center;
}
.case-section-h {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 4rem 0 1.5rem;
  display: flex;
  align-items: center;
  /* Center the heading line within the case body, with a thin accent
     line on either side of the text. Symmetric ::before and ::after
     replace the old left-only ::before pattern. */
  justify-content: center;
  gap: 0.6rem;
}
.case-section-h::before,
.case-section-h::after {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
}
.case-prose { max-width: 64ch; margin: 0 auto; }
.case-prose p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.3rem;
}
.case-prose p strong { color: var(--ink); font-weight: 500; }

.demo-frame {
  margin: 3rem auto;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 25px 60px -25px rgba(0,0,0,0.7);
}

/* Wireframe image container — the wireframe SVG is intentionally light
   (industry-standard wireframe aesthetic with red annotations). It needs
   a contrasting light background to render correctly inside the dark
   demo-frame, which is otherwise themed for our dark portfolio. */
.wireframe-shell {
  background: #f7f7f8;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}
.wireframe-shell img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Slight border so the wireframe page has a visible boundary against
     the light shell background. */
  border: 1px solid #e2e5e9;
  border-radius: 4px;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.demo-dots { display: flex; gap: 0.35rem; }
.demo-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.demo-dots span:nth-child(1) { background: rgba(255, 95, 86, 0.7); }
.demo-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.7); }
.demo-dots span:nth-child(3) { background: rgba(39, 201, 63, 0.7); }
.demo-title {
  margin-left: 0.85rem;
  color: var(--ink-2);
}
.demo-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-3);
}
.demo-status .live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: livePulse 2s infinite;
}

/* ============================================================
   COMPONENT 1: KANBAN BOARD (Neuma)
   Drag tasks between columns
   ============================================================ */
.kanban {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  background: var(--bg-1);
}
@media (min-width: 800px) {
  .kanban { grid-template-columns: repeat(4, 1fr); }
}
.kanban-col {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.kanban-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.3rem;
}
.kanban-col-name {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.kanban-col-name::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.kanban-col[data-col="todo"]      .kanban-col-name::before { background: var(--ink-3); }
.kanban-col[data-col="progress"]  .kanban-col-name::before { background: var(--hot); }
.kanban-col[data-col="review"]    .kanban-col-name::before { background: var(--purple); }
.kanban-col[data-col="done"]      .kanban-col-name::before { background: var(--green); }
.kanban-col-count {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  background: var(--bg-3);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.kanban-task {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  cursor: grab;
  transition: border-color 0.2s, transform 0.2s;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.kanban-task:hover {
  border-color: var(--line-3);
  transform: translateY(-1px);
}
.kanban-task.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.kanban-col.drag-over {
  background: var(--bg-3);
  outline: 1px dashed var(--accent);
  outline-offset: -4px;
}
.kanban-task-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.kanban-task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-3);
}
.kanban-priority {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.kanban-priority.high   { background: rgba(244, 114, 182, 0.18); color: var(--pink); }
.kanban-priority.med    { background: rgba(255, 224, 102, 0.18); color: var(--hot); }
.kanban-priority.low    { background: rgba(74, 222, 128, 0.18); color: var(--green); }

.kanban-hint {
  text-align: center;
  padding: 0.85rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.kanban-hint .kbd {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--ink-2);
  font-size: 0.58rem;
  margin: 0 0.2rem;
}

/* ============================================================
   COMPONENT 2: GANTT (Neuma)
   ============================================================ */
.gantt {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}
.gantt-grid {
  display: grid;
  grid-template-columns: 200px repeat(12, minmax(60px, 1fr));
  gap: 0;
  min-width: 800px;
}
.gantt-month {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.gantt-grid .gantt-month:first-of-type {
  border-left: none;
}
.gantt-row-name {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--ink-2);
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.gantt-row-name::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.gantt-cell {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
  height: 38px;
}
.gantt-bar {
  position: absolute;
  top: 8px; bottom: 8px;
  background: var(--accent);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(138, 180, 255, 0.3);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--bg);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.gantt-bar:hover {
  transform: scaleY(1.1);
  box-shadow: 0 0 20px rgba(138, 180, 255, 0.55);
  z-index: 2;
}
.gantt-bar.complete {
  background: var(--green);
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}
.gantt-bar.current {
  background: var(--hot);
  color: var(--bg);
}
.gantt-bar.draw {
  animation: ganttDraw 1.2s var(--ease) forwards;
  transform-origin: left center;
}
@keyframes ganttDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.gantt-corner {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--ink-4);
  padding: 0.5rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  letter-spacing: 0.05em;
}

/* ============================================================
   COMPONENT 3: RACI MATRIX (Neuma)
   ============================================================ */
.raci {
  padding: 1.5rem;
}
.raci-grid {
  display: grid;
  grid-template-columns: 200px repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.65rem;
}
.raci-cell {
  background: var(--bg-cell);
  padding: 0.75rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.25s;
  position: relative;
  min-height: 44px;
}
.raci-cell.head {
  background: var(--bg-2);
  color: var(--ink-2);
  font-weight: 600;
  text-transform: uppercase;
  cursor: default;
  font-size: 0.6rem;
}
.raci-cell.row-head {
  justify-content: flex-start;
  padding: 0.75rem 0.85rem;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
}
.raci-cell.corner {
  background: var(--bg-2);
  color: var(--ink-4);
  font-size: 0.55rem;
  cursor: default;
}
.raci-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0;
}
.raci-tag.r { background: rgba(244, 114, 182, 0.18); color: var(--pink); }
.raci-tag.a { background: rgba(255, 224, 102, 0.18); color: var(--hot); }
.raci-tag.c { background: rgba(138, 180, 255, 0.15); color: var(--accent-2); }
.raci-tag.i { background: rgba(141, 150, 168, 0.18); color: var(--ink-2); }

.raci-cell:hover { background: var(--bg-3); }
.raci-cell:hover .raci-tag { transform: scale(1.15); transition: transform 0.2s; }
.raci-cell.row-head:hover { background: var(--bg-2); }
.raci-cell.head:hover { background: var(--bg-2); }
.raci-cell.corner:hover { background: var(--bg-2); }

.raci-legend {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
}
.raci-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.raci-legend .lg .raci-tag {
  width: 20px; height: 20px;
  font-size: 0.62rem;
}

.raci-detail {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
  min-height: 50px;
  border-left: 3px solid var(--accent);
}
.raci-detail strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   COMPONENT 4: BEFORE/AFTER SLIDER (NetTracePro)
   ============================================================ */
.ba-slider {
  position: relative;
  width: 100%;
  /* Match the source images' actual aspect ratio (~2:1, ~16:8) so they
     display fully without object-fit: cover cropping out detail. */
  aspect-ratio: 2 / 1;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  /* CRITICAL: stops the page from scrolling while you drag the slider on
     touch devices. Without this, browsers default to "interpret horizontal
     drag as page scroll." With it, the slider owns all pointer motion. */
  touch-action: none;
  /* Subtle outline appears when the slider has keyboard focus */
  outline: none;
}
.ba-slider:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}
.ba-slider.is-dragging {
  cursor: grabbing;
}
.ba-slider.is-dragging .ba-knob {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 0 32px rgba(138, 180, 255, 0.5), 0 0 0 6px rgba(138, 180, 255, 0.18);
}
.ba-side {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.ba-side.before { z-index: 1; }
.ba-side.after  { z-index: 2; clip-path: inset(0 0 0 50%); }
.ba-side img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Prevent images from being grabbed for native drag-and-drop, which
     conflicts with our slider drag */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.ba-label {
  position: absolute;
  top: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.7rem;
  border-radius: 4px;
  z-index: 5;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
/* BEFORE = red.  Tomato red, dimmed enough to read on either dark image. */
.ba-label.before-l {
  left: 1rem;
  color: #ff8585;
  background: rgba(180, 40, 40, 0.55);
  border: 1px solid rgba(255, 100, 100, 0.4);
}
/* AFTER = green.  Same opacity strategy with the design system green. */
.ba-label.after-l {
  right: 1rem;
  color: #5cf2a0;
  background: rgba(30, 130, 70, 0.55);
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--ink);
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 0 30px rgba(255,255,255,0.4);
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px; height: 52px;
  background: var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 0 24px rgba(0,0,0,0.6), 0 0 0 5px rgba(255,255,255,0.12);
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg);
  transition: transform 0.2s var(--ease-snap), box-shadow 0.2s var(--ease-snap);
}
.ba-slider:hover .ba-knob {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 28px rgba(138, 180, 255, 0.35), 0 0 0 5px rgba(255, 255, 255, 0.15);
}
.ba-knob::before, .ba-knob::after {
  content: "";
  width: 7px; height: 7px;
  border-top: 2px solid var(--bg);
  border-right: 2px solid var(--bg);
  position: absolute;
}
.ba-knob::before { transform: rotate(-135deg); left: 16px; }
.ba-knob::after  { transform: rotate(45deg); right: 16px; }

/* ============================================================
   COMPONENT 5: STAT COUNTER (NetTracePro)
   ============================================================ */
.counter-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 2rem auto;
}
.counter-cell {
  background: var(--bg-card);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.counter-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.counter-num {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.counter-cell.after .counter-num {
  background: linear-gradient(180deg, #ffffff 0%, var(--hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.counter-delta {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--green);
  font-weight: 500;
}

/* ============================================================
   COMPONENT 6: CLIENT WEBSITE MAP (NetTracePro)
   ============================================================ */
.client-map {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px) {
  .client-map { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .client-map { grid-template-columns: repeat(4, 1fr); }
}
.client-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.client-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.client-card.active {
  border-color: var(--accent);
  background: var(--bg-3);
}
.client-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
}
.client-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor cropping to the top of the source image so portrait-oriented
     screenshots (full-page captures) show the hero/navigation area rather
     than a middle strip of body content. */
  object-position: top center;
  filter: brightness(0.85);
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.client-card:hover .client-img img {
  transform: scale(1.05);
  filter: brightness(1);
}
.client-body {
  padding: 0.85rem 1rem;
}
.client-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.client-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.client-detail {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink-2);
  border-left: 3px solid var(--accent);
}
.client-detail strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   COMPONENT 7: POS TERMINAL (SimpleTouch)
   ============================================================ */
.pos {
  padding: 1.5rem;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  min-height: 540px;
}
@media (min-width: 800px) {
  .pos { grid-template-columns: 1.5fr 1fr; }
}

.pos-screen {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  position: relative;
  box-shadow: 0 25px 60px -25px rgba(0,0,0,0.7);
}
.pos-bar {
  /* Dark navy topbar matching the real SimpleTouchPOS register screen */
  background: #0F1419;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #0F1419;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: #9aa1aa;
  font-family: var(--mono);
}
.pos-bar .pos-bar-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3a4049;
}
.pos-bar .pos-bar-title {
  margin-left: auto;
  margin-right: auto;
  color: #ffffff;
  font-weight: 500;
}

/* POS step containers */
.pos-step {
  flex: 1;
  display: none;
  flex-direction: column;
  padding: 1.5rem;
  color: #1a1a1a;
}
.pos-step.active { display: flex; }

/* Login screen */
.pos-login {
  align-items: center;
  justify-content: center;
  /* Orange gradient matching the real SimpleTouchPOS login screen */
  background: linear-gradient(155deg, #F4A446 0%, #F18A1F 50%, #DC7510 100%);
  position: relative;
}
/* Decorative blue accent strip at top, matching the real login */
.pos-login::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #5BA8D6;
}
.pos-login-logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  /* White text on orange background */
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.pos-login-logo .accent { color: #5BA8D6; }
.pos-login-sub {
  font-size: 0.85rem;
  /* Soft white for tagline on orange */
  color: rgba(255,255,255,0.92);
  margin-bottom: 2rem;
}
.pos-login-keypad {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: 0.6rem;
}
.pos-key {
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 12px;
  padding: 0.85rem 0;
  font-size: 1.4rem;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: var(--display);
}
.pos-key:hover { background: #f0f0f2; }
.pos-key:active { transform: scale(0.95); }
.pos-pin-display {
  font-family: var(--mono);
  font-size: 1.5rem;
  /* White on orange */
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: 0.4em;
  height: 30px;
}

/* Catalog screen */
.pos-catalog {
  flex-direction: column;
  padding: 0;
}
.pos-cat-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e5e7;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fafafc;
}
.pos-cat-search {
  flex: 1;
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  color: #888;
  font-family: var(--sans);
}
.pos-cat-grid {
  flex: 1;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  overflow-y: auto;
}
.pos-item {
  background: #fff;
  border: 1px solid #e5e5e7;
  border-radius: 10px;
  padding: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pos-item:hover { border-color: #F18A1F; transform: translateY(-1px); }
.pos-item-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
}
.pos-item-price {
  font-family: var(--mono);
  font-size: 0.78rem;
  /* Green for prices matching real app's positive-color convention */
  color: #4CAF50;
  font-weight: 600;
}
.pos-cat-foot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid #e5e5e7;
  background: #fafafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pos-cat-foot .total {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  font-variant-numeric: tabular-nums;
}
.pos-cat-foot .pos-checkout {
  /* Green Charge button matching real SimpleTouchPOS register screen */
  background: #4CAF50;
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}
.pos-cat-foot .pos-checkout:hover { background: #43A047; }
.pos-cat-foot .pos-checkout:disabled { background: #c5c5cd; cursor: not-allowed; }

/* Checkout screen */
.pos-checkout-screen {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
}
.pos-success-icon {
  width: 64px; height: 64px;
  background: #4ade80;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 2rem;
  color: #fff;
  animation: posSuccessPop 0.6s var(--ease);
}
@keyframes posSuccessPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.pos-success-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}
.pos-success-amount {
  font-family: var(--mono);
  font-size: 1rem;
  color: #5a8de0;
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.pos-reset {
  background: transparent;
  border: 1px solid #d5d5d7;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  color: #555;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.2s;
}
.pos-reset:hover { background: #f5f5f7; }

/* POS sidebar — flow tracker */
.pos-flow {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pos-flow-title {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pos-flow-step {
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color 0.3s, background 0.3s;
}
.pos-flow-step.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pos-flow-step.done {
  border-color: rgba(74, 222, 128, 0.3);
}
.pos-flow-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
}
.pos-flow-step.active .pos-flow-num { background: var(--accent); color: var(--bg); }
.pos-flow-step.done .pos-flow-num { background: var(--green); color: var(--bg); }
.pos-flow-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pos-flow-name {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
}
.pos-flow-desc {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.03em;
}

/* ============================================================
   COMPONENT 8: WIREFRAME → HI-FI MORPH (SimpleTouch)
   ============================================================ */
.morph {
  position: relative;
  padding: 1.5rem;
  background: var(--bg-1);
}
.morph-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.morph-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s var(--ease);
}
.morph-layer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 1rem;
}
.morph-layer.wireframe {
  filter: invert(0.85) hue-rotate(180deg) saturate(0);
  opacity: 1;
}
.morph-layer.hifi {
  opacity: 0;
}
/* Driven by --t (0..1) variable from JS */
.morph-canvas[style*="--t"] .morph-layer.wireframe {
  opacity: calc(1 - var(--t));
}
.morph-canvas[style*="--t"] .morph-layer.hifi {
  opacity: var(--t);
}
/* Hint line above the slider — explicit instruction so first-time visitors
   understand the slider is interactive and what dragging it does. */
.morph-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.55rem 0.85rem;
  background: rgba(138, 180, 255, 0.08);
  border: 1px solid rgba(138, 180, 255, 0.20);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.morph-hint svg {
  flex-shrink: 0;
  color: var(--accent);
}
/* Hide the hint once the user has interacted with the slider — JS adds
   .has-interacted to .morph after the first input event. */
.morph.has-interacted .morph-hint {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  transition: opacity 0.4s var(--ease), max-height 0.4s var(--ease),
              margin-top 0.4s var(--ease), padding 0.4s var(--ease);
}

.morph-controls {
  margin-top: 0.85rem;
  padding: 1rem 1.1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
/* The track itself. Native range elements are notoriously fiddly across
   browsers — we use background-image for the fill so we can color the
   "filled" portion with the accent and the rest with a neutral track. */
.morph-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background:
    linear-gradient(to right,
      var(--accent) 0%,
      var(--accent) calc(var(--slider-pct, 0%)),
      var(--bg-3) calc(var(--slider-pct, 0%)),
      var(--bg-3) 100%);
  border-radius: 4px;
  outline: none;
  cursor: grab;
}
.morph-slider:active { cursor: grabbing; }
.morph-slider:focus-visible {
  box-shadow: 0 0 0 2px rgba(138, 180, 255, 0.4);
}

/* Thumb with a directional arrow embedded as an SVG background.
   Native range thumbs can't contain HTML, so we encode an inline SVG
   arrow as a data URL and use it as the thumb's background-image. The
   arrow points right ("drag me this way"). Both -webkit and -moz versions
   need their own rules because vendor pseudo-elements can't be combined. */
.morph-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px; height: 32px;
  background-color: var(--ink);
  border-radius: 50%;
  cursor: grab;
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 6px rgba(138, 180, 255, 0.10),
    0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s var(--ease-snap), box-shadow 0.2s var(--ease);
  /* Right-pointing arrow ICON encoded as inline SVG.
     Stroke is bg-color so it reads on the light thumb. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M2 7h10M8 3l4 4-4 4' stroke='%2306080c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.morph-slider:hover::-webkit-slider-thumb {
  transform: scale(1.08);
  box-shadow:
    0 0 0 8px rgba(138, 180, 255, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.5);
}
.morph-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.15);
}
.morph-slider::-moz-range-thumb {
  width: 32px; height: 32px;
  background-color: var(--ink);
  border-radius: 50%;
  cursor: grab;
  border: 2px solid var(--accent);
  box-shadow:
    0 0 0 6px rgba(138, 180, 255, 0.10),
    0 4px 14px rgba(0, 0, 0, 0.45);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M2 7h10M8 3l4 4-4 4' stroke='%2306080c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* Once the user has interacted, the arrow is no longer needed — replace it
   with a simpler dot/grip pattern. This is a "thank-you" moment: the slider
   stops yelling once the user has demonstrated they understand. */
.morph.has-interacted .morph-slider::-webkit-slider-thumb {
  background-image:
    linear-gradient(var(--bg) 0 0),
    linear-gradient(var(--bg) 0 0);
  background-size: 10px 2px, 10px 2px;
  background-position: center calc(50% - 4px), center calc(50% + 4px);
  background-repeat: no-repeat;
}
.morph.has-interacted .morph-slider::-moz-range-thumb {
  background-image:
    linear-gradient(var(--bg) 0 0),
    linear-gradient(var(--bg) 0 0);
  background-size: 10px 2px, 10px 2px;
  background-position: center calc(50% - 4px), center calc(50% + 4px);
  background-repeat: no-repeat;
}

/* Removed the keyframe pulse animation — the JS-driven demo motion below
   is a stronger signal than a static box-shadow pulse. The is-nudging
   class no longer triggers CSS animation; JS drives the slider value
   directly. */

.morph-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 80px;
  transition: color 0.3s var(--ease);
}
.morph-label.right { text-align: right; }
.morph-label .pct {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
/* Active label — gets brightened to indicate "this is what you're seeing." */
.morph-label.is-active {
  color: var(--accent);
}

/* ============================================================
   COMMON ELEMENTS (case stats, pull, note, next-case, reveal)
   ============================================================ */
.case-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 4rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
@media (min-width: 700px) { .case-stats { grid-template-columns: repeat(4, 1fr); } }
.case-stats .stat {
  background: var(--bg-card);
  padding: 1.85rem 1.4rem;
  text-align: center;
}
.case-stats .stat-num {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.025em;
}
.case-stats .stat-label {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pull {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.45;
  color: var(--ink);
  padding: 3rem 0;
  margin: 4rem auto;
  max-width: 50ch;
  text-align: center;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-style: italic;
}
.pull::before {
  content: "✦";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 1rem;
  color: var(--accent);
  font-size: 0.85rem;
  font-style: normal;
}

.note {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 8px;
  margin: 2.5rem auto;
  max-width: 64ch;
  line-height: 1.6;
  text-align: center;
}

.next-case {
  position: relative;
  z-index: 5;
  border-top: 1px solid var(--line);
  padding: 5rem var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.next-case .nc-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.next-case a.nc-link {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  letter-spacing: -0.015em;
  transition: color 0.3s var(--ease-snap);
}
.next-case a.nc-link:hover { color: var(--accent-2); }
.next-case a.nc-link svg { transition: transform 0.4s var(--ease); }
.next-case a.nc-link:hover svg { transform: translate(6px, -6px); }
.next-case a.back {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s;
}
.next-case a.back:hover { color: var(--accent-2); }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   SISTER SUB-BRANDS (Neuma case · MP Doors + MySmartFit Chair)
   ============================================================ */
.sister-brands {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 800px) {
  .sister-brands { grid-template-columns: repeat(2, 1fr); }
}

.sister-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.sister-card:hover {
  border-color: var(--line-3);
  transform: translateY(-2px);
}

.sister-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  position: relative;
}
.sister-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.95);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.sister-card:hover .sister-img img {
  filter: brightness(1) saturate(1);
  transform: scale(1.03);
}

/* Monogram fallback for sub-brands without photography */
.sister-img-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 70% at center, var(--accent-soft) 0%, transparent 70%),
    var(--bg-3);
}
.sister-img-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
}
.sister-mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 4.5rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  position: relative;
  z-index: 1;
  text-shadow: 0 0 40px var(--accent-glow);
}

.sister-body {
  padding: 1.1rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.sister-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sister-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.sister-desc {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.sister-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sister-list li {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  padding-left: 1rem;
  position: relative;
}
.sister-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}

/* ============================================================
   NAV DROPDOWN — Work menu with 3 case studies
   ============================================================ */
.nav-has-drop {
  position: relative;
}
.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  border: none;
  padding: 0.25rem 0;
  cursor: pointer;
  transition: color 0.25s var(--ease-snap);
}
.nav-drop-trigger:hover,
.nav-drop-trigger[aria-expanded="true"] {
  color: var(--ink);
}
.nav-caret {
  transition: transform 0.25s var(--ease-snap);
  opacity: 0.7;
}
.nav-drop-trigger[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-drop {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 280px;
  padding: 0.55rem;
  background: rgba(10, 13, 18, 0.96);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow:
    0 24px 48px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(138, 180, 255, 0.05) inset;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-snap), transform 0.22s var(--ease-snap);
  z-index: 110;
}
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop,
.nav-has-drop.open .nav-drop {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hover bridge — keeps dropdown open while moving cursor from trigger to menu */
.nav-drop::before {
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 0;
  right: 0;
  height: 0.85rem;
}

.nav-drop-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 9px;
  color: var(--ink-2);
  transition: background 0.2s var(--ease-snap), color 0.2s var(--ease-snap);
}
.nav-drop-item:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.nav-drop-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 0.25rem 0.45rem;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
}
.nav-drop-item:hover .nav-drop-num {
  border-color: var(--accent);
  color: var(--accent);
}
.nav-drop-meta {
  flex: 1;
  min-width: 0;
}
.nav-drop-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.nav-drop-sub {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .nav-drop {
    left: auto;
    right: 0;
    transform: translateY(-6px);
    min-width: 240px;
  }
  .nav-has-drop:hover .nav-drop,
  .nav-has-drop:focus-within .nav-drop,
  .nav-has-drop.open .nav-drop {
    transform: translateY(0);
  }
}