/* Self-hosted Google Fonts - latin subset, variable axis, font-display:swap. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/fraunces-var.woff2') format('woff2'); }
/* INLINED from /assets/css/site.css */
/* solarise.dev - shared base for case study + experiment pages.
   Vars + typography + nav + contact form. Page-specific magazine layout
   lives in page.css. Home page (index.html) still has its own inline styles. */

:root {
  --bg: #f1ece2;
  --bg-deep: #e7e0d2;
  --paper: #faf6ec;
  --ink: #1a1c24;
  --ink-soft: #34363d; /* body copy - darkened for stronger contrast on the cream paper */
  --ink-mute: #5b5e67;
  --line: rgba(26, 28, 36, .10);
  --line-strong: rgba(26, 28, 36, .18);

  --c-problem-1: #c4513a;
  --c-problem-2: #a93f2c;
  --c-problem-3: #d96a52;
  --c-solution-1: #3e8a6c;
  --c-solution-2: #2d7058;
  --c-solution-3: #58a487;
  --c-strategy-1: #6855a8;
  --c-strategy-2: #54448e;
  --c-strategy-3: #8779c4;

  --wrap: 1180px;
  --measure: 68ch;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* ===== LOCKED TYPE SCALE (the only sizes/roles to use site-wide) =====
     Headings + editorial standouts = serif (Fraunces). Everything else = sans (Inter).
     Body has exactly three sizes: lg / md / sm. */
  --h1: clamp(2.1rem, 1.35rem + 2.6vw, 3rem);   /* page hero title (serif) */
  --h2: clamp(1.5rem, 1.15rem + 1.3vw, 2rem);   /* section title (serif) */
  --h3: 1.2rem;                                  /* card / sub-section title (serif) */
  --text-lg: 1.15rem;   /* lead body — e.g. the hero "I help agencies…" */
  --text-md: .95rem;    /* standard body — e.g. demo captions "Data entry shouldn't just…" */
  --text-sm: .8rem;     /* labels / nav sub-text / story rail — e.g. "Coffee distributor" */
  --text-xs: .72rem;    /* tiny meta / eyebrow labels */
  --lead-serif-lg: 1.5rem;   /* serif editorial standout, large (side quotes / lead lines) */
  --lead-serif-md: 1.15rem;  /* serif editorial standout, medium */
  --fw-body: 400; --fw-med: 500; --fw-bold: 600;  /* "light bold" = 600, never 700 in body */
  --nav-size: .9rem;            /* header / footer / demo-tab nav text */
  --btn-size: .9rem;            /* buttons */
  --lh-tight: 1.18; --lh-head: 1.12; --lh-body: 1.6;

  /* ===== LOCKED SPACING SCALE (use these, not arbitrary px) ===== */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --section-gap: var(--space-8);   /* whitespace between major sections */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 16.5px;
  line-height: 1.6;
}

a {
  color: var(--c-problem-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }

img, video { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ────────────────────── Top nav ────────────────────── */
.site-nav {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.site-nav .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.site-nav .brand-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-problem-1);
  flex-shrink: 0;
}
.site-nav .brand-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--nav-size);
  font-weight: var(--fw-med);
  letter-spacing: .01em;
}
.site-nav-links a:hover { color: var(--ink); }
.site-nav-links a.is-current { color: var(--c-problem-1); }
.site-nav-links a.cta {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
}
.site-nav-links a.cta:hover { background: var(--c-problem-1); color: var(--paper); }
@media (max-width: 600px) {
  .site-nav-inner { padding: 14px 18px; }
  .site-nav-links { gap: 14px; }
  .site-nav-links a:not(.cta) { display: none; }
}

/* ────────────────────── Contact module ────────────────────── */
.contact-module {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 80px;
  padding: 70px 0 80px;
}
.contact-module .wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 50px;
}
.contact-module h2 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--ink);
}
.contact-module h2 em {
  font-style: italic;
  color: var(--c-problem-1);
}
.contact-module .contact-lede {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}
.contact-module .contact-cta-line {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--c-problem-1);
  font-weight: 500;
  font-size: 1.05rem;
}
.contact-form {
  display: grid;
  gap: 14px;
}
.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: 6px;
  color: var(--ink);
  width: 100%;
  font-family: var(--font-sans);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-problem-1);
  box-shadow: 0 0 0 3px rgba(196, 81, 58, .15);
}
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-sans);
}
.contact-form button {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid transparent;
  padding: 11px 18px;
  border-radius: 3px;
  font: inherit;
  font-weight: var(--fw-bold);
  font-size: var(--btn-size);
  cursor: pointer;
  justify-self: start;
  transition: background .6s ease;
}
.contact-form button:hover { background: var(--c-problem-1); }
.contact-form .form-status {
  font-size: .9rem;
  color: var(--c-solution-1);
  margin: 0;
}
.contact-form .form-status.error { color: var(--c-problem-1); }
@media (max-width: 760px) {
  .contact-module { padding: 50px 0 60px; }
  .contact-module .wrap { grid-template-columns: 1fr; gap: 30px; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* ────────────────────── Site footer ────────────────────── */
.site-footer {
  padding: 30px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-mute);
  font-size: var(--nav-size);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .site-footer-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-footer .site-footer-right .sep { color: var(--ink-fade); }
.site-footer .footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--ink-soft);
  margin-left: 4px;
}
.site-footer .footer-social:hover { color: var(--ink); text-decoration: none; }
.site-footer .footer-social svg { width: 16px; height: 16px; }

/* INLINED from /assets/css/booking.css */
/* Booking system: the three R's pricing boxes, the inline CTA link, and
   the modal that hosts the Google Appointment Schedule embed. */

/* ============ Pricing CTA link (above the three boxes) ============ */
.pricing-cta-row {
  max-width: 1180px;
  margin: 50px auto 22px;
  padding: 0 24px;
  text-align: center;
}
.pricing-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--c-problem-1);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid currentColor;
  transition: color .6s ease, transform .6s ease;
}
.pricing-cta-link:hover {
  color: var(--c-problem-2);
  transform: translateY(-1px);
}

/* ============ Unified button system ============
   .btn-primary  - flat solid, sharp, used for hire-actions
                   variants: default (ink), --hot (red)
   .btn-secondary - dark ink mono uppercase pill, sharp, used for
                    section-end "explore further" inside chonky boxes
   .link-arrow   - small italic serif text-link for low-key "view all" hooks
   ===================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  font-weight: var(--fw-bold);
  font-size: var(--btn-size);
  letter-spacing: .01em;
  color: #fff;
  background: var(--ink);
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 11px 18px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background .6s ease;
}
.btn-primary:hover { background: #000; }
.btn-primary--hot { background: var(--c-problem-1); }
.btn-primary--hot:hover { background: var(--c-problem-2); }
.btn-primary:disabled { opacity: .5; cursor: progress; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 10px 16px;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background .6s ease;
}
.btn-secondary:hover { background: var(--c-problem-1); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: .98rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(26,28,36,.25);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .6s ease, text-decoration-color .6s ease;
}
.link-arrow:hover { color: var(--c-problem-1); text-decoration-color: var(--c-problem-1); }

/* ============ Three-R's pricing section ============ */
.pricing-section {
  max-width: 1180px;
  margin: 0 auto 60px;
  padding: 0 24px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 22px; }
}

.pricing-card {
  background: var(--paper);
  border: 3px dashed var(--ink);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  box-shadow: -8px 8px 0 0 var(--ink);
  transition: transform .6s ease, box-shadow .6s ease;
}
.pricing-card:hover {
  transform: translate(-2px, 2px);
  box-shadow: -4px 4px 0 0 var(--ink);
}

.pricing-title {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.pricing-tagline {
  margin: -4px 0 0;
}
.pricing-tagline em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--c-problem-1);
  line-height: 1.35;
}
.pricing-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.pricing-body-group { display: flex; flex-direction: column; gap: 8px; }
.pricing-body strong { font-weight: 700; color: var(--c-problem-1); }
.pricing-body em {
  font-style: italic;
  font-family: 'Fraunces', serif;
  color: var(--c-problem-1);
  font-weight: 500;
}

.pricing-extra {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 12px 14px;
  background: rgba(62, 138, 108, .08);
  border-left: 3px solid var(--c-solution-1);
  margin: 4px 0 0;
}
.pricing-extra strong { color: var(--ink); font-weight: 700; }

.pricing-cta {
  margin-top: auto;
  padding-top: 6px;
}
/* CTA styling now comes from the unified .btn-primary system (see site.css). */

/* Per-card colour coding - border, chunky shadow, inline emphasis and tagline
   shift to the card's tier colour. Rescue stays rust (default brand red),
   Recovery teal, Resilience plum. */
.pricing-card--rescue     { border-color: var(--c-problem-1);  box-shadow: -8px 8px 0 0 var(--c-problem-1); }
.pricing-card--recovery   { border-color: var(--c-solution-1); box-shadow: -8px 8px 0 0 var(--c-solution-1); }
.pricing-card--resilience { border-color: var(--c-strategy-1); box-shadow: -8px 8px 0 0 var(--c-strategy-1); }
.pricing-card--rescue:hover     { box-shadow: -4px 4px 0 0 var(--c-problem-1); }
.pricing-card--recovery:hover   { box-shadow: -4px 4px 0 0 var(--c-solution-1); }
.pricing-card--resilience:hover { box-shadow: -4px 4px 0 0 var(--c-strategy-1); }

.pricing-card--recovery .pricing-tagline em,
.pricing-card--recovery .pricing-body strong,
.pricing-card--recovery .pricing-body em { color: var(--c-solution-1); }
.pricing-card--resilience .pricing-tagline em,
.pricing-card--resilience .pricing-body strong,
.pricing-card--resilience .pricing-body em { color: var(--c-strategy-1); }

/* ============ /book standalone page ============ */
.page-book .book-intro {
  position: relative;
  width: 50%;
  max-width: 580px;
  margin: 0 0 30px;
  padding: 8px 0 8px 20px;
  border-left: 3px solid var(--c-problem-1);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.page-book .book-intro::before {
  content: "Hi.";
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--c-problem-1);
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.page-book .book-intro strong { color: var(--ink); font-weight: 600; }
.page-book .book-intro em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--c-problem-1);
  font-weight: 500;
}
@media (max-width: 720px) {
  .page-book .book-intro { width: auto; max-width: none; }
}

.page-book .page-hero h1,
.page-book .page-hero .tagline {
  max-width: none;
}
.page-book .page-hero h1 { white-space: nowrap; }
@media (max-width: 720px) {
  .page-book .page-hero h1 { white-space: normal; }
}

.book-frame-section {
  padding: 32px 0 16px;
}
.book-frame {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 32px -22px rgba(26,28,36,.4);
}
.book-frame iframe {
  width: 100%;
  height: 720px;
  border: 0;
  display: block;
  background: #fff;
}
.book-fallback-note {
  text-align: center;
  margin: 18px 0 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.book-fallback-note a { color: var(--c-problem-1); font-weight: 500; }

.book-reminder {
  padding: 48px 0 16px;
}
.book-reminder-heading {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -.01em;
  margin: 0 0 22px;
  color: var(--ink);
}
.book-reminder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 880px) {
  .book-reminder-grid { grid-template-columns: 1fr; gap: 18px; }
}
.book-reminder-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-left-width: 4px;
  border-bottom-width: 4px;
  padding: 22px 22px 20px;
  box-shadow: -6px 6px 0 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.book-reminder-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.book-reminder-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.book-reminder-card p em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--c-problem-1);
  font-weight: 500;
}
.book-reminder-card--recovery   p em { color: var(--c-solution-1); }
.book-reminder-card--resilience p em { color: var(--c-strategy-1); }

.book-reminder-link {
  margin: 28px 0 0;
  text-align: right;
}
.book-reminder-link a {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--c-problem-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.book-reminder-link a:hover { color: var(--c-problem-2); }

/* On mobile the Google scheduling UI stacks vertically (date picker +
   time slots below + multi-step form) which is taller than the viewport.
   Give the iframe enough height that the entire flow fits without nested
   scroll - the user scrolls the page instead. */
@media (max-width: 640px) {
  .book-frame { border-radius: 0; border-left: 0; border-right: 0; }
  .book-frame iframe { height: 1500px; }
}
@media (max-width: 380px) {
  .book-frame iframe { height: 1700px; }
}

  :root {
    --bg: #f1ece2;
    --bg-deep: #e7e0d2;
    --ink: #1a1c24;
    --ink-soft: #34363d; /* body copy - darkened for stronger contrast on the cream paper */
    --line: rgba(26,28,36,.10);
    --paper: #faf6ec;

    --c-problem-1: #c4513a;
    --c-problem-2: #a93f2c;
    --c-problem-3: #d96a52;
    --c-solution-1: #3e8a6c;
    --c-solution-2: #2d7058;
    --c-solution-3: #58a487;
    --c-strategy-1: #6855a8;
    --c-strategy-2: #54448e;
    --c-strategy-3: #8779c4;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* `clip` (not `hidden`) so Chrome doesn't treat body as a scroll container
       and swallow wheel events at the document root. Firefox tolerated `hidden`. */
    overflow-x: clip;
  }

  /* Isometric grid backdrop */
  .iso-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-color: var(--bg);
    background-image:
      linear-gradient(30deg, var(--line) 1px, transparent 1px),
      linear-gradient(-30deg, var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 80px 138.56px;
    background-position: 0 0;
    opacity: .55;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 35%, transparent 100%);
  }

  main { position: relative; z-index: 1; }

  .wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 40px;
  }

  /* ----- Hero ----- */
  .hero {
    display: grid;
    grid-template-columns: 1.75fr 1fr;
    gap: 80px;
    align-items: center;
    min-height: clamp(620px, 80vh, 780px);
    padding-top: 16px;
    padding-bottom: 0;
  }

  .hero-left { position: relative; }

  .brandmark {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(4.5rem, 11vw, 9.5rem);
    line-height: .82;
    letter-spacing: -.04em;
    color: var(--ink);
    margin-left: 8px;
    filter: drop-shadow(-12px 14px 22px rgba(26,28,36,.32));
  }
  /* Name-as-brandmark variant - Robin Metcalfe replaces the SOLARISE wordmark.
     Drops the 3D text-shadow / drop-shadow treatment for a cleaner serif heading. */
  .brandmark.brandmark--name {
    font-weight: 700;
    font-size: clamp(2.86rem, 7.15vw, 5.06rem);
    line-height: 1;
    letter-spacing: -.025em;
    margin: 0;
    filter: none;
  }
  /* Hero headline - felt-state H1 leading the page. Replaces the name-as-H1
     pattern with a punchier line; identifier moves into the intro stanza below.
     Pipeline = problem/rust; team = solution/teal. */
  .hero-eyebrow {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 0 0 8px;
  }
  .hero-cred {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: clamp(.85rem, 1.05vw, .95rem);
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ink-mute, #6c6f78);
    margin: 12px 0 0;
  }
  .hero-cred strong { color: var(--ink); font-weight: 700; }
  .hero-headline {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(2.04rem, 4.95vw, 3.57rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
  }
  .hero-headline .hl-pipeline { color: var(--c-problem-1); }
  .hero-headline .hl-team { color: var(--c-solution-1); }
  .hero-headline .hl-blue { color: #2e5c8a; }
  /* Marker effects (marker-highlight.min.js): the ink colour is set per-mark via
     data-original-bgcolor and painted on a canvas, so the CSS background stays
     transparent at all times - no flash of a solid rectangle (FOUC), no marker-loading
     guard needed. Text stays its inherited colour (black for data/design). */
  .hero-left mark { background-color: transparent; color: inherit; }
  @media (max-width: 720px) {
    .hero-headline { max-width: none; font-size: clamp(1.9rem, 7.9vw, 3rem); overflow-wrap: break-word; }
  }
  /* Three-line intro stanza beneath the headline. Reuses the existing
     .tagline color hooks (t-1 rust / t-2 teal / t-3 plum) but switches the
     register from italic-serif to Inter so the lines read as a stanza
     rather than a poetic flourish. */
  .tagline.tagline--intro {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: clamp(1.0rem, 1.35vw, 1.18rem);
    line-height: 1.5;
    margin-top: 32px;
    max-width: 52ch;
  }
  .tagline.tagline--intro .tagline-line { padding: 1px 0; }
  .tagline.tagline--intro .tagline-line + .tagline-line { margin-top: 4px; }
  .tagline.tagline--intro strong { font-weight: 700; }
  /* ----- Hero contact form (right column, chunky plum card) -----
     Border + shadow in --c-strategy-1 (plum / brand "blue") to echo the
     pricing-card chonk treatment but in a different colour so it reads as
     its own surface rather than a pricing tier. */
  .hero-form {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-radius: 0;
    padding: 24px 24px 22px;
    box-shadow: -8px 8px 0 0 var(--ink);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .hero-form .hero-form-title {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    line-height: 1.18;
    letter-spacing: -.018em;
    text-transform: none;
    color: var(--ink);
    margin: 0 0 6px;
  }
  .hero-form-blurb {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: .9rem;
    color: var(--ink-soft);
    line-height: 1.45;
    margin: 0 0 6px;
  }
  .hf-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hf-label {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-soft);
  }
  .hf-field input,
  .hf-field textarea {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--ink);
    background: white;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    padding: 9px 11px;
    width: 100%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: border-color .6s ease, box-shadow .6s ease;
  }
  .hf-field textarea { resize: vertical; min-height: 88px; line-height: 1.4; }
  .hf-field input::placeholder,
  .hf-field textarea::placeholder {
    color: var(--ink-mute);
    opacity: .68;
  }
  .hf-field input:focus,
  .hf-field textarea:focus {
    outline: 0;
    border-color: var(--c-strategy-1);
    box-shadow: 0 0 0 3px rgba(104, 85, 168, .18);
  }
  .hf-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
  }
  /* .hf-submit styling moved to .btn-primary--hot in the unified button system. */
  .hf-status {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .82rem;
    color: var(--ink-soft);
  }

  /* Pillar group eyebrow - small label above the 01/02/03 stack. */
  .pillars-eyebrow {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 14px;
    padding-left: 2px;
  }
  .brandmark .word {
    display: inline-block;
    color: var(--ink);
    text-shadow:
      -1px 1px 0 var(--c-problem-1),
      -2px 2px 0 var(--c-problem-1),
      -3px 3px 0 var(--c-problem-1),
      -4px 4px 0 var(--c-problem-1),
      -5px 5px 0 var(--c-problem-1),
      -6px 6px 0 var(--c-problem-1),
      -7px 7px 0 var(--c-problem-1),
      -8px 8px 0 var(--c-problem-1),
      -9px 9px 0 var(--c-problem-1),
      -10px 10px 0 var(--c-problem-1);
  }

  /* Clients wall of text - between Frontier Experiments and Long Form */
  .clients-wall-section {
    margin: 90px auto 70px;
    padding: 0 40px;
  }
  .clients-wall { text-align: center; }
  .clients-wall-pre {
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: .9rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 26px;
    opacity: .85;
  }
  .clients-wall-words {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: clamp(.88rem, 2.2vw, 1.7rem);
    line-height: 1.42;
    letter-spacing: -.014em;
    display: block;
  }
  .clients-wall-words .cw {
    display: inline-block;
    margin: 0 .1em;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    color: var(--c-problem-1);
    text-shadow:
      -1px 1px 0 #cbcccd,
      -2px 2px 0 #cbcccd,
      -3px 3px 0 #cbcccd;
  }
  .clients-wall-words .cw:hover { transform: translateY(-2px); }
  .clients-wall-words .cw:nth-of-type(3n+2) {
    color: var(--c-solution-1);
    text-shadow:
      -1px 1px 0 #cbcccd,
      -2px 2px 0 #cbcccd,
      -3px 3px 0 #cbcccd;
  }
  .clients-wall-words .cw:nth-of-type(3n+3) {
    color: var(--c-strategy-1);
    text-shadow:
      -1px 1px 0 #cbcccd,
      -2px 2px 0 #cbcccd,
      -3px 3px 0 #cbcccd;
  }
  .clients-wall-words .dot {
    display: inline-block;
    margin: 0 .2em;
    color: var(--ink-soft);
    opacity: .45;
    font-weight: 400;
    transform: translateY(-.08em);
  }
  @media (max-width: 720px) {
    .clients-wall-section { margin: 60px auto 50px; padding: 0 20px; }
    .clients-wall-words { font-size: clamp(1.3rem, 6.75vw, 2rem); }
    .clients-wall-words .cw,
    .clients-wall-words .cw:nth-of-type(3n+2),
    .clients-wall-words .cw:nth-of-type(3n+3) {
      text-shadow:
        -1px 1px 0 #cbcccd,
        -2px 2px 0 #cbcccd;
    }
  }

  .brandmark .word .hi {
    color: var(--c-problem-1);
    text-shadow:
      -1px 1px 0 #1a1c24,
      -2px 2px 0 #1a1c24,
      -3px 3px 0 #1a1c24,
      -4px 4px 0 #1a1c24,
      -5px 5px 0 #1a1c24,
      -6px 6px 0 #1a1c24,
      -7px 7px 0 #1a1c24,
      -8px 8px 0 #1a1c24,
      -9px 9px 0 #1a1c24,
      -10px 10px 0 #1a1c24;
  }

  /* Subtitle directly under the SOLARISE wordmark - Inter caps, tracked out
     so it reads as a distinct identity line, not part of the main tagline. */
  .brand-sub {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: clamp(1.0rem, 1.47vw, 1.2rem);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--c-problem-2);
    margin: 14px 0 0 10px;
  }
  @media (max-width: 720px) {
    .brand-sub { margin-left: 2px; letter-spacing: .2em; }
  }

  .tagline {
    margin-top: 30px;
    font-family: 'Fraunces', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.32rem;
    color: var(--ink-soft);
    max-width: 56ch;
    line-height: 1.45;
  }
  .tagline u { font-style: normal; }
  .tagline-line {
    display: block;
    padding: 2px 0;
  }
  .tagline-line + .tagline-line { margin-top: 2px; }
  .tagline-aside {
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.82em;
    color: var(--ink-soft);
    opacity: 0.78;
    margin-top: 14px;
    letter-spacing: 0;
  }
  .tagline-aside::before { content: '* '; color: var(--c-problem-1); font-weight: 600; }
  .tagline em {
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
  }
  .tagline .t-1 { color: var(--ink); font-weight: 700; }
  .tagline .t-1 strong { color: var(--c-problem-1); font-weight: 700; font-style: normal; }
  /* Stack-specialisation line - sits below the wavy hero animation. Smaller
     than the main taglines (next size down), spelled-out CMS so it doubles
     as light SEO + parses for any reader who doesn't know the acronym. */
  .hero-spec {
    margin: 18px 0 0;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: clamp(0.85rem, 1.05vw, 0.95rem);
    line-height: 1.5;
    color: var(--ink-soft);
    font-weight: 500;
  }
  /* Pen-style underline - applied to "CMS development" in the hero tagline lead.
     Inline SVG keeps a single hand-drawn squiggle that scales with the text. */
  .pen-underline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    z-index: 0;
  }
  /* Decorative ink separator - sits between the hero and the first downstream
     section. Thick black rule with a centred diamond mark, paper-background
     keep-out so the mark reads cleanly on top. */
  .hero-separator {
    margin: 0 auto 36px;
    text-align: center;
    color: var(--ink);
    font-size: 0.9rem;
    letter-spacing: 0.5em;
    line-height: 1;
  }
  .pen-underline::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    bottom: calc(-0.18em + 3px);
    height: 0.32em;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,3 60,10 95,5 S 150,9 198,6' stroke='%23c4513a' stroke-width='3.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
    pointer-events: none;
    z-index: -1;
  }
  /* Tagline mobile break - hidden on desktop, shown on small viewports so
     line 1 reads "CMS development for / product design agencies." */
  .m-break { display: none; }
  @media (max-width: 720px) {
    .m-break { display: inline; }
    .pen-underline::after { bottom: calc(-0.18em + 2px); }
  }
  .tagline .t-2 { color: var(--c-solution-2); }
  .tagline .t-2 em { color: var(--c-solution-1); font-weight: 500; }
  .tagline .t-3 { color: var(--c-problem-1); }
  .tagline .t-3 strong { color: var(--c-problem-1); font-weight: 700; font-style: normal; }
  .tagline .t-4 { color: #2e5c8a; }
  .tagline .t-4 strong { color: #1d4773; font-weight: 600; font-style: normal; }

  .meta {
    margin-top: 36px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .14em;
  }
  .meta span { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
  .meta a.meta-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    transition: background .6s ease, color .6s ease, border-color .6s ease;
  }
  .meta a.meta-social:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .meta a.meta-social svg { width: 16px; height: 16px; }
  .meta .meta-cta {
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    padding: 8px 14px;
    border: 1px solid var(--c-problem-1);
    border-radius: 999px;
    background: var(--c-problem-1);
    color: #fff;
    cursor: pointer;
    transition: background .6s ease, transform .6s ease, box-shadow .6s ease;
    box-shadow: 0 2px 0 var(--c-problem-2);
  }
  .meta .meta-cta:hover { background: var(--c-problem-2); transform: translateY(-1px); box-shadow: 0 3px 0 var(--c-problem-2); }
  .meta .meta-cta:focus-visible { outline: 2px solid var(--c-strategy-1); outline-offset: 3px; }

  /* ===== Hero stack list (sits above the waves) ===== */
  .hero-stacks {
    margin: 36px 0 12px;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
  }
  .hero-stacks-dot {
    color: var(--ink-mute);
    font-weight: 400;
  }
  @media (max-width: 880px) {
    .hero-stacks { font-size: .98rem; gap: 8px; margin-top: 28px; }
  }

  /* ===== Hero waves (replaces the old meta tags) ===== */
  .hero-waves {
    margin-top: 4px;
    width: 100%;
    max-width: 480px;
    opacity: .9;
    overflow: hidden;
    /* Fade out the wave ends so they don't stop abruptly. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
  .hero-waves svg {
    display: block;
    width: 100%;
    height: 70px;
    overflow: visible;
  }
  #hwave1 { opacity: .9; }
  #hwave2 { opacity: .8; }
  @media (max-width: 880px) {
    .hero-waves { margin-top: 24px; max-width: 100%; }
    .hero-waves svg { height: 56px; }
  }
  /* the two waveforms are desktop chrome - hide them on mobile */
  @media (max-width: 760px) { .hero-waves { display: none; } }

  /* ===== Contact form (inline + modal) ===== */
  .contact-section {
    padding-block: 80px 60px;
    margin-top: var(--space-9);
    border-top: 1px solid var(--line);
    background: var(--bg);
    position: relative;
    z-index: 1;
  }
  .contact-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
  }
  .contact-pre {
    display: block;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-style: normal;
    font-size: .82rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--c-problem-1);
    margin-bottom: 14px;
  }
  .contact-title {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.8vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .contact-blurb {
    color: var(--ink-soft);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-style: normal;
    font-size: 1.05rem;
    max-width: 36ch;
  }
  .contact-blurb + .contact-blurb { margin-top: 14px; }
  .contact-blurb em { color: var(--ink); font-style: italic; }
  .contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .cf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cf-field--full { grid-column: 1 / -1; }
  .cf-field > span {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .cf-field input,
  .cf-field textarea {
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--ink);
    background: #fffaf0;
    border: 1px solid rgba(26,28,36,.22);
    border-radius: 8px;
    padding: 12px 14px;
    line-height: 1.4;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 rgba(26,28,36,.04);
    transition: border-color .6s ease, box-shadow .6s ease, background .6s ease;
  }
  .cf-field input::placeholder,
  .cf-field textarea::placeholder {
    color: rgba(26,28,36,.35);
  }
  .cf-field textarea { resize: vertical; min-height: 120px; }
  .cf-field input:focus,
  .cf-field textarea:focus {
    outline: 0;
    border-color: var(--c-problem-1);
    box-shadow: 0 0 0 3px rgba(196,81,58,.15);
  }
  .cf-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
  }
  .cf-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  /* .cf-submit kept as a marker class for the contact-form JS handler.
     Visual styling now comes from .btn-primary (apply both classes on the button). */
  .cf-status {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-style: normal;
    font-size: .92rem;
    color: var(--ink-soft);
  }
  .cf-status.is-error { color: var(--c-problem-1); font-style: normal; font-weight: 600; }
  .cf-status.is-ok    { color: var(--c-solution-1); font-style: normal; font-weight: 600; }

  @media (max-width: 820px) {
    .contact-section { padding: 60px 0 40px; }
    .contact-inner { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width: 560px) {
    .contact-form { grid-template-columns: 1fr; }
  }

  /* Contact modal */
  .contact-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 18, 14, .55);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    z-index: 250;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
  }
  .contact-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .contact-shell {
    position: relative;
    width: min(640px, 96vw);
    max-height: calc(100dvh - 48px);
    background: var(--paper);
    border-radius: 18px;
    box-shadow: 0 60px 120px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    transform: translateY(24px) scale(.97);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    display: flex;
    flex-direction: column;
  }
  .contact-backdrop.is-open .contact-shell { transform: translateY(0) scale(1); }
  .contact-shell-inner {
    padding: 36px 38px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .contact-shell .contact-form { margin-top: 22px; }
  /* Modal blurb: let it span the shell so the question reads on one line. */
  .contact-shell .contact-blurb { max-width: none; }
  .contact-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    background: rgba(20, 18, 14, .08);
    color: var(--ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .6s ease, transform .6s ease;
    z-index: 5;
  }
  .contact-close:hover { background: rgba(20, 18, 14, .18); transform: scale(1.05); }
  .contact-close svg { width: 16px; height: 16px; }
  @media (max-width: 560px) {
    .contact-shell-inner { padding: 26px 22px 26px; }
  }

  .hero-right h2 {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--c-strategy-1);
    margin-bottom: 24px;
  }
  .pillars { list-style: none; display: grid; gap: 22px; }
  .pillar {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 11px;
    padding: 22px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(26,28,36,.04), 0 12px 32px -28px rgba(26,28,36,.5);
    overflow: hidden;
  }
  .pillar .num-cell {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 1;
  }
  .pillar .num {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 2.8rem;
    line-height: 1;
    position: relative;
    z-index: 2;
    padding: 4px 6px 4px 0;
    text-shadow:
      0 0 18px rgba(255, 255, 255, 0.95),
      0 0 36px rgba(255, 255, 255, 0.75),
      0 0 60px rgba(255, 255, 255, 0.5);
  }
  .pillar .pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .pillar.p-1 .num     { color: var(--c-problem-1); }
  .pillar.p-1 .pattern {
    background: linear-gradient(135deg, rgba(196, 81, 58, 0.18) 0%, rgba(255, 255, 255, 0.65) 70%);
  }
  .pillar.p-2 .num     { color: var(--c-solution-1); }
  .pillar.p-2 .pattern {
    background: linear-gradient(135deg, rgba(62, 138, 108, 0.18) 0%, rgba(255, 255, 255, 0.65) 70%);
  }
  .pillar.p-3 .num     { color: var(--c-strategy-1); }
  .pillar.p-3 .pattern {
    background: linear-gradient(135deg, rgba(104, 85, 168, 0.18) 0%, rgba(255, 255, 255, 0.65) 70%);
  }

  .pillar .body { z-index: 1; position: relative; }
  .pillar h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -.01em;
    margin-bottom: 6px;
  }
  .pillar p {
    font-size: .98rem;
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .pillar p mark {
    background: transparent;
    font-weight: 600;
    color: var(--ink);
  }
  .pillar.p-1 p mark { color: var(--c-problem-1); }
  .pillar.p-2 p mark { color: var(--c-solution-1); }
  .pillar.p-3 p mark { color: var(--c-strategy-1); }
  .pillar h3 b {
    font-weight: 700;
  }
  .pillar.p-1 h3 b { color: var(--c-problem-1); }
  .pillar.p-2 h3 b { color: var(--c-solution-1); }
  .pillar.p-3 h3 b { color: var(--c-strategy-1); }

  /* ----- Section titles (isometric extruded) ----- */
  .iso-title-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 80px 0 32px;
    padding-left: 8px;
  }
  .iso-title-wrap.tight { margin: 24px 0 24px; }
  .iso-title-wrap {
    --iso-size: clamp(2.1rem, 3.6vw, 3.2rem);
  }
  .iso-title {
    display: inline-block;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: var(--iso-size);
    line-height: .9;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--ink);
    transform: rotate(-4deg);
    transform-origin: left top;
    text-shadow:
      1px 1px 0 #d2c8b4,
      2px 2px 0 #c6bba2,
      3px 3px 0 #baaf8e,
      4px 4px 0 #ae9f80,
      5px 5px 0 #a49475,
      6px 7px 12px rgba(26,28,36,.18);
    padding: 6px 12px 6px 6px;
    user-select: none;
  }
  .iso-title small {
    display: block;
    font-size: .68em;
    line-height: .85;
    margin-top: -.05em;
  }
  /* Plain modifier - strips tilt, 3D shadow, and uppercase for cleaner
     section titles. Sized to match brandmark--name register: Fraunces
     serif, natural case, brand red. */
  .iso-title.iso-title--plain {
    transform: none;
    text-shadow: none;
    text-transform: none;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--c-problem-1);
    padding: 0;
    white-space: nowrap;
  }
  /* Tight wrap variant: removes the heavy iso-title-wrap margins for
     section-heads where the title sits beside a blurb in a 2-col grid. */
  .iso-title-wrap.flush { margin: 0; padding-left: 0; }
  /* Single-line iso title (no stacked <small>) at 1.25× the base size. */
  .iso-title.iso-title--inline {
    font-size: calc(var(--iso-size) * 1.25);
    line-height: 1;
    white-space: nowrap;
  }

  /* ----- Tangle section ----- */
  .tangle-section {
    position: relative;
    padding: var(--space-9) 0 0;
  }
  @media (max-width: 880px) {
    .tangle-section { padding: 48px 0 36px; }
  }
  .tangle-intro {
    max-width: 60ch;
    margin: 0 auto 24px;
    text-align: center;
    color: var(--ink-soft);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.02rem;
  }
  .tangle-intro-lead-group {
    max-width: 1100px;
    margin: 1.5rem auto 24px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    text-align: left;
    align-items: start;
  }
  .tangle-intro-lead-group .tangle-intro--lead {
    margin: 0;
    padding: .55rem 28px;
    max-width: 70ch;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-style: normal;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
  }
  .tangle-intro-lead-group .tangle-intro--lead p {
    margin: 0 0 .9rem 0;
  }
  .tangle-intro-lead-group .tangle-intro--lead p:last-child {
    margin-bottom: 0;
  }
  /* Row of nine dots cycling through the Rescue / Recovery / Resilience
     brand palette. Sits below the shorter middle column for visual balance.
     Hidden on mobile (columns are stacked there, no balance issue). */
  .flourish-dots {
    display: flex;
    justify-content: center;
    gap: 11px;
    margin: 2.6rem 0 0;
  }
  .flourish-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }
  .flourish-dots span:nth-child(3n+1) { background: var(--c-problem-1); }
  .flourish-dots span:nth-child(3n+2) { background: var(--c-solution-1); }
  .flourish-dots span:nth-child(3n+3) { background: var(--c-strategy-1); }
  @media (max-width: 880px) {
    .flourish-dots { display: none; }
  }
  /* Column dividers removed per design - columns sit on the cream background. */
  .tangle-intro--visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px !important;
    position: relative;
    min-height: 360px;
  }
  .ring-stage {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 340 / 360;
    position: relative;
  }
  .ring-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Caption overlays the bottom of the canvas - clickable button that opens
     the craft-aside modal. Sits above the canvas via z-index so the cube
     animation can't intercept the click. */
  .ring-caption {
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    z-index: 2;
    margin: 0 !important;
    padding: 6px 10px;
    background: none;
    border: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(26,28,36,.55);
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: rgba(26,28,36,.3);
    text-underline-offset: 3px;
    transition: color .6s ease, text-decoration-color .6s ease;
  }
  .ring-caption:hover {
    color: var(--c-strategy-1);
    text-decoration-color: var(--c-strategy-1);
  }
  .ring-caption:focus-visible {
    outline: 2px solid var(--c-strategy-1);
    outline-offset: 3px;
  }
  @media (max-width: 880px) {
    /* Hide the iso cube animation + creativity link on mobile - too small
       to be worthwhile, and the text cols read better without the visual gap. */
    .tangle-intro--visual { display: none !important; }
  }

  /* Craft-aside modal */
  .craft-aside-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 18, 22, .55);
    opacity: 0;
    transition: opacity .6s ease;
    padding: 24px;
  }
  .craft-aside-modal[hidden] { display: none; }
  .craft-aside-modal.is-open { opacity: 1; }
  .craft-aside-sheet {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-left-width: 4px;
    border-bottom-width: 4px;
    box-shadow: -10px 10px 0 0 var(--ink);
    max-width: 520px;
    width: 100%;
    padding: 30px 32px 26px;
    font-family: 'Fraunces', serif;
    transform: translateY(8px);
    transition: transform .6s ease;
  }
  .craft-aside-modal.is-open .craft-aside-sheet { transform: translateY(0); }
  .craft-aside-sheet h3 {
    margin: 0 0 14px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
  }
  .craft-aside-sheet p {
    margin: 0 0 .85rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .craft-aside-sheet p:last-child { margin-bottom: 0; }
  .craft-aside-sheet strong { color: var(--ink); font-weight: 600; }
  .craft-aside-sheet em { color: var(--c-strategy-1); font-style: italic; font-weight: 500; }
  .craft-aside-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: 0;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-mute);
    cursor: pointer;
    padding: 6px 8px;
  }
  .craft-aside-close:hover { color: var(--c-problem-1); }
  .craft-aside-sheet { position: relative; }
  @media (max-width: 880px) {
    .tangle-intro-lead-group {
      grid-template-columns: 1fr;
      max-width: 64ch;
      text-align: left;
    }
    .tangle-intro-lead-group .tangle-intro--lead { padding: .55rem 0; max-width: 64ch; margin: 0 auto; }
  }
  .tangle-intro--lead strong { color: var(--ink); font-weight: 600; }
  .tangle-intro--lead u { text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--c-strategy-2); }
  .tangle-intro--lead em { font-style: italic; color: var(--c-strategy-1); font-weight: 500; }
  .tangle-intro--lead .tangle-warn {
    color: var(--c-problem-1);
    font-weight: 700;
  }
  .brand-laravel   { color: var(--c-problem-2);  font-weight: 700; } /* red */
  .brand-wordpress { color: var(--c-solution-2); font-weight: 700; } /* green */
  .brand-craft     { color: var(--c-strategy-1); font-weight: 700; } /* purple */
  .brand-statamic  { color: var(--ink);          font-weight: 700; } /* ink/black */
  /* Stack tag chips - alternating brand colors, white text, Fraunces,
     no border. Used on legacy-card stack lines. */
  .stack-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
  .stack-chip {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: .82rem;
    color: var(--paper);
    line-height: 1.5;
  }
  /* Chips de-coloured - neutral tone for less visual noise on featured builds */
  .stack-chip,
  .stack-chip:nth-child(3n+1),
  .stack-chip:nth-child(3n+2),
  .stack-chip:nth-child(3n+3) {
    background: var(--paper-warm, #f1ece2);
    color: var(--ink-soft, #4d4f58);
    border: 1px solid var(--line, #d8d2bf);
  }
  .tangle-intro--cta {
    font-family: 'Fraunces', serif;
    font-size: 1.18rem !important;
    padding-top: .9rem !important;
  }
  /* Col 3 now carries body text (not a sparse CTA), so it should top-align
     with col 2 - same as the rest of the grid. */
  .tangle-intro--cta-only {
    align-self: start;
  }
  .tangle-help-link {
    color: var(--c-problem-1);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 700;
    cursor: pointer;
  }
  .tangle-help-link:hover { color: var(--c-problem-2); }

  /* Flipboard title */
  .flipboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 12px auto 8px;
    max-width: 1200px;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(1.7rem, 3.6vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -.015em;
    color: var(--ink);
    text-align: center;
  }
  .flipboard .fb-char {
    display: inline-block;
    min-width: .35em;
    text-align: center;
    transform-origin: 50% 50%;
    transition: transform .6s ease, opacity .6s ease, color .6s ease;
    backface-visibility: hidden;
  }
  .flipboard .fb-char.flipping {
    color: var(--c-strategy-1);
  }
  .flipboard .fb-space { width: .35em; display: inline-block; }
  .knot-titlebar {
    position: relative;
    text-align: center;
    margin-top: 10vh;
  }
  .knot-titlebar .pre {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-style: italic;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .26em;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .why-ai-section { padding-top: 4vh; }
  .why-ai-section .knot-titlebar { margin-top: 6vh; margin-bottom: 8px; }
  /* Why-AI paragraphs: more breathing room than the default lead group. */
  .why-ai-section .tangle-intro-lead-group .tangle-intro--lead { padding: 1.1rem 0; }
  .why-ai-section .why-ai-subhead {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: center;
    margin: 1.6rem auto .4rem;
    max-width: 64ch;
  }
  /* The sub-heading visually replaces the divider, so suppress the rule on the
     paragraph that follows it. */
  .why-ai-section .why-ai-subhead + .tangle-intro--lead { border-top: 0 !important; }
  /* Static flipboard variant: same typography, no JS animation */
  .flipboard.flipboard--static { display: block; }


  /* Flip button - sits below the (lifted) canvas centre. Whole stack
     shifted up 20% of stage height to match the canvas centre text. */
  .fix-wrap {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, 0);
    margin-top: 96px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
  }
  .fix-btn {
    position: relative;
    width: 320px;
    height: 76px;
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.5, .15, .25, 1);
    will-change: transform;
    border-radius: 38px;
  }
  /* When locked: parent shows the locked colour so the 3D flip never exposes
     a transparent gap between the front and back faces. */
  .fix-wrap.is-locked .fix-btn {
    background: var(--locked-color, #c4513a);
  }
  .fix-btn.flipped { transform: rotateY(180deg); }
  .fix-btn .fix-face {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 32px;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    cursor: pointer;
    user-select: none;
    box-shadow:
      inset 0 0 0 2px var(--ink),
      0 5px 0 var(--ink),
      0 14px 22px rgba(26,28,36,.20);
  }
  /* Animatable CSS custom properties for the mesh-gradient blob centres */
  @property --mp1 { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
  @property --mp2 { syntax: '<percentage>'; inherits: false; initial-value: 82%; }
  @property --mp3 { syntax: '<percentage>'; inherits: false; initial-value: 38%; }

  .fix-btn .fix-front {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 0 18px rgba(0,0,0,.25);
    transition: transform .6s ease, background .6s ease, box-shadow .6s ease;
    overflow: hidden;
    /* Mesh: three radial gradient blobs (red/green/blue) over a base linear gradient.
       Animation moves their centres around so the mesh shifts mesmerisingly. */
    background:
      radial-gradient(120% 120% at var(--mp1, 18%) 24%, #c4513a 0%, transparent 55%),
      radial-gradient(130% 130% at var(--mp2, 82%) 78%, #3e8a6c 0%, transparent 55%),
      radial-gradient(140% 140% at 52% var(--mp3, 38%), #6855a8 0%, transparent 60%),
      linear-gradient(135deg, #c4513a, #3e8a6c, #6855a8);
    background-size: 100% 100%;
    animation: meshShift 14s ease-in-out infinite;
  }
  @keyframes meshShift {
    0%   { --mp1: 18%; --mp2: 82%; --mp3: 38%; }
    25%  { --mp1: 70%; --mp2: 30%; --mp3: 78%; }
    50%  { --mp1: 88%; --mp2: 14%; --mp3: 18%; }
    75%  { --mp1: 32%; --mp2: 64%; --mp3: 62%; }
    100% { --mp1: 18%; --mp2: 82%; --mp3: 38%; }
  }
  /* Hover: stop the mesh and adopt the same cycle colour as 'Is your stack…' */
  .fix-wrap:not(.is-locked) .fix-btn .fix-front:hover {
    background: var(--cycle-color, #c4513a);
    animation: none;
    transform: translateY(-2px);
  }
  /* Click-locked: solid background of the locked colour. Animation stops, and
     the .25s transition on .fix-front's background means it flashes cleanly
     into the locked colour before the flip is complete. */
  .fix-wrap.is-locked .fix-btn .fix-front {
    background: var(--locked-color, #c4513a);
    animation: none;
  }
  .fix-btn .fix-front:hover { transform: translateY(-2px); }
  .fix-btn .fix-front:active { transform: translateY(2px); box-shadow: none; }
  .fix-btn .fix-back {
    transform: rotateY(180deg);
    gap: 14px;
    box-shadow:
      inset 0 0 0 2px var(--c-solution-2),
      0 5px 0 var(--c-solution-2),
      0 14px 22px rgba(26,28,36,.20);
  }
  .fix-btn .fix-link {
    color: var(--ink);
    text-decoration: none;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: -.005em;
  }
  .fix-btn .fix-link:hover { color: var(--c-solution-1); }
  .fix-btn .fix-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-solution-2);
    background: transparent;
    transition: background .6s ease, color .6s ease;
  }
  .fix-btn .fix-icon:hover { background: var(--c-solution-2); color: var(--paper); }

  .fix-retangle {
    background: transparent;
    border: 0;
    padding: 4px 10px;
    margin: 0;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
    text-decoration: underline;
    text-decoration-color: rgba(26,28,36,.25);
    text-underline-offset: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease .6s, color .6s ease;
  }
  .fix-wrap.is-flipped .fix-retangle {
    opacity: .85;
    pointer-events: auto;
  }
  .fix-retangle:hover { color: var(--ink); text-decoration-color: var(--ink); }


  .tangle-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    margin-top: 28px;
    padding: 0 16px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-soft);
  }
  .tangle-legend span { display: inline-flex; align-items: center; gap: 8px; }
  .tangle-legend i {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
  }
  .tangle-legend .l-prob i { background: var(--c-problem-1); }
  .tangle-legend .l-sol i { background: var(--c-solution-1); }
  .tangle-legend .l-strat i { background: var(--c-strategy-1); }
  .tangle-legend em {
    font-style: italic; font-family: 'Fraunces', serif;
    text-transform: none; letter-spacing: 0;
    color: var(--ink-soft); font-size: .9rem;
  }

  /* ----- Project grid ----- */
  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease;
  }
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -28px rgba(26,28,36,.35);
  }
  .card-thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, var(--bg-deep), var(--paper));
  }
  .card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .card:hover .card-thumb img { transform: scale(1.04); }
  .card-thumb iframe {
    width: 200%; height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    border: 0;
    pointer-events: none;
  }
  .card-thumb .featured-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--ink);
    color: var(--paper);
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 5px 10px 6px;
    border-radius: 999px;
    font-weight: 600;
  }
  .card-cta {
    margin-top: 12px;
    align-self: flex-start;
    color: var(--c-strategy-2);
    font-family: 'Fraunces', serif;
    font-size: .95rem;
    font-style: italic;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    cursor: pointer;
    background: none;
    border-left: 0; border-right: 0; border-top: 0;
    padding-left: 0; padding-right: 0;
    transition: color .6s ease;
  }
  .card-cta::after { content: " →"; font-style: normal; transition: transform .6s ease; display: inline-block; }
  .card-cta:hover { color: var(--ink); }
  .card-cta:hover::after { transform: translateX(3px); }
  .card.is-clickable,
  .legacy-card.is-clickable { cursor: pointer; }
  .splash .splash-card-1 .card-body h3,
  .splash .splash-card-2 .card-body h3 { font-size: 1.55rem; }
  .splash .splash-card-1 .card-thumb,
  .splash .splash-card-2 .card-thumb { aspect-ratio: 16/9; }

  /* ----- Detail modal ----- */
  .modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(20, 18, 14, .55);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
  }
  .modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
  /* The HTML `hidden` attribute should hide the modal entirely. Our explicit
     `display: flex/block` was overriding that, leaving the modal-detail subtree
     rendered (and intercepting touches) even when "closed". Force display:none
     when hidden, with !important to beat any media-query display rules. */
  .modal-backdrop[hidden] { display: none !important; }
  .modal-detail[hidden]   { display: none !important; }
  .modal-nav[hidden]      { display: none !important; }
  .btn-close-mobile       { display: none; } /* shown only on mobile via @media */
  /* Give html a solid background so iOS Safari's dynamic browser UI (URL bar,
     home indicator) has something for backdrop-filter to blur behind it.
     Also kills pull-to-refresh globally - the form / modal experience never
     wants the browser bouncing the page on overscroll. */
  html {
    background: var(--bg);
    min-height: 100%;
    min-height: 100dvh;
    overscroll-behavior-y: none;
  }
  body { overscroll-behavior-y: none; }
  /* Scroll lock when any modal is open. We deliberately AVOID position:fixed on
     body - iOS Safari has a long-standing bug where children with overflow:auto
     inside a position:fixed ancestor refuse touch-driven scroll. Instead lock
     overflow on <html> so the page can't scroll, while leaving body in normal
     flow so its descendants (the modal) scroll normally. */
  html.modal-open,
  html.modal-open body {
    overflow: hidden;
    height: 100%;
    height: 100dvh;
  }
  html.modal-open body { overscroll-behavior: none; }
  body.modal-open main { filter: blur(2px) brightness(.85); transition: filter .6s ease; }
  /* Modal scroll containers: contain their own scroll, never chain to body */
  .modal-body,
  .contact-shell-inner,
  .modal-media .media-side {
    overscroll-behavior: contain;
  }

  .modal-detail {
    position: relative;
    width: min(1180px, 96vw);
    max-height: 92vh;
    background: var(--paper);
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    box-shadow: 0 60px 120px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    transform: translateY(24px) scale(.97);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .modal-backdrop.is-open .modal-detail { transform: translateY(0) scale(1); }

  /* Long-form (project) layout: body 60% on the left, footnote panel 40% on the right */
  .modal-backdrop.is-project .modal-detail { grid-template-columns: 3fr 2fr; }
  .modal-backdrop.is-project .modal-body  { grid-column: 1; grid-row: 1; }
  .modal-backdrop.is-project .modal-media { grid-column: 2; grid-row: 1; }

  .modal-media {
    background: #0c0d11;
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    flex-direction: column;
  }
  .modal-media .media-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
  }
  .modal-media .media-stage video,
  .modal-media .media-stage img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .modal-media .media-stage.fit-contain {
    background: #0c0d11;
  }
  .modal-media .media-stage.fit-contain video,
  .modal-media .media-stage.fit-contain img {
    object-fit: contain;
  }
  .modal-media .media-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(12,13,17,.35);
    transition: opacity .6s ease;
    z-index: 4;
  }
  .modal-media .media-loader.is-done { opacity: 0; }
  .modal-media .media-loader-svg {
    width: 84px; height: 84px;
  }
  .modal-media .media-loader-track {
    fill: rgba(0,0,0,.28);
    stroke: rgba(255,255,255,.18);
    stroke-width: 3;
  }
  .modal-media .media-loader-arc {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 88 176;          /* ~half circumference visible */
    transform-origin: 32px 32px;
    animation: media-loader-spin 1.1s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.5));
  }
  .modal-media .media-loader-play {
    fill: #fff;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  }
  @keyframes media-loader-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .modal-media .media-empty {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.45);
    font-family: 'Fraunces', serif;
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    font-style: italic;
    letter-spacing: -.01em;
    padding: 40px;
    text-align: center;
    background: linear-gradient(135deg, #1f2230, #14161e);
  }

  .modal-media .media-side {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #1c1f2a 0%, #14161e 60%, #0f1117 100%);
    color: #e8e2d3;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
  }
  .modal-media .media-side-inner {
    margin: auto 0;
    padding: clamp(28px, 4vw, 44px);
    width: 100%;
  }
  .modal-media .media-side-kicker {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 1.7vw, 1.55rem);
    line-height: 1.2;
    color: #f6efe1;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(246,239,225,.14);
    letter-spacing: -.005em;
  }
  .modal-media .media-side-kicker::before {
    content: 'A footnote';
    display: block;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .26em;
    color: var(--c-strategy-3);
    margin-bottom: 10px;
    opacity: .8;
  }
  .modal-media .media-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .modal-media .media-side-list li {
    position: relative;
    padding-left: 22px;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(232, 226, 211, .82);
  }
  .modal-media .media-side-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .65em;
    width: 12px;
    height: 1px;
    background: var(--c-strategy-3);
    opacity: .85;
  }
  @media (max-width: 820px) {
    .modal-media .media-side { padding: 4px; }
    .modal-media .media-side-inner { padding: 22px 22px 28px; }
    .modal-media .media-side-list li { font-size: .88rem; }
  }
  .media-thumb-strip {
    flex: 0 0 auto;
    position: relative;
    background: var(--paper);
    border-top: 1px solid rgba(0,0,0,.06);
    display: flex;
    align-items: stretch;
  }
  .media-thumb-scroller {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    min-width: 0;
  }
  /* Prev/next nav arrows - hidden on desktop where the strip wraps freely. */
  .media-thumb-nav {
    display: none;
    border: 0;
    background: transparent;
    padding: 0 6px;
    cursor: pointer;
    color: var(--ink);
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
  }
  .media-thumb-nav svg { width: 22px; height: 22px; }
  .media-thumb-nav:hover { color: var(--c-strategy-2); }
  @media (max-width: 820px) {
    /* Mobile: single horizontal row, scrollable, with explicit nav arrows. */
    .media-thumb-scroller {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 8px 4px;
      gap: 8px;
    }
    .media-thumb-scroller::-webkit-scrollbar { display: none; }
    .media-thumb {
      flex: 0 0 28%;
      max-width: 28%;
      scroll-snap-align: center;
    }
    .media-thumb-nav { display: flex; }
  }
  .media-thumb {
    flex: 1 1 calc(33.333% - 7px);
    max-width: calc(33.333% - 7px);
    aspect-ratio: 16 / 10;
    border: 0;
    padding: 0;
    background: #1a1b1f;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    opacity: .85;
    transition: opacity .6s ease, transform .6s ease, box-shadow .6s ease;
  }
  .media-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .media-thumb span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
    padding: 5px 4px 6px;
    background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.7));
    text-align: center;
    line-height: 1;
  }
  .media-thumb:hover { opacity: 1; transform: translateY(-1px); }
  .media-thumb.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--c-strategy-2);
  }
  .modal-body {
    padding: 38px 42px 32px;
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 16px;
  }
  .modal-body .meta-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .modal-body .meta-tags .tag {
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-strategy-2);
    background: rgba(104, 85, 168, .08);
    padding: 4px 10px 5px;
    border-radius: 999px;
  }
  .modal-body h2 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .modal-body .lede {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.45;
  }
  .modal-body .section-h {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 4px;
  }
  .modal-body p { font-size: .95rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }
  /* When the rich-content divs contain stacked paragraphs / lists, give
     them breathing room with explicit spacing. */
  .modal-body #detailLong p,
  .modal-body #detailWhy p { margin: 0 0 14px; }
  .modal-body #detailLong p:last-child,
  .modal-body #detailWhy p:last-child { margin-bottom: 0; }
  .modal-body #detailLong > p + ul,
  .modal-body #detailLong > ul + p { margin-top: 0; }
  .modal-body #detailLong strong,
  .modal-body #detailWhy strong { color: var(--ink); font-weight: 600; }
  .modal-body #detailLong em,
  .modal-body #detailWhy em {
    font-style: italic;
    color: var(--c-problem-1);
    font-weight: 500;
    font-family: 'Fraunces', serif;
  }
  /* Lists rendered inside the modal body (from .long innerHTML, or side panel). */
  .modal-body ul,
  .modal-body ol {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px;
  }
  .modal-body ul li,
  .modal-body ol li {
    position: relative;
    padding-left: 24px;
    font-size: .88rem;
    color: #333;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 9px;
  }
  .modal-body ul li:last-child,
  .modal-body ol li:last-child { margin-bottom: 0; }
  .modal-body ul li::before,
  .modal-body ol li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.75em - 6px); /* vertical-centre on first line */
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--c-problem-1);
  }
  .modal-body ul li:nth-child(3n+2)::before,
  .modal-body ol li:nth-child(3n+2)::before { background: var(--c-solution-1); }
  .modal-body ul li:nth-child(3n+3)::before,
  .modal-body ol li:nth-child(3n+3)::before { background: var(--c-strategy-1); }
  .modal-actions {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    border: 0;
    cursor: pointer;
    transition: transform .6s ease, background .6s ease;
  }
  .btn-demo:hover { background: var(--c-strategy-1); transform: translateY(-1px); }
  .btn-demo svg { width: 16px; height: 16px; }
  .modal-actions .source-link {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .85rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1px;
  }
  .modal-actions .source-link:hover { color: var(--ink); }

  .modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 38px; height: 38px;
    background: rgba(20, 18, 14, .55);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 5;
    transition: background .6s ease, transform .6s ease;
  }
  .modal-close:hover { background: rgba(20, 18, 14, .85); transform: scale(1.05); }
  .modal-close svg { width: 16px; height: 16px; }

  .modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.55);
    transition: background .6s ease, transform .6s ease;
    z-index: 4;
  }
  .modal-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
  .modal-nav svg { width: 22px; height: 22px; }
  .modal-nav--prev { left: 24px; }
  .modal-nav--next { right: 24px; }
  @media (max-width: 820px) {
    .modal-nav { width: 42px; height: 42px; }
    .modal-nav--prev { left: 8px; }
    .modal-nav--next { right: 8px; }
  }

  @media (max-width: 820px) {
    /* MOBILE STRATEGY: modal becomes part of normal body flow so the native
       page scroll handles it. Other body children are hidden, the modal's
       backdrop becomes a static full-width container, and the modal-detail
       is a natural-height block element. iOS scrolls this perfectly because
       there's no nested overflow:auto / position:fixed combo to confuse. */
    body.modal-open > main,
    body.modal-open > footer,
    body.modal-open > .iso-bg,
    body.modal-open > .clients-wall-section,
    body.modal-open > .contact-section {
      display: none !important;
    }
    /* .contact-backdrop deliberately NOT in the hide list - it might BE the
       active modal. Its [hidden] attribute handles its own visibility. */
    body.modal-open {
      position: static !important;
      height: auto !important;
      overflow: visible !important;
      width: auto !important;
    }
    html.modal-open {
      overflow: visible !important;
      height: auto !important;
    }
    .modal-backdrop {
      position: static !important;
      inset: auto !important;
      padding: 12px !important;
      display: block !important;
      width: 100% !important;
      background: var(--bg) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transition: none !important;
    }
    .modal-backdrop[hidden] { display: none !important; }
    .modal-detail {
      position: static !important;
      width: 100% !important;
      max-width: none !important;
      max-height: none !important;
      height: auto !important;
      margin: 0 auto !important;
      display: block !important;
      overflow: visible !important;
      background: var(--paper);
      border-radius: 12px;
      transform: none !important;
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
    }
    /* Project modals: flex column inside the body-flow modal so we can keep
       header-image vs footnote-bottom ordering working with `order` property. */
    .modal-backdrop.is-project .modal-detail {
      display: flex !important;
      flex-direction: column !important;
    }
    .modal-backdrop.is-project.has-thumb .modal-media { order: 0 !important; }
    .modal-backdrop.is-project.has-thumb .modal-body  { order: 1 !important; }
    .modal-backdrop.is-project.has-side  .modal-body  { order: 0 !important; }
    .modal-backdrop.is-project.has-side  .modal-media { order: 1 !important; }
    /* Modal actions on mobile: always show inline Close button. For html-in-
       canvas demos (which need Chrome's experimental flag and won't run on
       iPhone), also hide "See live demo" + "Open in new tab" - they go nowhere
       useful for the user. Other demos keep the launch buttons. */
    .btn-close-mobile {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      font: inherit;
      font-weight: 600;
      background: var(--ink);
      color: var(--paper);
      border: 0;
      padding: 14px 26px;
      border-radius: 10px;
      cursor: pointer;
    }
    .btn-close-mobile:hover { background: var(--c-problem-1); }
    .modal-backdrop.is-html-in-canvas .modal-actions .btn-demo,
    .modal-backdrop.is-html-in-canvas .modal-actions .source-link {
      display: none !important;
    }

    /* Prev / next / close all fixed to viewport edges so they stay visible while
       the user scrolls through the modal. */
    .modal-nav {
      display: flex !important;
      position: fixed !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 44px !important;
      height: 44px !important;
      background: rgba(20, 18, 14, .82) !important;
      color: #fff !important;
      border-radius: 50% !important;
      box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
      z-index: 200 !important;
    }
    .modal-nav--prev { left: 8px !important; right: auto !important; }
    .modal-nav--next { right: 8px !important; left: auto !important; }
    .modal-nav svg { width: 22px; height: 22px; color: #fff; }
    .modal-nav:hover, .modal-nav:active { background: rgba(20, 18, 14, .95) !important; }

    /* Close button: always visible, top-right of viewport, 1.5× larger than nav */
    .modal-close {
      position: fixed !important;
      top: max(12px, env(safe-area-inset-top)) !important;
      right: 12px !important;
      width: 66px !important;
      height: 66px !important;
      background: rgba(20, 18, 14, .82) !important;
      color: #fff !important;
      border-radius: 50% !important;
      box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
      z-index: 200 !important;
    }
    .modal-close svg { width: 26px !important; height: 26px !important; color: #fff; }
    .modal-close:hover, .modal-close:active { background: rgba(20, 18, 14, .95) !important; }
    .modal-media {
      width: 100%;
      max-height: 38vh;
      min-height: 0;
      overflow: hidden;
    }
    .modal-body {
      padding: 22px 22px 26px;
      overflow: visible;
      min-height: 0;
    }

    /* Long-form (project) modals on mobile: same .modal-detail scrollport,
       just with body/footnote stacked column-wise via flex order. */
    .modal-backdrop.is-project .modal-detail {
      display: flex;
      flex-direction: column;
    }
    .modal-backdrop.is-project .modal-body {
      padding: 22px 22px 18px;
      overflow: visible;
      min-height: 0;
      flex: 0 0 auto;
    }
    .modal-backdrop.is-project .modal-media {
      max-height: none;
      min-height: 0;
      overflow: visible;
      flex: 0 0 auto;
    }
    .modal-backdrop.is-project.has-thumb .modal-media { order: 0; }
    .modal-backdrop.is-project.has-thumb .modal-body  { order: 1; }
    .modal-backdrop.is-project.has-thumb .modal-media img,
    .modal-backdrop.is-project.has-thumb .modal-media video {
      width: 100%;
      height: auto;
      max-height: 38vh;
      object-fit: cover;
      display: block;
    }
    .modal-backdrop.is-project.has-side  .modal-body  { order: 0; }
    .modal-backdrop.is-project.has-side  .modal-media { order: 1; }
    .modal-backdrop.is-project .modal-media .media-side {
      overflow: visible;
      height: auto;
    }
  }

  /* ----- Live demo modal ----- */
  .demo-frame-backdrop {
    position: fixed; inset: 0;
    background: rgba(8, 7, 5, .92);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
  }
  .demo-frame-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .demo-frame-shell {
    position: relative;
    width: min(85vw, 1600px);
    height: calc(100vh - 88px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: scale(.96);
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
  }
  .demo-frame-backdrop.is-open .demo-frame-shell { transform: scale(1); }
  .demo-frame-shell .frame-clip {
    flex: 1;
    min-height: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 60px 120px rgba(0,0,0,.6);
  }
  .demo-frame-shell iframe {
    width: 100%; height: 100%;
    border: 0;
    display: block;
    background: #fff;
  }
  .demo-frame-close {
    position: absolute;
    top: -48px; right: 0;
    background: #fff;
    color: var(--ink);
    border: 0;
    border-radius: 8px;
    padding: 9px 16px 10px 14px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: background .6s ease;
  }
  .demo-frame-close:hover { background: #f4eee2; }
  .demo-frame-close svg { width: 14px; height: 14px; }
  .demo-frame-bar {
    position: absolute;
    top: -42px; left: 2px;
    color: rgba(255,255,255,.7);
    font-size: .82rem;
    display: flex; align-items: center; gap: 10px;
  }
  .demo-frame-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #6ed086; box-shadow: 0 0 8px rgba(110,208,134,.6); }
  /* While the live demo is open: drop the underlying blur of the detail modal,
     and visually eclipse the detail modal so its backdrop doesn't compound. */
  body.demo-frame-open main { filter: none; }
  .modal-backdrop.is-eclipsed { opacity: 0; pointer-events: none; transition: opacity .6s ease; }
  @media (max-width: 720px) {
    /* Demo iframe goes EDGE-TO-EDGE on mobile - covers top notch + bottom home
       indicator areas. Close button floats over the iframe, large + clear. */
    .demo-frame-backdrop {
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
    }
    .demo-frame-shell {
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      max-height: none !important;
      max-width: none !important;
      margin: 0 !important;
      transform: none !important;
    }
    .demo-frame-shell .frame-clip {
      border-radius: 0 !important;
      box-shadow: none !important;
      width: 100%;
      height: 100%;
    }
    .demo-frame-bar { display: none !important; }
    .demo-frame-close {
      position: fixed !important;
      top: max(12px, env(safe-area-inset-top)) !important;
      right: 12px !important;
      width: auto !important;
      height: auto !important;
      padding: 12px 18px 13px !important;
      font-size: .95rem !important;
      font-weight: 700 !important;
      background: rgba(20, 18, 14, .92) !important;
      color: #fff !important;
      border-radius: 999px !important;
      box-shadow: 0 6px 18px rgba(0,0,0,.45) !important;
      z-index: 300 !important;
    }
    .demo-frame-close svg {
      width: 18px !important;
      height: 18px !important;
      color: #fff;
    }
    .demo-frame-close:hover { background: rgba(20, 18, 14, .98) !important; }
  }
  .card-thumb.text-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 24px;
    font-family: 'Fraunces', serif;
  }
  .card-thumb .big-letter {
    font-size: 6rem;
    font-weight: 900;
    line-height: .8;
    color: var(--ink);
    opacity: .92;
  }

  .card-body {
    padding: 18px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }
  .card-body h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -.01em;
  }
  .card-body p { font-size: .92rem; color: var(--ink-soft); }
  .card-body .tag {
    margin-top: 8px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c-solution-2);
  }
  /* Agency-skills repositioning: lowercase, sentence-case for legibility,
     subtle 'Agency skills:' label as visual prefix */
  .card-body .tag.agency-skills-tag {
    text-transform: none;
    letter-spacing: 0;
    font-size: .82rem;
    color: var(--ink-soft);
    font-family: 'IBM Plex Sans', sans-serif;
  }
  .agency-skills-label {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 2px 8px 3px;
    background: var(--c-strategy-2, #6855a8);
    color: var(--paper, #faf6ec);
    border-radius: 999px;
    margin-right: 8px;
    vertical-align: 2px;
  }
  /* Inline pill for "Agency:" prefix on case-study card titles + project_type variants */
  .agency-label {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 3px 9px 4px;
    background: var(--c-strategy-2, #6855a8);
    color: var(--paper, #faf6ec);
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: 4px;
  }
  /* NDA label - orange/rust bg, white text. Stacks inline alongside agency-label. */
  .nda-label {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 3px 9px 4px;
    background: var(--c-problem-1, #c4513a);
    color: #fff;
    border-radius: 999px;
    margin-right: 6px;
    vertical-align: 4px;
  }
  /* Sitewide: agency NAME (the bit after "Agency:") gets brand-red italic
     so it visually reads as a named entity, not part of the headline. */
  .agency-name {
    color: var(--c-problem-1, #c4513a);
    font-style: italic;
  }
  /* Project-type tag - subtler than the agency-label pill; used for "Agency project" badge
     on cards where the agency isn't the headline but the relationship is worth flagging */
  .project-type-tag {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 3px 9px 4px;
    background: var(--c-strategy-2-soft, #ddd5ef);
    color: var(--c-strategy-2, #6855a8);
    border-radius: 3px;
    margin-bottom: 8px;
    border: 1px solid rgba(104, 85, 168, 0.18);
  }
  /* Skill chip - individual rectangular tag for agency-skills items on experiment cards */
  .skill-chip {
    display: inline-block;
    background: var(--paper-warm, #f1ece2);
    color: var(--ink, #1a1c24);
    padding: 3px 9px 4px;
    border-radius: 3px;
    border: 1px solid var(--line, #d8d2bf);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 4px;
  }
  .agency-skills-line {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    color: var(--ink-soft);
  }
  .agency-skills-line .agency-skills-label {
    display: inline-block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 2px 8px 3px;
    background: var(--c-strategy-2, #6855a8);
    color: var(--paper, #faf6ec);
    border-radius: 3px;
    margin-right: 6px;
  }

  .section-blurb {
    max-width: 65ch;
    margin: -32px 0 40px;
    color: var(--ink-soft);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.05rem;
  }
  /* Splash row: title/blurb top, then 2 spotlight cards, then 3-col grid */
  .splash {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    gap: 24px;
    margin: 80px 0 24px;
    padding-left: 8px;
  }
  .splash .splash-title {
    grid-column: span 2;
    grid-row: 1;
    align-self: start;
    padding-top: 0;
  }
  .splash .splash-title .iso-title-wrap {
    margin: 0;
    padding-left: 0;
    overflow: visible;
  }
  .splash .splash-blurb {
    grid-column: span 4;
    grid-row: 1;
    align-self: start;
    margin-top: 8px;
    color: var(--ink-soft);
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 1.05rem;
    max-width: 65ch;
  }
  .splash .splash-card-1, .splash .splash-card-2 {
    grid-column: span 3;
    grid-row: 2;
  }
  .splash .splash-card-2 { grid-column: 4 / span 3; }
  @media (max-width: 880px){
    .splash { grid-template-columns: 1fr 1fr; }
    .splash .splash-title { grid-column: 1 / -1; grid-row: auto; }
    .splash .splash-blurb { grid-column: 1 / -1; grid-row: auto; margin-top: 18px; }
    .splash .splash-card-1, .splash .splash-card-2 { grid-column: span 1; grid-row: auto; }
    .splash .splash-card-2 { grid-column: 2 / span 1; }
  }
  @media (max-width: 560px){
    .splash { grid-template-columns: 1fr; }
    .splash .splash-card-1, .splash .splash-card-2 { grid-column: 1 / -1; grid-row: auto; }
  }

  /* ----- Hero featured pair (case study + experiment, above the clients wall) ----- */
  .hero-pair-section {
    margin: 56px auto 60px;
    max-width: 1180px;
  }
  .hero-pair-heading {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 24px;
    color: var(--ink);
  }
  .hero-pair-heading em {
    font-style: italic;
    color: var(--c-problem-1);
    font-weight: 800;
  }
  .hero-pair-heading em + em { color: var(--c-strategy-1); }
  .hero-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .hero-pair-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 0 rgba(26,28,36,.06), 0 14px 32px -22px rgba(26,28,36,.6);
    transition: transform .6s ease, box-shadow .6s ease, border-color .6s ease;
  }
  .hero-pair-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-problem-1);
    box-shadow: 0 1px 0 rgba(26,28,36,.06), 0 22px 44px -22px rgba(26,28,36,.75);
  }
  .hero-pair-card .hpc-thumb {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: top center;
    background-color: var(--bg-deep);
    position: relative;
    overflow: hidden;
  }
  .hero-pair-card .hpc-thumb .card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
  }
  .hero-pair-card:hover .hpc-thumb .card-video[src] { opacity: 1; }
  .hero-pair-card .hpc-body {
    padding: 24px 28px 28px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .hero-pair-card h2 {
    font-family: 'Fraunces', serif; font-weight: 800;
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    line-height: 1.08; letter-spacing: -0.02em; margin: 0;
  }
  .hero-pair-card h2 .arr { color: var(--c-problem-1); font-weight: 700; }
  .hero-pair-experiment h2 .arr { color: var(--c-strategy-1); }
  .hero-pair-card .hpc-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    color: var(--ink-soft); margin: 0; font-size: 1rem; font-weight: 500;
  }
  .hero-pair-card .hpc-blurb {
    margin: 4px 0 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.55;
  }
  .hero-pair-card .hpc-link {
    margin-top: auto;
    padding-top: 8px;
    font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
    color: var(--c-problem-1);
    font-size: 1rem;
  }
  .hero-pair-experiment .hpc-link { color: var(--c-strategy-1); }
  .hero-pair-card:hover .hpc-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  @media (max-width: 880px) {
    .hero-pair-section { margin: 40px auto 40px; }
    .hero-pair { grid-template-columns: 1fr; gap: 18px; }
  }

  /* ----- Recent Rescues header ----- */
  .about-bridge[hidden] { display: none !important; }
  .about-bridge {
    max-width: 920px;
    margin: 90px auto 90px;
    padding: 18px 26px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-radius: 0;
    box-shadow: -8px 8px 0 0 var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: transform .6s ease, box-shadow .6s ease;
  }
  .about-bridge:hover {
    transform: translate(-2px, 2px);
    box-shadow: -4px 4px 0 0 var(--ink);
  }
  .about-bridge p {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.4;
  }
  .about-bridge .btn-secondary { flex-shrink: 0; }
  @media (max-width: 760px) {
    .about-bridge {
      margin: 60px 8px 0;
      padding: 18px 20px;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      box-shadow: -5px 5px 0 0 var(--ink);
    }
    .about-bridge p { font-size: .98rem; }
  }
  .recent-rescues-section { margin: var(--space-9) auto 0; }
  .recent-rescues-head { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: 32px; align-items: start; margin-bottom: 36px; }
  /* Section-head variant where the right-hand blurb has been replaced by a
     short sub-heading. Keeps the 2-col grid; vertically centres the sub
     against the iso-title; right-aligns the sub copy on desktop. */
  .recent-rescues-head--subbed { align-items: center; }
  .iso-subhead {
    margin: 0;
    padding: 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.18rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink);
    text-align: right;
    margin-left: auto;
  }
  @media (max-width: 760px) {
    .iso-subhead {
      text-align: left;
      margin-left: 0;
      margin-top: 8px;
    }
    .recent-rescues-head--subbed { align-items: start; }
  }
  .recent-rescues-head .splash-blurb {
    margin: 0;
    padding: 0;
    max-width: 70ch;
    margin-left: auto;
    text-align: right;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink);
  }
  /* Featured Builds blurb: red mark on the load-bearing phrase. */
  .recent-rescues-section .recent-rescues-head .splash-blurb mark {
    background: transparent;
    color: var(--c-problem-1);
    font-weight: 600;
  }
  /* Experiments: title in brand green; blurb gets a green mark instead of yellow. */
  .experiments-home .iso-title.iso-title--plain { color: var(--c-solution-1); }
  .experiments-home .recent-rescues-head .splash-blurb mark {
    background: transparent;
    color: var(--c-solution-1);
    font-weight: 600;
  }
  @media (max-width: 760px) {
    .recent-rescues-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
    .recent-rescues-section { margin: 24px auto 40px; }
  }

  /* ----- Frontier card video hover ----- */
  .card .card-thumb { position: relative; overflow: hidden; }
  .card .card-thumb .card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
    z-index: 1;
    background: #000;
  }
  .card:hover .card-thumb .card-video { opacity: 1; }
  .card .card-thumb .featured-badge { z-index: 3; }
  .card .card-thumb img { position: relative; z-index: 0; }
  @media (hover: none) {
    .card .card-thumb .card-video { display: none; }
  }

  /* ----- How we'd work together ----- */
  .how-we-work-section { margin: 90px auto 80px; padding: 0 24px; max-width: 1200px; }
  .how-title { text-align: center; margin-bottom: 48px; }
  .how-title .pre {
    display: block;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute, var(--ink-soft));
    margin-bottom: 10px;
  }
  .how-title h2 { font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0; letter-spacing: -0.01em; }
  .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .how-card {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-radius: 0;
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    box-shadow: -8px 8px 0 0 var(--ink);
    transition: transform .6s ease, box-shadow .6s ease;
  }
  .how-card:hover {
    transform: translate(-2px, 2px);
    box-shadow: -4px 4px 0 0 var(--ink);
  }
  .how-card h3 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: 1.3rem;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .how-card p { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0; }
  .how-card p strong { font-weight: 700; }
  .how-card p em { font-style: italic; color: var(--ink-soft, var(--ink)); }
  .how-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--paper);
    background: var(--ink);
    padding: 9px 16px;
    text-decoration: none;
    margin-top: 4px;
    transition: transform .6s ease;
  }
  .how-cta:hover { transform: translateY(-1px); }
  @media (max-width: 760px) {
    .how-grid { grid-template-columns: 1fr; gap: 24px; }
    .how-we-work-section { margin: 60px auto 50px; padding: 0 20px; }
    .how-card { box-shadow: -5px 5px 0 0 var(--ink); }
  }

  /* ----- Legacy grid ----- */
  .legacy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .legacy-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .legacy-card--link {
    text-decoration: none;
    color: inherit;
    transition: transform .6s ease, box-shadow .6s ease, border-color .6s ease;
  }
  .legacy-card--link:hover {
    transform: translateY(-2px);
    border-color: var(--c-problem-1);
    box-shadow: 0 14px 32px -22px rgba(26,28,36,.6);
  }
  .legacy-blurb {
    margin: 6px 0 10px;
    font-size: .92rem;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .card-subtitle {
    margin: 4px 0 8px;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.3;
  }
  /* "View all →" link row below a section grid (uses .link-arrow) */
  .section-cta-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
  }
  .card--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
  }
  .experiments-home {
    margin: var(--space-9) auto 0;
  }
  .experiments-home .grid-3 {
    margin-top: 24px;
  }
  .services-teaser {
    width: 60%;
    max-width: 700px;
    margin: calc(var(--space-9) * 1.5) auto;
    /* Fixed padding instead of 10% - CSS % padding resolves against the
       *parent's* width, which on ultrawide viewports made the inner area
       collapse to ~186px and broke text wrapping. */
    padding: 32px 56px 30px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-radius: 0;
    box-shadow: -8px 8px 0 0 var(--ink);
    transition: transform .6s ease, box-shadow .6s ease;
  }
  .services-teaser:hover {
    transform: translate(-2px, 2px);
    box-shadow: -4px 4px 0 0 var(--ink);
  }
  .services-teaser-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
  .services-teaser h2 {
    font-family: 'Fraunces', serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--ink);
  }
  /* Inline headline for the two-stack focus - replaces the older
     services-teaser-quadrants 2x2 grid. */
  .services-teaser-headline {
    margin: 4px auto;
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
  }
  .services-teaser-headline .brand-laravel,
  .services-teaser-headline .brand-wordpress {
    font-weight: 800;
  }
  .services-teaser p {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
    font-size: 1rem;
  }
  .services-teaser .btn-secondary { margin-top: 6px; }
  @media (max-width: 760px) {
    .services-teaser { width: auto; max-width: none; margin-left: 8px; margin-right: 8px; padding: 24px 22px 22px; box-shadow: -5px 5px 0 0 var(--ink); }
  }
  .legacy-thumb {
    aspect-ratio: 16/5;            /* half the original height */
    background-color: var(--bg-deep);
    position: relative;
    overflow: hidden;
  }
  /* a rotated, brand-tinted slice of the thumbnail — decorative, not representational */
  .legacy-thumb--slice .legacy-thumb__slice {
    position: absolute;
    left: -25%; right: -25%; top: -75%; bottom: -75%;
    background-size: cover;
    background-position: center;
    transform: rotate(-15deg);
    filter: grayscale(1) contrast(1.05);
  }
  .legacy-thumb--slice::after {
    content: "";
    position: absolute; inset: 0;
    mix-blend-mode: multiply;
    opacity: .85;
    background: #c4513a;            /* red */
  }
  .legacy-grid > .legacy-card:nth-child(3n+2) .legacy-thumb--slice::after { background: #3e8a6c; } /* green */
  .legacy-grid > .legacy-card:nth-child(3n+3) .legacy-thumb--slice::after { background: #2e5c8a; } /* blue */
  .legacy-thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 28px;
    text-align: center;
    color: var(--paper);
    font-family: 'Fraunces', serif;
  }
  /* Icon stand-in when a featured case study has no thumbnail. Mirrors the
     listing-page placeholder: centred FA glyph on a rotating brand colour. */
  .legacy-thumb--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-problem-1);
  }
  .legacy-grid > .legacy-card:nth-child(3n+2) .legacy-thumb--icon { background: var(--c-solution-1); }
  .legacy-grid > .legacy-card:nth-child(3n+3) .legacy-thumb--icon { background: var(--c-strategy-1); }
  .legacy-thumb--icon .legacy-ph-icon {
    height: clamp(3.4rem, 8vw, 4.6rem);
    width: auto;
    color: var(--paper);
    filter: drop-shadow(0 6px 11px rgba(0, 0, 0, .28));
  }
  .legacy-thumb .legacy-mark {
    font-weight: 900;
    font-size: 3.6rem;
    line-height: .9;
    letter-spacing: -.03em;
  }
  .legacy-thumb .legacy-sub {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-top: 10px;
    opacity: .85;
    font-family: 'IBM Plex Sans', sans-serif;
  }

  .gradient-a { background: linear-gradient(135deg, #1a3a52, #3d6e8a); }
  .gradient-b { background: linear-gradient(135deg, #5d3a52, #8e5a7a); }
  .gradient-c { background: linear-gradient(135deg, #3a5a3d, #6e9272); }
  .gradient-d { background: linear-gradient(135deg, #4a3a2a, #8a6e52); }
  .gradient-e { background: linear-gradient(135deg, #2a3a4a, #5a6e88); }
  .gradient-f { background: linear-gradient(135deg, #4d2e3e, #7a4d68); }
  .gradient-g { background: linear-gradient(135deg, #3e4d2e, #6e8a4d); }
  .gradient-h { background: linear-gradient(135deg, #2e3e4d, #4d6e8a); }
  .gradient-i { background: linear-gradient(135deg, #4d3a3a, #8a6e6e); }

  /* (legacy-thumb is now a short decorative brand-tinted slice — see .legacy-thumb--slice above) */
  .legacy-body {
    padding: 18px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .legacy-readmore {
    align-self: flex-end;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: var(--text-sm, .8rem);
    font-weight: 600;
    color: #fff;
    background: var(--c-problem-1, #c4513a);
    border: 1px solid transparent;
    border-radius: 2px;        /* unified button radius */
    padding: 7px 13px 9px;      /* small variant: 2px taller, text nudged up 1px */
    transition: background .6s ease, transform .6s ease;
  }
  .legacy-card--link:hover .legacy-readmore { background: var(--c-problem-2, #a8412e); }
  .legacy-body h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.15rem;
  }
  .legacy-body h3 .card-aside {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
    font-size: .72rem;
    color: var(--ink-fade);
    display: inline-block;
    margin-left: 4px;
    letter-spacing: 0;
    text-transform: none;
  }
  .legacy-body p {
    font-size: .9rem;
    color: var(--ink-soft);
    margin-top: 4px;
  }
  .legacy-body .stack {
    margin-top: 10px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--c-strategy-1);
  }
  /* Labels (NDA / Agency / project-type) on their own row above the title - matches listing cards. */
  .legacy-body .title-labels { display: block; margin: 0 0 7px; }
  .legacy-body .title-text { display: block; }

  /* ----- Footer ----- */
  footer {
    margin: 120px 0 0;
    padding: 60px 40px;
    background: var(--ink);
    color: var(--bg);
  }
  footer .wrap {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
  }
  footer .mark {
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: -.02em;
  }
  footer .contact {
    display: flex; gap: 28px; flex-wrap: wrap;
    font-size: .92rem;
  }
  footer a { color: var(--bg); text-decoration: none; border-bottom: 1px solid rgba(241,236,226,.3); }
  footer a:hover { border-color: var(--bg); }

  @media (max-width: 980px) {
    .hero {
      grid-template-columns: 1fr;
      gap: 36px;
      padding-top: 0;
      min-height: 0;
      height: auto;
    }
    .grid-3, .legacy-grid { grid-template-columns: repeat(2, 1fr); }
    .iso-title { font-size: clamp(2.0rem, 9vw, 3.2rem); }
    .wrap { padding: 32px 20px; }
    .brandmark { font-size: clamp(3.2rem, 16vw, 6.4rem); margin-left: 4px; }
    .tagline { font-size: 1.1rem; }
    .meta { gap: 8px; flex-wrap: wrap; }
    .meta span { padding: 6px 10px; font-size: .72rem; }
    .pillars { gap: 14px; }
    .pillar { grid-template-columns: 78px 1fr; gap: 8px; padding: 18px 18px; }
    .pillar .num { font-size: 2.2rem; }
    .pillar .pattern { width: 78px; }
  }
  @media (max-width: 720px) {
    .grid-3, .legacy-grid { grid-template-columns: 1fr; gap: 18px; }
    .how-grid { grid-template-columns: 1fr !important; }
    .splash { gap: 18px; margin: 56px 0 18px; }
    .splash .splash-title { grid-column: 1 / -1; grid-row: auto; }
    .splash .splash-blurb { grid-column: 1 / -1; grid-row: auto; margin-top: 18px; }
    /* Fix it button -25% on mobile (was 320×76, now 240×57) */
    .fix-btn { width: 240px; height: 57px; border-radius: 28.5px; }
    .fix-btn .fix-front { font-size: 1.3rem; }
    .flipboard { font-size: clamp(1.3rem, 5.4vw, 2rem); }
    .knot-titlebar .pre { font-size: .78rem; letter-spacing: .2em; }
    footer { padding: 40px 20px; }
    footer .wrap { padding: 0 20px; }
    footer .contact { gap: 16px; font-size: .85rem; }
  }
  @media (max-width: 460px) {
    .brandmark { font-size: clamp(2.6rem, 16vw, 4.6rem); margin-left: 0; }
    .brandmark .word { text-shadow:
      -1px 1px 0 var(--c-problem-1),
      -2px 2px 0 var(--c-problem-1),
      -3px 3px 0 var(--c-problem-1),
      -4px 4px 0 var(--c-problem-1),
      -5px 5px 0 var(--c-problem-1),
      -6px 6px 0 var(--c-problem-1); }
    .brandmark .word .hi { text-shadow:
      -1px 1px 0 #1a1c24,
      -2px 2px 0 #1a1c24,
      -3px 3px 0 #1a1c24,
      -4px 4px 0 #1a1c24,
      -5px 5px 0 #1a1c24,
      -6px 6px 0 #1a1c24; }
    .tagline { font-size: 1rem; max-width: none; }
    .iso-title-wrap { --iso-size: clamp(1.6rem, 7vw, 2.4rem); }
    .pillar { grid-template-columns: 64px 1fr; padding: 14px 14px; }
    .pillar .pattern { width: 64px; }
    .pillar .num { font-size: 2rem; }
    .legacy-thumb .legacy-mark { font-size: 2.6rem; }
    .meta span { font-size: .68rem; padding: 5px 9px; }
  }

  /* ===== Agencies struggle with... (problems + striped numbered 3-step fix process) ===== */
  .pains { --num:56px; max-width: var(--wrap,1180px); margin: var(--space-9) auto 0; padding: 0 0 8px; }
  .pains-head { text-align:center; font-family:'Fraunces',serif; font-weight:800; font-size:var(--h2); letter-spacing:-.02em; color:var(--ink); margin:0 0 40px; }
  .pain-band { display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 20px; }
  .pain-band--fix { margin:32px 0 10px; }
  .band-label { position:relative; font-family:'Bebas Neue','IBM Plex Sans',sans-serif; font-weight:400; font-size:clamp(2.1rem,4.6vw,3rem); line-height:1; letter-spacing:.05em; text-transform:uppercase; color:var(--c-problem-1); }
  .band-label::after { content:""; position:absolute; left:-2px; right:-2px; bottom:-11px; height:.30em; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,3 60,10 95,5 S 150,9 198,6' stroke='%23c4513a' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }
  .band-dots { display:inline-flex; gap:7px; }
  .band-dots i { width:7px; height:7px; border-radius:50%; background:var(--c-problem-1); display:block; }
  .pain-band--fix .band-label { color:var(--c-solution-1); }
  .pain-band--fix .band-label::after { background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C30,3 60,10 95,5 S 150,9 198,6' stroke='%233e8a6c' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }
  .pain-band--fix .band-dots i { background:var(--c-solution-1); }
  .pains-note { text-align:center; font-family:'IBM Plex Sans',system-ui,sans-serif; font-style:italic; font-size:.85rem; color:var(--ink-fade); margin:-6px 0 24px; }
  .prow { display:grid; grid-template-columns:var(--num) repeat(3,1fr) var(--num); column-gap:38px; align-items:start; }
  .prow--problems > .pain-cell:nth-child(1){ grid-column:2; }
  .prow--problems > .pain-cell:nth-child(2){ grid-column:3; }
  .prow--problems > .pain-cell:nth-child(3){ grid-column:4; }
  .pain-cell { text-align:center; }
  .pain-title { font-family:'Fraunces',serif; font-weight:700; font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.18; color:var(--ink); margin:0 0 10px; }
  .pain-problem em { font-style:italic; font-weight:700; color:var(--ink); }
  .pain-problem strong { font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; color:var(--ink); }
  .pain-problem { font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif; font-size:.98rem; line-height:1.55; color:var(--ink-soft); margin:0; }
  .fix-steps { margin-top:4px; }
  .fix-step { display:grid; grid-template-columns:var(--num) repeat(3,1fr) var(--num); column-gap:38px; align-items:start; padding:22px 0; }
  .fix-step--shade { background:rgba(26,28,36,.045); }
  .fix-num { grid-column:1; justify-self:center; width:40px; height:40px; border-radius:50%; color:var(--paper); font-family:'Bebas Neue','Fraunces',sans-serif; font-weight:400; font-size:1.65rem; line-height:1; display:flex; align-items:center; justify-content:center; }
  .fix-num--r { background:var(--c-problem-1); }
  .fix-num--g { background:var(--c-solution-1); }
  .fix-num--b { background:#2e5c8a; }
  .fix-cell { text-align:center; font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif; font-size:.98rem; line-height:1.55; color:var(--ink-soft); }
  .fix-cell .hl-r { color:var(--c-problem-1); font-weight:700; }
  .fix-cell .hl-g { color:var(--c-solution-1); font-weight:700; }
  .fix-cell .hl-b { color:#2e5c8a; font-weight:700; }
  .pas-mobile { display:none; }
  @media (max-width:760px){
    .pains { margin-top:48px; }
    /* Hide the desktop matrix; show the problem-major stack instead. */
    .prow--problems, .pain-band--fix, .fix-steps { display:none; }
    .pain-band { justify-content:center; }
    .pas-mobile { display:block; margin-top:8px; }
    .pm-tale { background:var(--paper); border:1px solid rgba(26,28,36,.12); border-left:4px solid var(--ink); border-radius:8px; padding:20px 18px; margin-bottom:18px; box-shadow:-4px 4px 0 0 rgba(26,28,36,.09); }
    .pm-tale:last-child { margin-bottom:0; }
    .pm-tale--r { border-left-color:var(--c-problem-1); }
    .pm-tale--g { border-left-color:var(--c-solution-1); }
    .pm-tale--b { border-left-color:#2e5c8a; }
    .pm-tale .pain-title { text-align:left; margin:0 0 8px; }
    .pm-tale .pain-problem { text-align:left; margin:0 0 16px; padding-bottom:14px; border-bottom:1px dashed rgba(26,28,36,.16); }
    .pm-fix-label { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:1.28rem; font-weight:700; color:var(--c-solution-1); margin:0 0 10px; }
    .pm-fix { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
    .pm-fix li { display:flex; align-items:flex-start; gap:13px; font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif; font-size:.96rem; line-height:1.5; color:var(--ink-soft); }
    .pm-num { flex:0 0 auto; width:27px; height:27px; border-radius:50%; color:var(--paper); font-family:'Bebas Neue','Fraunces',sans-serif; font-weight:400; font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center; margin-top:1px; }
    .pm-num--r { background:var(--c-problem-1); }
    .pm-num--g { background:var(--c-solution-1); }
    .pm-num--b { background:#2e5c8a; }
    .pm-fix-text { flex:1; }
    .pm-fix .hl-r { color:var(--c-problem-1); font-weight:700; }
    .pm-fix .hl-g { color:var(--c-solution-1); font-weight:700; }
    .pm-fix .hl-b { color:#2e5c8a; font-weight:700; }
  }

  /* ===== Interactive "here's how they work" demos (CMS-admin styled) ===== */
  .demos { margin: var(--space-9) auto; }
  .demos-head { text-align:center; margin-bottom:var(--space-7); }
  .demos-title { font-family:'Fraunces',serif; font-weight:800; font-size:var(--h2); letter-spacing:-.02em; color:var(--ink); margin:0 0 var(--space-3); }
  /* intro matches the demo copy below (same colour + size) */
  .demos-sub { font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--ink-soft); font-size:1.02rem; line-height:1.6; max-width:60ch; margin:0 auto; }
  .demos-note { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.76rem; color:var(--ink-mute); opacity:.8; margin:7px 0 0; }
  /* 140px between demos */
  #demo-validate { margin-bottom:140px; }
  .demos-more .demo { margin-bottom:140px; }
  .demos-more .demo:last-child { margin-bottom:0; }
  /* contact CTA at the foot of the demos */
  .demos-contact { text-align:center; margin-top:90px; padding-top:32px; border-top:1px solid #e6e1d6; }
  .demos-contact-text { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:1.02rem; color:var(--ink-soft); margin:0 0 16px; }
  .demo { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; margin:0 0 14px; }
  .demo-copy h3 { font-family:'Fraunces',serif; font-weight:700; font-size:clamp(1.3rem,2.4vw,1.75rem); letter-spacing:-.015em; color:var(--ink); margin:0 0 12px; }
  .demo-copy p { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:1.02rem; line-height:1.6; color:var(--ink-soft); margin:0; max-width:46ch; }
  @media (max-width:760px){ .demo { grid-template-columns:1fr; gap:22px; } }

  .demo-stage { display:flex; justify-content:center; }
  /* compact CMS card; blends with the page, white inputs */
  .cms-card { width:344px; max-width:100%; background:var(--paper); border:1px solid #e3dfd2; border-radius:9px; box-shadow:0 1px 2px rgba(26,28,36,.04), 0 7px 20px rgba(26,28,36,.06); font-family:'IBM Plex Sans',system-ui,sans-serif; }
  .cms-card.shake { animation:cms-shake .42s ease; }
  @keyframes cms-shake { 0%,100%{transform:translateY(0)} 18%{transform:translateY(-5px)} 38%{transform:translateY(4px)} 58%{transform:translateY(-3px)} 78%{transform:translateY(2px)} }
  .cms-card-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px 7px 11px; background:#f0ebdf; border-bottom:1px solid #e6e1d6; border-radius:9px 9px 0 0; }
  .cms-bar-left { display:flex; align-items:center; gap:7px; min-width:0; }
  .cms-card-title { font-weight:600; font-size:.78rem; color:var(--ink); white-space:nowrap; }
  .cms-body { padding:12px 12px 4px; display:flex; flex-direction:column; gap:10px; }
  .cms-field { display:flex; flex-direction:column; gap:4px; }
  .cms-field > label { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); }
  .cms-input { font:inherit; font-size:.84rem; color:var(--ink); background:#fff; border:1px solid #d4cfc3; border-radius:6px; padding:7px 10px; width:100%; outline:none; transition: border-color .6s, box-shadow .6s, background .6s; }
  .cms-input::placeholder { color:#b6b1a5; }
  .cms-input:focus { border-color:#2e5c8a; box-shadow:0 0 0 3px rgba(46,92,138,.16); }
  .cms-input.err { border-color:#c4513a; border-width:2px; padding:6px 9px; background:#fdf1ee; }
  .cms-input.err:focus { box-shadow:0 0 0 3px rgba(196,81,58,.20); }

  /* bespoke editable fields (contenteditable, not <input> → password managers + browser autofill have nothing to attach to) */
  .cms-bespoke { display:flex; align-items:center; font:inherit; font-size:.84rem; color:var(--ink); background:#fff; border:1px solid #d4cfc3; border-radius:6px; padding:7px 10px; width:100%; cursor:text; transition: border-color .6s, box-shadow .6s, background .6s; will-change:transform; backface-visibility:hidden; }
  .cms-bespoke:focus-within, .cms-bespoke.demo-focus { border-color:#2e5c8a; box-shadow:0 0 0 3px rgba(46,92,138,.16); }
  .cms-bespoke.err { border-color:#c4513a; border-width:2px; padding:6px 9px; background:#fdf1ee; }
  .cms-bespoke.err:focus-within { box-shadow:0 0 0 3px rgba(196,81,58,.20); }
  .cms-bespoke.nudge { animation:cms-nudge .3s ease; }
  /* warehouse exact-match → renders as a 'valid' tag; reverts to plain text the instant it's edited */
  .cms-bespoke.valid { border-color:#3f7d4f; background:#f1f8f2; }
  .cms-bespoke.valid:focus-within { border-color:#3f7d4f; box-shadow:0 0 0 3px rgba(63,125,79,.18); }
  .cms-bespoke.valid .cms-edit { color:#235a31; font-weight:600; }
  .cms-bespoke.valid::after { content:'\2713 valid'; margin-left:8px; flex:none; font-size:.62rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#3f7d4f; background:#dcefe0; border:1px solid #b9dcc1; border-radius:3px; padding:2px 6px; font-family:'IBM Plex Sans',system-ui,sans-serif; }
  .cms-prefix { color:var(--ink-mute); user-select:none; -webkit-user-select:none; white-space:pre; }
  .cms-edit { flex:1 1 auto; min-width:0; outline:none; white-space:pre; overflow:hidden; caret-color:#2e5c8a; }
  .cms-edit:empty::before { content:attr(data-placeholder); color:#b6b1a5; pointer-events:none; }
  .cms-foot { display:flex; align-items:center; gap:10px; min-height:22px; }
  .cms-err { font-size:.72rem; font-weight:600; color:#c4513a; font-family:'IBM Plex Sans',system-ui,sans-serif; }
  .cms-msgs { display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-width:0; }
  .cms-err-line { font-size:.72rem; font-weight:600; color:#c4513a; font-family:'IBM Plex Sans',system-ui,sans-serif; line-height:1.3; }
  .cms-hint-line { font-size:.72rem; color:var(--ink-mute); font-family:'IBM Plex Sans',system-ui,sans-serif; line-height:1.3; }

  /* attention-tag base (counter + header error tag) */
  .cms-tag { display:inline-flex; align-items:center; font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.72rem; font-weight:600; line-height:1; color:var(--ink-soft); background:#eceadf; border:1px solid #e0dccf; border-radius:20px; padding:4px 9px; white-space:nowrap; transition: background .6s, color .6s, box-shadow .6s, transform .6s; font-variant-numeric:tabular-nums; transform-origin:center; will-change:transform; backface-visibility:hidden; }
  .cms-tag[hidden] { display:none; }
  .cms-count { margin-left:auto; min-width:62px; justify-content:flex-end; }
  .cms-tag.flash { box-shadow:0 0 0 4px rgba(46,92,138,.18); }
  .cms-tag.over { color:#fff; background:#c4513a; border-color:#c4513a; }
  .cms-tag.over.flash { box-shadow:0 0 0 4px rgba(196,81,58,.24); }
  .cms-tag.pulse { animation:cms-pulse .36s ease; }
  @keyframes cms-pulse { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
  .cms-errtag { font-weight:700; color:#fff; background:#c4513a; border-color:#c4513a; font-size:.65rem; padding:3px 8px; }
  .cms-errtag.shakex { animation:cms-shakex .42s ease; }
  @keyframes cms-shakex { 0%,100%{transform:translateX(0)} 16%{transform:translateX(-6px)} 33%{transform:translateX(6px)} 50%{transform:translateX(-6px)} 66%{transform:translateX(6px)} 83%{transform:translateX(-3px)} }

  /* status badge */
  .cms-status { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:0; border-radius:20px; padding:4px 9px; }
  .cms-status.is-draft { color:#8a6d1e; background:#f1e4c0; }
  .cms-status.is-published { color:#1f6b4d; background:#cdeede; }

  /* publish button */
  .cms-publish-row { display:flex; justify-content:flex-end; padding:6px 12px 13px; }
  .cms-publish-wrap { position:relative; display:inline-flex; }
  .cms-publish { font:inherit; font-size:.8rem; font-weight:600; color:#fff; background:#2e5c8a; border:0; border-radius:7px; padding:7px 16px 9px; cursor:pointer; transition: background .6s, transform .6s; transform-origin:center; will-change:transform; backface-visibility:hidden; }
  .cms-publish:hover { background:#264e76; }
  .cms-publish:active { transform:translateY(1px); }
  .cms-publish[disabled] { cursor:default; }
  .cms-publish.done { background:#3e8a6c; animation:cms-pop .42s ease; }
  @keyframes cms-pop { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }
  .cms-spinner { position:absolute; top:50%; right:100%; margin-right:9px; margin-top:-8px; width:15px; height:15px; border-radius:50%; border:2px solid rgba(46,92,138,.25); border-top-color:#2e5c8a; animation:cms-spin .6s linear infinite; }
  .cms-spinner[hidden] { display:none; }
  @keyframes cms-spin { to { transform:rotate(360deg); } }

  /* subtle per-field nudge on error (no container shake) */
  .cms-input.nudge { animation:cms-nudge .3s ease; }
  @keyframes cms-nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 55%{transform:translateX(2px)} 80%{transform:translateX(-1px)} }

  /* combobox */
  .cms-combo-wrap { position:relative; }
  .cms-menu { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:6; background:#fff; border:1px solid #d4cfc3; border-radius:6px; box-shadow:0 12px 28px rgba(26,28,36,.16); max-height:160px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
  .cms-opt { display:block; width:100%; text-align:left; font:inherit; font-size:.82rem; color:var(--ink); background:none; border:0; padding:7px 10px; cursor:pointer; }
  .cms-opt:hover { background:#eef3f8; }
  .cms-none { padding:9px 10px; font-size:.82rem; font-weight:600; color:#c4513a; }

  /* full-page blur publish modal */
  .cms-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(26,28,36,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:cms-fade .18s ease; }
  .cms-modal[hidden] { display:none; }
  @keyframes cms-fade { from{opacity:0} to{opacity:1} }
  .cms-modal-dialog { background:#fff; border-radius:12px; box-shadow:0 24px 60px rgba(26,28,36,.32); padding:26px 28px 22px; max-width:380px; width:100%; text-align:center; }
  .cms-modal-q { font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; color:var(--ink); margin:0 0 18px; }
  .cms-modal-actions { display:flex; gap:10px; justify-content:center; }
  .cms-btn { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.88rem; font-weight:600; border-radius:8px; padding:9px 18px; cursor:pointer; border:1px solid transparent; }
  .cms-btn-yes { color:#fff; background:#3e8a6c; } .cms-btn-yes:hover { background:#347a5e; }
  .cms-btn-no { color:var(--ink-soft); background:#fff; border-color:#d4cfc3; } .cms-btn-no:hover { background:#f4f1ea; }

  /* JS tooltip */
  .cms-tip { position:fixed; z-index:10000; background:var(--ink); color:#faf6ec; font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.74rem; font-weight:500; padding:6px 10px; border-radius:6px; box-shadow:0 6px 18px rgba(26,28,36,.28); pointer-events:none; opacity:0; transform:translateY(3px); transition: opacity .6s, transform .6s; white-space:nowrap; }
  .cms-tip.show { opacity:1; transform:translateY(0); }
  .cms-tip::after { content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ink); border-bottom:0; }

  /* status badge — previous (amber) tag design */
  .cms-card-tag { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#8a6d1e; background:#f1e4c0; padding:3px 9px; border-radius:20px; white-space:nowrap; }
  .cms-card-tag.is-published { color:#1f6b4d; background:#cdeede; }

  /* counter colour states: <10 red, 10-39 green, 40+ red-filled (.over) */
  .cms-tag.short { color:#c4513a; }
  .cms-tag.ok { color:#3e8a6c; }

  /* static (non-editable) field display, used in placeholder demos */
  .cms-static { display:flex; align-items:center; color:var(--ink-soft); background:#fbf9f3; }

  /* activity log (demo 2 placeholder) */
  .cms-logbox { margin:0 12px 12px; border:1px solid #e6e1d6; border-radius:7px; background:#fbf9f3; }
  .cms-log-head { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); padding:7px 10px 3px; }
  .cms-loglist { list-style:none; margin:0; padding:0 10px 8px; }
  .cms-loglist li { display:flex; align-items:center; gap:8px; font-size:.73rem; color:var(--ink-soft); padding:4px 0; }
  .cms-log-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
  .cms-log-time { margin-left:auto; font-size:.66rem; color:var(--ink-mute); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

  /* mini layout grid (demo 3 placeholder) */
  .cms-gridmini { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,15px); gap:5px; margin-bottom:4px; }
  .cms-block { background:#eef3f8; border:1px solid #d6e0ea; border-radius:4px; font-size:.6rem; font-weight:600; color:#2e5c8a; display:flex; align-items:center; justify-content:center; }

  /* progressive "see more" reveal */
  .demos-list { position:relative; }
  .demos-more { overflow:hidden; max-height:210px; position:relative; transition: max-height .6s cubic-bezier(.4,0,.2,1); }
  .demos-more.open { max-height:3200px; }
  .demos-more:not(.open)::after { content:""; position:absolute; inset:80px 0 0 0; z-index:7; background:linear-gradient(to bottom, rgba(241,236,226,0) 0, var(--bg) 76%); pointer-events:none; }
  /* while clipped, the auto-playing warehouse dropdown must not poke through the fade */
  .demos-more:not(.open) .cms-menu { display:none !important; }
  .demos-revealer { display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; background:none; border:0; cursor:pointer; padding:6px 0 0; color:var(--ink-soft); font-family:'IBM Plex Sans',system-ui,sans-serif; transition: color .6s; }
  .demos-revealer.gone { display:none; }
  .demos-revealer:hover { color:var(--ink); }
  .dr-row { display:flex; align-items:center; gap:13px; font-size:.92rem; font-weight:600; }
  .dr-dash { display:block; width:30px; height:0; border-top:1.5px solid #cfc9bc; }
  .dr-arrow { font-size:1.05rem; line-height:1; animation:dr-bounce 1.5s ease-in-out infinite; }
  @keyframes dr-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
  .demos-revealer:hover .dr-arrow { color:var(--c-problem-1,#c4513a); }

  /* ===== Wide demos (2-4) ===== */
  .demo-wide { display:block; margin:0 0 30px; }
  .demo-wide > .demo-copy { max-width:none; margin:0 0 18px; }
  .demo-wide > .demo-copy h3 { margin-bottom:8px; }
  .demo-wide > .demo-copy p { max-width:62ch; }
  .demo-stage--wide { display:block; }
  .cms-card--wide { width:100%; max-width:none; }
  /* 60/40 split (card | copy) — used by Demo 2 */
  .demo-split { display:grid; grid-template-columns:60% 40%; gap:clamp(24px,4vw,52px); align-items:center; margin:0 0 30px; }
  .demo-split > .demo-copy { max-width:none; }
  @media (max-width:860px) { .demo-split { grid-template-columns:1fr; gap:22px; } }

  /* Demo 2 — relational drill-down */
  .rel-card { position:relative; overflow:hidden; min-height:368px; }
  .rel-root { padding:16px 18px 18px; transition: background .6s; }
  .rel-root.dim { background:#e7e1d4; }
  .rel-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 22px; margin:0 0 16px; }
  .rel-fields--stack { grid-template-columns:1fr; gap:14px; }
  .rel-fld { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .rel-fld dt { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); margin:0; }
  .rel-fld dd { margin:0; font-size:.92rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
  .rel-section-label { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); margin:0 0 9px; }
  .rel-row { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fbf9f3; border:1px solid #e6e1d6; border-radius:9px; padding:12px 14px; cursor:pointer; font:inherit; transition: background .6s, border-color .6s, transform .6s; margin-bottom:9px; }
  .rel-row:hover { background:#f4eee2; border-color:#d9d3c4; }
  .rel-row:active { transform:translateY(1px); }
  .rel-row-k { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-mute); min-width:78px; }
  .rel-row-v { flex:1 1 auto; font-size:.92rem; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rel-chev { color:var(--ink-mute); font-size:1.15rem; line-height:1; }
  /* drawers slide over from the right, stacking with a breadcrumb */
  .rel-drawer { position:absolute; inset:0 0 0 auto; width:min(90%,460px); background:#fff; border-left:1px solid #e6e1d6; box-shadow:-20px 0 46px rgba(26,28,36,.12); transform:translateX(100%); transition: transform .6s cubic-bezier(.4,0,.2,1), filter .6s; display:flex; flex-direction:column; z-index:2; }
  .rel-drawer.in { transform:translateX(0); }
  .rel-drawer.under { transform:translateX(-6%); filter:brightness(.975); }
  .rel-drawer-bar { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #ece7db; background:#f7f4ed; }
  .rel-back { background:none; border:0; cursor:pointer; font-size:.82rem; font-weight:600; color:var(--ink-soft); padding:3px 7px; border-radius:6px; }
  .rel-back:hover { background:#ece7db; }
  .rel-crumb { font-size:.72rem; color:var(--ink-mute); }
  .rel-crumb b { color:var(--ink); font-weight:700; }
  .rel-close { margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-mute); font-size:1.2rem; line-height:1; padding:0 4px; }
  .rel-close:hover { color:var(--ink); }
  .rel-drawer-body { padding:15px 15px 17px; overflow-y:auto; }
  /* breadcrumb (clickable) */
  .rel-crumb-b { font:inherit; font-size:.72rem; color:var(--ink-mute); background:none; border:0; cursor:pointer; padding:2px 4px; border-radius:4px; }
  .rel-crumb-b:hover { color:var(--ink); background:#ece7db; }
  .rel-crumb-b.cur { color:var(--ink); font-weight:700; cursor:default; }
  .rel-crumb-b.cur:hover { background:none; }
  .rel-crumb-sep { color:var(--ink-mute); font-size:.72rem; margin:0 1px; }
  /* inline edit: always-present subtle input, fixed width, "Edit" link → tick */
  .rel-edit { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .rel-inp { display:inline-flex; align-items:center; width:178px; max-width:100%; border:1px solid #e0dbcd; background:#faf8f2; border-radius:6px; padding:5px 9px; cursor:text; transition: border-color .6s, box-shadow .6s, background .6s; }
  .rel-inp.active { border-color:#2e5c8a; background:#fff; box-shadow:0 0 0 3px rgba(46,92,138,.16); }
  .rel-inp.err { border-color:#c4513a; box-shadow:0 0 0 3px rgba(196,81,58,.18); }
  .rel-inp.saved { border-color:#3e8a6c; box-shadow:0 0 0 3px rgba(62,138,108,.18); }
  .rel-inp-prefix { color:var(--ink-mute); font-weight:600; font-size:.9rem; margin-right:2px; user-select:none; }
  .rel-inp-val { font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.5; outline:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; }
  .rel-inp-val[contenteditable="true"] { text-overflow:clip; }
  .rel-edit-link { font:inherit; font-size:.72rem; font-weight:600; color:#2e5c8a; background:none; border:0; cursor:pointer; padding:2px 5px; border-radius:5px; }
  .rel-edit-link:hover { background:#eaf0f6; }
  .rel-edit-link.is-tick { color:#3e8a6c; font-size:.95rem; line-height:1; }
  .rel-edit-err { font-size:.7rem; font-weight:600; color:#c4513a; flex-basis:100%; }
  /* deep-edit: save (tick) + revert buttons, spinner, success pulse */
  .rel-actions { display:inline-flex; align-items:center; gap:5px; transition: opacity .6s; }
  .rel-actions.fading { opacity:0; }
  .rel-save, .rel-revert { font:inherit; font-size:.98rem; line-height:1; background:none; border:0; cursor:pointer; padding:3px 6px; border-radius:5px; }
  .rel-save { color:#3e8a6c; } .rel-save:hover { background:#e3f1ea; }
  .rel-revert { color:var(--ink-mute); } .rel-revert:hover { background:#ece7db; color:var(--ink); }
  .rel-save[disabled], .rel-revert[disabled] { opacity:.45; cursor:default; }
  .rel-spin { display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid rgba(46,92,138,.25); border-top-color:#2e5c8a; animation:cms-spin .6s linear infinite; }
  .rel-spin[hidden] { display:none; }
  .rel-inp.pulse { animation:cms-pop .42s ease; }

  /* Demo 3 — data → design bridge */
  .bridge-card { padding:0; overflow:hidden; }
  .bridge-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; }
  .bridge-pane { display:flex; flex-direction:column; min-width:0; }
  .bridge-pane-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:8px 14px; border-bottom:1px solid #ece7db; background:#f7f4ed; }
  .bridge-pane-title { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-mute); }
  .bridge-insert { position:relative; }
  .bridge-insert-btn { font:inherit; font-size:.72rem; font-weight:600; color:#2e5c8a; background:#eaf0f6; border:1px solid #d3e0ec; border-radius:6px; padding:4px 10px; cursor:pointer; }
  .bridge-insert-btn:hover { background:#dde8f2; }
  .bridge-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:8; width:300px; background:#fff; border:1px solid #d9d3c4; border-radius:9px; box-shadow:0 16px 40px rgba(26,28,36,.18); padding:6px; max-height:268px; overflow:auto; }
  .bridge-menu[hidden] { display:none; }
  .bridge-menu-grp { font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-mute); padding:8px 8px 3px; }
  .bridge-menu-item { display:flex; align-items:baseline; justify-content:space-between; gap:10px; width:100%; text-align:left; background:none; border:0; border-radius:6px; padding:6px 8px; cursor:pointer; font:inherit; }
  .bridge-menu-item:hover { background:#eef3f8; }
  .bridge-mi-label { font-size:.84rem; color:var(--ink); white-space:nowrap; }
  .bridge-mi-path { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.66rem; color:var(--ink-mute); white-space:nowrap; }
  .bridge-edit { padding:18px 16px; min-height:170px; font-size:.98rem; line-height:2.2; color:var(--ink-soft); outline:none; }
  .tok { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78em; color:#2e5c8a; background:#eaf0f6; border:1px solid #d3e0ec; border-radius:5px; padding:2px 4px; white-space:nowrap; cursor:default; }
  .tok::before { content:'{ '; opacity:.45; }
  .tok::after { content:' }'; opacity:.45; }
  .tok.hl { background:#2e5c8a; color:#fff; border-color:#2e5c8a; }
  .bridge-arrow { display:flex; align-items:center; justify-content:center; padding:0 8px; border-left:1px solid #ece7db; border-right:1px solid #ece7db; background:#fbf9f3; }
  .bridge-arrow::before { content:'\2192'; font-size:1.4rem; color:#b6b1a5; }
  .bridge-rec { display:inline-flex; gap:3px; background:#efeadf; border-radius:7px; padding:3px; }
  .bridge-rec-btn { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.66rem; font-weight:600; color:var(--ink-soft); background:none; border:0; border-radius:5px; padding:4px 8px; cursor:pointer; }
  .bridge-rec-btn.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .bridge-out { padding:18px 18px 20px; min-height:170px; }
  .bridge-out-doc { font-family:'Fraunces',serif; font-size:1.12rem; line-height:1.8; color:var(--ink); }
  .tok-val { background:#fff6cf; border-bottom:2px solid #e8c95a; border-radius:2px 2px 0 0; padding:0 3px; transition: background .6s; }
  .tok-val.hl { background:#ffe48f; }
  .bridge-out.flash .tok-val { animation:tok-pop .6s ease; }
  @keyframes tok-pop { 0% { background:#cdeede; } 100% { background:#fff6cf; } }
  @media (max-width:820px) { .bridge-grid { grid-template-columns:1fr; } .bridge-arrow { display:none; } .bridge-pane:first-child { border-bottom:1px solid #ece7db; } }

  /* Demo 4 — PII encryption with a remote key store */
  .crypto-card { padding:0; overflow:hidden; position:relative; }
  .crypto-cols { display:grid; grid-template-columns:1fr 1fr 1fr; }
  .crypto-col { padding:16px 16px 18px; border-right:1px solid #ece7db; transition: background .6s; }
  .crypto-col:last-child { border-right:0; }
  .crypto-col.active { background:#f1f6fb; }
  .crypto-col-h { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-mute); margin-bottom:13px; }
  .crypto-flabel { display:flex; align-items:center; gap:7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem; color:var(--ink-soft); margin-bottom:6px; }
  .pii-badge { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.55rem; font-weight:700; letter-spacing:.05em; color:#c4513a; background:#f7e0da; border-radius:4px; padding:1px 5px; }
  .crypto-fval { font-size:.9rem; font-weight:600; color:var(--ink); background:#fff; border:1px solid #e0dbcd; border-radius:7px; padding:8px 10px; word-break:break-all; transition: color .6s, background .6s; }
  .crypto-fval.is-cipher { color:var(--ink-mute); font-weight:500; font-style:italic; background:#f4f1ea; }
  .crypto-chip { display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:.72rem; font-weight:600; color:#2e5c8a; background:#eaf0f6; border:1px dashed #b9cde0; border-radius:7px; padding:5px 9px; }
  .crypto-chip[hidden] { display:none; }
  .crypto-kv { display:flex; flex-direction:column; gap:3px; margin-bottom:13px; }
  .crypto-kv > span { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; color:var(--ink-mute); }
  .crypto-kv code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:var(--ink); background:#f4f1ea; border-radius:5px; padding:6px 8px; word-break:break-all; min-height:1.7em; }
  .crypto-master { display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:#f1ece0; border:1px solid #e0d9c8; border-radius:9px; padding:13px; transition: background .6s, opacity .6s; }
  .crypto-master .km-ic { font-size:1.5rem; }
  .crypto-master .km-tx { font-weight:700; font-size:.86rem; color:var(--ink); }
  .crypto-master small { font-size:.65rem; color:var(--ink-mute); }
  .crypto-master.revoked { background:#f7e7e3; border-color:#e3b3a8; }
  .crypto-master.revoked .km-ic { filter:grayscale(1); opacity:.6; }
  .crypto-master.revoked .km-tx::after { content:' — revoked'; color:#c4513a; font-weight:700; }
  .crypto-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid #ece7db; background:#f7f4ed; }
  .crypto-status { font-size:.82rem; line-height:1.4; color:var(--ink-soft); flex:1 1 240px; min-width:0; }
  .crypto-status.is-ok { color:#2c6a4f; font-weight:600; }
  .crypto-status.is-danger { color:#b23b27; font-weight:600; }
  .crypto-actions { display:flex; gap:8px; }
  .crypto-btn { font:inherit; font-size:.78rem; font-weight:600; color:#fff; background:#2e5c8a; border:0; border-radius:7px; padding:7px 14px; cursor:pointer; }
  .crypto-btn:hover { background:#264e76; }
  .crypto-btn--ghost { color:#2e5c8a; background:#eaf0f6; border:1px solid #d3e0ec; }
  .crypto-btn--ghost:hover { background:#dde8f2; }
  .crypto-btn--danger { color:#b23b27; background:#f7e0da; border:1px solid #e6c2b8; }
  .crypto-btn--danger:hover { background:#f1d2c9; }
  .crypto-packets { position:absolute; inset:0; pointer-events:none; z-index:5; }
  .crypto-packet { position:absolute; font-size:.68rem; font-weight:600; color:var(--ink); background:#fff; border:1px solid #d9d3c4; border-radius:14px; padding:3px 9px; box-shadow:0 6px 16px rgba(26,28,36,.18); white-space:nowrap; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s; }
  .crypto-packet.dek { color:#2e5c8a; border-color:#bcd0e4; }
  .crypto-packet.wrap { color:#7a5a1e; border-color:#e3d3a8; }
  .crypto-card.shake { animation:cms-shake .42s ease; }
  @media (max-width:760px) { .crypto-cols { grid-template-columns:1fr; } .crypto-col { border-right:0; border-bottom:1px solid #ece7db; } }

  /* ===== Demo 3: centered copy (50%) + card below (80%) ===== */
  .demo-stack { display:block; margin:0 0 140px; }
  .demo-stack > .demo-copy { width:50%; min-width:300px; max-width:680px; margin:0 auto 28px; text-align:center; }
  .demo-stack > .demo-copy p { max-width:none; }
  .demo-stack > .demo-stage { width:80%; max-width:1000px; margin:0 auto; }
  @media (max-width:900px) { .demo-stack > .demo-copy, .demo-stack > .demo-stage { width:auto; } }
  /* rendering-context field (moved into the editor column) */
  .bridge-ctxfield { margin:0 12px 12px; padding:10px 12px 12px; background:#faf8f2; border:1px solid #ece7db; border-radius:8px; }
  .bridge-ctxfield .bridge-if-h { margin-bottom:8px; }
  .bridge-ctxfield .bridge-dd-btn { width:100%; justify-content:space-between; }
  .bridge-ctxfield .bridge-dd, .bridge-ctxfield .bridge-dd-menu { width:100%; }
  .bridge-ctxfield .bridge-dd-menu { left:0; right:0; min-width:0; }
  /* editor formatting toolbar + blinking caret */
  .bridge-mdbar { display:flex; align-items:center; gap:2px; margin:12px 12px 0; padding:5px 6px; background:#f3efe6; border:1px solid #e0dbcd; border-bottom:0; border-radius:8px 8px 0 0; }
  .bridge-mdbar button { font:inherit; font-size:.82rem; min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft); background:none; border:0; border-radius:5px; cursor:pointer; padding:0 7px; }
  .bridge-mdbar button:hover { background:#e6e1d6; color:var(--ink); }
  .bridge-mdsep { width:1px; height:16px; background:#d9d3c4; margin:0 4px; }
  .bridge-edit { margin:0 12px 12px; border-top:0; border-radius:0 0 8px 8px; }
  .bridge-caret { display:inline-block; width:2px; height:1.05em; background:var(--ink); margin-left:1px; vertical-align:text-bottom; animation:bridge-blink 1.05s step-end infinite; }
  @keyframes bridge-blink { 0%,100% { opacity:1; } 50% { opacity:0; } }

  /* ===== Demo 3 rework: 40/60 split (copy left), top bar, image field, layouts ===== */
  .demo-split2 { display:grid; grid-template-columns:40% 60%; gap:clamp(24px,4vw,52px); align-items:center; margin:0 0 140px; }
  .demo-split2 > .demo-copy { max-width:none; }
  @media (max-width:860px) { .demo-split2 { grid-template-columns:1fr; gap:22px; } }

  .bridge-top { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid #ece7db; background:#f3efe6; }
  .bridge-top-grp { display:flex; align-items:center; gap:8px; }
  .bridge-top-lbl { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); }
  .bridge-rec-ic { display:inline-flex; align-items:center; margin-right:5px; }
  .bridge-rec-btn { display:inline-flex; align-items:center; }

  .bridge-dd { position:relative; }
  .bridge-dd-btn { font:inherit; font-size:.74rem; font-weight:600; color:var(--ink); background:#fff; border:1px solid #d9d3c4; border-radius:7px; padding:5px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
  .bridge-dd-btn:hover { background:#faf6ec; }
  .bridge-dd-caret { color:var(--ink-mute); font-size:.7rem; }
  .bridge-dd-menu { position:absolute; right:0; top:calc(100% + 5px); z-index:8; background:#fff; border:1px solid #d9d3c4; border-radius:8px; box-shadow:0 14px 34px rgba(26,28,36,.16); padding:5px; min-width:124px; }
  .bridge-dd-menu[hidden] { display:none; }
  .bridge-dd-menu button { display:block; width:100%; text-align:left; font:inherit; font-size:.8rem; color:var(--ink); background:none; border:0; border-radius:5px; padding:6px 9px; cursor:pointer; }
  .bridge-dd-menu button:hover { background:#eef3f8; }

  /* editable area — clearer it's editable */
  .bridge-edit-hint { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.58rem; font-weight:600; color:var(--ink-mute); background:#efeadf; border-radius:4px; padding:1px 6px; margin-left:7px; text-transform:none; letter-spacing:0; }
  .bridge-edit { margin:12px; padding:13px 14px; background:#fff; border:1px solid #e0dbcd; border-radius:8px; min-height:118px; font-size:.95rem; line-height:2.05; color:var(--ink-soft); outline:none; cursor:text; transition: border-color .6s, box-shadow .6s; }
  .bridge-edit:hover { border-color:#cfc9bc; }
  .bridge-edit:focus { border-color:#2e5c8a; box-shadow:0 0 0 3px rgba(46,92,138,.14); }
  .tok { cursor:pointer; }

  /* image field */
  .bridge-imgfield { margin:0 12px 12px; padding:10px 12px 12px; background:#faf8f2; border:1px solid #ece7db; border-radius:8px; }
  .bridge-if-h { display:flex; align-items:center; gap:7px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-mute); margin-bottom:8px; }
  .bridge-if-tag { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.62rem; font-weight:600; text-transform:none; letter-spacing:0; color:#2e5c8a; background:#eaf0f6; border:1px solid #d3e0ec; border-radius:4px; padding:1px 5px; }
  .bridge-imgtabs { display:inline-flex; gap:3px; background:#efeadf; border-radius:6px; padding:3px; margin-bottom:9px; }
  .bridge-imgtabs button { font:inherit; font-size:.68rem; font-weight:600; color:var(--ink-soft); background:none; border:0; border-radius:4px; padding:4px 9px; cursor:pointer; }
  .bridge-imgtabs button.on { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); }
  /* mobile-only native dropdown for the image source (matches the rendering-context dropdown) */
  .bridge-imgsel { display:none; }
  @media (max-width:820px) {
    .bridge-imgtabs { display:none; }
    .bridge-imgsel {
      display:block; width:100%; margin-bottom:9px; font:inherit; font-size:.74rem; font-weight:600;
      color:var(--ink); background:#fff; border:1px solid #d9d3c4; border-radius:7px; padding:7px 30px 7px 11px; cursor:pointer;
      -webkit-appearance:none; -moz-appearance:none; appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%231a1c24' d='M0 0h10L5 7z'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 11px center;
    }
  }
  .bridge-imgpick { display:flex; gap:7px; flex-wrap:wrap; }
  .bridge-thumb { width:54px; height:42px; padding:0; border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer; background:none; line-height:0; }
  .bridge-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .bridge-thumb.on { border-color:#2e5c8a; }

  /* rendered layouts (Card / Row / Inline) */
  .bridge-out { padding:16px; min-height:210px; }
  .bd-img { display:block; background:#f4f1ea; }
  .bd-title { font-family:'Fraunces',serif; font-weight:700; font-size:1.16rem; margin:0 0 6px; color:var(--ink); }
  .bd-text { font-family:'Fraunces',serif; font-size:1.04rem; line-height:1.7; margin:0; color:var(--ink); }
  .bd-card .bd-img { width:100%; height:140px; object-fit:cover; border-radius:9px; margin-bottom:12px; }
  .bd-row { display:flex; gap:14px; align-items:flex-start; }
  .bd-row .bd-img { width:130px; height:100px; object-fit:cover; border-radius:9px; flex:0 0 auto; }
  .bd-row .bd-body { flex:1 1 auto; min-width:0; }
  .bd-inline .bd-img { float:left; width:92px; height:70px; object-fit:cover; border-radius:7px; margin:3px 13px 4px 0; }
  .bd-inline::after { content:""; display:block; clear:both; }

  /* closing explainer */
  .demos-outro { width:45%; min-width:300px; max-width:640px; margin:48px auto 6px; text-align:center; }
  .demos-outro p { font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.98rem; line-height:1.75; color:var(--ink-soft); margin:0; }
  .demos-outro strong { color:var(--ink); font-weight:700; background:linear-gradient(transparent 62%, #f7e2bf 62%); padding:0 1px; }
  @media (max-width:760px) { .demos-outro { width:88%; } }

  /* reveal pill (subtle pulse) */
  .demos-revealer { display:flex; align-items:center; gap:8px; width:max-content; margin:14px auto 0; background:#fff; border:1px solid #d9d3c4; border-radius:24px; padding:9px 19px; cursor:pointer; font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:.9rem; font-weight:600; color:var(--ink); transition: background .6s, border-color .6s; }
  .demos-revealer:hover { background:#faf6ec; border-color:#cfc9bc; }
  .demos-revealer .dr-arrow { font-size:1rem; line-height:1; animation:dr-bounce 1.5s ease-in-out infinite; }
  .demos-revealer--pulse { animation:dr-pulse 2.4s ease-in-out infinite; }
  @keyframes dr-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(46,92,138,0); } 50% { box-shadow:0 0 0 7px rgba(46,92,138,.07); } }

  /* click anywhere on the faded peek to expand (only while collapsed) */
  .demos-peek-catch { display:none; }
  .demos-more:not(.open) .demos-peek-catch { display:block; position:absolute; inset:0; z-index:5; width:100%; border:0; background:transparent; cursor:pointer; padding:0; }

  /* rendered output: preserve editor formatting */
  .bd-text b, .bd-text strong { font-weight:700; }
  .bd-text i, .bd-text em { font-style:italic; }
  .bd-text u { text-decoration:underline; }
  .bd-text a { color:#2e5c8a; text-decoration:underline; }
  .bd-text ul, .bd-text ol { margin:.4em 0; padding-left:1.3em; }
  .bd-text ul { list-style:disc; }
  .bd-text ol { list-style:decimal; }
  .bd-text li { margin:.12em 0; }
  /* image panel: neutral letterbox; card view shows the whole render, centred */
  .bd-img { background:#f1ece2; }
  .bd-card .bd-img { object-fit:contain; object-position:center; }
  .bridge-thumb { background:#f1ece2; }

  /* mobile: stop grid children forcing the demo cards past the viewport */
  .demo > *, .demo-split > *, .demo-stack > * { min-width:0; }
  @media (max-width:560px) {
    .rel-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; }
    .rel-drawer { width:100%; }
    .bridge-menu { width:min(300px,80vw); }
  }

/* ============================================================================
   Standalone landing pages: /demos and /bridges
   Diagonal three-slice header (slab-hero), light highlight, on-page demos,
   the search demo card. Uses the site tokens defined earlier in this file.
   ============================================================================ */
  mark.ink-hi { background: linear-gradient(180deg, transparent 58%, rgba(196,81,58,.20) 58%); color: inherit; padding: 0 .05em; border-radius: 2px; }

  /* Highlight + emphasis convention (the one to reach for in any longer paragraph):
     - <strong> for the key terms (weight only, no colour);
     - .hl on the single most load-bearing phrase per paragraph - a light brand-red
       underline-highlight, reusable anywhere (not scoped to a section like .demos-hl).
     One .hl per paragraph. Reserve longer paragraphs for it; short labels don't need it. */
  .hl { background: linear-gradient(180deg, transparent 58%, rgba(196,81,58,.20) 58%); color: inherit; padding: 0 .05em; border-radius: 2px; }

  .slab-hero { position: relative; overflow: hidden; background: var(--bg-deep, #e7e0d2);
    padding: clamp(72px,11vw,132px) 0 clamp(56px,8vw,92px); margin-bottom: 8px; }
  .slab-row { position: absolute; inset: 0; display: flex; gap: 18px; transform: skewX(-9deg) scale(1.18);
    opacity: .5; pointer-events: none; }
  .slab { flex: 1; border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(26,28,36,.55);
    display: flex; align-items: center; justify-content: center; padding: 24px; }
  .slab--1 { background: linear-gradient(160deg,#faf6ec,#efe7d6); }
  .slab--2 { background: linear-gradient(160deg,#eef4f0,#dfeae3); margin-top: 6%; }
  .slab--3 { background: linear-gradient(160deg,#f0edf7,#e4def0); margin-top: 12%; }
  .slab-inner { transform: skewX(9deg); width: 100%; max-width: 320px; }
  .slab-lbl { display: inline-block; font: 700 11px/1 ui-monospace,Menlo,monospace; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-mute,#6c6f78); margin-bottom: 12px; }
  .slab-field, .slab-rel, .slab-prev { background: #fff; border: 1px solid rgba(26,28,36,.12);
    border-radius: 10px; padding: 12px 14px; font-size: 14px; box-shadow: 0 8px 22px -16px rgba(26,28,36,.5); }
  .slab-fld-lbl { display: block; font-size: 11px; color: var(--ink-mute,#6c6f78); margin-bottom: 5px; }
  .slab-fld { font-family: ui-monospace,Menlo,monospace; font-size: 13px; }
  .slab-tick { color: var(--c-solution-1,#3e8a6c); font-style: normal; }
  .slab-rel { display: flex; align-items: center; gap: 8px; }
  .slab-rel b { flex: 1; } .slab-chev { color: var(--c-solution-1,#3e8a6c); }
  .slab-prev { display: flex; align-items: center; gap: 10px; }
  .slab-thumb { width: 34px; height: 34px; border-radius: 7px; background: linear-gradient(135deg,#cdd9e6,#9fb6cc); }
  .slab-titlewrap { position: relative; z-index: 1; text-align: center; }
  .slab-kicker { font: 700 14px/1 ui-monospace,Menlo,monospace; letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-problem-1,#c4513a); margin: 0 0 16px; }
  .slab-title { font-family: var(--font-serif,'Fraunces',Georgia,serif); font-weight: 600;
    font-size: clamp(2.1rem,5.4vw,3.7rem); line-height: 1.04; letter-spacing: -.02em; margin: 0; }
  .slab-sub { max-width: 46ch; margin: 18px auto 0; font-size: clamp(1rem,1.7vw,1.18rem);
    color: var(--ink-soft,#4d4f58); line-height: 1.55; }

  .demos--page { padding-top: 8px; }
  .demos-lead { max-width: 60ch; margin: 0 auto 10px; font-size: 1.15rem; line-height: 1.6; color: var(--ink,#1a1c24); text-align: center; }
  .demo-soon { font-size: .9rem; color: var(--ink-mute,#6c6f78); font-style: italic; margin-top: 8px; }
  /* muted, honestly-caveated evidence footnote under a demo section (sources dashed-underlined, house style) */
  .demo-evidence { position: relative; max-width: 400px; margin: 1rem auto 0; padding: 2px 0 2px 16px; border-top: 0; font-size: var(--text-sm,.8rem); line-height: 1.6; color: var(--ink-mute,#6c6f78); }
  /* Footnotes nested inside a demo-copy block must keep the small, light footnote
     treatment - .demo-copy p would otherwise win on specificity and blow them up. */
  .demo-copy .demo-evidence { font-size: var(--text-sm,.8rem); line-height: 1.6; color: var(--ink-mute,#6c6f78); margin: 1rem 0 0; max-width: 400px; }
  .demo-copy--center .demo-evidence { text-align: left; }
  /* 5px brand-red bar, rounded ends, down the left of the footnote */
  .demo-evidence::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 5px; background: var(--c-problem-1,#c4513a); }
  .demo-evidence a { color: var(--ink-soft,#4d4f58); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; text-decoration-color: rgba(26,28,36,.3); cursor: pointer; transition: color .25s, text-decoration-color .25s; }
  .demo-evidence a:hover { color: var(--c-problem-1,#c4513a); text-decoration-color: var(--c-problem-1,#c4513a); }

  /* small rule under a section intro that's contextually tied to what follows */
  .demos-rule { width: 100%; max-width: 760px; margin: 60px auto 80px auto; border: 0; border-top: 1px solid var(--line,#ece7db); }

  /* ===== citation modal ===== */
  .cite-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .cite-modal[hidden] { display: none; }
  .cite-backdrop { position: absolute; inset: 0; background: rgba(26,28,36,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: cite-fade .16s ease; }
  @keyframes cite-fade { from { opacity: 0; } to { opacity: 1; } }
  .cite-dialog { position: relative; width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; background: var(--paper,#faf6ec); border: 1px solid var(--line,#ece7db); border-radius: 12px; box-shadow: 0 28px 70px rgba(26,28,36,.34); padding: 26px 28px 24px; }
  .cite-close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--ink-mute,#6c6f78); cursor: pointer; }
  .cite-close:hover { color: var(--ink,#1a1c24); }
  .cite-kicker { font-family: var(--font-sans,'IBM Plex Sans',sans-serif); font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--c-problem-1,#c4513a); margin: 0 0 6px; }
  .cite-title { font-family: var(--font-serif,'Fraunces',serif); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--ink,#1a1c24); margin: 0 0 12px; padding-right: 24px; }
  .cite-context { font-family: var(--font-sans,'IBM Plex Sans',sans-serif); font-size: .95rem; line-height: 1.6; color: var(--ink-soft,#4d4f58); margin: 0 0 14px; }
  .cite-points { margin: 0 0 16px; padding-left: 18px; }
  .cite-points[hidden] { display: none; }
  .cite-points li { font-family: var(--font-sans,'IBM Plex Sans',sans-serif); font-size: .92rem; line-height: 1.5; color: var(--ink,#1a1c24); margin: 4px 0; }
  /* Source link is intentionally quiet: a muted, slightly-darker-than-paper taupe
     with a lighter underline. Present and findable if you look for it, but it does
     not pull attention away from the context + findings above it. Hover lifts it. */
  .cite-source { display: inline-block; font-family: var(--font-sans,'IBM Plex Sans',sans-serif); font-size: .82rem; font-weight: 500; color: #978d79; text-decoration: none; border-bottom: 1px solid rgba(151,141,121,.4); transition: color .2s, border-color .2s; }
  .cite-source:hover { color: var(--ink-soft,#34363d); border-bottom-color: rgba(52,54,61,.45); }

  /* ===== Accessibility: visible keyboard focus on every demo control (many have border:0, which kills the default) ===== */
  .ws-area:focus-visible, .ws-pt:focus-visible, .ws-mdisc:focus-visible,
  .ev-chip:focus-visible, .ev-mode:focus-visible, .ev-reset:focus-visible,
  .mp-chip:focus-visible, .mp-marker:focus-visible, .mp-cluster:focus-visible,
  .search-input:focus-visible, .search-hit:focus-visible,
  .dm-link:focus-visible, .di-ok:focus-visible, .cms-opt:focus-visible,
  .demos-revealer:focus-visible, .ws-mmodal-x:focus-visible {
    outline: 2px solid #5ea0e0; outline-offset: 2px; border-radius: 3px;
  }
  /* round markers/clusters keep a circular ring */
  .mp-marker:focus-visible, .mp-cluster:focus-visible, .ws-mdisc:focus-visible { outline-offset: 3px; }

  .search-box { display: flex; align-items: center; gap: 9px; margin: 14px; padding: 9px 12px;
    background: #fff; border: 1px solid rgba(26,28,36,.18); border-bottom-width: 2px; border-radius: 3px; transition: border-color .6s, box-shadow .6s; }
  .search-card[data-search] .search-box:focus-within { border-color: #2e5c8a; box-shadow: 0 0 0 3px rgba(46,92,138,.14); }
  .search-ic { color: var(--ink-mute,#6c6f78); flex: none; }
  .search-input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 15px/1.2 'IBM Plex Sans',system-ui,sans-serif; color: var(--ink,#1a1c24); padding: 2px 0; }
  .search-input::placeholder { color: #b6b1a5; }
  .search-kbd { display: flex; align-items: center; gap: 4px; flex: none; font-size: .62rem; color: var(--ink-fade,#9a958a); font-family: 'IBM Plex Sans',sans-serif; }
  .search-kbd kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; border: 1px solid rgba(26,28,36,.2); border-bottom-width: 2px; border-radius: 3px; background: #faf7f1; font: 600 10px/1 ui-monospace,Menlo,monospace; color: var(--ink-soft,#4d4f58); }
  @media (max-width: 520px) { .search-kbd { display: none; } }
  .search-results { margin: 0 14px; height: 300px; overflow-y: auto; }  /* fixed height: card must not jump as match count changes */
  .search-grp { display: flex; align-items: center; gap: 6px; font: 700 10px/1 ui-monospace,Menlo,monospace; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-mute,#6c6f78); margin: 13px 0 6px; }
  .search-grp-n { font-family: 'IBM Plex Sans',sans-serif; letter-spacing: 0; font-size: 10px; color: var(--ink-fade,#9a958a); background: rgba(26,28,36,.05); border-radius: 999px; padding: 1px 6px; }
  .search-hit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 9px; border: 1px solid rgba(26,28,36,.08); border-radius: 3px; margin-bottom: 5px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
  .search-hit.sel { border-color: #2e5c8a; background: #f3f7fc; }
  .search-hit.flash { animation: search-flash .4s ease; }
  @keyframes search-flash { 0% { background: #d9e6f5; } 100% { background: #f3f7fc; } }
  .search-hit-txt { flex: 1 1 auto; min-width: 0; }
  .search-hit b { display: block; font-size: 14px; font-weight: 600; color: var(--ink,#1a1c24); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .search-hit b mark { background: rgba(255,213,90,.55); color: inherit; padding: 0 1px; border-radius: 2px; }
  .search-hit-txt > span { display: block; font-size: 12px; color: var(--ink-mute,#6c6f78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .search-pill { flex: none; font: 700 9px/1 'IBM Plex Sans',sans-serif; letter-spacing: .03em; text-transform: uppercase; padding: 3px 6px; border-radius: 3px; }
  .search-pill.product  { background: #e6effb; color: #28527d; }
  .search-pill.supplier { background: #e4f3ea; color: #2c6b41; }
  .search-pill.order    { background: #e2f1f1; color: #1f6f6a; }
  .search-pill.invoice  { background: #fbeede; color: #98622b; }
  .search-pill.contact  { background: #efe9f7; color: #5b3a8a; }
  .search-pill.category { background: #ecebe6; color: #5a564c; }
  .search-go { flex: none; color: var(--ink-fade,#c8c4b6); font-size: 13px; opacity: 0; transition: opacity .15s; }
  .search-hit.sel .search-go { opacity: 1; color: #2e5c8a; }
  .search-empty { padding: 22px 12px; text-align: center; font-size: 13px; color: var(--ink-mute,#6c6f78); font-style: italic; }
  .search-foot { margin: 0 14px 14px; padding-top: 10px; border-top: 1px solid rgba(26,28,36,.08); font-size: 12px; color: var(--ink-mute,#6c6f78); }
  .search-foot b { color: var(--ink,#1a1c24); font-weight: 600; }
  .search-foot-hint { font-style: italic; }
  .search-opened b:first-child { color: #2e5c8a; }
  .search-opened span { color: var(--ink-fade,#9a958a); }

/* ============================================================================
   Shared landing-hero (consistent header for /demos, /bridges, future pages)
   ============================================================================ */
  .landing-hero { background: var(--bg-deep,#e7e0d2); padding: clamp(64px,9vw,108px) 0 clamp(40px,5vw,64px);
    text-align: center; border-bottom: 1px solid var(--line,rgba(26,28,36,.10)); }
  .landing-kicker { font: 700 14px/1 ui-monospace,Menlo,monospace; letter-spacing: .16em; text-transform: uppercase;
    color: var(--c-problem-1,#c4513a); margin: 0 0 16px; }
  .landing-title { font-family: var(--font-serif,'Fraunces',Georgia,serif); font-weight: 600;
    font-size: clamp(2.1rem,5.4vw,3.7rem); line-height: 1.04; letter-spacing: -.02em; margin: 0; }
  .landing-title .hl-blue { color: #2e5c8a; }
  .landing-sub { max-width: 50ch; margin: 18px auto 0; font-size: clamp(1.02rem,1.7vw,1.2rem);
    color: var(--ink-soft,#4d4f58); line-height: 1.55; }
  .landing-lead { max-width: 64ch; margin: 0 auto 16px; font-size: 1.12rem; line-height: 1.65; color: var(--ink,#1a1c24); }

/* ============================================================================
   Homepage two-area showcase (Area A: admin demos, Area B: bridging)
   ============================================================================ */
  .showcase-head { text-align: center; margin-bottom: clamp(28px,4vw,44px); }
  .showcase-title { font-family: var(--font-serif,'Fraunces',Georgia,serif); font-weight: 600;
    font-size: clamp(1.6rem,3.4vw,2.4rem); letter-spacing: -.02em; margin: 0 0 8px; }
  .showcase-sub { color: var(--ink-soft,#4d4f58); font-size: 1.08rem; margin: 0; }
  .showcase-areas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,36px); align-items: start; }
  .area { background: var(--paper,#faf6ec); border: 1px solid var(--line,rgba(26,28,36,.10)); border-radius: 18px;
    padding: clamp(22px,2.4vw,32px); display: flex; flex-direction: column; }
  .area-kicker { font: 700 12px/1 ui-monospace,Menlo,monospace; letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-problem-1,#c4513a); margin: 0 0 10px; }
  .area-title { font-family: var(--font-serif,'Fraunces',Georgia,serif); font-weight: 600; font-size: 1.5rem;
    letter-spacing: -.01em; margin: 0 0 10px; }
  .area-desc { color: var(--ink-soft,#4d4f58); line-height: 1.55; margin: 0 0 20px; }
  .area .demo { display: block; margin: 0 0 20px; }
  .area .demo .demo-stage { width: 100%; }
  .area .demo .demo-copy { display: none; } /* the area head already describes it */
  .area-cta { margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--c-problem-1,#c4513a);
    text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 1px; }
  .area-cta:hover { border-bottom-width: 3px; }
  .bridge-peek { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
  .bridge-chip { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink,#1a1c24);
    background: #fff; border: 1px solid var(--line-strong,rgba(26,28,36,.18)); border-radius: 12px;
    padding: 13px 16px; transition: border-color .6s, transform .6s; }
  .bridge-chip:hover { border-color: var(--c-problem-1,#c4513a); transform: translateX(3px); }
  .bridge-chip b { font-size: 1.05rem; }
  .bridge-chip span { font: 12.5px/1.3 ui-monospace,Menlo,monospace; color: var(--ink-mute,#6c6f78); }
  @media (max-width: 820px) { .showcase-areas { grid-template-columns: 1fr; } }

/* ============================================================================
   /bridges page: the three bridge concepts
   ============================================================================ */
  .bridges-intro { padding-top: clamp(36px,5vw,56px); text-align: center; }
  .bridge-concept { display: grid; grid-template-columns: 60% 40%; gap: clamp(24px,4vw,52px); align-items: center;
    padding: clamp(40px,6vw,76px) 0; border-top: 1px solid var(--line,rgba(26,28,36,.10)); }
  .bridge-concept--alt { direction: rtl; } .bridge-concept--alt > * { direction: ltr; }
  .bridge-num { font: 700 12px/1 ui-monospace,Menlo,monospace; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-mute,#6c6f78); margin: 0 0 12px; }
  .bridge-copy h2 { font-family: var(--font-serif,'Fraunces',Georgia,serif); font-weight: 600;
    font-size: clamp(1.9rem,3.6vw,2.6rem); letter-spacing: -.02em; margin: 0 0 12px; }
  .bridge-line { font-size: 1.2rem; line-height: 1.5; margin: 0 0 16px; color: var(--ink,#1a1c24); }
  .bridge-copy p { color: var(--ink-soft,#4d4f58); line-height: 1.65; max-width: 56ch; }
  .bridge-visual { min-height: 240px; border-radius: 16px; border: 1px dashed var(--line-strong,rgba(26,28,36,.18));
    background: linear-gradient(160deg, var(--paper,#faf6ec), var(--bg-deep,#e7e0d2));
    display: flex; align-items: center; justify-content: center; padding: 28px; }
  .bridge-soon { font: 13px/1.5 ui-monospace,Menlo,monospace; color: var(--ink-mute,#6c6f78); text-align: center; max-width: 30ch; }
  .bridges-foot { padding: clamp(40px,6vw,76px) 0; border-top: 1px solid var(--line,rgba(26,28,36,.10)); text-align: center; }
  @media (max-width: 820px) { .bridge-concept, .bridge-concept--alt { grid-template-columns: 1fr; direction: ltr; } }

/* ============================================================================
   Homepage demos peek now LINKS to /cms-editing-tools (no inline expand).
   The faded ghost of demo 2 is one big tempting click target.
   ============================================================================ */
  .demos-peek-catch { position: absolute; inset: 0; z-index: 6; display: block; cursor: pointer; }
  a.demos-revealer { text-decoration: none; }
  .demos-revealer .dr-arrow { animation: dr-nudge 1.4s ease-in-out infinite; }
  @keyframes dr-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

  /* AI-and-interfaces stub: four concept cards */
  .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; text-align: left; }
  @media (max-width: 820px) { .concept-grid { grid-template-columns: 1fr; } }

  /* Homepage section 2 (Bridging data and design) faded peek teaser */
  .bridge-teaser { text-align: center; }
  .bridge-teaser-lead { max-width: 60ch; margin: 0 auto 22px; font-size: 1.12rem; line-height: 1.6; color: var(--ink, #1a1c24); }
  .bridge-teaser .bridge-peek { max-width: 660px; margin: 0 auto; }

  /* Bridge 01 Layout demo - "one model, two faces" (high level) */
  .demo-layout { display: block; }
  .lay2-grid { display: grid; grid-template-columns: minmax(210px,260px) 1fr; gap: 22px; align-items: start; }

  /* LEFT: the data model, in the site's own (warm, rounded) style */
  .lay2-models { display: flex; flex-direction: column; gap: 9px; }
  .lay2-model { border: 1px solid var(--line-strong,rgba(26,28,36,.18)); border-radius: 11px; background: #fff; overflow: hidden; transition: border-color .6s, box-shadow .6s; }
  .lay2-model.on { border-color: var(--c-solution-1,#3e8a6c); box-shadow: 0 8px 22px -14px rgba(62,138,108,.7); }
  .lay2-model-btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 13px; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
  .lay2-tag { font: 700 9px/1 ui-monospace,Menlo,monospace; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--c-strategy-1,#6855a8); border-radius: 999px; padding: 4px 7px; flex: none; }
  .lay2-mname { font-weight: 600; flex: 1; }
  .lay2-chev { color: var(--ink-mute,#6c6f78); transition: transform .6s; }
  .lay2-model.on .lay2-chev { transform: rotate(180deg); }
  .lay2-fields { display: none; padding: 0 12px 11px; }
  .lay2-model.on .lay2-fields { display: block; }
  .lay2-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line,rgba(26,28,36,.08)); font-size: .88rem; }
  .lay2-fn { color: var(--ink,#1a1c24); }
  .lay2-ft { font: 10px/1 ui-monospace,Menlo,monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute,#6c6f78); }
  .lay2-ft.rel { color: var(--c-strategy-1,#6855a8); }

  /* RIGHT: the design canvas - deliberately a DIFFERENT design system (sharp corners, mono,
     hard offset shadows, cool palette) so it reads as "the design", set apart from the warm site. */
  .lay2-canvas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; font-family: ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
  .lc-frame { border: 2px solid #1b2330; background: #fbfcfe; box-shadow: 5px 5px 0 #1b2330; }
  .lc-h { background: #1b2330; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: .12em; padding: 9px 11px; }
  .lc-h span { font-weight: 400; letter-spacing: 0; opacity: .55; margin-left: 6px; }
  .lc-regions { padding: 12px; display: flex; flex-direction: column; gap: 9px; min-height: 188px; }
  .lc-reg { border: 1.5px dashed #aab2c0; color: #707a89; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; transition: all .6s ease; }
  .lc-reg.bound { border-style: solid; border-color: #2e5c8a; background: #e9f1fa; color: #14233a; box-shadow: 3px 3px 0 #2e5c8a; }
  .lc-tick { font: 700 9px/1 ui-monospace,Menlo,monospace; letter-spacing: .06em; text-transform: uppercase; color: #2e5c8a; border: 1px solid #2e5c8a; padding: 3px 5px; flex: none; }
  @media (max-width: 860px) { .lay2-grid { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .lay2-canvas { grid-template-columns: 1fr; } }

  mark.ink-hi-g { background: linear-gradient(180deg, transparent 58%, rgba(62,138,108,.22) 58%); color: inherit; padding: 0 .05em; border-radius: 2px; }

  /* Revealer buttons: inline chunky arrow, 4px colour border, drop shadow */
  .demos-revealer { flex-direction: row; align-items: center; gap: 10px; box-shadow: 0 12px 28px -14px rgba(26,28,36,.45); border-width: 4px; border-style: solid; }
  .demos-revealer .dr-arrow { font-size: 1.35rem; font-weight: 800; }
  .demos-revealer--red { border-color: var(--c-problem-1,#c4513a); }
  .demos-revealer--green { border-color: var(--c-solution-1,#3e8a6c); }

  /* Bridge 01 on /bridging-data-and-design: full-width so the layout demo gets room */
  .bridge-concept--wide { display: block; }
  .bridge-concept--wide .bridge-copy { max-width: 72ch; margin: 0 auto 28px; text-align: center; }
  .bridge-concept--wide .bridge-copy p { margin-left: auto; margin-right: auto; }

  /* "Back to the home page" at the foot of the standalone pages */
  .back-home-wrap { text-align: center; padding: 4px 0 56px; }
  .back-home { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.05rem; color: var(--c-problem-1,#c4513a); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
  .back-home:hover { border-bottom-width: 3px; }
  .back-home .bh-arrow { font-size: 1.1em; transition: transform .6s; }
  .back-home:hover .bh-arrow { transform: translateX(-3px); }

  /* ===== Layout demo v4: "the same data, five surfaces" (supersedes .lay2/.lc above) ===== */
  .ws-grid { display: grid; grid-template-columns: minmax(210px,248px) 1fr; gap: 16px; align-items: start; }
  .ws-areas { display: flex; flex-direction: column; gap: 7px; }
  /* left nav: 3px corners + heavier bottom/right border (asymmetric, anti-LLM-smell) + connective matter between stacked items */
  .ws-area { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--line-strong,rgba(26,28,36,.18)); border-right-width: 2px; border-bottom-width: 2px; border-right-color: rgba(26,28,36,.32); border-bottom-color: rgba(26,28,36,.32); border-radius: 3px; padding: 12px 13px; cursor: pointer; font: inherit; transition: border-color .6s, box-shadow .6s, transform .6s; }
  .ws-area + .ws-area::before { content: ''; position: absolute; top: -7px; left: 26px; width: 2px; height: 7px; background: rgba(26,28,36,.22); }
  .ws-area:hover { border-color: var(--c-problem-1,#c4513a); }
  .ws-area.on { border-color: var(--c-problem-1,#c4513a); box-shadow: 0 8px 22px -14px rgba(196,81,58,.7); transform: translateX(3px); }
  .ws-num { width: 27px; height: 27px; border-radius: 50%; background: var(--ink,#1a1c24); color: #fff; font: 700 13px/1 var(--font-sans,'IBM Plex Sans'),sans-serif; display: grid; place-items: center; flex: none; }
  .ws-area.on .ws-num { background: var(--c-problem-1,#c4513a); }
  .ws-area-t { display: flex; flex-direction: column; gap: 2px; font-weight: 600; line-height: 1.2; }
  .ws-niche { font-weight: 400; font-size: .8rem; color: var(--ink-mute,#6c6f78); }
  .ws-stage { position: relative; overflow: visible; min-height: 430px; }
  .ws-scene { display: none; border-radius: 4px; overflow: hidden; border: 1px solid var(--line,rgba(26,28,36,.10)); box-shadow: 0 24px 60px -34px rgba(26,28,36,.5); min-height: 430px; }
  .ws-scene.show { display: block; }
  .ws-soon.show { display: grid; place-items: center; min-height: 430px; background: repeating-linear-gradient(135deg,#faf7f1,#faf7f1 12px,#f3ede2 12px,#f3ede2 24px); }
  .ws-soon-in { text-align: center; max-width: 42ch; padding: 30px; }
  .ws-soon-in b { font-family: var(--font-serif,'Fraunces'),serif; font-weight: 600; font-size: 1.25rem; display: block; margin-bottom: 8px; }
  .ws-soon-in span { color: var(--ink-soft,#4d4f58); line-height: 1.5; }

  .ws--coffee { background: #f7f1e7; color: #2a201a; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .ws-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
  .ws-logo { font-family: var(--font-serif,'Fraunces'),serif; font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
  .ws-navlinks { display: flex; gap: 22px; }
  .ws-navlinks a { font-size: .9rem; color: #6b5a4c; cursor: default; }
  .ws-navlinks a.on { color: #2a201a; font-weight: 600; border-bottom: 2px solid #b9772e; padding-bottom: 4px; }
  .ws-basket { font-size: .82rem; background: #2a201a; color: #f7f1e7; border-radius: 999px; padding: 8px 15px; }
  .ws-mega { display: grid; grid-template-columns: repeat(3,1fr) 1.3fr; gap: 22px; padding: 20px 22px 24px; background: #fff; box-shadow: inset 0 10px 16px -14px rgba(0,0,0,.25); }
  .ws-mega-col h5 { font: 700 .68rem/1 ui-monospace,Menlo,monospace; text-transform: uppercase; letter-spacing: .11em; color: #b9772e; margin: 0 0 10px; }
  .ws-mega-col a { display: block; font-size: .9rem; color: #3f342c; padding: 4px 0; cursor: default; }
  .ws-mega-feat { background: #f1e7d6; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
  .ws-mega-thumb { height: 50px; border-radius: 8px; background: linear-gradient(135deg,#5b3b22,#b9772e); }
  .ws-mega-feat b { font-size: .92rem; }
  .ws-mega-feat span { font-size: .8rem; color: #6b5a4c; }
  .ws-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; padding: 34px 30px 40px; align-items: center; }
  .ws-eyebrow { font: 700 .72rem/1 ui-monospace,Menlo,monospace; text-transform: uppercase; letter-spacing: .14em; color: #b9772e; margin: 0; }
  .ws-title { font-family: var(--font-serif,'Fraunces'),serif; font-weight: 600; font-size: 2.5rem; line-height: 1.04; letter-spacing: -.02em; margin: 12px 0 14px; }
  .ws-intro { font-size: 1rem; color: #5b4a3e; line-height: 1.55; max-width: 42ch; margin: 0; }
  .ws-hero-cards { display: flex; gap: 12px; margin-top: 24px; }
  .ws-cat { flex: 1; background: #fff; border: 1px solid rgba(42,32,26,.12); border-radius: 12px; padding: 12px; }
  .ws-cat-img { display: block; height: 46px; border-radius: 8px; background: linear-gradient(135deg,#d8c4a3,#b9772e); margin-bottom: 9px; }
  .ws-cat b { display: block; font-size: .92rem; }
  .ws-cat span { font-size: .78rem; color: #8a786a; }
  .ws-best { background: #2a201a; color: #f7f1e7; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
  .ws-best-tag { font: 700 .66rem/1 ui-monospace,Menlo,monospace; text-transform: uppercase; letter-spacing: .1em; color: #e0a458; }
  .ws-best-img { height: 96px; border-radius: 10px; background: linear-gradient(135deg,#6b4426,#c8861f); }
  .ws-best-name { font-family: var(--font-serif,'Fraunces'),serif; font-size: 1.18rem; font-weight: 600; }
  .ws-best-meta { font-size: .82rem; color: #cbb9a8; }
  .ws-best-stat { font-size: .82rem; color: #9fd9b5; font-weight: 600; margin-top: 2px; }
  @media (max-width: 860px) { .ws-grid { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .ws-mega { grid-template-columns: 1fr 1fr; } .ws-hero { grid-template-columns: 1fr; } .ws-navlinks { display: none; } }

  /* ===== Pain-point hotspots: numbered circles in an absolute overlay so tooltips never clip ===== */
  .ws-spots { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
  .ws-spot { position: absolute; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0b0e13; cursor: help; font-family: 'Space Grotesk',var(--font-sans,'IBM Plex Sans'),sans-serif; font-weight: 700; font-size: 21px; color: #fff; display: grid; place-items: center; pointer-events: auto; opacity: .5; box-shadow: 0 0 0 3px #fff, 0 10px 22px -6px rgba(0,0,0,.7); transition: transform .6s, opacity .6s; }
  .ws-spot:hover, .ws-spot:focus { transform: translate(-50%,-50%) scale(1.08); opacity: 1; outline: none; z-index: 30; }
  .ws-spot--1 { background: var(--c-problem-1,#c4513a); }
  .ws-spot--2 { background: var(--c-solution-1,#3e8a6c); }
  .ws-spot--3 { background: var(--c-strategy-1,#6855a8); }
  .ws-spot--4 { background: var(--c-problem-1,#c4513a); }
  .ws-spot--5 { background: var(--c-solution-1,#3e8a6c); }
  .ws-spot-tip { position: absolute; bottom: 150%; left: 50%; transform: translate(-50%,6px); width: 252px; background: #0b0e13; color: #f3f5f8; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.5; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity .6s, transform .6s, visibility .6s; z-index: 40; text-align: left; pointer-events: none; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); }
  .ws-spot-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #0b0e13; }
  .ws-spot:hover .ws-spot-tip, .ws-spot:focus .ws-spot-tip { opacity: 1; visibility: visible; transform: translate(-50%,0); }
  /* spots near the right edge: open tooltip to the left so it stays on-screen */
  .ws-spot--3 .ws-spot-tip { left: auto; right: 0; transform: translate(0,6px); }
  .ws-spot--3 .ws-spot-tip::after { left: auto; right: 16px; transform: none; }
  .ws-spot--3:hover .ws-spot-tip, .ws-spot--3:focus .ws-spot-tip { transform: translate(0,0); }

  /* ===== Scene 1: coffee operations dashboard (cool, dense, tabular - its own design) ===== */
  .ws-scene.db { background: #eef1f5; color: #1b2230; font-family: var(--font-sans,'IBM Plex Sans'),system-ui,sans-serif; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
  .db-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .db-title { font-family: var(--font-serif,'Fraunces'),serif; font-weight: 600; font-size: 1.15rem; }
  .db-title em { color: #6b7280; font-style: normal; font-weight: 400; }
  .db-scope { position: relative; font-size: .82rem; color: #5a6472; background: #fff; border: 1px solid #d7dde6; padding: 8px 30px 8px 12px; }
  .db-scope b { color: #1b2230; font-weight: 600; }
  .db-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
  .db-kpi { background: #fff; border: 1px solid #d7dde6; border-left: 3px solid #2f9e6b; padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; }
  .db-kpi.warn { border-left-color: #c9881f; }
  .db-kpi.bad { border-left-color: #c4513a; }
  .db-k-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; }
  .db-k-v { font-family: ui-monospace,Menlo,monospace; font-size: 1.7rem; font-weight: 600; line-height: 1; }
  .db-k-v i { font-size: .85rem; font-style: normal; color: #6b7280; margin-left: 3px; }
  .db-k-d { font-size: .74rem; color: #6b7280; }
  .db-k-d.up { color: #2f9e6b; } .db-k-d.down { color: #c4513a; }
  .db-main { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
  .db-chart, .db-side, .db-table { background: #fff; border: 1px solid #d7dde6; padding: 14px; }
  .db-panel-h { position: relative; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #5a6472; margin-bottom: 12px; }
  .db-panel-h span { text-transform: none; letter-spacing: 0; font-weight: 400; color: #9aa3b0; margin-left: 6px; }
  .db-bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
  .db-bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
  .db-bars span::before { content: ''; width: 45%; height: var(--f); background: #c3cdd9; }
  .db-bars span::after { content: ''; width: 45%; height: var(--a); background: #2f6f9e; }
  .db-legend { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: #6b7280; margin-top: 10px; }
  .db-legend i { width: 10px; height: 10px; display: inline-block; }
  .lg-f { background: #c3cdd9; } .lg-a { background: #2f6f9e; }
  .db-side { display: flex; flex-direction: column; gap: 9px; }
  .db-alert { position: relative; font-size: .85rem; padding: 11px 30px 11px 12px; border: 1px solid #d7dde6; border-left: 3px solid #6b7280; background: #f8fafc; }
  .db-alert.bad { border-left-color: #c4513a; } .db-alert.warn { border-left-color: #c9881f; }
  .db-table .db-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr .7fr .9fr; gap: 8px; padding: 9px 4px; border-bottom: 1px solid #eef1f5; font-size: .85rem; align-items: center; }
  .db-row.db-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; border-bottom: 1px solid #d7dde6; }
  .db-row span:nth-child(3) { font-family: ui-monospace,Menlo,monospace; }
  .pill { justify-self: start; font: 600 .72rem/1 ui-monospace,Menlo,monospace; padding: 4px 7px; }
  .pill.ok { background: #e3f2ea; color: #1f6b48; } .pill.warn { background: #faf0db; color: #8a5e12; } .pill.bad { background: #f7e3df; color: #9a3322; }
  @media (max-width: 760px) { .db-kpis { grid-template-columns: 1fr 1fr; } .db-main { grid-template-columns: 1fr; } }

  /* ===== Scene 1 v3: operations runway, DARK, high-contrast (Sofia, Distribution Europe) ===== */
  .ws-scene.rw { background: #0f141b; color: #e7edf3; font-family: 'Space Grotesk',var(--font-sans,'IBM Plex Sans'),system-ui,sans-serif; }
  .ws-scene.rw .dm-link { font: inherit; background: none; border: 0; padding: 0; color: #fff; font-weight: 600; cursor: pointer; border-bottom: 1.5px dashed rgba(255,255,255,.4); transition: color .6s, border-color .6s; }
  .ws-scene.rw .dm-link:hover, .ws-scene.rw .dm-link:focus { color: #ffc861; border-bottom-color: #ffc861; outline: none; }
  .rw-top { background: linear-gradient(180deg,#161f2b,#121925); color: #eef2f7; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .rw-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
  .rw-who { font-weight: 600; font-size: 1.05rem; color: #fff; display: flex; align-items: center; gap: 9px; }
  .rw-who i { color: #6f8090; }
  .rw-fresh { font-size: .72rem; color: #8190a0; display: flex; align-items: center; gap: 7px; }
  .rw-fresh i { width: 7px; height: 7px; border-radius: 50%; background: #3fcf8e; box-shadow: 0 0 0 3px rgba(63,207,142,.22); }
  .rw-state { font-size: 1.18rem; line-height: 1.6; margin: 0; font-weight: 400; color: #b8c4d2; }
  .rw-feedwrap { display: grid; grid-template-columns: 1fr 292px; gap: 11px; padding: 14px 16px 4px; align-items: stretch; }
  .rw-feed-h { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #7d8b9a; margin-bottom: 12px; }
  .rw-feed-h span { text-transform: none; letter-spacing: 0; font-weight: 400; color: #61707f; margin-left: 7px; }
  .rw-ex { position: relative; display: grid; grid-template-columns: 86px 1fr auto auto; align-items: center; gap: 16px; background: #182230; border: 1px solid rgba(255,255,255,.07); border-right-width: 2px; border-bottom-width: 2px; border-right-color: rgba(0,0,0,.5); border-bottom-color: rgba(0,0,0,.5); border-radius: 3px; padding: 14px 16px; margin-bottom: 9px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.7); transition: transform .6s, box-shadow .6s; }
  .rw-ex:hover { transform: translateY(-1px); }
  /* connective matter: a short spine joining stacked exception rows, under the severity icon */
  .rw-ex + .rw-ex::before { content: ''; position: absolute; top: -9px; left: 30px; width: 2px; height: 9px; background: rgba(255,255,255,.18); }
  .rw-ex.sev-hi { box-shadow: 0 0 0 1px rgba(255,119,88,.5), 0 10px 26px -12px rgba(255,119,88,.4); }
  .rw-ex-sev { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rw-ex-sev i { font-size: 1.1rem; }
  .rw-ex-sev span { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .sev-hi .rw-ex-sev { color: #ff7758; } .sev-med .rw-ex-sev { color: #f0b13a; } .sev-low .rw-ex-sev { color: #8aa0b0; }
  .rw-ex-t { font-size: 1.04rem; font-weight: 600; color: #fff; }
  .rw-ex-t .dm-link { color: #fff; border-bottom-color: rgba(255,255,255,.32); }
  .rw-ex-meta { font-size: .84rem; color: #8a98a6; margin-top: 5px; }
  .rw-ex-impact { text-align: right; }
  .rw-ex-impact b { display: block; font-family: 'IBM Plex Mono',ui-monospace,monospace; font-size: 1.25rem; font-weight: 600; color: #ffc861; }
  .rw-ex-impact span { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: #8a98a6; }
  .rw-ex-impact span i { color: #ff7758; }
  .rw-ex-do { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .rw-ex-do button.dm-act { background: #eef2f6; color: #10151c; border: 0; border-radius: 3px; padding: 9px 13px; font: 600 .82rem 'Space Grotesk',sans-serif; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .6s, transform .6s; }
  .rw-ex-do button.dm-act:hover { background: #fff; transform: translateY(-1px); }
  .sev-hi .rw-ex-do button.dm-act { background: #ff6a4d; color: #1a0d09; }
  .sev-hi .rw-ex-do button.dm-act:hover { background: #ff7d63; }
  .rw-ex-do button.dm-act.ghost { background: transparent; color: #aab6c3; border: 1px solid rgba(255,255,255,.18); }
  .rw-ex-do button.dm-act.ghost:hover { background: rgba(255,255,255,.06); color: #fff; }
  .rw-owner { font-size: .7rem; color: #7d8b9a; }
  /* right risk panel */
  .rw-side { display: flex; flex-direction: column; height: 100%; background: #131a24; border: 1px solid rgba(255,255,255,.08); border-right-width: 2px; border-bottom-width: 2px; border-right-color: rgba(0,0,0,.5); border-bottom-color: rgba(0,0,0,.5); border-radius: 3px; padding: 16px; box-shadow: 0 8px 22px -14px rgba(0,0,0,.7); }
  .rw-side-h { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #7d8b9a; margin-bottom: 14px; }
  .rw-fill { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
  .rw-fill-v { font-family: 'IBM Plex Mono',monospace; font-size: 2.4rem; font-weight: 600; line-height: 1; color: #fff; }
  .rw-fill-v small { font-size: 1.1rem; color: #8a98a6; }
  .rw-fill-l { font-size: .78rem; color: #9aa7b5; line-height: 1.45; }
  .rw-fill-l .down { color: #ff7758; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; }
  .rw-side-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #7d8b9a; margin-bottom: 11px; }
  .rw-region { display: grid; grid-template-columns: 66px 1fr 60px; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .82rem; }
  .rw-region-n { color: #aab6c3; }
  .rw-region-bar { height: 7px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
  .rw-region-bar i { display: block; height: 100%; background: linear-gradient(90deg,#e0654a,#ffc861); border-radius: 4px; }
  .rw-region-v { font-family: 'IBM Plex Mono',monospace; color: #e7edf3; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
  .rw-region-v em { font-style: normal; } .rw-region-v em.up { color: #ff7758; } .rw-region-v em.down { color: #3fcf8e; } .rw-region-v em.flat { color: #61707f; }
  .rw-side-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: .76rem; color: #8a98a6; line-height: 1.5; display: flex; gap: 8px; }
  .rw-side-foot i { color: #ffc861; margin-top: 2px; }
  /* reveal */
  .rw-more { display: flex; align-items: center; justify-content: center; gap: 9px; width: calc(100% - 36px); margin: 6px 18px 18px; background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.18); color: #9aa7b5; font: 600 .85rem 'Space Grotesk',sans-serif; padding: 13px; border-radius: 8px; cursor: pointer; transition: background .6s; }
  .rw-more:hover { background: rgba(255,255,255,.07); color: #cdd7e1; }
  .rw-more-x { transition: transform .6s; }
  .rw-deep { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s cubic-bezier(.4,0,.2,1), opacity .6s; padding: 0 18px; }
  .ws-scene.rw.open .rw-deep { max-height: 900px; opacity: 1; padding: 0 16px 16px; }
  .ws-scene.rw.open .rw-more { display: none; }
  .rw-cols { display: grid; grid-template-columns: 1.2fr 1.2fr .85fr; gap: 9px; }
  .rw-col { position: relative; background: #131a24; border: 1px solid rgba(255,255,255,.08); border-right-width: 2px; border-bottom-width: 2px; border-right-color: rgba(0,0,0,.5); border-bottom-color: rgba(0,0,0,.5); border-radius: 3px; padding: 14px; }
  /* connective matter joining the columns of the deep row */
  .rw-col + .rw-col::before { content: ''; position: absolute; top: 14px; left: -9px; width: 9px; height: 2px; background: rgba(255,255,255,.18); }
  .rw-col-h { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #7d8b9a; margin-bottom: 10px; }
  .rw-watch, .rw-rec { font-size: .86rem; color: #cdd7e1; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .rw-watch b { font-family: 'IBM Plex Mono',monospace; color: #ffc861; }
  .rw-rec button { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #e7edf3; font: 600 .74rem 'Space Grotesk',sans-serif; padding: 6px 10px; border-radius: 3px; cursor: pointer; flex: none; }
  .rw-rec button:hover { background: rgba(255,255,255,.08); }
  .rw-chg { font-size: .92rem; padding: 8px 0; font-weight: 600; display: flex; align-items: center; gap: 9px; }
  .rw-chg.new { color: #5aa9e0; } .rw-chg.worse { color: #ff7758; } .rw-chg.ok { color: #3fcf8e; }
  @media (max-width: 760px) {
    .rw-feedwrap { grid-template-columns: 1fr; }
    .rw-ex { grid-template-columns: 70px 1fr; row-gap: 12px; }
    .rw-ex-impact, .rw-ex-do { grid-column: 2; align-items: flex-start; text-align: left; }
    .rw-ex-do { align-items: flex-start; }
    .rw-cols { grid-template-columns: 1fr; }
  }

  /* ===== Generic demo chrome: loading spinner, "why this matters" intro, modal system ===== */
  .demo[data-chrome] { position: relative; }
  /* loading */
  .ws-loading { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(15,20,27,.6); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border-radius: 14px; transition: opacity .6s; }
  .ws-loading.out { opacity: 0; }
  .ws-load-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #ffc861; animation: wsspin .7s linear infinite; }
  .ws-load-t { font: 600 .8rem 'Space Grotesk',sans-serif; letter-spacing: .06em; color: #cdd7e1; text-transform: uppercase; }
  @keyframes wsspin { to { transform: rotate(360deg); } }
  /* intro "why this matters" */
  .demo-intro { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,13,18,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; opacity: 0; transition: opacity .6s; }
  .demo-intro.in { opacity: 1; }
  .di-card { width: min(420px,92%); background: linear-gradient(180deg,#1a2433,#141c28); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px 24px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); transform: translateY(8px) scale(.98); transition: transform .6s; color: #e7edf3; font-family: 'Space Grotesk',var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .demo-intro.in .di-card { transform: none; }
  .di-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #ffc861; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .di-t { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 9px; line-height: 1.2; }
  .di-x { font-size: .95rem; line-height: 1.55; color: #b8c4d2; margin: 0 0 20px; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .di-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .di-supp { font-size: .78rem; color: #8a98a6; display: flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .di-supp input { accent-color: #ffc861; width: 15px; height: 15px; }
  .di-ok { display: flex; align-items: center; gap: 9px; background: #ffc861; color: #1a1305; border: 0; border-radius: 3px; padding: 9px 16px 9px 9px; font: var(--fw-bold) var(--btn-size) 'Space Grotesk',sans-serif; cursor: pointer; transition: background .6s; }
  .di-ok:hover { background: #ffd585; }
  .di-ring { position: relative; width: 24px; height: 24px; flex: none; }
  .di-ring svg { width: 24px; height: 24px; transform: rotate(-90deg); }
  .di-ring circle { fill: none; stroke-width: 3; stroke: rgba(26,19,5,.25); }
  .di-ring .di-ring-p { stroke: #1a1305; stroke-dasharray: 100.5; stroke-dashoffset: 0; animation: diring 5s linear forwards; }
  @keyframes diring { to { stroke-dashoffset: 100.5; } }
  /* modal */
  .dm-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,11,16,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .dm-overlay.open { display: flex; animation: dmfade .2s; }
  @keyframes dmfade { from { opacity: 0; } to { opacity: 1; } }
  .dm-box { position: relative; width: min(440px,94vw); max-height: 84vh; overflow: auto; background: linear-gradient(180deg,#1a2433,#131a24); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 24px; box-shadow: 0 40px 90px -24px rgba(0,0,0,.85); color: #e7edf3; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; animation: dmrise .24s; }
  @keyframes dmrise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
  .dm-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.06); border: 0; color: #aab6c3; cursor: pointer; font-size: 1rem; }
  .dm-close:hover { background: rgba(255,255,255,.12); color: #fff; }
  .dm-head { font-family: 'Space Grotesk',sans-serif; font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: 14px; padding-right: 30px; }
  .dm-lead { font-size: .9rem; line-height: 1.55; color: #b8c4d2; margin: 0 0 16px; }
  .dm-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: 10px; }
  .dm-table th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #7d8b9a; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 600; }
  .dm-table th.r, .dm-table td.r { text-align: right; }
  .dm-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.06); color: #cdd7e1; }
  .dm-table td.r { font-family: 'IBM Plex Mono',monospace; }
  .dm-table td.ok { color: #3fcf8e; } .dm-table td.bad { color: #ff7758; }
  .dm-foot { font-size: .82rem; color: #8a98a6; margin: 12px 0 0; line-height: 1.5; }
  .dm-textlink { background: none; border: 0; color: #ffc861; font: 600 .82rem 'Space Grotesk',sans-serif; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
  .dm-textlink:hover { text-decoration: underline; }
  .dm-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .88rem; }
  .dm-kv span { color: #8a98a6; } .dm-kv b { color: #fff; font-weight: 600; text-align: right; }
  .dm-wh, .dm-co { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .88rem; }
  .dm-wh span:first-child { width: 100px; color: #cdd7e1; display: flex; align-items: center; gap: 7px; }
  .dm-wh span:first-child i { color: #7d8b9a; }
  .dm-meter { flex: 1; height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
  .dm-meter i { display: block; height: 100%; border-radius: 4px; }
  .dm-meter.bad i { background: #ff7758; } .dm-meter.warn i { background: #f0b13a; }
  .dm-wh-v { font-family: 'IBM Plex Mono',monospace; color: #e7edf3; width: 88px; text-align: right; font-size: .8rem; }
  .dm-bar2 { display: grid; grid-template-columns: 80px 1fr 48px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: .84rem; }
  .dm-bar2 span { color: #aab6c3; }
  .dm-bar2 i { height: 9px; background: linear-gradient(90deg,#e0654a,#ffc861); border-radius: 4px; }
  .dm-bar2 b { font-family: 'IBM Plex Mono',monospace; text-align: right; color: #fff; }
  .dm-co div { flex: 1; color: #cdd7e1; } .dm-co div b { color: #fff; } .dm-co div span { display: block; font-size: .76rem; color: #8a98a6; }
  .dm-tag { font-size: .72rem; background: rgba(255,200,97,.14); color: #ffc861; padding: 4px 9px; border-radius: 20px; font-weight: 600; flex: none; }
  .dm-ripple { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
  .dm-rip-col { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 12px 10px; text-align: center; }
  .dm-rip-col span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #8a98a6; margin-bottom: 6px; }
  .dm-rip-col b { display: block; font-family: 'IBM Plex Mono',monospace; font-size: .86rem; color: #fff; margin-bottom: 8px; }
  .dm-rip-col em { font-style: normal; font-size: .73rem; display: inline-flex; align-items: center; gap: 5px; }
  .dm-rip-col em.ok { color: #3fcf8e; }
  .dm-actionbar { margin-top: 18px; }
  .dm-apply { width: 100%; background: #ffc861; color: #1a1305; border: 0; border-radius: 9px; padding: 13px; font: 700 .92rem 'Space Grotesk',sans-serif; cursor: pointer; transition: background .6s; }
  .dm-apply:hover { background: #ffd585; }
  .dm-progress, .dm-doneblock { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 26px 0; text-align: center; }
  .dm-progress p, .dm-doneblock p { margin: 0; color: #cdd7e1; font-size: .95rem; max-width: 280px; }
  .dm-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: #ffc861; animation: wsspin .7s linear infinite; }
  .dm-tick { width: 46px; height: 46px; border-radius: 50%; background: #3fcf8e; color: #0f141b; display: grid; place-items: center; font-size: 1.4rem; animation: dmpop .3s cubic-bezier(.2,1.4,.4,1); }
  @keyframes dmpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .dm-okbtn { margin-top: 6px; width: auto; padding: 10px 28px; }
  @media (prefers-reduced-motion: reduce) { .ws-load-spin, .dm-spin, .di-ring-p { animation-duration: .01ms; } }

  /* modal disclaimer (always at bottom of every demo modal) */
  .dm-disclaimer { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7886; text-align: center; }

  /* ===== Scene 2: Event listings - LIGHT editorial (Fraunces + Inter), warm paper ===== */
  .ws-scene.ev { background: #faf6ee; color: #2b2620; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .ev-top { padding: 20px 22px 15px; border-bottom: 1px solid #e6ddcd; background: #fffdf8; }
  .ev-title { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.4rem; color: #221d17; line-height: 1.15; }
  .ev-title span { display: block; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; font-weight: 400; font-size: .8rem; color: #8a7d68; margin-top: 4px; letter-spacing: .02em; }
  .ev-daybar { display: flex; align-items: center; gap: 8px; margin: 15px 0 13px; }
  .ev-day { font: 600 .82rem var(--font-sans,'IBM Plex Sans'),sans-serif; padding: 7px 15px; border: 1px solid #d8ccb6; border-right-width: 2px; border-bottom-width: 2px; border-right-color: #c9b896; border-bottom-color: #c9b896; border-radius: 3px; background: #fff; color: #5c5340; cursor: pointer; }
  .ev-day.on { background: #2b2620; color: #faf6ee; border-color: #2b2620; }
  .ev-count { margin-left: auto; font-size: .78rem; color: #8a7d68; }
  .ev-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .ev-chip { display: inline-flex; align-items: center; gap: 7px; font: 500 .8rem var(--font-sans,'IBM Plex Sans'),sans-serif; padding: 6px 12px; border: 1px solid #d8ccb6; border-radius: 3px; background: #fff; color: #4a4234; cursor: pointer; transition: background .6s, border-color .6s; }
  .ev-chip:hover { border-color: #b89b6a; }
  .ev-chip.on { background: #2b2620; color: #faf6ee; border-color: #2b2620; }
  .ev-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
  .t-roasting { background: #b5532e; } .t-business { background: #3f6fa3; } .t-sustainability { background: #4f8a4a; }
  .t-tech { background: #7a59a8; } .t-tasting { background: #c79a2e; } .t-retail { background: #c2557e; }
  .ev-list { padding: 10px 16px 18px; }
  .ev-slot { font-family: 'Fraunces',serif; font-weight: 600; font-size: .95rem; color: #a8916a; margin: 15px 4px 8px; display: flex; align-items: center; gap: 10px; }
  .ev-clash { font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; font-weight: 600; font-size: .72rem; color: #b5532e; background: #f6e6d8; border: 1px solid #e6c4a8; padding: 3px 9px; border-radius: 3px; display: inline-flex; align-items: center; gap: 6px; }
  .ev-card { position: relative; display: grid; grid-template-columns: 5px 1fr auto; align-items: stretch; gap: 14px; background: #fff; border: 1px solid #e6ddcd; border-right-width: 2px; border-bottom-width: 2px; border-right-color: #d8ccb6; border-bottom-color: #d8ccb6; border-radius: 3px; padding-right: 16px; margin-bottom: 8px; overflow: hidden; transition: transform .6s, box-shadow .6s; }
  .ev-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -14px rgba(80,60,30,.5); }
  .ev-card + .ev-card::before { content: ''; position: absolute; top: -8px; left: 22px; width: 2px; height: 8px; background: rgba(120,100,60,.28); }
  .ev-rail { width: 5px; align-self: stretch; }
  .ev-body { padding: 13px 0; }
  .ev-name { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.04rem; color: #221d17; }
  .ev-meta { font-size: .8rem; color: #8a7d68; margin-top: 3px; }
  .ev-trk { font-weight: 600; color: #5c5340; }
  .ev-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; text-align: right; padding: 11px 0; }
  .ev-fmt { font-size: .72rem; font-weight: 600; color: #5c5340; display: inline-flex; align-items: center; gap: 5px; }
  .ev-fmt.onl { color: #3f6fa3; } .ev-fmt.hyb { color: #7a59a8; }
  .ev-cap { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .ev-cap.low { background: #fbe9d8; color: #a85b22; } .ev-cap.full { background: #eee9e0; color: #8a7d68; } .ev-cap.open { background: #e6f0e2; color: #3f6b39; }
  .ev-empty { padding: 26px; text-align: center; color: #8a7d68; font-size: .9rem; }
  .ev-reset { background: none; border: 0; color: #b5532e; font-weight: 600; cursor: pointer; text-decoration: underline; font: inherit; }

  /* ===== Scene 3: Faceted catalogue - DARK technical (IBM Plex Sans + Mono) ===== */
  .ws-scene.cat { background: #0c1016; color: #cdd6e0; font-family: 'IBM Plex Sans',var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .cat-grid { display: grid; grid-template-columns: 204px 1fr; min-height: 430px; }
  .cat-facets { background: #10151d; border-right: 1px solid rgba(255,255,255,.07); padding: 16px 14px; }
  .cat-facet-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #6f7d8c; margin-bottom: 14px; font-weight: 600; }
  .cat-fgroup { margin-bottom: 16px; }
  .cat-fg-t { font-size: .74rem; font-weight: 600; color: #9fb0c0; margin-bottom: 8px; }
  .cat-fgroup label { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #b6c2cf; padding: 4px 0; cursor: pointer; font-family: 'IBM Plex Mono',monospace; }
  .cat-fgroup input { accent-color: #4ea3ff; width: 14px; height: 14px; }
  .cat-main { padding: 16px 18px; min-width: 0; }
  .cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .cat-matches { font-size: .9rem; color: #9fb0c0; }
  .cat-matches b { font-family: 'IBM Plex Mono',monospace; font-size: 1.5rem; color: #fff; font-weight: 600; }
  .cat-perfect { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: #3fcf8e; margin-left: 8px; font-weight: 600; }
  .cat-active { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .cat-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem 'IBM Plex Mono',monospace; background: rgba(78,163,255,.14); color: #7cc0ff; border: 0; border-radius: 3px; padding: 4px 9px; cursor: pointer; }
  .cat-chip:hover { background: rgba(78,163,255,.24); }
  .cat-table { border: 1px solid rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
  .cat-row { display: grid; grid-template-columns: 1.7fr .8fr .55fr .5fr 1.2fr .8fr; align-items: center; gap: 10px; padding: 10px 14px; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .cat-rows .cat-row:last-child { border-bottom: 0; }
  .cat-rows .cat-row:hover { background: rgba(255,255,255,.03); }
  .cat-row.cat-head { background: #10151d; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #6f7d8c; font-weight: 600; }
  .cat-row .r, .cat-head .r { text-align: right; }
  .cat-row .r { font-family: 'IBM Plex Mono',monospace; color: #fff; }
  .cat-pn { font-family: 'IBM Plex Mono',monospace; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-row > span:nth-child(2), .cat-row > span:nth-child(3), .cat-row > span:nth-child(4) { font-family: 'IBM Plex Mono',monospace; color: #cdd6e0; }
  .cat-stock { display: inline-flex; align-items: center; gap: 7px; font-size: .77rem; }
  .cat-stock i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .cat-stock.in { color: #9fe6c4; } .cat-stock.in i { background: #3fcf8e; box-shadow: 0 0 0 3px rgba(63,207,142,.18); }
  .cat-stock.low { color: #f0c97a; } .cat-stock.low i { background: #f0b13a; }
  .cat-stock.out { color: #ff9b85; } .cat-stock.out i { background: #ff6a4d; }
  @media (max-width: 760px) {
    .cat-grid { grid-template-columns: 1fr; }
    .cat-facets { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
    .cat-row { grid-template-columns: 1.4fr .7fr 1fr; }
    .cat-row > span:nth-child(3), .cat-row > span:nth-child(4) { display: none; }
    .ev-card { grid-template-columns: 5px 1fr; }
    .ev-side { grid-column: 2; align-items: flex-start; flex-direction: row; padding: 0 0 12px; }
  }

  .cat-perfect[hidden] { display: none; }

  /* ===== Scene 2 v2: festival programme, MIXED event types (each its own display) ===== */
  .ev-chip i { font-size: .85em; }
  .ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 18px; align-items: stretch; }
  .ev-c { position: relative; border: 1px solid #e6ddcd; border-right-width: 2px; border-bottom-width: 2px; border-right-color: #d8ccb6; border-bottom-color: #d8ccb6; border-radius: 3px; background: #fff; overflow: hidden; transition: transform .6s, box-shadow .6s; }
  .ev-c:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(80,60,30,.5); }
  .ev-c.span2 { grid-column: 1 / -1; }
  .ev-type { display: inline-flex; align-items: center; gap: 6px; font: 600 .68rem var(--font-sans,'IBM Plex Sans'),sans-serif; text-transform: uppercase; letter-spacing: .07em; color: #8a7d68; margin-bottom: 7px; }
  .ev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; align-items: center; }
  .ev-pill { font-size: .72rem; font-weight: 600; color: #5c5340; background: #f3ece0; border: 1px solid #e6ddcd; padding: 3px 9px; border-radius: 3px; }
  .ev-pill.age { background: #2b2620; color: #faf6ee; border-color: #2b2620; }
  .ev-free { color: #3f6b39; font-weight: 600; }
  .ev-meta-sm { font-size: .74rem; color: #a8916a; margin-top: 4px; }
  /* performance: atmospheric hero */
  .ev-perf-art { height: 92px; background: linear-gradient(115deg,#4a2f7a,#a8472b); position: relative; display: flex; align-items: flex-start; padding: 13px 16px; }
  .ev-perf-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 140% at 85% -10%,rgba(255,210,140,.5),transparent 55%); }
  .ev-perf-art .ev-type { color: rgba(255,255,255,.92); margin: 0; position: relative; z-index: 1; }
  .ev-perf-body { padding: 14px 16px 16px; }
  .ev-perf .ev-name { font-size: 1.32rem; line-height: 1.12; }
  /* film: poster + screening times */
  .ev-film { display: grid; grid-template-columns: 84px 1fr; }
  .ev-poster { background: linear-gradient(160deg,#2b2620,#544a3a); color: rgba(255,255,255,.45); display: grid; place-items: center; font-size: 1.7rem; }
  .ev-film-body { padding: 13px 15px; }
  .ev-film .ev-name { font-size: 1.06rem; }
  .ev-cert { display: inline-block; border: 1.5px solid #8a7d68; color: #5c5340; font-size: .64rem; font-weight: 700; padding: 0 4px; border-radius: 2px; margin-left: 5px; vertical-align: middle; }
  .ev-screen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
  .ev-stime { font: 600 .74rem var(--font-sans,'IBM Plex Sans'),sans-serif; background: #fff; border: 1px solid #d8ccb6; border-radius: 3px; padding: 4px 9px; color: #4a4234; cursor: pointer; transition: border-color .6s, color .6s; }
  .ev-stime:hover { border-color: #b5532e; color: #b5532e; }
  .ev-stime.soldout { color: #b0a48d; text-decoration: line-through; border-style: dashed; cursor: default; }
  /* talk: speaker avatar */
  .ev-talk { display: grid; grid-template-columns: 48px 1fr; gap: 13px; padding: 14px; align-items: start; }
  .ev-avatar { width: 46px; height: 46px; border-radius: 50%; background: #3f6fa3; color: #fff; display: grid; place-items: center; font: 600 1rem 'Fraunces',serif; }
  .ev-talk .ev-name { font-size: 1.04rem; }
  /* workshop: capacity is the headline */
  .ev-work { padding: 14px; }
  .ev-work .ev-name { font-size: 1.04rem; }
  .ev-capwrap { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
  .ev-capbar { flex: 1; height: 7px; background: #efe7d8; border-radius: 4px; overflow: hidden; }
  .ev-capbar i { display: block; height: 100%; background: linear-gradient(90deg,#c79a2e,#b5532e); border-radius: 4px; }
  /* exhibition: a run of dates, not a slot */
  .ev-exhib { display: grid; grid-template-columns: 132px 1fr; }
  .ev-runs { background: linear-gradient(160deg,#4f8a4a,#37663a); color: #fff; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .ev-runs b { font-family: 'Fraunces',serif; font-size: 1rem; }
  .ev-runs span { font-size: .82rem; opacity: .88; }
  .ev-exhib-body { padding: 14px 16px; }
  .ev-exhib .ev-name { font-size: 1.16rem; }
  /* late: dark, after hours */
  .ev-late { background: linear-gradient(160deg,#1c1830,#2b2342); border-color: #3a3258; border-right-color: #0e0b1a; border-bottom-color: #0e0b1a; color: #e8e4f2; padding: 14px; }
  .ev-late .ev-type { color: #b9a6e6; }
  .ev-late .ev-name { color: #fff; font-size: 1.04rem; }
  .ev-late .ev-meta { color: #b0a8c8; }
  .ev-late .ev-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #d8d2ec; }
  .ev-late .ev-pill.age { background: #b9a6e6; color: #1c1830; border-color: #b9a6e6; }
  .ev-empty { grid-column: 1 / -1; }

  /* ===== Programme-manager lens: same programme read operationally (fill/demand, utilisation, clashes) ===== */
  .ev-modebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 16px 12px; flex-wrap: wrap; }
  .ev-modetabs { display: inline-flex; border: 1px solid #e6ddcd; border-radius: 3px; overflow: hidden; flex: none; }
  .ev-mode { font: 600 .72rem 'IBM Plex Sans',system-ui,sans-serif; padding: 5px 12px; background: #fff; border: 0; cursor: pointer; color: #6b5a4c; transition: background .6s, color .6s; }
  .ev-mode + .ev-mode { border-left: 1px solid #e6ddcd; }
  .ev-mode.on { background: #2a201a; color: #fff; }
  .ev-ops { display: inline-flex; gap: 18px; flex-wrap: wrap; }
  .ev:not(.ev-prog) .ev-ops { display: none; }          /* operational summary only in programme view */
  .ev-op { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
  .ev-op b { font: 600 1.05rem 'Fraunces',serif; color: #2a201a; }
  .ev-op small { font-size: .56rem; text-transform: uppercase; letter-spacing: .07em; color: #8a7a68; margin-top: 4px; }
  .ev-op.warn b { color: #b5732e; }
  .ev-op.bad b { color: #b23a22; }
  /* per-card fill/demand chip — overlaid only in programme view */
  .ev-fill { position: absolute; top: 8px; right: 8px; z-index: 4; display: none; align-items: center; font: 700 .62rem 'IBM Plex Sans',sans-serif; padding: 3px 7px; border-radius: 3px; box-shadow: 0 1px 4px rgba(40,30,15,.18); }
  .ev-prog .ev-fill { display: inline-flex; }
  .ev-fill b { font-size: .68rem; }
  .ev-fill.d-hot { background: #fbe0d8; color: #b23a22; }
  .ev-fill.d-under { background: #fbeecc; color: #8a5a14; }
  .ev-fill.d-ok { background: #e2efe4; color: #2c6b41; }
  .ev-fill.d-free { background: rgba(255,255,255,.92); color: #6c6f78; }
  .ev-prog .ev-c.ev-clash { box-shadow: inset 0 0 0 2px rgba(217,138,43,.95); }
  .ev-prog .ev-c.ev-clash::after { content: 'clash'; position: absolute; bottom: 8px; right: 8px; z-index: 4; font: 700 .56rem 'IBM Plex Sans',sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: #d98a2b; padding: 2px 6px; border-radius: 3px; }
  @media (max-width: 760px) { .ev-grid { grid-template-columns: 1fr; } }

  .tagline.tagline--intro .tagline-line.tl-gap { margin-top: 1.2rem; }

  /* ===== Left nav v2: immersive themed icon tiles per surface ===== */
  .ws-area { gap: 13px; }
  .ws-area + .ws-area::before { left: 32px; }
  .ws-tile { position: relative; width: 40px; height: 40px; border-radius: 3px; display: grid; place-items: center; flex: none; color: #fff; font-size: 1.05rem; border-right: 2px solid rgba(0,0,0,.28); border-bottom: 2px solid rgba(0,0,0,.28); box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); background: #1a1c24; transition: transform .6s, box-shadow .6s; }
  .ws-num { position: absolute; top: -6px; left: -6px; width: 17px; height: 17px; border-radius: 50%; background: #fff; color: #1a1c24; font: 700 10px/1 var(--font-sans,'IBM Plex Sans'),sans-serif; display: grid; place-items: center; border: 1.5px solid #1a1c24; }
  .ws-area[data-scene="dashboard"] .ws-tile { background: linear-gradient(135deg,#1f2937,#0f141b); color: #ffc861; }
  .ws-area[data-scene="events"] .ws-tile { background: linear-gradient(135deg,#5b3a8a,#a8472b); }
  .ws-area[data-scene="catalogue"] .ws-tile { background: linear-gradient(135deg,#15233a,#0c1016); color: #7cc0ff; }
  .ws-area[data-scene="news"] .ws-tile { background: linear-gradient(135deg,#3f6b39,#274d2a); }
  .ws-area[data-scene="map"] .ws-tile { background: linear-gradient(135deg,#1d6f7a,#10454d); }
  .ws-area.on .ws-tile { transform: scale(1.06); box-shadow: 0 10px 22px -8px rgba(0,0,0,.7); }
  .ws-area.on .ws-num { background: #1a1c24; color: #fff; border-color: #fff; }
  .ws-area:hover { border-color: #b89b6a; }
  .ws-area.on { border-color: #b8b0a0; box-shadow: 0 10px 24px -16px rgba(26,28,36,.6); transform: translateX(3px); }
  .ws-area.on::after { content: ''; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px; }
  .ws-area[data-scene="dashboard"].on::after { background: #ffc861; }
  .ws-area[data-scene="events"].on::after { background: #a8472b; }
  .ws-area[data-scene="catalogue"].on::after { background: #4ea3ff; }
  .ws-area[data-scene="news"].on::after { background: #3f6b39; }
  .ws-area[data-scene="map"].on::after { background: #1d6f7a; }

  /* ===== dashboard alignment tweaks ===== */
  .rw-ex-sev { align-items: center; text-align: center; }
  .rw-ex-body, .rw-ex-t { text-align: left; }
  /* ===== modal: anchor near the top so it doesn't jump between sizes ===== */
  .dm-overlay { align-items: flex-start; padding-top: 13vh; }
  .dm-box { margin-top: 0; }

  /* ===== Scene 2 masthead + grid fixes + flair ===== */
  .ev-top { padding: 0; background: transparent; border-bottom: 0; }
  .ev-masthead { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; background: linear-gradient(105deg,#241c34,#3a2147 58%,#7a2f3a); color: #f3e9ef; padding: 18px 20px; position: relative; overflow: hidden; }
  .ev-masthead::after { content: ''; position: absolute; right: -30px; top: -40px; width: 180px; height: 180px; background: radial-gradient(circle,rgba(255,179,122,.28),transparent 62%); }
  .ev-mast-l { position: relative; z-index: 1; }
  .ev-logo { font-family: 'Fraunces',serif; font-weight: 600; font-size: 2rem; letter-spacing: -.02em; line-height: 1; display: flex; align-items: flex-start; color: #fff; }
  .ev-logo em { font-style: normal; color: #ffb37a; font-size: 1.1rem; margin-left: 1px; }
  .ev-tagline { font-family: 'Fraunces',serif; font-style: italic; font-size: .96rem; color: #d8c2cf; margin-top: 7px; }
  .ev-stats { display: flex; gap: 9px; align-items: center; position: relative; z-index: 1; }
  .ev-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 3px; padding: 8px 13px; }
  .ev-stat b { font-family: 'Fraunces',serif; font-size: 1.5rem; line-height: 1; color: #fff; }
  .ev-stat span { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: #cdb6c4; margin-top: 4px; }
  .ev-chips { padding: 12px 16px; border-bottom: 1px solid #e6ddcd; background: #fffdf8; }
  .ev-chip.on { box-shadow: inset 0 -3px 0 #b5532e; }
  .ev-grid { align-items: stretch; }
  /* film: sprocket-hole edges (gemini) */
  .ev-film .ev-poster { position: relative; }
  .ev-film .ev-poster::before, .ev-film .ev-poster::after { content: ''; position: absolute; top: 0; bottom: 0; width: 7px; background-image: repeating-linear-gradient(#0b0e13 0 4px, transparent 4px 9px); }
  .ev-film .ev-poster::before { left: 3px; } .ev-film .ev-poster::after { right: 3px; }
  /* exhibition: dog-ear instead of feeling like a plain block */
  .ev-exhib .ev-runs { position: relative; }
  .ev-exhib .ev-runs::after { content: ''; position: absolute; top: 0; right: 0; border-width: 0 14px 14px 0; border-style: solid; border-color: rgba(255,255,255,.5) #faf6ee; }

  /* ===== Scene 3 v2: visual parametric catalogue (to-scale footprints, depth, immersive facets) ===== */
  .cat-pkgviz { display: inline-block; position: relative; vertical-align: middle; margin-right: 9px; background: #3a4150; border-radius: 1px; }
  .cat-pkgviz::before, .cat-pkgviz::after { content: ''; position: absolute; top: -1px; bottom: -1px; width: 3px; background: linear-gradient(#e8edf2,#9aa7b6); border-radius: 1px; }
  .cat-pkgviz::before { left: -1px; } .cat-pkgviz::after { right: -1px; }
  .pkg-0402 { width: 11px; height: 5px; } .pkg-0603 { width: 16px; height: 8px; } .pkg-0805 { width: 21px; height: 10px; } .pkg-1206 { width: 30px; height: 13px; }
  .cat-row { display: block; padding: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .cat-rows .cat-row:last-child { border-bottom: 0; }
  .cat-rows .cat-row:hover { background: rgba(255,255,255,.03); }
  .cat-line { display: grid; grid-template-columns: 2fr .7fr .95fr .5fr 1.35fr .95fr 28px; gap: 10px; align-items: center; padding: 10px 14px; }
  .cat-line > span { font-variant-numeric: tabular-nums; min-width: 0; }
  .cat-row.cat-head { background: #10151d; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: #6f7d8c; font-weight: 600; }
  .cat-row.cat-head .cat-line { padding: 8px 14px; }
  .cat-row.cat-head .r { text-align: right; }
  .cat-pn { display: flex; flex-direction: column; gap: 2px; }
  .cat-pno { font-family: 'IBM Plex Mono',monospace; color: #fff; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cat-mfr { font-size: .7rem; color: #7d8b9a; display: flex; align-items: center; gap: 7px; }
  .lc { font-style: normal; font-weight: 600; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: 2px; }
  .lc.active { color: #3fcf8e; background: rgba(63,207,142,.12); }
  .lc.nrnd { color: #f0b13a; background: rgba(240,177,58,.14); }
  .lc.eol { color: #ff7758; background: rgba(255,119,88,.14); }
  .cat-val { font-family: 'IBM Plex Mono',monospace; color: #fff; }
  .cat-pkg { font-family: 'IBM Plex Mono',monospace; color: #cdd6e0; display: flex; align-items: center; }
  .cat-line > span:nth-child(4) { font-family: 'IBM Plex Mono',monospace; color: #cdd6e0; }
  .cat-stock { display: flex; flex-direction: column; gap: 5px; font-size: .75rem; }
  .cat-st-row { display: flex; align-items: center; gap: 7px; }
  .cat-st-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .cat-stock.in { color: #9fe6c4; } .cat-stock.in i { background: #3fcf8e; box-shadow: 0 0 0 3px rgba(63,207,142,.16); }
  .cat-stock.low { color: #f0c97a; } .cat-stock.low i { background: #f0b13a; }
  .cat-stock.out { color: #ff9b85; } .cat-stock.out i { background: #ff6a4d; }
  .cat-depth { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
  .cat-depth b { display: block; height: 100%; background: currentColor; opacity: .55; border-radius: 2px; }
  .cat-price { font-family: 'IBM Plex Mono',monospace; color: #fff; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
  .cat-price small { color: #7d8b9a; font-size: .65rem; }
  .cat-act { text-align: center; }
  .cat-act a { color: #6f8090; } .cat-act a:hover { color: #7cc0ff; }
  .cat-alt { padding: 0 14px 9px 50px; font-size: .74rem; color: #8aa0b0; display: flex; align-items: center; gap: 8px; }
  .cat-alt b { color: #cdd6e0; font-family: 'IBM Plex Mono',monospace; }
  .cat-alt .fa-arrow-right-arrow-left { color: #f0b13a; }
  .cat-alt a { color: #7cc0ff; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
  .cat-more { padding: 11px 14px; font-size: .76rem; color: #6f7d8c; font-family: 'IBM Plex Mono',monospace; border-top: 1px dashed rgba(255,255,255,.1); background: rgba(255,255,255,.015); }
  .cat-more b { color: #9fb0c0; }
  /* immersive facet toggles with population bars */
  .cat-facet-h { display: flex; align-items: center; gap: 8px; }
  .cat-fg-hint { font-size: .62rem; color: #5a6776; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
  .cat-fopt { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 3px; cursor: pointer; position: relative; transition: background .6s; }
  .cat-fopt:hover { background: rgba(255,255,255,.04); }
  .cat-fopt input { position: absolute; opacity: 0; pointer-events: none; }
  .cat-fbox { width: 18px; height: 18px; flex: none; border-radius: 3px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); display: grid; place-items: center; color: transparent; font-size: 10px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); transition: background .6s, color .6s, transform .6s; }
  .cat-fopt input:checked + .cat-fbox { background: #4ea3ff; border-color: #4ea3ff; color: #0c1016; transform: translateY(1px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
  .cat-fl { font-family: 'IBM Plex Mono',monospace; font-size: .82rem; color: #cdd6e0; white-space: nowrap; display: flex; align-items: center; flex: none; }
  .cat-fbar { flex: 1; height: 6px; min-width: 22px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
  .cat-fbar i { display: block; height: 100%; background: linear-gradient(90deg,#2b6cb0,#4ea3ff); border-radius: 3px; }
  .cat-fopt input:checked ~ .cat-fbar i { background: linear-gradient(90deg,#4ea3ff,#7cc0ff); }
  .cat-fn { font-family: 'IBM Plex Mono',monospace; font-size: .7rem; color: #6f7d8c; min-width: 40px; text-align: right; flex: none; }
  .cat-fopt input:checked ~ .cat-fn { color: #9fb0c0; }
  .cat-matches b { font-variant-numeric: tabular-nums; }
  @media (max-width: 760px) {
    .cat-line { grid-template-columns: 1.6fr .7fr 1.1fr; }
    .cat-line > span:nth-child(3), .cat-line > span:nth-child(4), .cat-act { display: none; }
    .ev-masthead { flex-direction: column; gap: 12px; } .ev-stats { align-self: flex-start; }
  }

  /* keep the catalogue results area a stable height so it doesn't jump while filtering */
  .cat-rows { min-height: 286px; }

  /* #3 stays sparse + utilitarian; fixed results height (~dashboard) that scrolls rather than resizing the demo */
  .cat-rows { min-height: 0; height: 300px; overflow-y: auto; }
  .cat-rows::-webkit-scrollbar { width: 8px; } .cat-rows::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }

  /* catalogue drill-down crumb (static; explains why the facets are scoped) */
  .cat-crumb { display: flex; align-items: center; gap: 7px; font-size: .74rem; color: #6f7d8c; font-family: 'IBM Plex Mono',monospace; margin-bottom: 12px; flex-wrap: wrap; }
  .cat-crumb .cat-sep { font-size: .62rem; opacity: .6; }
  .cat-crumb b { color: #cdd6e0; }
  .cat-crumb > .fa-folder-tree { color: #4ea3ff; }

  /* ===== Left nav v3: one connected line (no gaps), route-line spine, active notch ===== */
  .ws-areas { gap: 0; position: relative; background: #fff; border: 1px solid var(--line-strong,rgba(26,28,36,.18)); border-right-width: 2px; border-bottom-width: 2px; border-right-color: rgba(26,28,36,.3); border-bottom-color: rgba(26,28,36,.3); border-radius: 3px; overflow: hidden; }
  .ws-areas::before { content: ''; position: absolute; left: 33px; top: 34px; bottom: 34px; width: 2px; background: rgba(26,28,36,.16); z-index: 0; }
  .ws-area { border: 0; border-radius: 0; background: transparent; box-shadow: none !important; transform: none !important; border-bottom: 1px solid var(--line,rgba(26,28,36,.1)); padding: 13px 14px; }
  .ws-area:last-child { border-bottom: 0; }
  .ws-area + .ws-area::before { display: none; }
  .ws-tile { position: relative; z-index: 1; }
  .ws-area.on { background: rgba(26,28,36,.035); }
  .ws-area.on::after { top: 0; bottom: 0; }
  .ws-area.on::before { content: ''; display: block; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); border: 7px solid transparent; border-left-color: #1a1c24; z-index: 2; }
  .ws-area[data-scene="dashboard"].on::before { border-left-color: #ffc861; }
  .ws-area[data-scene="events"].on::before { border-left-color: #a8472b; }
  .ws-area[data-scene="map"].on::before { border-left-color: #1d6f7a; }

  /* ===== Scene 4 (shown as #3): Map + assets - dark teal control surface (Sora + IBM Plex Mono) ===== */
  .ws-scene.mp { background: radial-gradient(130% 120% at 72% -10%,#103138,#0a161a); color: #cfe3e6; font-family: 'Sora',var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .mp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .mp-title { font-family: 'Sora',sans-serif; font-weight: 600; font-size: 1.12rem; color: #eafcff; }
  .mp-title span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: #5e8f95; margin-top: 4px; font-weight: 500; }
  /* one-line answer first: what's down and what it costs */
  .mp-headline { font-family: 'IBM Plex Mono',monospace; font-size: .82rem; color: #aacdd2; text-align: right; line-height: 1.5; max-width: 50%; }
  .mp-headline b { color: #eafcff; }
  .mp-hl-big { color: #ff6a4d; font-weight: 600; font-size: 1.05rem; }
  .mp-hl-rev { color: #f0b13a; font-weight: 600; }
  .mp-kpis { display: flex; gap: 22px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
  .mp-kpi { display: flex; flex-direction: column; align-items: flex-start; }
  .mp-kpi b { font-family: 'IBM Plex Mono',monospace; font-size: 1.4rem; color: #3fe0b0; line-height: 1; }
  .mp-kpi small { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: #5e8f95; margin-top: 5px; }
  .mp-chip-n { font-style: normal; font-family: 'IBM Plex Mono',monospace; font-size: .68rem; opacity: .7; margin-left: 1px; }
  .mp-filters { display: flex; gap: 7px; padding: 12px 18px; flex-wrap: wrap; }
  .mp-chip { display: inline-flex; align-items: center; gap: 7px; font: 600 .78rem 'Sora',sans-serif; padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 3px; background: rgba(255,255,255,.03); color: #aacdd2; cursor: pointer; }
  .mp-chip.on { background: #0f3b40; border-color: #3fe0b0; color: #eafcff; }
  .mp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
  .mp-dot.s-gen { background: #3fe0b0; } .mp-dot.s-red { background: #f0b13a; } .mp-dot.s-off { background: #ff6a4d; } .mp-dot.s-mnt { background: #7d97a0; }
  .mp-body { display: grid; grid-template-columns: 1fr 320px; min-height: 360px; }
  .mp-map { position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.08); min-height: 360px;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 34px 34px; }
  .mp-uk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .mp-uk-gb, .mp-uk-ni { fill: rgba(63,224,176,.055); stroke: rgba(125,190,195,.5); stroke-width: .55; stroke-linejoin: round; }
  .mp-layer { position: absolute; inset: 0; }
  .mp-region { position: absolute; font: 600 .58rem 'Sora',sans-serif; letter-spacing: .18em; color: rgba(170,205,210,.32); transform: translate(-50%,-50%); pointer-events: none; }
  .mp-marker { position: absolute; transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(10,22,26,.85); cursor: pointer; padding: 0; background: #3fe0b0; transition: transform .6s; z-index: 2; }
  .mp-marker.big { width: 22px; height: 22px; }
  .mp-marker.s-gen { background: #3fe0b0; box-shadow: 0 0 0 4px rgba(63,224,176,.18); animation: mppulse 2.6s ease-in-out infinite; }
  .mp-marker.s-red { background: #f0b13a; box-shadow: 0 0 0 4px rgba(240,177,58,.18); }
  .mp-marker.s-off { background: #ff6a4d; box-shadow: 0 0 0 4px rgba(255,106,77,.2); }
  .mp-marker.s-mnt { background: #7d97a0; box-shadow: 0 0 0 4px rgba(125,151,160,.18); }
  @keyframes mppulse { 0%,100% { box-shadow: 0 0 0 4px rgba(63,224,176,.18); } 50% { box-shadow: 0 0 0 9px rgba(63,224,176,.04); } }
  .mp-marker.hot, .mp-marker:hover { transform: translate(-50%,-50%) scale(1.4); z-index: 6; }
  .mp-mlabel { position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #06222a; color: #eafcff; font: 600 .68rem 'IBM Plex Mono',monospace; padding: 4px 8px; border: 1px solid rgba(63,224,176,.3); border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .6s; }
  .mp-marker:hover .mp-mlabel, .mp-marker.hot .mp-mlabel { opacity: 1; }
  /* cluster count circle (collapses density at scale; click to expand) */
  .mp-cluster { position: absolute; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(10,22,26,.85); cursor: pointer; padding: 0; display: grid; place-items: center; z-index: 3; transition: transform .2s; }
  .mp-cluster:hover { transform: translate(-50%,-50%) scale(1.12); z-index: 7; }
  .mp-cluster-n { font: 700 12px/1 'IBM Plex Mono',monospace; color: #06222a; }
  .mp-cluster.s-gen { background: #3fe0b0; box-shadow: 0 0 0 5px rgba(63,224,176,.16); }
  .mp-cluster.s-red { background: #f0b13a; box-shadow: 0 0 0 5px rgba(240,177,58,.16); }
  .mp-cluster.s-off { background: #ff6a4d; box-shadow: 0 0 0 5px rgba(255,106,77,.18); }
  .mp-cluster.s-mnt { background: #7d97a0; box-shadow: 0 0 0 5px rgba(125,151,160,.16); }
  /* right panel: output curve above, site list below */
  .mp-side { display: flex; flex-direction: column; min-height: 0; }
  .mp-curve { padding: 12px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
  .mp-curve-h { font: 600 .72rem 'Sora',sans-serif; color: #cfe3e6; margin-bottom: 8px; }
  .mp-curve-h span { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: #5e8f95; margin-top: 3px; font-weight: 500; }
  .mp-curve-svg { width: 100%; height: 64px; display: block; }
  .mp-cv-area { fill: rgba(63,224,176,.1); stroke: none; }
  .mp-cv-fc { fill: none; stroke: #5e8f95; stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
  .mp-cv-ac { fill: none; stroke: #3fe0b0; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .mp-cv-now { stroke: #f0b13a; stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
  .mp-cv-dot { fill: #3fe0b0; stroke: #06222a; stroke-width: 1.5; }
  .mp-curve-leg { display: flex; gap: 13px; margin-top: 7px; font: 500 .6rem 'Sora',sans-serif; color: #6e9aa0; }
  .mp-lg { display: inline-flex; align-items: center; gap: 5px; }
  .mp-lg::before { content: ''; width: 12px; height: 2px; border-radius: 2px; }
  .mp-lg.fc::before { background: repeating-linear-gradient(90deg,#5e8f95 0 3px,transparent 3px 6px); }
  .mp-lg.ac::before { background: #3fe0b0; }
  .mp-lg.now::before { background: #f0b13a; }
  .mp-list { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
  .mp-list::-webkit-scrollbar { width: 8px; } .mp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
  .mp-site { display: grid; grid-template-columns: 9px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: background .6s; }
  .mp-site:hover, .mp-site.hot { background: rgba(63,224,176,.08); }
  .mp-cf { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
  .mp-cf b { font-family: 'IBM Plex Mono',monospace; font-size: .9rem; color: #cfe3e6; }
  .mp-cf small { font-size: .54rem; text-transform: uppercase; letter-spacing: .06em; color: #5e8f95; margin-top: 3px; }
  .mp-tr { font-size: .62rem; margin-bottom: 3px; }
  .mp-tr.up { color: #3fe0b0; } .mp-tr.down { color: #ff6a4d; } .mp-tr.flat { color: #5e8f95; }
  .mp-cause { color: #f0b13a !important; }
  .mp-site.s-off .mp-cause { color: #ff6a4d !important; }
  .mp-sdot { width: 9px; height: 9px; border-radius: 50%; }
  .mp-site.s-gen .mp-sdot { background: #3fe0b0; } .mp-site.s-red .mp-sdot { background: #f0b13a; } .mp-site.s-off .mp-sdot { background: #ff6a4d; } .mp-site.s-mnt .mp-sdot { background: #7d97a0; }
  .mp-site-n { font-weight: 600; color: #eafcff; font-size: .92rem; display: flex; align-items: center; gap: 7px; }
  .mp-site-n i { color: #5e8f95; font-size: .85em; }
  .mp-site-m { font-size: .73rem; color: #6e9aa0; margin-top: 2px; }
  .mp-out { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .mp-out-bar { width: 76px; height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
  .mp-out-bar i { display: block; height: 100%; background: #3fe0b0; border-radius: 3px; }
  .mp-site.s-red .mp-out-bar i { background: #f0b13a; } .mp-site.s-off .mp-out-bar i { background: #ff6a4d; } .mp-site.s-mnt .mp-out-bar i { background: #7d97a0; }
  .mp-out > span { font-family: 'IBM Plex Mono',monospace; font-size: .78rem; color: #cfe3e6; }
  .mp-out > span small { color: #5e8f95; }
  @media (max-width: 760px) { .mp-body { grid-template-columns: 1fr; } .mp-map { min-height: 220px; } .mp-summary { gap: 12px; } }

  /* festival stats: editorial run with dotted "fold" separators, not three identical boxes */
  .ev-stats { gap: 0; align-items: stretch; }
  .ev-stat { background: transparent; border: 0; border-radius: 0; padding: 2px 18px; display: flex; flex-direction: column; align-items: center; position: relative; }
  .ev-stat + .ev-stat::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; border-left: 1px dotted rgba(255,255,255,.3); }
  .ev-stat b { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.9rem; line-height: 1; color: #fff; }
  .ev-stat span { font-size: .56rem; text-transform: uppercase; letter-spacing: .14em; color: #dcc6d3; margin-top: 6px; }

  /* ===== All surfaces share the dashboard's height (fixed); content scrolls inside ===== */
  .ws-stage { height: 731px; }
  .ws-scene { height: 100%; min-height: 0; }
  .ws-scene.rw.show, .ws-scene.ev.show, .ws-scene.cat.show, .ws-scene.mp.show { display: flex; flex-direction: column; }
  .ws-scene.rw { overflow-y: auto; }
  /* max-content rows so cards size to content (no flex-shrink row compression / clipped hero); grid scrolls instead */
  .ev-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-auto-rows: max-content; }
  .cat-grid { flex: 1 1 auto; min-height: 0; }
  .cat-rows { height: auto; flex: 1; }
  .mp-body { flex: 1 1 auto; min-height: 0; }
  .mp-list { max-height: none; }
  .ws-soon.show { height: 100%; }

  /* ===== Story rail: numbered points down the left, dashed connector to the data each explains ===== */
  .ws-spots { position: absolute; inset: 0 auto 0 0; width: 220px; z-index: 12; display: none; flex-direction: column; justify-content: center; gap: 7px; padding: 16px 8px 16px 12px; pointer-events: none; }
  .ws-pt { pointer-events: auto; display: flex; gap: 9px; align-items: flex-start; text-align: left; width: 100%; background: rgba(11,15,21,.64); color: #e7edf3; border: 0; border-left: 2px solid rgba(255,255,255,.22); border-radius: 0 4px 4px 0; padding: 7px 10px; cursor: pointer; font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; opacity: .4; transition: opacity .6s ease, background .6s, border-color .6s; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  .ws-pt:hover { opacity: 1; }
  .ws-pt.on { opacity: 1; background: rgba(11,15,21,.9); border-left-color: #ffc861; }
  .ws-pt-n { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #10151c; font: 700 11px/1 'Space Grotesk',sans-serif; display: grid; place-items: center; flex: none; margin-top: 1px; }
  .ws-pt.on .ws-pt-n { background: #ffc861; }
  .ws-pt-t { font-size: .8rem; line-height: 1.42; color: #dbe3ec; }
  .ws-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .15s ease; overflow: visible; filter: drop-shadow(0 0 2.5px rgba(0,0,0,.55)); }
  .ws-lines.show { opacity: 1; }
  /* Connectors are on-demand: nothing by default. Hover a point = thin white dashed
     preview; click = thick yellow dashed (the dot marks its endpoint). */
  .ws-line { fill: none; stroke: none; stroke-width: 1.25; transition: stroke-width .15s ease; }
  .ws-line.hover { stroke: rgba(255,255,255,.92); stroke-width: 1.4; stroke-dasharray: 4 4; }
  .ws-line.on { stroke: #ffc861; stroke-width: 2.8; stroke-dasharray: 6 5; }
  .ws-tdot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #ffc861; border: 2px solid rgba(11,15,21,.85); transform: translate(-50%,-50%); z-index: 11; opacity: 0; transition: opacity .6s ease; box-shadow: 0 0 0 4px rgba(255,200,97,.22); pointer-events: none; }
  .ws-tdot.show { opacity: 1; }
  @media (max-width: 760px) { .ws-spots { display: none !important; } }

  /* ===== Mobile: numbered discs pinned to the data, tap → friendly modal (rail + connectors are desktop-only) ===== */
  .ws-mdisc { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; background: #1a1c24; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.5); font: 700 13px/1 'Space Grotesk',sans-serif; display: flex; align-items: center; justify-content: center; z-index: 20; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
  .ws-mdisc:active { transform: scale(.92); }
  .ws-mmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10,12,16,.55); opacity: 0; transition: opacity .3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .ws-mmodal.in { opacity: 1; }
  .ws-mmodal-card { background: #fff; border-radius: 3px; max-width: 340px; width: 100%; padding: 22px 20px 18px; position: relative; box-shadow: 0 24px 60px -22px rgba(0,0,0,.6); transform: translateY(10px); transition: transform .3s ease; }
  .ws-mmodal.in .ws-mmodal-card { transform: none; }
  .ws-mmodal-n { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #ffc861; color: #1a1305; font: 700 15px/1 'Space Grotesk',sans-serif; margin-bottom: 12px; }
  .ws-mmodal-t { margin: 0 0 16px; font-size: 1rem; line-height: 1.5; color: var(--ink,#1a1c24); font-family: var(--font-sans,'IBM Plex Sans'),sans-serif; }
  .ws-mmodal-x { display: inline-flex; align-items: center; font: var(--fw-bold) var(--btn-size) 'IBM Plex Sans',sans-serif; background: var(--ink,#1a1c24); color: #fff; border: 0; border-radius: 3px; padding: 9px 16px; cursor: pointer; }

  /* Mobile reflow: each surface grows to show its full interface (no internal scroll / shrunk miniature) */
  @media (max-width: 760px) {
    .ws-stage { height: auto; min-height: 0; }
    .ws-scene { height: auto; min-height: 0; }
    .ws-scene.rw.show, .ws-scene.ev.show, .ws-scene.cat.show, .ws-scene.mp.show { display: block; }
    .ws-scene.rw { overflow: visible; }
    .ev-grid, .cat-grid, .mp-body { overflow: visible; flex: none; min-height: 0; }
  }

  /* homepage demos sub-line: capped width, light bold + brand highlight */
  .demos-sub { max-width: 50%; }
  .demos-sub strong { font-weight: 600; color: var(--ink,#1a1c24); }
  .demos-sub .demos-hl { background: linear-gradient(transparent 58%, rgba(245,233,170,.9) 58%); font-weight: 600; padding: 0 .1em; }
  @media (max-width: 760px) { .demos-sub { max-width: 100%; } }

  /* ===== Story rail relocated into the left sidebar (under the nav) ===== */
  .ws-grid { position: relative; }
  .ws-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .ws-story-h { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute,#6c6f78); font-weight: 600; margin: 0 0 9px 2px; }
  /* override the old absolute overlay rules: now in-flow in the sidebar, light theme */
  .ws-spots { position: static; inset: auto; width: auto; z-index: auto; display: none; flex-direction: column; gap: 5px; padding: 0; pointer-events: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ws-pt { background: transparent; border: 0; border-left: 2px solid var(--line-strong,rgba(26,28,36,.18)); border-radius: 0 3px 3px 0; padding: 6px 9px; opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .6s, border-color .6s; }
  .ws-pt:hover { background: rgba(26,28,36,.045); }
  .ws-pt.on { background: rgba(224,163,42,.14); border-left-color: #e0a32a; }
  .ws-pt-n { background: var(--ink,#1a1c24); color: #fff; }
  .ws-pt.on .ws-pt-n { background: #e0a32a; color: #1a1c24; }
  .ws-pt-t { color: var(--ink,#2a2d36); font-size: .8rem; }
  .ws-line.on { stroke: #ffc861; }
  .ws-tdot { background: #e0a32a; border-color: #fff; box-shadow: 0 0 0 4px rgba(224,163,42,.22); }

  /* centre the demos sub-lines */
  .demos-sub { margin-left: auto; margin-right: auto; text-align: center; }

  /* ===================================================================
     DESIGN SYSTEM — canonical components (use these; see /design-system)
     =================================================================== */
  /* Type utilities (map straight to the locked scale) */
  .t-h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--h1); line-height: var(--lh-head); color: var(--ink); }
  .t-h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--h2); line-height: var(--lh-head); color: var(--ink); }
  .t-h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--h3); line-height: 1.2; color: var(--ink); }
  .t-lg { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--lh-body); color: var(--ink-soft); }
  .t-md { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-body); color: var(--ink-soft); }
  .t-sm { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-mute); }
  .t-xs { font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
  .t-lead { font-family: var(--font-serif); font-size: var(--lead-serif-lg); line-height: 1.3; color: var(--ink); }   /* large serif standout / side quote */
  .t-lead--md { font-size: var(--lead-serif-md); }
  .t-hl { background: linear-gradient(transparent 58%, rgba(245,233,170,.9) 58%); font-weight: var(--fw-bold); padding: 0 .1em; }  /* brand highlight */

  /* Buttons — one system, three intents + a small size */
  .ui-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--btn-size); line-height: 1; padding: 11px 18px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .6s, border-color .6s, transform .6s, color .6s; }
  .ui-btn:active { transform: translateY(1px); }
  .ui-btn--primary { background: var(--ink); color: var(--paper); }
  .ui-btn--primary:hover { background: var(--c-problem-1); }
  .ui-btn--accent { background: var(--c-problem-1); color: var(--paper); }
  .ui-btn--accent:hover { background: var(--c-problem-2); }
  .ui-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .ui-btn--ghost:hover { border-color: var(--ink); background: rgba(26,28,36,.04); }
  .ui-btn--sm { padding: 7px 12px; font-size: var(--text-sm); }

  /* Inputs — one field pattern */
  .ui-field { display: flex; flex-direction: column; gap: 5px; }
  .ui-label { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
  .ui-input { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.4; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--paper); color: var(--ink); width: 100%; }
  .ui-input::placeholder { color: var(--ink-mute); }
  .ui-input:focus { outline: none; border-color: var(--c-problem-1); box-shadow: 0 0 0 3px rgba(196,81,58,.15); }
  .ui-input.is-valid { border-color: var(--c-solution-1); box-shadow: 0 0 0 3px rgba(62,138,108,.15); }
  .ui-input.is-error { border-color: var(--c-problem-1); box-shadow: 0 0 0 3px rgba(196,81,58,.15); }

  /* once the "explore more" area is revealed, drop the peek-catch overlay so the demos are clickable */
  .demos-more.open .demos-peek-catch { display: none; pointer-events: none; }

  /* search demo: 50/50 columns with 10% margin either side */
  #demo-search { grid-template-columns: 1fr 1fr; margin-left: 10%; margin-right: 10%; }
  @media (max-width: 760px) { #demo-search { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; } }

  /* standard dot motif — section separator (6 dots, one size everywhere) */
  .dot-motif { display: flex; justify-content: center; align-items: center; gap: 11px; padding: var(--space-7) 0; }
  .dot-motif i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-mute); display: block; }
  .dot-motif--flush { padding: 0; }                                   /* separators that rely on section margins */
  .dot-motif--red i  { background: var(--c-problem-1,#c4513a); }      /* section marker above "Clients struggle with..." */
  .dot-motif--blue i { background: #2e5c8a; }                         /* section marker above the "Hi, I'm Robin" intro */

  /* relational demo: swap sides (copy left, interactive card right) */
  #demo-audit .demo-copy { order: 1; }
  #demo-audit .demo-stage { order: 2; }

  /* relational demo: keep text 40 / demo 60, just on the swapped sides */
  #demo-audit { grid-template-columns: 40% 60%; }
  /* ...but stack to a single column on mobile (the id rule above otherwise beats
     the generic .demo-split stack rule on specificity, leaving it in columns) */
  @media (max-width: 860px) { #demo-audit { grid-template-columns: 1fr; } }

  /* circle annotation marker — no background box on the text */
  .hl-circle { background: transparent; }

  /* festival grid: backfill the holes the span-2 cards leave, so it's not wonky */
  .ev-grid { grid-auto-flow: dense; }

  /* pain points on mobile: boxes go edge-to-edge (no left/right gutter) */
  @media (max-width: 760px) { .pains.wrap { padding-left: 16px; padding-right: 16px; } }

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SYSTEM — 2026-06-07 (Robin: one style, 2 sizes, 2 colours)
   One shape: 3px corners, Inter 600, white text. Variations: BLACK (default)
   or RED. Sizes: default + --sm. Converges the old .btn-primary / .btn-secondary
   / .demos-revealer / .di-ok / nav cta / contact-form button. Appended last so
   it wins the cascade without hunting every scattered earlier rule.
   ════════════════════════════════════════════════════════════════════════ */
  .ui-btn, .btn-primary, .btn-secondary, .demos-revealer, .di-ok,
  .contact-form button, .site-nav-links a.cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex-direction: row; width: auto;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-weight: 600; font-size: var(--btn-size, .9rem); line-height: 1;
    letter-spacing: .01em; text-transform: none; text-decoration: none; white-space: nowrap;
    padding: 11px 18px; border-radius: 2px; border: 1px solid transparent;
    background: var(--ink); color: #fff; cursor: pointer; box-shadow: none;
    transition: background .6s ease, border-color .6s ease, transform .6s ease;
  }
  .ui-btn:active, .btn-primary:active, .btn-secondary:active, .demos-revealer:active,
  .di-ok:active, .contact-form button:active, .site-nav-links a.cta:active { transform: translateY(1px); }
  /* BLACK (default) hover */
  .ui-btn:hover, .ui-btn--primary:hover, .ui-btn--black:hover, .btn-primary:hover,
  .btn-secondary:hover, .contact-form button:hover, .site-nav-links a.cta:hover { background: #000; color: #fff; }
  .btn-primary:disabled, .ui-btn:disabled { opacity: .5; cursor: progress; }
  /* RED variant — both variations keep white text */
  .ui-btn--red, .ui-btn--accent, .btn-primary--hot, .demos-revealer, .demos-revealer--red, .di-ok {
    background: var(--c-problem-1, #c4513a); color: #fff; border-color: transparent;
  }
  .ui-btn--red:hover, .ui-btn--accent:hover, .btn-primary--hot:hover, .demos-revealer:hover, .di-ok:hover {
    background: var(--c-problem-2, #a8412c); color: #fff;
  }
  /* SMALL size — 2px taller, text nudged up 1px (extra bottom padding) */
  .ui-btn--sm, .btn-secondary, .site-nav-links a.cta { padding: 7px 13px 9px; font-size: var(--text-sm, .8rem); }
  /* "explore more" revealer: block-level + centred, now a solid red button */
  .demos-revealer { display: flex; width: max-content; max-width: 100%; margin: 18px auto 0; }
  .demos-revealer.gone { display: none; }
  .dr-arrow { font-size: 1em; line-height: 1; font-weight: 700; animation: none; transition: transform .3s ease; }
  .demos-revealer:hover .dr-arrow { color: #fff; transform: translateX(3px); }
  /* di-ok keeps its countdown ring; flip ring strokes so they read on red */
  .di-ok { padding: 9px 16px 9px 11px; }
  .di-ok .di-ring circle { stroke: rgba(255,255,255,.35); }
  .di-ok .di-ring .di-ring-p { stroke: #fff; }

  /* Homepage section headings — one size (2026-06-07). All are Fraunces 800 already;
     sizes had drifted (29.6 / 35.2 / 44.8px). Scoped to the homepage sections so
     .iso-title keeps its larger size on case-study/experiment page heroes. */
  .recent-rescues-section .iso-title,
  .experiments-home .iso-title,
  .services-teaser h2 { font-size: var(--h2); }

  /* op-dash: a deliberately non-default pairing - Fraunces serif headings + Plex Mono figures
     (not the Inter + generic-mono an LLM reaches for in a dashboard) */
  .ws-scene[data-scene="dashboard"] .rw-col-h,
  .ws-scene[data-scene="dashboard"] .rw-feed-h,
  .ws-scene[data-scene="dashboard"] .rw-side-h,
  .ws-scene[data-scene="dashboard"] .rw-headrow { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .ws-scene[data-scene="dashboard"] .rw-fill-v,
  .ws-scene[data-scene="dashboard"] .rw-num { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-feature-settings: 'tnum' 1; }

  /* --- sentence-case sweep: site-chrome eyebrows / kickers / tags -------------
     Drops the all-caps + wide tracking on label chrome to plain sentence case.
     Demo-internal microlabels (.rw-*, .db-*, .ev-*, .cat-*, .mp-*, .bridge-*,
     .cms-*, .search-*, .ws-*, .lay2-*) are deliberately left as caps - they
     emulate real software UI where that reads as authentic. NDA stays an acronym. */
  .pillars-eyebrow,
  .clients-wall-pre,
  .contact-pre,
  .how-title .pre,
  .knot-titlebar .pre,
  .brand-sub,
  .legacy-thumb .legacy-sub,
  .modal-body .section-h,
  .iso-title.iso-title--plain,
  .media-thumb span,
  .card-body .tag,
  .modal-body .meta-tags .tag,
  .agency-label,
  .agency-skills-line .agency-skills-label,
  .project-type-tag,
  .cf-field > span,
  .contact-form label,
  .hf-label {
    text-transform: none;
    letter-spacing: normal;
  }

  /* Per-scene evidence block inside the layout-explorer left panel.
     Reuses .demo-evidence (red bar + small muted text); the Sources line is the
     same intentionally-quiet taupe as the citation modal's source link. */
  .ws-evwrap { margin-top: 16px; }
  .ws-ev { margin: 0; max-width: 100%; }
  .ws-ev p { margin: 0; }
  .ws-ev-src { margin: 8px 0 0; color: #978d79; }
  .ws-ev-src a { color: #978d79; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(151,141,121,.4); padding: 0 1px; transition: color .2s, border-color .2s; }
  .ws-ev-src a:hover { color: var(--ink-soft,#34363d); border-bottom-color: rgba(52,54,61,.45); }

  /* "leave work on time" - bold red, no marker underline */
  .tl-hot { color: var(--c-problem-1,#c4513a); font-weight: 700; }

  /* === Festival (events) scene: dark theme (masthead was already dark; this darkens the rest) === */
  .ev-modebar--ops-only { justify-content: flex-start; }
  .ws-scene.ev { background: #1c1928; color: #ece7f0; }
  .ws-scene.ev .ev-top { background: #221d2f; border-bottom-color: rgba(255,255,255,.10); }
  .ws-scene.ev .ev-chips { background: #221d2f; border-bottom-color: rgba(255,255,255,.10); }
  .ws-scene.ev .ev-count { color: #b3a9c0; }
  .ws-scene.ev .ev-chip { background: rgba(255,255,255,.06); color: #d6cee2; border-color: rgba(255,255,255,.16); }
  .ws-scene.ev .ev-chip:hover { border-color: rgba(255,179,122,.7); }
  .ws-scene.ev .ev-chip.on { background: #f3e9ef; color: #241c34; border-color: #f3e9ef; }
  .ws-scene.ev .ev-card, .ws-scene.ev .ev-c { background: #2a2436; border-color: rgba(255,255,255,.10); border-right-color: rgba(255,255,255,.16); border-bottom-color: rgba(255,255,255,.16); }
  .ws-scene.ev .ev-card + .ev-card::before { background: rgba(255,255,255,.18); }
  .ws-scene.ev .ev-title { color: #f1ecf6; }
  .ws-scene.ev .ev-title span { color: #b3a9c0; }
  .ws-scene.ev .ev-meta, .ws-scene.ev .ev-meta-sm { color: #b3a9c0; }
  .ws-scene.ev .ev-cert { color: #b3a9c0; }
  .ws-scene.ev .ev-op b { color: #fff; }
  .ws-scene.ev .ev-op small { color: #b3a9c0; }
  .ws-scene.ev .ev-empty { color: #cfc6dc; }
  .ws-scene.ev .ev-capbar { background: rgba(255,255,255,.12); }

  /* Festival dark theme: lighten the remaining card text so nothing is dark-on-dark */
  .ws-scene.ev .ev-name { color: #f1ecf6; }
  .ws-scene.ev .ev-type { color: #b6acc6; }
  .ws-scene.ev .ev-slot { color: #e0c79a; }
  .ws-scene.ev .ev-trk { color: #cdc5da; }
  .ws-scene.ev .ev-fmt { color: #cdc5da; }
  .ws-scene.ev .ev-fmt.onl { color: #8fb4e0; }
  .ws-scene.ev .ev-fmt.hyb { color: #c0a6ec; }
  .ws-scene.ev .ev-pill { color: #cdc5da; }
  .ws-scene.ev .ev-free { color: #6fce72; }
  .ws-scene.ev .ev-cert { border-color: rgba(255,255,255,.34); }
  .ws-scene.ev .ev-stime { color: #d6cee2; }

  /* ===== Mobile: tighten vertical rhythm - less dead white space ===== */
  @media (max-width: 760px) {
    :root { --space-9: 52px; --space-8: 44px; --space-7: 36px; }
    .demos { margin: 48px auto; }
    #demo-validate, .demos-more .demo, .demo-stack, .demo-split2 { margin-bottom: 52px; }
    .demo-split { margin-bottom: 28px; }
    .demos-rule { margin: 30px auto 34px; }
    .pains-head { margin-bottom: 22px; }
    .how-we-work-section { margin: 48px auto 40px; }
  }

  /* iOS auto-zooms when a focused editable field is under 16px. Bump focusable
     fields to 16px on mobile so the page doesn't jump on focus. Pinch-zoom is kept
     (we don't touch the viewport meta), so this stays accessible. */
  @media (max-width: 760px) {
    .cms-edit,
    .demo [contenteditable="true"],
    .demo input, .demo textarea,
    .hero-form input, .hero-form textarea,
    .cf-field input, .cf-field textarea,
    .contact-form input, .contact-form textarea { font-size: 16px; }
  }

  /* Hide the post-hero separator on mobile (it sits awkwardly under the contact form there) */
  @media (max-width: 760px) { .dot-motif--hide-mobile { display: none; } }

/* ============== WHAT IS COMPLEX DATA? (escalation, visual) ============== */
.complex-data { padding-top: calc(var(--space-6) + 100px); padding-bottom: calc(var(--space-6) + 100px); }
.cd-rows { display: flex; flex-direction: column; gap: 30px; max-width: 640px; margin: var(--space-6) auto 0; }
.cd-row {
  display: grid; grid-template-columns: 1fr auto 2fr; align-items: center; gap: clamp(12px, 2.4vw, 26px);
  background: var(--paper); border: 2px solid var(--ink);
  border-left-width: 4px; border-bottom-width: 4px; border-radius: 0;
  box-shadow: -8px 8px 0 0 var(--ink);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.8vw, 30px);
}
.cd-side { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cd-side--std { justify-content: center; text-align: center; }
.cd-side--cplx { gap: 18px; }
.cd-stack { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cd-stack--multi { gap: 8px; }
.cd-ic { width: 30px; height: 30px; display: block; color: var(--ink-soft); opacity: .55; }
.cd-side--cplx .cd-ic { width: 38px; height: 38px; opacity: 1; }
.cd-ic--r { color: var(--c-problem-1); }
.cd-ic--g { color: var(--c-solution-1); }
.cd-ic--b { color: var(--c-strategy-1); }
/* escalation: each successive complex icon a touch larger */
.cd-stack--multi .cd-ic:nth-child(2) { width: 42px; height: 42px; }
.cd-stack--multi .cd-ic:nth-child(3) { width: 46px; height: 46px; }
/* hand-drawn sketch icons (sketch-lines.js) replace the flat FA glyphs */
.cd-sketch { min-width: 76px; justify-content: center; }
.cd-sketch svg { display: block; width: 76px; height: 76px; overflow: visible; }
.cd-sketch--net svg { width: 90px; height: 90px; }
.cd-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: .98rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.cd-side--std .cd-label { color: var(--ink-soft); opacity: .8; }
.cd-side--cplx .cd-label { color: var(--ink); }
/* the growing dots between the two sides */
.cd-grow { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.cd-grow i { display: block; border-radius: 50%; background: var(--c-problem-1); }
.cd-grow i:nth-child(1) { width: 5px; height: 5px; opacity: .45; }
.cd-grow i:nth-child(2) { width: 7px; height: 7px; opacity: .7; }
.cd-grow i:nth-child(3) { width: 9px; height: 9px; opacity: 1; }
.cd-foot {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 1.02rem; line-height: 1.6;
  color: var(--ink-soft); max-width: 60ch; margin: var(--space-6) auto 0; text-align: center;
}
.cd-foot strong, .cd-foot b { color: var(--ink); }
@media (max-width: 720px) {
  .cd-rows { max-width: 100%; gap: 24px; margin-top: var(--space-5); }
  .cd-row {
    grid-template-columns: 1fr; align-items: stretch; gap: 0;
    box-shadow: -5px 5px 0 0 var(--ink);
    padding: 20px 20px;
  }
  /* standard: small grey icon + label inline, left-aligned, divided off below */
  .cd-side--std {
    justify-content: flex-start; text-align: left; gap: 13px;
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .cd-side--std .cd-label { opacity: .85; }
  /* escalation cue: the three dots now grow top-to-bottom, centred between the two blocks */
  .cd-grow { flex-direction: column; align-self: center; gap: 5px; margin: 14px 0; }
  /* complex: centred icon row on top, longer label left-aligned beneath it */
  .cd-side--cplx { flex-direction: column; align-items: stretch; gap: 12px; }
  .cd-side--cplx .cd-stack { align-self: center; }
  .cd-side--cplx .cd-stack--multi { gap: 12px; }
}

/* ============== I COMBINE (technical clarity band) ============== */
.combine { padding: var(--space-7) 0 var(--space-8); text-align: center; }
.combine-inner { max-width: 940px; margin: 0 auto; }
@media (max-width: 600px) { .combine-inner { padding: 0 8px; } }
.combine-lead { font-family: 'Fraunces', serif; font-weight: 800; font-size: var(--h2); letter-spacing: -.02em; color: var(--ink); margin: 0 0 var(--space-5); }
.combine-grid {
  list-style: none; padding: 0; margin: 0 auto var(--space-6); max-width: 540px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px) clamp(16px, 3.5vw, 40px);
}
.combine-grid li {
  font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 600; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
}
.combine-ic { display: block; width: 70px; height: 70px; color: var(--ink); }
.combine-ic svg { width: 100%; height: 100%; display: block; overflow: visible; }
.combine-foot { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 0 auto; }
.combine-foot strong { color: var(--ink); }
.combine-cta { margin-top: var(--space-6); }
@media (max-width: 460px) { .combine-grid { gap: 20px 18px; } .combine-ic { width: 58px; height: 58px; } }

/* Hero tagline — blue background highlight on the payoff phrase */
.tl-bluehl {
  background: #2e5c8a; color: #fff;
  padding: .12em 1rem; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* nudge the revealer arrow up to sit on the text baseline */
.demos-revealer .dr-arrow { position: relative; top: -3px; }

/* homepage case-study card summary highlights (light r/g/b + bold) - homepage only */
.legacy-blurb .cb-r, .legacy-blurb .cb-g, .legacy-blurb .cb-b { font-weight: 600; border-radius: 3px; padding: 0 .22em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.legacy-blurb .cb-r { background: rgba(196,81,58,.15); }
.legacy-blurb .cb-g { background: rgba(62,138,108,.16); }
.legacy-blurb .cb-b { background: rgba(46,92,138,.15); }