/* ==========================================================================
   Pisteyo Website
   Design System, "The Operator's Board"

   The site is a working board, not a brochure:
     cream is the board · red is the pen · navy is the frame.
   Cream carries the page, white is demoted to artifacts sitting ON the board
   (cards, pinned notes, forms), red stops being ambient and becomes the mark
   of a decision, and a handwritten layer carries the candour in the voice.
   See docs/operators-board.md for the full rulebook.
   ========================================================================== */

/* ---------- Fonts ----------
   All four families are self-hosted below as latin variable subsets, so there
   is no render-blocking request to fonts.googleapis.com. */

/* ---------- Tokens ---------- */
:root {
  /* Brand colors */
  --pisteyo-red: #FF5758;
  --pisteyo-red-dark: #E84545;
  --pisteyo-red-soft: #FFEAEA;
  --dark-gray-blue: #2E333D;
  --violet-blue: #004C74;
  --gray-azure: #597A98;
  --light-azure: #D3F5FF;
  --light-azure-soft: #F1FBFF;
  --white: #FFFFFF;
  --light-grey: #D9D9D9;
  /* Image placeholder / inset tint. Warm now, so a loading image does not
     flash cool white against the board. */
  --bg-tint: var(--board-alt);

  /* The board */
  /* Warm cream surfaces that replace white as the page base. --board is the
     page, --board-alt the deeper tone alternating sections take, --board-sunk
     the closing tone. Rose and tape belong to the hand layer. */
  --board: #F9F6EF;
  --board-alt: #F3EFE3;
  --board-sunk: #EFEADC;
  --pisteyo-rose: #FFDEDE;
  --tape: rgba(89, 122, 152, 0.16);
  --dot-ink: rgba(46, 51, 61, 0.11);
  --dot-tile: 26px;

  /* Accents (used sparingly) */
  --vivid-blue: #1166CB;
  --vivid-purple: #9013D5;
  --vivid-pink: #FE0061;
  --gray-blue: #3D547B;
  --dark-indigo: #0A0630;

  /* Semantic tokens */
  --text-primary: var(--dark-gray-blue);
  --text-secondary: var(--gray-azure);
  --text-inverse: var(--white);
  --heading-primary: var(--dark-gray-blue);
  --heading-secondary: var(--violet-blue);
  --page: var(--board);            /* the board itself */
  --surface: var(--white);         /* artifacts on the board */
  --surface-alt: var(--board-alt); /* alternating board tone */
  --surface-dark: var(--dark-gray-blue);
  --border: rgba(46, 51, 61, 0.12);
  --divider: var(--light-grey);

  /* Typography */
  --font-display: 'Bricolage Grotesque', 'Montserrat', system-ui, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  /* The hand layer. Never headings, never body copy, never below 18px. */
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  /* Spacing scale (Material 8pt) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Elevation (Material) */
  --elev-1: 0 1px 2px rgba(46, 51, 61, 0.06), 0 1px 3px rgba(46, 51, 61, 0.08);
  --elev-2: 0 2px 4px rgba(46, 51, 61, 0.06), 0 4px 8px rgba(46, 51, 61, 0.08);
  --elev-3: 0 4px 8px rgba(46, 51, 61, 0.06), 0 12px 24px rgba(46, 51, 61, 0.10);
  --elev-4: 0 8px 16px rgba(46, 51, 61, 0.08), 0 24px 48px rgba(46, 51, 61, 0.12);
  /* A note lying on a board casts a shorter, warmer shadow than a card does.
     Used by stickies and pinned scraps only. */
  --elev-note: 0 4px 10px rgba(46, 51, 61, 0.14);

  /* Layout */
  --container-max: 1240px;
  --nav-height: 64px;

  /* Motion */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 360ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Overshoot-and-settle curve for high-touch controls (drawer open, button
     press, chip toggle), reserve for one-shot state changes, not reveals. */
  --t-spring: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* ---------- Self-hosted fonts (latin variable subsets) ----------
   The families the tokens always named, now actually delivered instead of
   silently falling back to system fonts. Bricolage Grotesque is the display
   voice; Montserrat stays on smaller headings and UI; Open Sans on body. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../assets/fonts/montserrat-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/opensans-var.woff2') format('woff2');
}
/* The hand. Loaded last and used sparingly, a handful of asides per page. */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/caveat-var.woff2') format('woff2');
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-height);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--violet-blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--pisteyo-red); }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--heading-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  color: var(--heading-secondary);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--heading-primary);
}

h4 {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--heading-primary);
}

p { margin: 0 0 var(--space-2); }
.lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
  margin-bottom: var(--space-2);
}
/* the red dash: the accent doing the pointing, everywhere a section starts */
.eyebrow-blue { color: var(--violet-blue); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--space-5); }
}

.section {
  padding: var(--space-8) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--space-10) 0; }
}

.section-tight { padding: var(--space-6) 0; }

/* ---------- Dot divider (brand motif between sections) ---------- */
.dot-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: var(--space-2) 0;
}
.dot-divider span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-azure);
  opacity: 0.35;
}
.dot-divider span:nth-child(2) {
  background: var(--pisteyo-red);
  opacity: 1;
  width: 8px;
  height: 8px;
}
/* Alternating sections are the deeper board tone, carrying the graph-paper
   texture so the whole site reads as one continuous working surface. */
.section-alt {
  background-color: var(--surface-alt);
  background-image: radial-gradient(var(--dot-ink) 1.2px, transparent 1.3px);
  background-size: var(--dot-tile) var(--dot-tile);
  background-position: 13px 13px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-dark {
  background: var(--surface-dark);
  color: var(--white);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
  color: var(--white);
}
.section-dark .eyebrow { color: var(--pisteyo-red); }
.section-dark .lead { color: rgba(255,255,255,0.85); }

/* .section-header - the centred head that made every section look the same -
   is retired. .sec-head replaces it everywhere; the rule is gone rather than
   deprecated so it cannot be copied into a new page and reopen the split. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 12px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-fast),
              background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); transition: transform var(--t-spring); }

.btn-primary {
  background: var(--pisteyo-red);
  color: var(--white);
  box-shadow: var(--elev-1);
}
.btn-primary:hover {
  background: var(--pisteyo-red-dark);
  color: var(--white);
  box-shadow: var(--elev-2);
}

.btn-secondary {
  background: transparent;
  color: var(--violet-blue);
  border-color: var(--violet-blue);
}
.btn-secondary:hover {
  background: var(--violet-blue);
  color: var(--white);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}
.btn-ghost:hover {
  border-color: var(--pisteyo-red);
  color: var(--pisteyo-red);
}

.btn-on-dark {
  background: var(--white);
  color: var(--dark-gray-blue);
}
.btn-on-dark:hover { background: var(--light-azure); color: var(--dark-gray-blue); }

.btn-arrow::after {
  content: '\2192';
  font-weight: 600;
  transition: transform var(--t-fast);
}
.btn-arrow:hover::after { transform: translateX(3px); }
/* On narrow screens a long CTA label (Spanish runs longer than English) must
   wrap and stay inside its section instead of being clipped by the section's
   overflow. Short labels are unaffected — they still sit on a single line. */
@media (max-width: 560px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Explicit gap so the logo always keeps clearance from the first nav item.
     (The language switch uses margin-left:auto to push the EN|ES + CTA cluster
     right, which cancels justify-content's spacing — the gap restores it.) */
  column-gap: var(--space-4);
  height: var(--nav-height);
}

.nav-logo img {
  height: 20px;
  width: auto;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  padding: var(--space-1) 0;
  position: relative;
  transition: color var(--t-fast);
}
.nav-links a:hover { color: var(--pisteyo-red); }
.nav-links a.active { color: var(--pisteyo-red); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--pisteyo-red);
  border-radius: 2px;
}

.nav-cta { display: none; }

/* Right-hand cluster (EN|ES + CTA + mobile toggle), grouped by main.js so the
   header is logo / menu / actions. A row at every width. */
.nav-right { display: inline-flex; align-items: center; gap: var(--space-2); }

/* --- Language switcher (EN | ES), injected by main.js into header + footer --- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.lang-switch .lang-sep { color: var(--border); font-weight: 400; }
.lang-switch a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 2px 2px;
  transition: color var(--t-fast);
}
.lang-switch a:hover { color: var(--pisteyo-red); }
.lang-switch a[aria-current='true'] { color: var(--pisteyo-red); }
/* In the header the switch joins the right-hand cluster (logo + links stay
   left, EN|ES + CTA sit right), so it reads as intentional at every width. */
.site-header .lang-switch { margin-left: auto; }
/* Mobile drawer variant: a full-width row above the CTA. */
.mobile-drawer .lang-switch { margin: var(--space-2) 0 0; font-size: 0.95rem; }
/* Footer variant sits on the copyright row, lighter tone on the dark footer. */
.footer-bottom .lang-switch { margin-left: 0; }
.footer-bottom .lang-switch a { color: rgba(255, 255, 255, 0.66); }
.footer-bottom .lang-switch a:hover,
.footer-bottom .lang-switch a[aria-current='true'] { color: var(--white); }
.footer-bottom .lang-switch .lang-sep { color: rgba(255, 255, 255, 0.3); }

@media (min-width: 1160px) {
  .nav-links { display: flex; }
  /* Compact header CTA, sits lighter next to the wordmark, closer to the
     small nav buttons on microsoft.com / deloitte.com. */
  .nav-cta { display: inline-flex; padding: 9px 18px; font-size: 0.875rem; }
  /* Centered nav: once main.js groups EN|ES + CTA into .nav-right, a three-
     column grid puts the logo left, the menu dead-centre, actions right —
     balanced regardless of how wide the side clusters are. Grid (unlike an
     absolutely-positioned nav) keeps the full-width dropdown panels anchored
     to the sticky header, so the mega-menus are unaffected. */
  .nav.nav-centered {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--space-4);
  }
  .nav.nav-centered .nav-logo { justify-self: start; }
  .nav.nav-centered > nav[aria-label="Primary"] { justify-self: center; }
  .nav.nav-centered .nav-right {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }
  .nav.nav-centered .nav-right .lang-switch { margin-left: 0; }
}
/* Between the breakpoint and a roomy desktop the seven links and the CTA are
   a tight fit, close the gaps rather than let anything wrap or collide. The
   Spanish nav labels run longer, so tighten the outer gaps here too. */
@media (min-width: 1160px) and (max-width: 1339px) {
  .nav { column-gap: var(--space-3); }
  .nav-links { gap: var(--space-3); }
  .nav-links a { font-size: 0.9rem; }
  .nav-cta { padding: 8px 16px; font-size: 0.85rem; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--board);
  color: var(--text-primary);
}
@media (min-width: 1160px) {
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  background: #ffffff;
  padding: var(--space-3);
  transform: translateY(-110%);
  transition: transform var(--t-spring);
  z-index: 99;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
}
.mobile-drawer.open { transform: translateY(0); }
.mobile-drawer ul { list-style: none; padding: 0; margin: 0; }
.mobile-drawer li { border-bottom: 1px solid var(--border); }
.mobile-drawer a {
  display: block;
  padding: var(--space-2) 0;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
}
/* `.mobile-drawer a { display: block }` outranks `.btn`'s inline-flex, which
   left-aligned the label inside a full-width button. Restore the centring. */
.mobile-drawer .btn {
  margin-top: var(--space-3);
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-9);
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(255, 87, 88, 0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(0, 76, 116, 0.07), transparent 60%),
    var(--board);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-7); }
}

.hero h1 {
  margin-bottom: var(--space-3);
}
/* Navy, not red: the frame states the point and the pen circles it, so the
   encircle is the only red mark in the hero viewport. */
.hero h1 .accent { color: var(--violet-blue); }
.hero p.lead { max-width: 580px; }
.hero .lead-mark { color: var(--violet-blue); font-weight: 700; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.hero-stat .num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--violet-blue);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.hero-stat .lbl {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-3);
  aspect-ratio: 4 / 5;
  background-color: var(--dark-indigo);
  isolation: isolate;
}
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 6, 48, 0.55));
  z-index: 2;
  pointer-events: none;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.95;
}
.hero-video-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(255, 87, 88, 0.10), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(0, 76, 116, 0.18), transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-visual .badge { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-visual {
    background:
      linear-gradient(135deg, rgba(255,87,88,0.15), rgba(0,76,116,0.25)),
      var(--dark-indigo);
  }
}
.hero-visual .badge {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  z-index: 1;
}
.hero-visual .badge .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--pisteyo-red);
  box-shadow: 0 0 0 4px rgba(255,87,88,0.18);
}
.hero-visual .badge p { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }

/* Page header for inner pages */
.page-hero {
  padding: var(--space-7) 0 var(--space-8);
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(255, 87, 88, 0.06), transparent 60%),
    var(--board);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { max-width: 900px; }
.page-hero .lead { max-width: 720px; }
.page-hero .actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Roadmap hero (AI Implementation): an editorial 90-day line that draws
   itself, crawl/walk/run milestones landing in sequence. */
.roadmap-hero .roadmap-head { max-width: 760px; }
.roadmap { margin-top: var(--space-6); }
.roadmap-line { position: relative; height: 3px; background: var(--border); border-radius: 2px; margin: 0 0 var(--space-6); overflow: hidden; }
.roadmap-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--violet-blue), var(--pisteyo-red));
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: rm-draw 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
@keyframes rm-draw { to { transform: scaleX(1); } }
.roadmap-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .roadmap-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.roadmap-steps li {
  position: relative;
  padding-top: var(--space-4);
  opacity: 0; transform: translateY(10px);
  animation: rm-rise 0.6s ease calc(0.7s + var(--i) * 0.55s) both;
}
.roadmap-steps li::before {
  content: ""; position: absolute; top: calc(-1 * var(--space-6) - 6px); left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--pisteyo-red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pisteyo-red) 22%, transparent);
}
@keyframes rm-rise { to { opacity: 1; transform: none; } }
.roadmap-steps .rm-day { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pisteyo-red); margin-bottom: 6px; }
.roadmap-steps b { display: block; font-family: var(--font-heading); font-size: 1.15rem; color: var(--heading-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.roadmap-steps .rm-note { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) {
  .roadmap-fill { animation: none; transform: scaleX(1); }
  .roadmap-steps li { animation: none; opacity: 1; transform: none; }
}
/* On mobile the steps stack, so swap the horizontal track for a vertical
   timeline the milestone dots sit on (otherwise the dots float free). */
@media (max-width: 759px) {
  .roadmap-line { display: none; }
  .roadmap-steps { position: relative; padding-left: 26px; gap: var(--space-4); }
  .roadmap-steps::before {
    content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
    width: 2px; background: var(--border); border-radius: 2px;
  }
  .roadmap-steps li { padding-top: 0; }
  .roadmap-steps li::before { top: 4px; left: -26px; box-shadow: 0 0 0 4px var(--board); }
}
/* Seat-grid hero (Copilot Consulting): copy beside a live grid of license
   "seats" warming from idle to daily use. */
.usage-hero .container { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 920px) {
  .usage-hero .container { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-7); }
}
.usage-hero .svc-crumb { margin-bottom: var(--space-3); }
.usage-hero h1 { max-width: none; }
.usage-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.usage-canvas { display: block; width: 100%; height: clamp(240px, 34vh, 340px); }
.usage-legend {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-3);
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.usage-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.usage-legend .dot-idle { background: rgba(120, 143, 168, 0.6); }
.usage-legend .dot-use { background: var(--pisteyo-red); }
/* Image-side hero: copy on one side, a photo with a floating accent on the
   other. Reused across the Services pages that lead with a human image. */
.split-hero .container {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 920px) {
  .split-hero .container { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-7); }
}
.split-hero .svc-crumb { margin-bottom: var(--space-3); }
.split-hero-copy h1 { max-width: none; }
.split-hero-media { position: relative; }
.split-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
}
.split-hero-chip {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--heading-primary);
  box-shadow: var(--elev-1);
}
.split-hero-chip .chip-dots { display: inline-flex; gap: 4px; }
.split-hero-chip .chip-dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.split-hero-chip .chip-dots i:nth-child(1) { background: var(--gray-azure); }
.split-hero-chip .chip-dots i:nth-child(2) { background: color-mix(in srgb, var(--gray-azure), var(--pisteyo-red)); }
.split-hero-chip .chip-dots i:nth-child(3) { background: var(--pisteyo-red); }

/* ---------- Innovation Labs, co-build braid hero ---------- */
.labs-hero .container { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 920px) {
  .labs-hero .container { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-7); }
}
.labs-hero h1 { max-width: none; }
.labs-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.labs-canvas { display: block; width: 100%; height: clamp(280px, 38vh, 380px); }

/* Funnel hero (AI Innovation): copy beside a funnel where many experiments
   ignite and a few reach production. */
.innov-hero .container { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 920px) { .innov-hero .container { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-7); } }
.innov-hero h1 { max-width: none; }
.innov-panel { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--elev-1); }
.innov-canvas { display: block; width: 100%; height: clamp(280px, 38vh, 380px); }

/* Agentic hero (Agentic AI Consulting): copy beside a live view of agents
   clearing an inbox and routing exceptions to a human. */
.agentic-hero .container { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 920px) { .agentic-hero .container { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-7); } }
.agentic-hero .svc-crumb { margin-bottom: var(--space-3); }
.agentic-hero h1 { max-width: none; }
.agentic-panel { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--elev-1); }
.agentic-canvas { display: block; width: 100%; height: clamp(260px, 36vh, 360px); }
.agentic-legend { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-2); font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }
.agentic-legend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.agentic-legend .a-agent { background: var(--pisteyo-red); border-radius: 50%; }
.agentic-legend .a-human { background: transparent; border: 1.5px solid var(--gray-azure); border-radius: 50%; }

/* Backlog hero (Executive AI Workshops): copy beside a use-case backlog that
   sorts itself into ranked order by value x effort. */
.backlog-hero .container { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 920px) { .backlog-hero .container { grid-template-columns: 1.02fr 0.98fr; gap: var(--space-7); } }
.backlog-hero .svc-crumb { margin-bottom: var(--space-3); }
.backlog-hero h1 { max-width: none; }
.backlog-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.backlog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); gap: 12px; }
.backlog-head b { font-family: var(--font-heading); font-size: 0.98rem; color: var(--heading-primary); }
.backlog-head span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.backlog { position: relative; }
.backlog-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--board); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; will-change: transform;
}
.backlog-row .bk-rank { font-family: ui-monospace, monospace; font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); width: 20px; flex: none; }
.backlog-row .bk-label { font-weight: 600; font-size: 0.92rem; color: var(--heading-primary); flex: 1; }
.backlog-row .bk-score { display: inline-flex; gap: 3px; flex: none; }
.backlog-row .bk-score i { width: 6px; height: 15px; border-radius: 2px; background: var(--border); }
.backlog-row .bk-score i.on { background: var(--pisteyo-red); }
.backlog-row.is-top { border-color: rgba(255, 87, 88, 0.5); box-shadow: var(--elev-1); }
.backlog-row.is-top .bk-rank { color: var(--pisteyo-red); }

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: var(--space-3);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
  border-color: rgba(255, 87, 88, 0.25);
}
.card .card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--pisteyo-red-soft);
  color: var(--pisteyo-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.card .card-icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 4px; }
.card p { color: var(--text-secondary); margin: 0; }
.card .card-link {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: 600;
  color: var(--violet-blue);
}
.card:hover .card-link { color: var(--pisteyo-red); }
/* underline slides in from the left on hover */
.card .card-link,
.site-footer ul a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px);
  background-size: 0% 1.5px;
  transition: background-size var(--t-base), color var(--t-fast), opacity var(--t-fast);
}
.card .card-link:hover,
.card:hover .card-link,
.site-footer ul a:hover {
  background-size: 100% 1.5px;
}
.card .card-link::after {
  content: '\2192';
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--t-fast);
}
.card:hover .card-link::after { transform: translateX(4px); }

/* Service card variants */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--pisteyo-red);
  opacity: 0;
  transition: opacity var(--t-base);
}
.service-card:hover::before { opacity: 1; }

/* Stat card */
.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.stat-card .stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--violet-blue);
  line-height: 1;
  margin-bottom: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Step / numbered cards */
.step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}
.step-card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--violet-blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

/* ---------- Logo strip / Trusted by ----------
   .logo-strip clips and edge-fades a continuously scrolling .logo-track.
   The track's content is duplicated in markup so translateX(-50%) loops
   seamlessly; the second copy is aria-hidden. Pauses on hover so a name
   can actually be read, and stands still under reduced-motion. */
.logo-strip {
  overflow: hidden;
  padding: var(--space-4) var(--space-3);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-7);
  width: max-content;
  animation: logo-marquee 90s linear infinite;
}
.logo-strip:hover .logo-track { animation-play-state: paused; }
.logo-strip img.logo-item {
  height: 60px;
  width: auto;
  object-fit: contain;
  opacity: 1;
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* ---------- Feature row (image + text) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .feature-row.reverse > .feature-image { order: 2; }
}

.feature-image {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--dark-gray-blue);
  background-size: cover;
  background-position: center;
  box-shadow: var(--elev-2);
}
/* photos render at their native brightness - no duotone grade */
.feature-image.no-grade::after { content: none; }

.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-3);
}
.feature-list li {
  position: relative;
  padding-left: 26px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 16px;
  background: var(--pisteyo-red-soft);
  border-radius: 50%;
}
.feature-list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 12px;
  width: 8px; height: 8px;
  background: var(--pisteyo-red);
  border-radius: 50%;
}

/* ---------- People / team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}
.team-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--board-alt);
}
/* headshots render at their native brightness */
.team-body { padding: var(--space-3); }
.team-body h4 { margin: 0 0 4px; font-size: 1.15rem; }
.team-role {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--violet-blue);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-1);
}
.team-bio {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
}
/* Bios come at wildly different lengths (Bob's is 100+ words, others 60).
   Clamp the visible copy to sixteen lines so every card reads to the same
   rhythm; the JS toggle in main.js reveals the full bio in place. */
.team-bio.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 16;
  line-clamp: 16;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-bio-toggle {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 8px 0 0;
  cursor: pointer;
  font: 600 0.85rem/1 var(--font-body);
  color: var(--pisteyo-red);
  letter-spacing: 0.02em;
  transition: color var(--t-fast);
}
.team-bio-toggle:hover { color: var(--pisteyo-red-dark, #cf4142); }
.team-bio-toggle::after { content: " \203A"; }
.team-bio-toggle[aria-expanded="true"]::after { content: " \2039"; }
.team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ---------- Use case list ---------- */
.usecase-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 720px) { .usecase-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .usecase-list { grid-template-columns: repeat(3, 1fr); } }

.usecase-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--t-base);
  display: flex;
  flex-direction: column;
}
.usecase-card:hover {
  border-color: var(--pisteyo-red);
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}
.usecase-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-blue);
  background: var(--light-azure-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
  align-self: flex-start;
}
.usecase-card h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.usecase-card a {
  margin-top: auto;
  padding-top: var(--space-2);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--violet-blue);
}
.usecase-card:hover a { color: var(--pisteyo-red); }

/* ---------- FAQ / accordion ---------- */
.faq {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--pisteyo-red);
  transition: transform var(--t-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  padding-top: var(--space-2);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ---------- Form ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elev-1);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 700px) {
  .form-grid.two-col { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Allow the field to shrink inside its grid track instead of contributing
     its content's min-content width upward. */
  min-width: 0;
}
.form-field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  /* Fill the field and never let a long <option> or long value push the
     control (and the layout) wider than its column. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--pisteyo-red);
  box-shadow: 0 0 0 3px rgba(255, 87, 88, 0.18);
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.form-check input { margin-top: 4px; }

/* Required agreement stands apart from the optional opt-ins below it -
   evidenced by real B2B consent patterns (Synthesia), which give the one
   mandatory checkbox its own visually distinct block rather than treating
   every checkbox identically. */
.form-check-required {
  padding: var(--space-2) var(--space-3);
  background: var(--pisteyo-red-soft);
  border: 1px solid rgba(255, 87, 88, 0.25);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 500;
}
.form-check-req-tag {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
}

.form-consent-group {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-consent-group-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.form-consent-group .form-check {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* ---------- Footer ---------- */
/* Denver at dusk under the brand grade: every page closes on home ground.
   The photo sits beneath a heavy navy/indigo wash so the type stays the
   subject; the red glow keeps continuity with the rest of the system. */
.footer-cta {
  background:
    radial-gradient(900px 400px at 80% 30%, rgba(255, 87, 88, 0.20), transparent 60%),
    linear-gradient(206deg, rgba(10, 6, 48, 0.78), rgba(0, 76, 116, 0.72) 55%, rgba(10, 6, 48, 0.84)),
    url('../assets/img/denver-skyline-dusk.jpg') center 30% / cover no-repeat,
    var(--dark-gray-blue);
  color: var(--white);
  padding: var(--space-9) 0;
  text-align: center;
}
.footer-cta h2 {
  color: var(--white);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: var(--space-2);
}
.footer-cta p { max-width: 620px; margin: 0 auto var(--space-4); color: rgba(255,255,255,0.85); }

.site-footer {
  background: var(--dark-gray-blue);
  color: rgba(255,255,255,0.78);
  padding: var(--space-7) 0 var(--space-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-4); }
}
.site-footer h5 {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin: 0 0 var(--space-2);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.site-footer a:hover { color: var(--pisteyo-red); }
.footer-brand img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer-brand p { margin: var(--space-2) 0 var(--space-3); font-size: 0.95rem; max-width: 320px; }
.footer-social {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  transition: background var(--t-fast), transform var(--t-fast);
}
.footer-social a:hover {
  background: var(--pisteyo-red);
  transform: translateY(-2px);
  color: var(--white);
}
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
@media (min-width: 720px) {
  .footer-bottom { flex-direction: row; text-align: left; }
}
.footer-bottom p { margin: 0; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.footer-bottom .legal-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-bottom .legal-links a { font-size: 0.85rem; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.justify-center { justify-content: center; }
.items-center { align-items: center; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Subtle gradient banner */
.gradient-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(680px 340px at 92% 115%, rgba(255, 87, 88, 0.38), transparent 62%),
    radial-gradient(540px 300px at -6% -30%, rgba(211, 245, 255, 0.14), transparent 55%),
    linear-gradient(135deg, var(--dark-indigo), var(--violet-blue));
  color: var(--white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}
/* faint dot field carries the brand motif into the panel */
.gradient-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(211, 245, 255, 0.16) 1.5px, transparent 1.7px);
  background-size: 30px 30px;
  pointer-events: none;
}
.gradient-banner > * { position: relative; z-index: 1; }
.gradient-banner h3 { color: var(--white); margin-bottom: var(--space-1); }
.gradient-banner p { color: rgba(255,255,255,0.9); margin: 0 0 var(--space-3); }

/* Pill / chip */
.chip {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  background: var(--light-azure-soft);
  color: var(--violet-blue);
}
.chip-red { background: var(--pisteyo-red-soft); color: var(--pisteyo-red); }

/* ==========================================================================
   HOMEPAGE ONLY (body.page-home)
   Everything below is scoped to the homepage so the other eight pages keep
   their existing look. Remove the .page-home class from index.html to revert.
   ========================================================================== */

/* ---------- Ambient dot field ---------- */
.dotfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.page-home .hero { position: relative; }
.page-home .hero > .container { position: relative; z-index: 1; }

/* ---------- Wider display scale (home only) ---------- */
.page-home .hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
/* each sentence gets its own line, so the headline never orphans "AI Is" */
.page-home .hero h1 .accent { display: block; }

/* word-by-word entrance; spans are added by home.js only when motion is on */
.hero h1.h1-anim .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: word-in 640ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes word-in {
  to { opacity: 1; transform: none; }
}

/* give the headline more measure than the stock 1.1fr */
@media (min-width: 960px) {
  .page-home .hero-grid { grid-template-columns: 1.3fr 1fr; }
}
.page-home .sec-head h2,
.page-home .stat-band h2 {
  font-size: clamp(2rem, 4vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* ---------- Left-aligned section head with measure rule ----------
   Site-wide, not homepage-only: this is the pattern that retires the centred
   .section-header, so every page that used the old one needs it to resolve.
   The homepage keeps its own larger h2 clamp below; the layout is shared. */
.sec-head {
  max-width: 760px;
  margin: 0 0 var(--space-6);
}
.sec-head .lead { margin-bottom: 0; }

/* ---------- Trusted-by strip ---------- */
.page-home .logo-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: var(--space-3);
}
.page-home .logo-track { gap: var(--space-3) var(--space-7); }
.page-home .logo-strip .logo-item {
  position: relative;
}

/* ---------- Feature tiles (the two promoted services) ---------- */
.page-home .feature-duo {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 900px) {
  .page-home .feature-duo { grid-template-columns: repeat(2, 1fr); }
}

.page-home .feature-tile {
  --glow: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(0, 76, 116, 0.05), transparent 55%),
    var(--white);
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.page-home .feature-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 87, 88, 0.10), transparent 65%);
  opacity: var(--glow);
  transition: opacity 260ms ease;
  pointer-events: none;
}
.page-home .feature-tile:hover {
  border-color: rgba(255, 87, 88, 0.3);
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
}
.page-home .feature-tile .card-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--pisteyo-red-soft);
  color: var(--pisteyo-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.page-home .feature-tile .card-icon svg { width: 26px; height: 26px; }
.page-home .feature-tile h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}
.page-home .feature-tile p { color: var(--text-secondary); margin: 0; }
.page-home .feature-tile .card-link {
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 600;
  color: var(--violet-blue);
}
.page-home .feature-tile:hover .card-link { color: var(--pisteyo-red); }
.page-home .feature-tile .card-link::after {
  content: '\2192';
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--t-fast);
}
.page-home .feature-tile:hover .card-link::after { transform: translateX(4px); }

/* ---------- Compact service rows (the remaining four) ---------- */
.page-home .compact-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 760px) {
  .page-home .compact-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
}
.page-home .compact-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.page-home .compact-item h3 {
  font-size: 1.05rem;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.page-home .compact-item p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
}
.page-home .compact-item a {
  color: var(--text-primary);
  display: block;
  transition: color var(--t-fast);
}
.page-home .compact-item a:hover { color: var(--pisteyo-red); }

/* ---------- Full-bleed dark stat band ---------- */
/* ---------- Proof band (design 3A): headline left, stat ledger right.
   Solid ink, static dot field; the only motion is the numerals counting
   up once (kinetic.js [data-count]). ---------- */
.page-home .stat-band {
  position: relative;
  overflow: hidden;
  background: var(--dark-gray-blue);
  color: var(--white);
  padding: 88px 0 96px;
}
.page-home .stat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(211, 245, 255, 0.09) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}
.page-home .stat-band > .container { position: relative; z-index: 1; }
.page-home .stat-band .eyebrow { color: var(--pisteyo-red); }
.page-home .proof-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .page-home .proof-grid { grid-template-columns: 1.1fr 1fr; gap: 80px; }
}
.page-home .proof-copy h2 {
  color: var(--white);
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: var(--space-2) 0 0;
}
.page-home .proof-copy .lead {
  color: #D3F5FF;
  opacity: 0.85;
  max-width: 480px;
  margin: var(--space-3) 0 0;
  line-height: 1.65;
}
.page-home .proof-copy .hand-note {
  display: inline-block;
  margin-top: var(--space-3);
  transform: rotate(-1.4deg);
}
.page-home .ledger-row {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid rgba(211, 245, 255, 0.3);
}
.page-home .ledger-row:last-child { border-bottom: 1px solid rgba(211, 245, 255, 0.3); }
.page-home .ledger-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  min-width: 180px;
}
.page-home .ledger-num-red { color: var(--pisteyo-red); }
.page-home .ledger-label {
  color: #D3F5FF;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
}
@media (max-width: 480px) {
  .page-home .ledger-num { min-width: 120px; }
  .page-home .ledger-row { gap: 18px; }
}

/* ---------- Use cases: one featured + compact rows ---------- */
.page-home .uc-layout {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 940px) {
  .page-home .uc-layout { grid-template-columns: 1.05fr 1fr; gap: var(--space-6); }
}

/* The featured use case is a photograph under the brand grade, not an empty
   gradient slab, its dark comes from the image, so it reads as an artifact on
   the board rather than a second dark band competing with the stat band. */
.page-home .uc-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  color: var(--white);
  background: var(--dark-gray-blue);
  box-shadow: var(--elev-3);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.page-home .uc-feature:hover { transform: translateY(-3px); box-shadow: var(--elev-4); }

.page-home .uc-feature-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
}
.page-home .uc-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  transition: transform var(--t-slow);
}
.page-home .uc-feature:hover .uc-feature-media img { transform: scale(1.035); }
.page-home .uc-feature-media .grade { display: none; }
/* keeps the headline legible over whatever the photograph is doing */
.page-home .uc-feature-media .vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,
              rgba(10, 6, 48, 0.88) 4%,
              rgba(10, 6, 48, 0.52) 40%,
              rgba(10, 6, 48, 0.26) 100%);
}
.page-home .uc-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.page-home .uc-feature .usecase-tag {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}
.page-home .uc-feature h3 {
  color: var(--white);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.page-home .uc-feature .more {
  font-weight: 600;
  color: var(--white);
  margin-top: var(--space-1);
}
.page-home .uc-feature .more::after {
  content: '\2192';
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--t-fast);
}
.page-home .uc-feature:hover .more::after { transform: translateX(4px); }

/* The reading list beside the feature. Rows share the card's height so the
   column bottoms line up instead of trailing off. */
.page-home .uc-rows {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid var(--border);
}
.page-home .uc-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-3) 0 var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left var(--t-base);
}
.page-home .uc-row:last-child { border-bottom: 0; }
.page-home .uc-row:hover { padding-left: var(--space-2); }
/* the red rail, same gesture the cards use */
.page-home .uc-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--pisteyo-red);
  border-radius: 2px;
  transition: height var(--t-base), top var(--t-base);
}
.page-home .uc-row:hover::before { top: 14%; height: 72%; }
/* the label rides to the right so every headline starts on one clean edge */
.page-home .uc-row .usecase-tag {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  align-self: center;
  background: var(--light-azure);
  font-size: 0.66rem;
  white-space: nowrap;
}
.page-home .uc-row h4 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color var(--t-fast);
}
.page-home .uc-row:hover h4 { color: var(--pisteyo-red); }
@media (max-width: 560px) {
  .page-home .uc-row { grid-template-columns: 1fr; }
  .page-home .uc-row .usecase-tag {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }
}

/* ---------- Engagement flow (a real sequence, so numbers earn their place) -- */
.page-home .flow {
  position: relative;
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) {
  .page-home .flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  /* the connector rides the dot motif: a dotted path, ending on brand red */
  .page-home .flow::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 60px;
    right: 60px;
    height: 4px;
    background-image: radial-gradient(circle, var(--gray-azure) 1.6px, transparent 1.8px);
    background-size: 14px 4px;
    background-repeat: repeat-x;
    background-position: 0 center;
    opacity: 0.55;
    z-index: 0;
  }
  .page-home .flow::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 52px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--pisteyo-red);
    z-index: 0;
  }
}
.page-home .flow-step { position: relative; z-index: 1; }
/* oversized editorial numeral: the step number as a typographic object,
   ghosted azure with the red period claiming each step's full stop */
.page-home .flow-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--gray-azure) 34%, transparent);
  margin-bottom: var(--space-3);
}
.page-home .flow-num::after {
  content: ".";
  color: var(--pisteyo-red);
}
.page-home .flow-step h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.page-home .flow-step p { color: var(--text-secondary); margin: 0; }

/* ---------- The First 90 Days (scroll-linked timeline) ---------- */
/* --tlp is written by home.js from scroll position (0..1). The track fill
   and each step's "lit" state follow it, so the quarter plays out as the
   visitor scrolls. Without JS the track simply shows complete. */
.page-home .timeline-sec { --tlp: 1; }

.page-home .tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

/* mobile: vertical rail on the left */
.page-home .tl::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 10px;
  width: 4px;
  background-image: radial-gradient(circle, var(--gray-azure) 1.6px, transparent 1.8px);
  background-size: 4px 14px;
  background-repeat: repeat-y;
  opacity: 0.45;
}
.page-home .tl::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 11px;
  width: 2px;
  height: calc(var(--tlp) * (100% - 16px));
  background: linear-gradient(180deg, var(--violet-blue), var(--pisteyo-red));
  border-radius: var(--radius-pill);
}
.page-home .tl-step {
  position: relative;
  padding-left: 44px;
}
.page-home .tl-dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2px solid var(--gray-azure);
  transition: border-color var(--t-slow), box-shadow var(--t-slow), background var(--t-slow);
}
.page-home .tl-dot::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: var(--radius-pill);
  background: var(--gray-azure);
  opacity: 0.4;
  transition: background var(--t-slow), opacity var(--t-slow);
}
.page-home .tl-step.lit .tl-dot {
  border-color: var(--pisteyo-red);
  box-shadow: 0 0 0 6px rgba(255, 87, 88, 0.12);
}
.page-home .tl-step.lit .tl-dot::after {
  background: var(--pisteyo-red);
  opacity: 1;
}
.page-home .tl-when {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-azure);
  margin-bottom: 6px;
  transition: color var(--t-slow);
}
.page-home .tl-step.lit .tl-when { color: var(--pisteyo-red); }
.page-home .tl-step h3 {
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.page-home .tl-step p { color: var(--text-secondary); margin: 0; }
.page-home .tl-step h3,
.page-home .tl-step p {
  opacity: 0.55;
  transition: opacity var(--t-slow);
}
.page-home .tl-step.lit h3,
.page-home .tl-step.lit p { opacity: 1; }

/* desktop: horizontal track above the four steps */
@media (min-width: 900px) {
  .page-home .tl {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    padding-top: 44px;
  }
  .page-home .tl::before {
    top: 10px;
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    height: 4px;
    background-size: 14px 4px;
    background-repeat: repeat-x;
  }
  .page-home .tl::after {
    top: 11px;
    left: 12px;
    width: calc(var(--tlp) * (100% - 24px));
    height: 2px;
    background: linear-gradient(90deg, var(--violet-blue), var(--pisteyo-red));
  }
  .page-home .tl-step { padding-left: 0; }
  .page-home .tl-dot { top: -44px; }
}
/* ---------- Staggered reveal ---------- */
/* The container keeps .reveal so main.js still observes it, but the motion
   moves to the children so they arrive in sequence rather than as a block. */
.page-home .stagger {
  opacity: 1;
  transform: none;
  transition: none;
}
.page-home .stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.page-home .stagger.in > * { opacity: 1; transform: none; }
.page-home .stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.page-home .stagger.in > *:nth-child(2) { transition-delay: 70ms; }
.page-home .stagger.in > *:nth-child(3) { transition-delay: 140ms; }
.page-home .stagger.in > *:nth-child(4) { transition-delay: 210ms; }
.page-home .stagger.in > *:nth-child(5) { transition-delay: 280ms; }
.page-home .stagger.in > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .page-home .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-home .feature-tile:hover,
  .page-home .uc-feature:hover { transform: none; }
  .page-home .uc-row { transition: none; }
}

/* ---------- Hero: proof-led photography (home only) ---------- */
/* Tuning knobs. The source is a real room shot, so it needs lifting before
   the brand grade goes on top - otherwise the duotone crushes it. */
.page-home {
  --hero-bright: 1.16;
  --hero-gray: 0.22;
  --hero-navy: 0.34;   /* strength of the navy half of the duotone */
  --hero-red: 0.16;    /* strength of the red half */
}

.page-home .hero-proof {
  position: relative;
  isolation: isolate;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-3);
  aspect-ratio: 4 / 3;
  background: var(--dark-gray-blue);
}
@media (min-width: 960px) {
  .page-home .hero-proof { aspect-ratio: 5 / 4; }
}
.page-home .hero-proof img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;   /* keeps the screen and the room in frame */
}
.page-home .hero-proof .grade { display: none; }
/* only enough darkening at the very bottom to keep the caption legible */
.page-home .hero-proof .vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 6, 48, 0.58), transparent 26%);
}
.page-home .hero-proof figcaption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(10, 6, 48, 0.5);
}
.page-home .hero-proof figcaption .dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red);
}

/* ==========================================================================
   WHO WE ARE - company video (body.page-home)
   ========================================================================== */

.page-home .video-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 960px) {
  .page-home .video-grid { grid-template-columns: 1fr 1.15fr; gap: var(--space-7); }
}

.page-home .video-points {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.page-home .video-points li {
  position: relative;
  padding-left: 30px;
  color: var(--text-secondary);
}
.page-home .video-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red-soft);
  box-shadow: inset 0 0 0 4px var(--pisteyo-red);
}

/* The frame holds either the click-to-play facade or, after a click, the
   YouTube iframe. Nothing from YouTube loads until the visitor asks for it. */
.page-home .video-frame {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-3);
  aspect-ratio: 16 / 9;
  background: var(--dark-gray-blue);
}
.page-home .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.page-home .video-facade {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.page-home .video-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.page-home .video-facade:hover img,
.page-home .video-facade:focus-visible img { transform: scale(1.03); }

/* same light duotone treatment as the hero photograph */
.page-home .video-facade .grade {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: linear-gradient(206deg,
              rgba(0, 76, 116, 0.30),
              rgba(255, 87, 88, 0.14) 88%);
}
.page-home .video-facade .vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 6, 48, 0.58), transparent 26%);
}

.page-home .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(255, 87, 88, 0.45);
  transition: transform var(--t-base), background var(--t-base);
}
.page-home .video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.page-home .video-facade:hover .video-play,
.page-home .video-facade:focus-visible .video-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--pisteyo-red-dark);
}
.page-home .video-facade:focus-visible {
  outline: 3px solid var(--pisteyo-red);
  outline-offset: 3px;
}

.page-home .video-caption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(10, 6, 48, 0.5);
}
.page-home .video-caption .dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red);
}

/* ==========================================================================
   CAREERS (body.page-careers)
   ========================================================================== */

.page-careers .photo-trio {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .page-careers .photo-trio { grid-template-columns: repeat(3, 1fr); }
}
.page-careers .photo-trio .feature-image { aspect-ratio: 4 / 3; }

/* loading skeleton while the Pulse fetch is in flight */
.page-careers .jobs-skeleton { display: grid; gap: var(--space-2); }
.page-careers .job-skel {
  height: 92px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--white) 25%, var(--light-azure-soft) 50%, var(--white) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--border);
}
@keyframes skel-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .page-careers .job-skel { animation: none; }
}

.page-careers .job-list { display: grid; gap: var(--space-2); }
.page-careers .job-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
.page-careers .job-card.open,
.page-careers .job-card:hover { box-shadow: var(--elev-2); }
.page-careers .job-card.open { border-color: rgba(255, 87, 88, 0.35); }

.page-careers .job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.page-careers .job-head h3 {
  margin: 0 0 var(--space-1);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.page-careers .job-meta { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.page-careers .job-chevron {
  flex: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pisteyo-red);
  transition: transform var(--t-base);
}
.page-careers .job-card.open .job-chevron { transform: rotate(180deg); }

.page-careers .job-body {
  padding: 0 var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}
.page-careers .job-desc { padding-top: var(--space-3); max-width: 72ch; }
.page-careers .job-desc p { color: var(--text-secondary); }
.page-careers .job-desc h4,
.page-careers .job-desc h5 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 1rem;
}
.page-careers .job-desc ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-secondary);
}
.page-careers .job-desc li { margin-bottom: 4px; }

.page-careers .job-apply {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.page-careers .job-apply h4 { margin: 0 0 var(--space-2); }
.page-careers .job-apply .form-field { margin-bottom: var(--space-2); }
.page-careers .job-apply-status { min-height: 1.2em; margin: 0 0 var(--space-2); font-weight: 600; }
.page-careers .job-apply-status.err { color: var(--pisteyo-red-dark); }
.page-careers .job-apply-done h4 { margin: 0 0 var(--space-1); color: var(--violet-blue); }
.page-careers .job-apply-done p { margin: 0; color: var(--text-secondary); }

.page-careers .jobs-empty { text-align: center; }
.page-careers .powered-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   USE CASES - index (body.page-usecases) and articles (body.page-usecase)
   ========================================================================== */

/* ---------- Index hero ---------- */
.page-usecases .uc-index-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
  background:
    radial-gradient(1000px 460px at 88% -10%, rgba(255, 87, 88, 0.09), transparent 60%),
    radial-gradient(820px 460px at -8% 40%, rgba(0, 76, 116, 0.07), transparent 60%),
    var(--board);
}
.page-usecases .uc-index-hero > .container { position: relative; z-index: 1; }
.page-usecases .uc-index-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-3);
  max-width: 16ch;
}
.page-usecases .uc-index-hero h1 .accent { color: var(--violet-blue); display: block; }
.page-usecases .uc-index-hero .lead { max-width: 60ch; }

.page-usecases .uc-index-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.page-usecases .uc-index-stats div { margin: 0; }
.page-usecases .uc-index-stats dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 5px;
}
.page-usecases .uc-index-stats dd {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--violet-blue);
  font-variant-numeric: tabular-nums;
}

/* ---------- Featured card ---------- */
.page-usecases .uc-feature-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  margin-bottom: var(--space-6);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
@media (min-width: 880px) {
  .page-usecases .uc-feature-card { grid-template-columns: 1.15fr 1fr; }
}
.page-usecases .uc-feature-card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  border-color: rgba(255, 87, 88, 0.28);
}
.page-usecases .uc-feature-img { display: block; position: relative; background: var(--bg-tint); }
.page-usecases .uc-feature-img img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}
.page-usecases .uc-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
}
.page-usecases .uc-feature-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--heading-primary);
  margin: 0;
  text-wrap: balance;
}
.page-usecases .uc-feature-desc {
  color: var(--text-secondary);
  font-size: 0.97rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Filter chips ---------- */
.page-usecases .uc-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.page-usecases .uc-chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-spring);
}
.page-usecases .uc-chip:hover { border-color: var(--pisteyo-red); color: var(--pisteyo-red); }
.page-usecases .uc-chip.is-on {
  background: var(--pisteyo-red);
  border-color: var(--pisteyo-red);
  color: var(--white);
  transform: scale(1.04);
}
.page-usecases .uc-chip:focus-visible { outline: 2px solid var(--violet-blue); outline-offset: 2px; }

/* ---------- Card grid ---------- */
.page-usecases .uc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px)  { .page-usecases .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .page-usecases .uc-grid { grid-template-columns: repeat(3, 1fr); } }

.page-usecases .uc-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.page-usecases .uc-card[hidden] { display: none; }
.page-usecases .uc-card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  border-color: rgba(255, 87, 88, 0.28);
}
.page-usecases .uc-card > a { display: flex; flex-direction: column; height: 100%; }
.page-usecases .uc-card-img { display: block; background: var(--bg-tint); }
.page-usecases .uc-card-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.page-usecases .uc-card:hover .uc-card-img img { transform: scale(1.03); }
.page-usecases .uc-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1;
}
.page-usecases .uc-card-body h3 {
  font-size: 1.06rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--heading-primary);
  transition: color var(--t-fast);
}
.page-usecases .uc-card:hover .uc-card-body h3 { color: var(--pisteyo-red); }
.uc-card-more {
  margin-top: auto;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pisteyo-red);
}
.uc-card-more::after {
  content: '\2192';
  margin-left: 6px;
  display: inline-block;
  transition: transform var(--t-fast);
}
.page-usecases .uc-card:hover .uc-card-more::after,
.page-usecases .uc-feature-card:hover .uc-card-more::after { transform: translateX(4px); }

.page-usecases .uc-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: var(--space-6) 0;
}

/* ==========================================================================
   Article pages
   ========================================================================== */
.page-usecase .uc-head {
  padding: var(--space-7) 0 var(--space-5);
  background:
    radial-gradient(900px 420px at 82% -20%, rgba(255, 87, 88, 0.08), transparent 62%),
    var(--board);
}
.page-usecase .uc-crumb {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.page-usecase .uc-crumb a { color: var(--text-secondary); font-weight: 600; }
.page-usecase .uc-crumb a:hover { color: var(--pisteyo-red); }

.page-usecase .uc-head h1 {
  font-size: clamp(2.05rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.033em;
  margin: var(--space-2) 0 var(--space-3);
  max-width: 20ch;
  text-wrap: balance;
}
.page-usecase .uc-head .lead { max-width: 62ch; margin-bottom: var(--space-3); }
.page-usecase .uc-meta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0;
}

.page-usecase .uc-figure {
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-3);
  background: var(--bg-tint);
}
.page-usecase .uc-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Article body: one comfortable measure, generous rhythm. */
.page-usecase .uc-body {
  max-width: 68ch;
  margin: 0 auto var(--space-8);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text-primary);
}
.page-usecase .uc-body > *:first-child { margin-top: 0; }
.page-usecase .uc-body p { margin: 0 0 var(--space-3); }
.page-usecase .uc-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.024em;
  color: var(--heading-primary);
  margin: var(--space-6) 0 var(--space-2);
}
.page-usecase .uc-body h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--violet-blue);
  margin: var(--space-5) 0 var(--space-2);
}
.page-usecase .uc-body h4 {
  font-size: 1.08rem;
  margin: var(--space-4) 0 var(--space-1);
}
.page-usecase .uc-body ul,
.page-usecase .uc-body ol { margin: 0 0 var(--space-3); padding-left: 1.3em; }
.page-usecase .uc-body li { margin-bottom: var(--space-1); }
.page-usecase .uc-body li::marker { color: var(--pisteyo-red); font-weight: 700; }
.page-usecase .uc-body strong { color: var(--heading-primary); font-weight: 700; }
.page-usecase .uc-body a { color: var(--violet-blue); text-decoration: underline; text-underline-offset: 3px; }
.page-usecase .uc-body a:hover { color: var(--pisteyo-red); }
.page-usecase .uc-body blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 3px solid var(--pisteyo-red);
  color: var(--heading-secondary);
  font-size: 1.14rem;
}

/* Related */
.page-usecase .uc-more {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  margin-bottom: var(--space-8);
}
.page-usecase .uc-more h2 { margin-bottom: var(--space-4); }
.page-usecase .uc-more-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 760px) {
  .page-usecase .uc-more-grid { grid-template-columns: repeat(3, 1fr); }
}
.page-usecase .uc-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  padding-bottom: var(--space-3);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.page-usecase .uc-mini:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  border-color: rgba(255, 87, 88, 0.28);
}
.page-usecase .uc-mini-img { display: block; width: 100%; background: var(--bg-tint); }
.page-usecase .uc-mini-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.page-usecase .uc-mini .usecase-tag,
.page-usecase .uc-mini h3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.page-usecase .uc-mini h3 {
  font-size: 0.98rem;
  line-height: 1.32;
  letter-spacing: -0.012em;
  margin-bottom: 0;
  color: var(--heading-primary);
  transition: color var(--t-fast);
}
.page-usecase .uc-mini:hover h3 { color: var(--pisteyo-red); }

@media (prefers-reduced-motion: reduce) {
  .page-usecases .uc-card:hover,
  .page-usecases .uc-feature-card:hover,
  .page-usecase .uc-mini:hover { transform: none; }
  .page-usecases .uc-card:hover .uc-card-img img { transform: none; }
}

/* ==========================================================================
   LEGAL DOCUMENTS (body.page-legal)
   Plain, readable, no flourishes. These pages exist to be understood.
   ========================================================================== */
.page-legal .legal-head {
  padding: var(--space-7) 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.page-legal .legal-head h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: var(--space-2) 0 var(--space-2);
}
.page-legal .legal-head .lead { max-width: 58ch; margin: 0; }

.page-legal .legal-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-7) 0 var(--space-9);
}
@media (min-width: 900px) {
  .page-legal .legal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }
  .page-legal .legal-nav { position: sticky; top: calc(var(--nav-height) + var(--space-3)); }
}

.page-legal .legal-nav h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}
.page-legal .legal-nav ul { list-style: none; margin: 0; padding: 0; }
.page-legal .legal-nav li { border-top: 1px solid var(--border); }
.page-legal .legal-nav li:last-child { border-bottom: 1px solid var(--border); }
.page-legal .legal-nav a {
  display: block;
  padding: var(--space-2) 0;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text-primary);
  transition: color var(--t-fast);
}
.page-legal .legal-nav a:hover { color: var(--pisteyo-red); }
.page-legal .legal-nav a.is-on { color: var(--pisteyo-red); }
.page-legal .legal-contact {
  margin: var(--space-3) 0 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.page-legal .legal-body {
  max-width: 72ch;
  font-size: 1.02rem;
  line-height: 1.75;
}
.page-legal .legal-body > *:first-child { margin-top: 0; }
.page-legal .legal-body p { margin: 0 0 var(--space-3); }
.page-legal .legal-body h2 {
  font-size: 1.4rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--heading-primary);
  margin: var(--space-6) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.page-legal .legal-body h3 {
  font-size: 1.1rem;
  letter-spacing: -0.012em;
  color: var(--violet-blue);
  margin: var(--space-4) 0 var(--space-1);
}
.page-legal .legal-body h4 { font-size: 1rem; margin: var(--space-3) 0 var(--space-1); }
.page-legal .legal-body ul,
.page-legal .legal-body ol { margin: 0 0 var(--space-3); padding-left: 1.35em; }
.page-legal .legal-body li { margin-bottom: 6px; }
.page-legal .legal-body li::marker { color: var(--pisteyo-red); }
.page-legal .legal-body strong { color: var(--heading-primary); font-weight: 700; }
.page-legal .legal-body a {
  color: var(--violet-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}
.page-legal .legal-body a:hover { color: var(--pisteyo-red); }
.page-legal .legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-3);
  font-size: 0.94rem;
}
.page-legal .legal-body th,
.page-legal .legal-body td {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  vertical-align: top;
}
.page-legal .legal-body th { background: var(--surface-alt); font-weight: 700; }

/* ==========================================================================
   ROI CALCULATOR (homepage)
   ========================================================================== */

.page-home .roi-grid {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .page-home .roi-grid { grid-template-columns: 1fr 0.92fr; gap: var(--space-7); }
}

.page-home .roi-controls { display: flex; flex-direction: column; gap: var(--space-5); }
.page-home .roi-field { border: 0; padding: 0; margin: 0; min-width: 0; }

.page-home .roi-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--heading-primary);
  margin-bottom: var(--space-2);
  padding: 0;
}
.page-home .roi-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--violet-blue);
  font-size: 1.05rem;
}
.page-home .roi-hint {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: var(--space-1) 0 0;
}

/* industry chips: real radios, styled labels */
.page-home .roi-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.page-home .roi-chips label { position: relative; }
.page-home .roi-chips input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.page-home .roi-chips span {
  display: inline-block;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-spring);
}
.page-home .roi-chips span:hover { border-color: var(--gray-azure); color: var(--heading-primary); }
.page-home .roi-chips input:checked + span {
  background: var(--pisteyo-red);
  border-color: var(--pisteyo-red);
  color: var(--white);
  transform: scale(1.05);
}
.page-home .roi-chips input:focus-visible + span {
  outline: 2px solid var(--violet-blue);
  outline-offset: 2px;
}

/* sliders */
.page-home .roi-sec input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.page-home .roi-sec input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pisteyo-red) 0%, var(--gray-azure) 100%);
  opacity: 0.9;
}
.page-home .roi-sec input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pisteyo-red) 0%, var(--gray-azure) 100%);
  opacity: 0.9;
}
.page-home .roi-sec input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--pisteyo-red);
  border: 3px solid var(--white);
  box-shadow: var(--elev-1);
}
.page-home .roi-sec input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pisteyo-red);
  border: 3px solid var(--white);
  box-shadow: var(--elev-1);
}
.page-home .roi-sec input[type="range"]:focus-visible {
  outline: 2px solid var(--violet-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

/* results panel: continues the stat-band's dark world */
.page-home .roi-results {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(560px 300px at 88% 8%, rgba(255, 87, 88, 0.18), transparent 60%),
    radial-gradient(520px 320px at 0% 100%, rgba(0, 76, 116, 0.4), transparent 62%),
    var(--dark-gray-blue);
  color: var(--white);
  box-shadow: var(--elev-2, 0 8px 24px rgba(46, 51, 61, 0.16));
}
.page-home .roi-results::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 55% at 100% 0%, #000, transparent 70%);
  pointer-events: none;
}
.page-home .roi-results > * { position: relative; z-index: 1; }

.page-home .roi-results-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
  margin: 0 0 var(--space-3);
}
.page-home .roi-big { margin-bottom: var(--space-4); }
.page-home .roi-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.page-home .roi-money .roi-num { color: var(--light-azure); }
.page-home .roi-unit {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}
.page-home .roi-percap {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.page-home .roi-percap span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--white); }
.page-home .roi-fine {
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   CRAFT LAYER: page transitions + scroll progress
   Both are pure progressive enhancement - browsers without support (or
   visitors preferring reduced motion) get the site exactly as before.
   ========================================================================== */

/* Cross-document view transitions: page-to-page navigation cross-fades
   instead of flashing white. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: 160ms; }
  ::view-transition-new(root) { animation-duration: 200ms; }
}

/* Reading progress: a hairline of brand red that fills along the top as the
   page scrolls. CSS scroll-driven animation - no JS, no layout cost. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--pisteyo-red);
      transform-origin: 0 50%;
      transform: scaleX(0);
      z-index: 200;
      animation: scroll-progress linear;
      animation-timeline: scroll(root);
      pointer-events: none;
    }
    @keyframes scroll-progress {
      to { transform: scaleX(1); }
    }
  }
}

/* ==========================================================================
   USE-CASE CATALOG (playbook cards, scope filter) + INDUSTRY PLAYBOOK PAGES
   Generated pages: run tools/build_use_cases.py after editing
   data/use-cases.json.
   ========================================================================== */

/* scope filter row sits under the industry chips */
.page-usecases .uc-filter-scope {
  margin-top: calc(-1 * var(--space-2));
  align-items: center;
}
.page-usecases .uc-scope-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: 4px;
}

/* playbook cards: generated cover art instead of a photo - per-industry hue
   carried on --ind-hue, the dot motif doing the texture */
.page-usecases .uc-cover {
  display: block;
  position: relative;
  aspect-ratio: 700 / 450;
  overflow: hidden;
  background:
    radial-gradient(140% 120% at 85% -10%, color-mix(in srgb, var(--ind-hue, #004C74) 55%, transparent), transparent 60%),
    linear-gradient(135deg, var(--dark-gray-blue), color-mix(in srgb, var(--ind-hue, #004C74) 45%, var(--dark-gray-blue)));
}
.page-usecases .uc-cover-initial {
  position: absolute;
  right: 18px;
  bottom: -14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 7.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.14);
  letter-spacing: -0.04em;
}
.page-usecases .uc-cover-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 65% 80% at 15% 100%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 65% 80% at 15% 100%, #000, transparent 70%);
}
.page-usecases .uc-cover::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--pisteyo-red);
}
.page-usecases .uc-card-desc {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 6px 0 10px;
}

/* ---------- industry playbook pages ---------- */
.page-industry .page-hero {
  background:
    radial-gradient(900px 400px at 90% 0%, color-mix(in srgb, var(--ind-hue, #FF5758) 12%, transparent), transparent 60%),
    var(--board);
}
.page-industry .page-hero .lead { max-width: 68ch; }

.page-industry .ind-org-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 820px) {
  .page-industry .ind-org-grid { grid-template-columns: repeat(3, 1fr); }
}
.page-industry .ind-org-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.page-industry .ind-org-card h3 { font-size: 1.1rem; margin-bottom: var(--space-1); }
.page-industry .ind-org-card p { color: var(--text-secondary); margin: 0; font-size: 0.95rem; }

.page-industry .ind-dept-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 820px) {
  .page-industry .ind-dept-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .page-industry .ind-dept-grid { grid-template-columns: repeat(3, 1fr); }
}
.page-industry .ind-dept-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.page-industry .ind-dept-card:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.page-industry .ind-dept-card .usecase-tag { align-self: flex-start; margin-bottom: var(--space-2); }
.page-industry .ind-dept-card h3 { font-size: 1.08rem; margin-bottom: var(--space-1); }
.page-industry .ind-dept-card p { color: var(--text-secondary); font-size: 0.93rem; margin: 0 0 var(--space-2); }
.page-industry .ind-target {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--heading-primary);
}
.page-industry .ind-target span {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
  margin-bottom: 2px;
}
.page-industry .ind-note {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 72ch;
}

.page-industry .ind-lifecycle-steps {
  list-style: none;
  counter-reset: lifecycle;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 820px) {
  .page-industry .ind-lifecycle-steps { grid-template-columns: repeat(4, 1fr); }
}
.page-industry .ind-lifecycle-steps li {
  counter-increment: lifecycle;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.page-industry .ind-lifecycle-steps li::before {
  content: "0" counter(lifecycle);
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--gray-azure) 34%, transparent);
  margin-bottom: var(--space-2);
}
.page-industry .ind-lifecycle-steps h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.page-industry .ind-lifecycle-steps p { color: var(--text-secondary); font-size: 0.92rem; margin: 0; }
.page-industry .ind-lifecycle { background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ---------- industry pages: photographic hero + lifecycle ---------- */
.page-industry .ind-hero-grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 960px) {
  .page-industry .ind-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); }
}
.page-industry .ind-hero-figure {
  margin: 0;
  position: relative;
  border-radius: var(--radius-xl, 16px);
  overflow: hidden;
  box-shadow: var(--elev-3, 0 20px 45px rgba(46, 51, 61, 0.22));
}
.page-industry .ind-hero-figure img { width: 100%; height: auto; display: block; }
.page-industry .ind-hero-figure figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 28px 18px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: linear-gradient(180deg, transparent, rgba(10, 6, 48, 0.62));
}
.page-industry .ind-hero-figure .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pisteyo-red);
  flex: none;
}

.page-industry .ind-step-photo { display: block; }
.page-industry .ind-step-photo img { width: 100%; height: auto; display: block; }
.page-industry .ind-lifecycle-steps li:has(.ind-step-photo) { padding: 0; overflow: hidden; }
.page-industry .ind-lifecycle-steps li:has(.ind-step-photo) .ind-step-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.page-industry .ind-lifecycle-steps li:has(.ind-step-photo)::before {
  position: absolute;
  z-index: 1;
  margin: 0;
  top: 10px;
  left: 14px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(10, 6, 48, 0.45);
}
.page-industry .ind-lifecycle-steps li { position: relative; }

/* ---------- home: industry playbook tiles ---------- */
.page-home .ind-tiles {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 700px) {
  .page-home .ind-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1060px) {
  .page-home .ind-tiles { grid-template-columns: repeat(3, 1fr); }
}
.page-home .ind-tile {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--elev-1);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.page-home .ind-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
  border-color: rgba(255, 87, 88, 0.45);
  color: inherit;
}
.page-home .ind-tile-thumb {
  flex: 0 0 118px;
  position: relative;
  overflow: hidden;
}
.page-home .ind-tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-home .ind-tile-cover {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background:
    radial-gradient(140% 130% at 80% -20%, color-mix(in srgb, var(--ind-hue, #004C74) 55%, transparent), transparent 62%),
    linear-gradient(135deg, var(--dark-gray-blue), color-mix(in srgb, var(--ind-hue, #004C74) 45%, var(--dark-gray-blue)));
}
.page-home .ind-tile-cover span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.16);
  margin: 0 6px -6px 0;
}
.page-home .ind-tile-body {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-1);
  min-width: 0;
}
.page-home .ind-tile-body h3 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.page-home .ind-tile-body p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-home .ind-tile-body .uc-card-more { margin-top: auto; font-size: 0.82rem; }

/* ---------- industry cards: icons + sequence numerals ---------- */
.page-industry .ind-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.page-industry .ind-dept-card .card-icon {
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--pisteyo-red-soft);
  color: var(--pisteyo-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-industry .ind-dept-card .card-icon svg { width: 21px; height: 21px; }
.page-industry .ind-card-head .usecase-tag { margin: 0; }
.page-industry .ind-dept-card .usecase-tag { align-self: auto; }

.page-industry .ind-org-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--gray-azure) 34%, transparent);
  margin-bottom: var(--space-2);
}
.page-industry .ind-org-num i { font-style: normal; color: var(--pisteyo-red); }

/* ==========================================================================
   THE BOARD & THE HAND LAYER
   The annotation vocabulary from the Operator's Board direction.

   One rule governs all of it: an annotation must carry real content, a
   caveat, a next step, a candid aside. Never decoration. Default discipline
   is one mark per page, on the word that carries the promise; campaign
   surfaces may go fuller, but never past two red marks in a viewport.
   ========================================================================== */

/* ---------- Graph paper ----------
   The hero's 26px dot field, printed statically and faintly on board
   sections so the page reads as one continuous working surface. */
.board-grid {
  background-image: radial-gradient(var(--dot-ink) 1.2px, transparent 1.3px);
  background-size: var(--dot-tile) var(--dot-tile);
  background-position: 13px 13px;
}
/* Fades out at the bottom so the texture never fights the section below. */
.board-grid-fade {
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* ---------- The written aside ----------
   Caveat, never below 18px, never a heading and never body copy. */
.hand {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--pisteyo-red);
  letter-spacing: 0.01em;
}
.hand-sm { font-size: 1.2rem; }   /* floor is 18px, do not go under it */
.hand-lg { font-size: 1.6rem; }
.hand-ink { color: var(--text-primary); }
.hand-on-dark { color: #FFB3B3; }
.hand-tilt { transform: rotate(-1.2deg); }
.hand-tilt-r { transform: rotate(1.6deg); }

/* An aside that sits under a control, with the arrow pointing back at it. */
.hand-aside {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: var(--space-2);
}
.hand-aside .mark-arrow {
  width: 34px;
  flex: none;
  margin-top: 2px;
  transform: scaleX(-1) rotate(8deg);
}

/* ---------- The marks ----------
   Stroke only, round caps, no fill, always --pisteyo-red. Paths are the four
   canonical ones from the design-system addendum. */
.mark-word {
  position: relative;
  display: inline-block;
}
.mark {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  color: var(--pisteyo-red);
  /* Marks deliberately overhang the word they annotate, so they opt out of
     the global `svg { max-width: 100% }` reset. */
  max-width: none;
}
.mark path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Display-size encircle, the hero's single mark. Stretched to the word's box
   rather than scaled uniformly, so the loop encloses short words and long ones
   alike instead of cropping to a fixed ellipse. */
.mark-encircle {
  left: -22px;
  top: -0.26em;
  width: calc(100% + 46px);
  height: calc(100% + 0.52em);
}
/* Emphasis underline, sitting just under the baseline. */
.mark-underline {
  left: -4px;
  bottom: -0.34em;
  width: calc(100% + 8px);
  height: 0.4em;
}

/* The pen draws itself when the mark scrolls in. Marks that are not inside a
   .reveal are simply already drawn. pathLength="1" normalises every path so
   one dash length works for all four. */
.mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.reveal:not(.in) .mark path { stroke-dashoffset: 1; }
.reveal.in .mark path {
  transition: stroke-dashoffset 900ms cubic-bezier(0.4, 0, 0.2, 1) 320ms;
}

/* ---------- Sticky notes ----------
   Warm (rose) or cool (azure). One short aside each, never a paragraph. */
.sticky {
  margin: 0;
  background: var(--pisteyo-rose);
  border-radius: 3px;
  padding: 12px 14px;
  box-shadow: var(--elev-note);
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--text-primary);
  transform: rotate(2deg);
}
.sticky-cool { background: var(--light-azure); }
.sticky-pin {
  position: absolute;
  z-index: 2;
  width: 150px;
}

/* ---------- Taped artifact ----------
   A white card pinned to the board, slightly off-square, with a scrap of
   tape across the top edge. */
.taped {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--elev-3);
  transform: rotate(1.2deg);
}
.taped::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 74px;
  height: 20px;
  background: var(--tape);
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 2px;
}
.taped p { margin: 0; }
.taped p + p {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
/* The label written above a pinned artifact. */
.pinned {
  position: relative;
  margin-top: var(--space-5);
}
.pinned > .hand {
  position: absolute;
  top: -34px;
  left: 6px;
  transform: rotate(-2deg);
}

@media (prefers-reduced-motion: reduce) {
  .reveal:not(.in) .mark path { stroke-dashoffset: 0; }
  .hand-tilt,
  .hand-tilt-r,
  .sticky,
  .taped { transform: none; }
}

/* ---------- Homepage hand-layer placements ----------
   Four asides on the page, spaced so no viewport carries more than two red
   marks: the hero encircle, the friction sticky, the magic-wand card, and
   "measured, not promised" closing the quarter. */

/* A pencil note, not a pen mark: the hero's red budget belongs to the encircle
   and the one primary CTA. */
.page-home .hero-aside {
  margin-top: var(--space-2);
  font-size: 1.5rem;
  color: var(--text-primary);
  opacity: 0.7;
}

/* The sticky needs to break the tile's clip to read as laid on top of it. */
.page-home .feature-tile.has-sticky { overflow: visible; }
.page-home .tile-sticky {
  right: -14px;
  top: -26px;
}
@media (max-width: 899px) {
  .page-home .tile-sticky { right: -6px; top: -20px; }
}

/* The magic-wand artifact, pinned off to one side of the engagement flow. */
.page-home .flow-note {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}
.page-home .flow-note .pinned {
  max-width: 640px;
  margin-top: var(--space-4);
}
.page-home .flow-note .taped { text-align: left; }

/* The quarter closes on a written promise rather than another button. */
.page-home .tl-close {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* An aside sitting under a page-hero lead. Ink, not red: inner pages keep
   their red for the primary CTA. */
.page-aside {
  margin-top: var(--space-3);
  color: var(--text-primary);
  opacity: 0.7;
}

/* ==========================================================================
   BOARD DEPTH
   Four additions that make the cream read as a physical surface instead of a
   flat fill: stock and light on the board itself, a pen stroke that draws
   each section head, a written cue out of the hero, and a second dot plane
   that parallaxes against the first.

   All of the motion runs on scroll-driven timelines - no JS, no observer,
   nothing on the main thread. Every animated block is wrapped in
   `@supports (animation-timeline: ...)`, so a browser without it gets the
   finished state (rules drawn, textures placed) rather than an empty one,
   and every one of them is gated on prefers-reduced-motion.

   Written mobile-first to match the rest of the file: the small-screen case
   is the base rule and the wider layouts are the overrides.
   ========================================================================== */

/* ---------- 1 · Board stock ----------
   Flat cream reads as a colour swatch; paper reads as a surface. Two fixed
   layers supply the difference: a fine grain so the board has tooth, and
   three wide washes so it looks lit from one corner rather than filled
   evenly. The brand hues appear here at 5-6% and only at large radii - that
   is what keeps them vibrant but subtle. You read warmth and a light
   direction, never a shape, which is the distinction between this and the
   gradient-blob genre.

   Fixed and static: one composited layer, one paint, nothing per frame -
   which is what makes it safe on mobile. z-index -1 keeps it above the body
   background but under every section, so opaque sections (.section-alt, the
   dark bands) simply cover it and stay exactly as designed. Note that
   body::before is already the reading-progress hairline. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.038'/%3E%3C/svg%3E"),
    radial-gradient(520px 420px at 92% -6%, rgba(255, 87, 88, 0.05), transparent 68%),
    radial-gradient(460px 400px at -10% 18%, rgba(0, 76, 116, 0.055), transparent 66%),
    radial-gradient(420px 340px at 50% 106%, rgba(255, 222, 222, 0.26), transparent 70%);
  background-size: 140px 140px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
/* On a phone the wash radii have to shrink with the viewport or the whole
   screen sits inside one stop and the light direction disappears. */
@media (min-width: 900px) {
  body::after {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.038'/%3E%3C/svg%3E"),
      radial-gradient(1200px 900px at 88% -8%, rgba(255, 87, 88, 0.05), transparent 68%),
      radial-gradient(1000px 800px at -6% 20%, rgba(0, 76, 116, 0.055), transparent 66%),
      radial-gradient(900px 700px at 50% 108%, rgba(255, 222, 222, 0.28), transparent 70%);
  }
}

/* ---------- 2 · Pen-stroke section rules ----------
   The concept gives every section head a red rule. Drawing it left-to-right
   as the head arrives makes it a pen stroke rather than a border: the same
   gesture as the hand marks, applied to structure.

   The timeline is declared on .sec-head and referenced by name from the
   pseudo-element, which is more dependable than resolving view() against a
   pseudo's own box. */
.sec-head::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-bottom: var(--space-2);
  border-radius: 2px;
  background: var(--pisteyo-red);
  transform-origin: 0 50%;
}
@media (min-width: 720px) {
  .sec-head::before { width: 64px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec-head { view-timeline-name: --sechead; }
    .sec-head::before {
      animation: pen-stroke linear both;
      animation-timeline: --sechead;
      animation-range: entry 18% entry 94%;
    }
    @keyframes pen-stroke {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

/* ---------- 3 · Hero scroll cue ----------
   A written aside pointing out of the hero. It carries content - it names
   what is below rather than saying "scroll" - which is the rule the whole
   hand layer is held to. The arrow is the canonical mark path turned to
   point down and away.

   The arrow is red - it is a mark, and the pen is what marks. That puts two
   red marks in the hero (the encircle and this), which is the cap, not past
   it: the primary CTA is a CTA rather than a mark. The label stays ink
   because red is never small text.

   It retires as it leaves the screen rather than after a fixed scroll
   distance. A fixed distance only works when the cue starts in view: on a
   phone the hero is tall enough that the cue sits below the fold, so
   scrolling far enough to reach it had already faded it to nothing. Keying
   the fade to the cue's own exit means it is solid whenever it is actually
   on screen, and gone once you have scrolled past it. */
.page-home .hero-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-3) 0 0;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text-secondary);
}
.page-home .hero-cue .cue-arrow {
  width: 26px;
  flex: none;
  overflow: visible;
  color: var(--pisteyo-red);
  transform: rotate(58deg);
}
.page-home .hero-cue .cue-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 720px) {
  .page-home .hero-cue {
    gap: 10px;
    margin-top: var(--space-4);
    font-size: 1.2rem;
  }
  .page-home .hero-cue .cue-arrow { width: 30px; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-cue .cue-arrow {
    animation: cue-bob 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes cue-bob {
    0%, 100% { transform: rotate(58deg) translate(0, 0); }
    50% { transform: rotate(58deg) translate(3px, 3px); }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-home .hero-cue {
      animation: cue-retire linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes cue-retire {
      to { opacity: 0; transform: translateY(10px); }
    }
  }
}

/* ---------- 4 · The board gains depth ----------
   One dot field is texture; two moving against each other is depth. The
   section keeps its own fine grid painted flat, and this adds a coarser,
   fainter plane at double the tile that drifts as the section crosses the
   viewport. The eye reads the slower plane as further back, so the content
   sits above a surface rather than on top of a pattern.

   translate3d composites, so this is a transform per frame and no repaint.
   `will-change` is deliberately omitted: .section-alt repeats several times
   per page and pinning a promoted layer to each one costs more on a phone
   than it saves. isolation keeps the z-index -1 layer inside the section,
   above its background and below its content. */
.section-alt {
  position: relative;
  isolation: isolate;
}
.section-alt::after {
  content: "";
  position: absolute;
  inset: -8% 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(46, 51, 61, 0.055) 1.5px, transparent 1.6px);
  background-size: calc(var(--dot-tile) * 2) calc(var(--dot-tile) * 2);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-alt { view-timeline-name: --board; }
    .section-alt::after {
      animation: board-parallax linear both;
      animation-timeline: --board;
      animation-range: cover;
    }
    /* Shorter travel on a phone: the section fills more of the viewport, so
       the same offset reads as the texture sliding rather than as depth. */
    @keyframes board-parallax {
      from { transform: translate3d(0, -16px, 0); }
      to { transform: translate3d(0, 16px, 0); }
    }
    @media (min-width: 900px) {
      @keyframes board-parallax {
        from { transform: translate3d(0, -26px, 0); }
        to { transform: translate3d(0, 26px, 0); }
      }
    }
  }
}

/* ==========================================================================
   THE ALIGNMENT FIELD HERO (1a), homepage
   Line-mask headline rise, hero furniture over the canvas formation, and the
   count-up stat numerals. The canvas behaviour lives in js/alignment-field.js;
   the count-up + intersection wiring in js/kinetic.js. Everything degrades:
   markup carries the final headline, stats, and mark, so no-JS and reduced
   motion render a complete, settled hero. Tokens use fallbacks so a missing
   custom property never breaks paint.
   ========================================================================== */

/* ---------- Line-mask headline rise (replaces the JS word-wrap) ---------- */
.h1-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.h1-line > span {
  display: inline-block;
  transform: translateY(112%);
  animation: h1-rise 750ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes h1-rise { to { transform: translateY(0); } }

/* Larger display scale for the two masked lines (overrides the stock home
   clamp above). The accent line stays inline-block inside its mask so the
   encircle mark keeps its position. */
.page-home .hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.page-home .hero h1 .h1-line > span { display: inline-block; }
@media (min-width: 900px) {
  /* two clean lines that never wrap mid-phrase */
  .page-home .hero h1 .h1-line { white-space: nowrap; }
  /* single content column, widened so the headline fits on two lines */
  .page-home .hero-grid { grid-template-columns: 1fr; }
  .page-home .hero-copy { max-width: 62%; }
  /* give the canvas room to form the numeral beside the copy */
  .page-home .hero { min-height: 86vh; display: flex; align-items: center; }
  .page-home .hero > .container { width: 100%; }
  /* Non-English headlines (e.g. the Spanish "La IA Está en Todas Partes.")
     run longer than the English two-liner and would overflow into the 3.4X
     figure under nowrap. Let them wrap within the copy column instead. */
  html[lang="es"] .page-home .hero h1 .h1-line { white-space: normal; }
}

/* fadeUp for the hero furniture (eyebrow, lead, ctas, stats) */
.rise-in {
  opacity: 0;
  animation: wow-fade-up 700ms cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes wow-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* the Caveat aside writes itself in with a clip-path wipe */
.hand-write {
  animation: hand-write 900ms ease-out both;
  animation-delay: var(--d, 2400ms);
}
@keyframes hand-write {
  from { clip-path: inset(-25% 102% -25% -2%); }
  to   { clip-path: inset(-25% -4% -25% -2%); }
}

/* The hero copy is not inside a .reveal, so the encircle mark and the cue
   arrow draw on their own timers instead of on scroll. */
.page-home .hero .mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-mark-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) 1500ms both;
}
.page-home .hero .hero-cue .cue-arrow path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-mark-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) 2900ms both;
}
@keyframes hero-mark-draw { to { stroke-dashoffset: 0; } }

/* ---------- Alignment Field furniture ---------- */
.field-label {
  position: absolute;
  left: 72%;
  top: 63%;
  transform: translateX(-50%);
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-azure, #597A98);
  opacity: 0;
  animation: wow-fade-up 700ms cubic-bezier(0.4, 0, 0.2, 1) 3200ms both;
  pointer-events: none;
}
.field-spark {
  position: absolute;
  left: calc(72% + 280px);
  top: 31%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pisteyo-red, #FF5758);
  animation: spark-pulse 2.6s ease-in-out 3400ms infinite;
  pointer-events: none;
}
@keyframes spark-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.7); opacity: 0.35; }
}
/* Below 1150px the numeral forms centered in a band reserved at the foot of
   the hero. alignment-field.js sets .field-on before first paint, so with no
   JS or no canvas the band collapses and the row stat carries the number. */
@media (max-width: 1149.98px) {
  .field-label, .field-spark { display: none; }
  .page-home .hero.field-on { padding-bottom: calc(var(--space-9) + 200px); }
  /* centered via left/right, not translateX: wow-fade-up's fill replaces
     the base transform once it finishes */
  .hero.field-on .field-label {
    display: block;
    left: 0;
    right: 0;
    top: auto;
    bottom: 34px;
    text-align: center;
    white-space: nowrap;
  }
  .hero.field-on .field-spark {
    display: block;
    left: auto;
    right: 13%;
    top: auto;
    bottom: 178px;
  }
  .page-home .hero.field-on .hero-stats { grid-template-columns: repeat(2, 1fr); }
}
/* the 3.4X stat returns to the row only when the canvas can't form it */
.hero.field-on .hero-stat[data-field-dup] { display: none; }

/* ---------- Reduced motion: the hero lands settled ---------- */
@media (prefers-reduced-motion: reduce) {
  .h1-line > span,
  .rise-in,
  .hand-write,
  .field-label {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
  .field-spark { animation: none !important; }
  .page-home .hero .mark path,
  .page-home .hero .hero-cue .cue-arrow path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   KINETIC INNER HEROES (1b) + THE WORKING BOARD (1c)
   1b: the line-mask rise (.h1-line / .rise-in, defined with the 1a hero
   above) is reused on inner-page heroes; the only page-hero-specific piece
   is the timed draw of the hero's drawn mark. 1c: the collage of tacked
   artifacts, plus a lighter "pinned card" entrance for in-flow card grids.
   Everything degrades: markup carries final copy and positions.
   ========================================================================== */

/* ---------- 1b · inner-page hero mark draws on its own timer ----------
   Inner heroes are not wrapped in a .reveal, so the mark would otherwise
   render already-drawn. Draw it just after the headline lines have risen. */
.page-hero h1 .mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-mark-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) 1400ms both;
}

/* ---------- 1c · The Working Board collage ---------- */
.board-collage {
  position: relative;
  min-height: 560px;
  margin-top: var(--space-6, 48px);
}
.board-item { position: absolute; opacity: 0; }
.board-in .board-item-1 { animation: board-drop 900ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.board-in .board-item-2 { animation: board-pin  800ms cubic-bezier(0.4, 0, 0.2, 1) 500ms both; }
.board-in .board-item-3 { animation: board-slap 600ms cubic-bezier(0.34, 1.4, 0.5, 1) 900ms both; }
@keyframes board-drop {
  from { opacity: 0; transform: translateY(-40px) rotate(-7deg) scale(1.03); }
  to   { opacity: 1; transform: translateY(0) rotate(-2deg) scale(1); }
}
@keyframes board-pin {
  from { opacity: 0; transform: translateY(-30px) rotate(5deg); }
  to   { opacity: 1; transform: translateY(0) rotate(1.2deg); }
}
@keyframes board-slap {
  from { opacity: 0; transform: rotate(8deg) scale(1.4); }
  to   { opacity: 1; transform: rotate(2deg) scale(1); }
}

/* parallax layers, depth via multiplier (written by js/kinetic.js) */
.plx-1 { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px)); }
.plx-2 { transform: translate(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 18px)); }
.plx-3 { transform: translate(calc(var(--px, 0) * 20px), calc(var(--py, 0) * 14px)); }

/* artifacts */
.polaroid {
  background: var(--surface, #FFFFFF);
  padding: 12px 12px 14px;
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(46, 51, 61, 0.22);
  position: relative;
  margin: 0;
}
.polaroid img { display: block; width: 100%; border-radius: 3px; }
.polaroid figcaption {
  font-family: var(--font-hand, 'Caveat', cursive);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-primary, #2E333D);
  padding: 10px 6px 2px;
}
.tape {
  position: absolute;
  top: -13px;
  width: 92px;
  height: 26px;
  background: var(--tape, rgba(233, 226, 205, 0.88));
  border: 1px solid rgba(46, 51, 61, 0.08);
}
.tape-l { left: 36px; transform: rotate(-4deg); }
.tape-r { right: 36px; transform: rotate(4deg); }

.board-card {
  background: var(--surface, #FFFFFF);
  border-radius: 6px;
  box-shadow: 0 20px 44px rgba(46, 51, 61, 0.18);
  padding: 20px 22px;
  position: relative;
}
.board-card .pin {
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--violet-blue, #004C74);
  box-shadow: 0 3px 6px rgba(46, 51, 61, 0.3);
}
.board-card-eyebrow {
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-azure, #597A98);
}
.board-card-title {
  font-family: var(--font-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800;
  font-size: 24px;
  color: var(--violet-blue, #004C74);
  margin: 6px 0 0;
}
.board-card-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(46, 51, 61, 0.2);
}
.board-card-steps > span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gray-azure, #597A98);
}
.board-card-steps > span::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet-blue, #004C74);
  margin: 0 auto 5px;
}
.board-card-steps > span.is-red { color: var(--text-primary, #2E333D); }
.board-card-steps > span.is-red::before { background: var(--pisteyo-red, #FF5758); }

/* vertical phase list variant of the index card (a longer arc than 4 steps) */
.board-card-phases {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed rgba(46, 51, 61, 0.2);
}
.board-card-phases li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-azure, #597A98);
  line-height: 1.95;
}
.board-card-phases li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--violet-blue, #004C74);
}
.board-card-phases li.is-red { color: var(--text-primary, #2E333D); }
.board-card-phases li.is-red::before { background: var(--pisteyo-red, #FF5758); }

/* collage geometry (desktop) */
.board-pos-photo { left: 0; top: 0; width: 46%; max-width: 520px; }
.board-pos-note  { right: 0; top: 8%; width: 40%; }
.board-pos-card  { left: 34%; bottom: 0; width: 300px; }

/* mobile: stack in flow, no parallax */
@media (max-width: 899.98px) {
  .board-collage { min-height: 0; display: grid; gap: 24px; }
  .board-item { position: static; width: 100% !important; max-width: 460px; margin: 0 auto; }
  .plx-1, .plx-2, .plx-3 { transform: none; }
}

/* ---------- 1c · pinned-card entrance for in-flow card grids ----------
   The collage choreography without the absolute layout: real content cards
   (e.g. the Innovation Lab process) drop / slap onto the board in sequence,
   then settle flat so body copy stays upright and readable. */
[data-board] .board-tack { opacity: 0; }
.board-in .board-tack-1 { animation: tack-drop 720ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.board-in .board-tack-2 { animation: tack-drop 720ms cubic-bezier(0.4, 0, 0.2, 1) 150ms both; }
.board-in .board-tack-3 { animation: tack-slap 640ms cubic-bezier(0.34, 1.4, 0.5, 1) 300ms both; }
@keyframes tack-drop {
  from { opacity: 0; transform: translateY(-34px) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes tack-slap {
  from { opacity: 0; transform: translateY(-12px) scale(1.06) rotate(3deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Reduced motion: boards and marks land settled ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-hero h1 .mark path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  .board-item,
  .board-tack {
    animation: none !important;
    opacity: 1 !important;
  }
  .board-tack { transform: none !important; }
  .board-item-1 { transform: rotate(-2deg) !important; }
  .board-item-2 { transform: rotate(1.2deg) !important; }
  .board-item-3 { transform: rotate(2deg) !important; }
}

/* ---------- Service landing pages (migrated from Webflow) ---------- */
.page-service .svc-crumb {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.page-service .svc-crumb a { color: var(--text-secondary); font-weight: 600; }
.page-service .svc-crumb a:hover { color: var(--pisteyo-red); }
.page-service .stat-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 82% 12%, rgba(255, 87, 88, 0.16), transparent 62%),
    radial-gradient(760px 420px at 4% 88%, rgba(0, 76, 116, 0.38), transparent 62%),
    var(--dark-gray-blue);
  color: var(--white);
  padding: var(--space-8) 0;
}
.page-service .stat-band h2 { color: var(--white); margin-bottom: var(--space-2); }
.page-service .stat-band .eyebrow { color: var(--pisteyo-red); }
.page-service .stat-band .lead { color: rgba(255, 255, 255, 0.82); margin-bottom: 0; }
.page-service .stat-band .sec-head { border-top-color: var(--pisteyo-red); }
.page-service .stat-row { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 760px) {
  .page-service .stat-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.page-service .stat-item { padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.page-service .stat-item .stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--white);
  margin-bottom: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.page-service .stat-item .stat-label { color: rgba(255, 255, 255, 0.78); font-weight: 600; font-size: 0.95rem; margin: 0; }
.page-service .svc-quote {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.page-service .svc-quote blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.page-service .svc-quote cite { font-style: normal; color: var(--text-secondary); font-weight: 600; font-size: 0.95rem; }
.page-service .svc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* ==========================================================================
   BLOG - index (body.page-blog) and posts (body.page-post)

   "Notes From the Field": insights and press, filed on the board. The index
   pins the newest post as the featured artifact (graded photo + sticky) over
   a three-card grid; a post reads in one measured column with its working
   notes (date / topic / share) in a rail beside it. Everything here reuses
   the board vocabulary above - marks, stickies, taped artifacts, the grade.
   ========================================================================== */

/* ---------- Index hero ---------- */
.page-blog .blog-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
  background-color: var(--board);
}
.page-blog .blog-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-3);
  max-width: 15ch;
}
.page-blog .blog-hero h1 .accent { color: var(--violet-blue); }
.page-blog .blog-hero .lead { max-width: 56ch; }
/* A pencil aside, same budget rule as the homepage hero: the red belongs to
   the encircle. */
.page-blog .blog-hero .hand {
  margin-top: var(--space-2);
  opacity: 0.7;
}

/* ---------- Shared meta line (topic tag + date) ---------- */
.page-blog .blog-meta,
.page-post .blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.page-blog .blog-date,
.page-post .blog-date {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ---------- Featured post: a pinned artifact ---------- */
.page-blog .blog-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  margin-bottom: var(--space-7);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
@media (min-width: 880px) {
  .page-blog .blog-feature { grid-template-columns: 1.05fr 1fr; }
}
.page-blog .blog-feature:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  border-color: rgba(255, 87, 88, 0.28);
}
/* The card stays overflow-visible so the pinned sticky can overhang it; the
   media wrapper does the clipping instead. */
.page-blog .blog-feature-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-tint);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@media (min-width: 880px) {
  .page-blog .blog-feature-media { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}
.page-blog .blog-feature-media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
  transition: transform var(--t-slow);
}
.page-blog .blog-feature:hover .blog-feature-media img { transform: scale(1.035); }
/* the same navy/red duotone every photograph on the site wears */
.page-blog .blog-feature-media .grade,
.page-post .post-figure .grade {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background: linear-gradient(206deg, rgba(0, 76, 116, 0.42), rgba(255, 87, 88, 0.18) 88%);
}
.page-blog .blog-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
}
.page-blog .blog-feature-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--heading-primary);
  margin: 0;
  text-wrap: balance;
  transition: color var(--t-fast);
}
.page-blog .blog-feature:hover .blog-feature-body h2 { color: var(--pisteyo-red); }
.page-blog .blog-feature-desc {
  color: var(--text-secondary);
  font-size: 0.97rem;
}
.page-blog .blog-feature .sticky-pin {
  left: 20px;
  bottom: -16px;
  width: 200px;
}
.page-blog .blog-feature:hover .uc-card-more::after { transform: translateX(4px); }

/* ---------- Insight grid ---------- */
.page-blog .blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px)  { .page-blog .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .page-blog .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.page-blog .blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.page-blog .blog-card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-3px);
  border-color: rgba(255, 87, 88, 0.28);
}
/* the red rail up the left edge, the system's card gesture */
.page-blog .blog-card::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  height: 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red);
  transition: top var(--t-base), height var(--t-base);
}
.page-blog .blog-card:hover::before { top: 16%; height: 68%; }
.page-blog .blog-card h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--heading-primary);
  transition: color var(--t-fast);
}
.page-blog .blog-card:hover h3 { color: var(--pisteyo-red); }
.page-blog .blog-card-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.page-blog .blog-card .uc-card-more { margin-top: auto; }
.page-blog .blog-card:hover .uc-card-more::after { transform: translateX(4px); }

/* ---------- Post head ---------- */
.page-post .post-head {
  padding: var(--space-7) 0 var(--space-5);
  background:
    radial-gradient(900px 420px at 82% -20%, rgba(255, 87, 88, 0.08), transparent 62%),
    var(--board);
}
.page-post .post-crumb {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.page-post .post-crumb a { color: var(--text-secondary); font-weight: 600; }
.page-post .post-crumb a:hover { color: var(--pisteyo-red); }
.page-post .post-head h1 {
  font-size: clamp(2.05rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.033em;
  margin: var(--space-2) 0 var(--space-3);
  max-width: 24ch;
  text-wrap: balance;
}
.page-post .post-head .lead { max-width: 62ch; margin-bottom: var(--space-3); }
.page-post .post-headmeta {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- Post figure (wide, graded, captioned) ---------- */
.page-post .post-figure {
  position: relative;
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--elev-3);
  background: var(--bg-tint);
}
.page-post .post-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}
/* enough darkening at the bottom to keep the caption legible, nothing more */
.page-post .post-figure .vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 6, 48, 0.58), transparent 26%);
}
.page-post .post-figure figcaption {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(10, 6, 48, 0.5);
}
.page-post .post-figure figcaption .dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red);
}

/* ---------- Post layout: working-notes rail + measured column ---------- */
.page-post .post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
@media (min-width: 960px) {
  .page-post .post-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .page-post .post-rail-inner { position: sticky; top: calc(var(--nav-height) + var(--space-3)); }
}
.page-post .post-rail dl { margin: 0; }
.page-post .post-rail dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 5px;
}
.page-post .post-rail dd {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--violet-blue);
}
.page-post .rail-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  margin: 0 0 5px;
}
.page-post .post-share {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.page-post .post-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.page-post .post-share a:hover {
  color: var(--pisteyo-red);
  border-color: var(--pisteyo-red);
  transform: translateY(-2px);
}
.page-post .post-share svg { width: 16px; height: 16px; }
.page-post .post-rail .sticky {
  display: inline-block;
  max-width: 200px;
}

/* ---------- Post body ---------- */
.page-post .post-body {
  max-width: 68ch;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text-primary);
}
.page-post .post-body > *:first-child { margin-top: 0; }
.page-post .post-body p { margin: 0 0 var(--space-3); }
.page-post .post-body strong { color: var(--heading-primary); font-weight: 700; }
.page-post .post-body a { color: var(--violet-blue); text-decoration: underline; text-underline-offset: 3px; }
.page-post .post-body a:hover { color: var(--pisteyo-red); }
/* The pull quote: the pen's rule down the margin, display voice inside. */
.page-post .post-quote {
  margin: var(--space-5) 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 3px solid var(--pisteyo-red);
}
.page-post .post-quote p {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--heading-secondary);
}
.page-post .post-quote cite {
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}

/* ---------- About Pisteyo: a taped artifact under the article ---------- */
.page-post .post-about {
  max-width: 720px;
  margin: var(--space-7) auto var(--space-8);
}
.page-post .post-about .taped p:first-of-type {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

/* ---------- Keep reading ---------- */
.page-post .kr {
  border-top: 1px solid var(--border);
  padding-top: var(--space-6);
  margin-bottom: var(--space-8);
}
.page-post .kr .sec-head { margin-bottom: var(--space-4); }
.page-post .kr-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
  transition: padding-left var(--t-base);
}
.page-post .kr-row:last-child { border-bottom: 0; }
.page-post .kr-row:hover { padding-left: var(--space-3); }
.page-post .kr-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--pisteyo-red);
  transition: top var(--t-base), height var(--t-base);
}
.page-post .kr-row:hover::before { top: 18%; height: 64%; }
/* oversized editorial numeral, same object the engagement flow uses */
.page-post .kr-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--violet-blue);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.page-post .kr-row h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.35;
  transition: color var(--t-fast);
}
.page-post .kr-row:hover h3 { color: var(--pisteyo-red); }
.page-post .kr-row .usecase-tag { justify-self: end; }
@media (max-width: 700px) {
  .page-post .kr-row { grid-template-columns: auto minmax(0, 1fr); }
  .page-post .kr-row .usecase-tag { display: none; }
}

/* ---------- Blog pages close on the contextual next step ---------- */
.page-blog .footer-cta .hand-on-dark,
.page-post .footer-cta .hand-on-dark {
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .page-blog .blog-feature,
  .page-blog .blog-card,
  .page-post .kr-row,
  .page-post .post-share a { transition: none; }
}

/* ---------- Global Offices band (about page): the World Board.
   Dark navy band with a soft dot-field overlay, three cities plotted
   as glowing red markers, and arcs drawing from Denver to the two
   international offices when the section enters view. The only red
   marks on the section are the arcs and the city dots, matching the
   site's mark discipline. Reduced motion renders the final state. */
.offices-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 82% 12%, rgba(255, 87, 88, 0.14), transparent 62%),
    radial-gradient(760px 480px at 4% 92%, rgba(0, 76, 116, 0.42), transparent 62%),
    var(--dark-gray-blue);
  color: var(--white);
  padding: var(--space-8) 0;
}
.offices-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(211, 245, 255, 0.09) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}
.offices-band > .container { position: relative; z-index: 1; }
.offices-band .sec-head h2 {
  color: var(--white);
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: var(--space-2) 0 0;
}
.offices-band .sec-head .lead {
  color: #D3F5FF;
  opacity: 0.85;
  max-width: 60ch;
  margin: var(--space-3) auto 0;
}
.offices-band .sec-head { text-align: center; }
.offices-band .sec-head::before { display: none; }
.offices-band .eyebrow { color: var(--pisteyo-red); justify-content: center; }

/* the three office cards sitting on the dark navy band */
.office-grid {
  margin: var(--space-7) auto 0;
  max-width: 1100px;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 780px) {
  .office-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.office-card {
  background: rgba(211, 245, 255, 0.05);
  border: 1px solid rgba(211, 245, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  position: relative;
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.office-card:hover {
  border-color: rgba(211, 245, 255, 0.32);
  background: rgba(211, 245, 255, 0.075);
  transform: translateY(-2px);
}
.office-card-hq {
  border-color: rgba(255, 87, 88, 0.45);
  background: linear-gradient(180deg, rgba(255, 87, 88, 0.08), rgba(211, 245, 255, 0.04));
}
.office-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #D3F5FF;
  opacity: 0.82;
}
.office-card-hq .office-card-eyebrow { color: var(--pisteyo-red); opacity: 1; }
.office-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(211, 245, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(211, 245, 255, 0.14);
}
.office-card-hq .office-card-dot {
  background: var(--pisteyo-red);
  box-shadow: 0 0 0 4px rgba(255, 87, 88, 0.22), 0 0 14px rgba(255, 87, 88, 0.55);
  animation: office-pulse 3.6s ease-in-out infinite;
}
@keyframes office-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 87, 88, 0.22), 0 0 14px rgba(255, 87, 88, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 87, 88, 0.08), 0 0 22px rgba(255, 87, 88, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  .office-card-hq .office-card-dot { animation: none; }
}
.office-card h3 {
  font-family: var(--font-heading);
  color: var(--white);
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
}
.office-card p {
  color: #D3F5FF;
  opacity: 0.82;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: var(--space-2) 0 0;
}
.office-card .office-card-address {
  color: var(--white);
  opacity: 0.95;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(211, 245, 255, 0.14);
}
.offices-band-tight { padding: var(--space-7) 0; }
.offices-band-note {
  margin: var(--space-6) 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--pisteyo-red);
  opacity: 0.85;
  font-size: 1.05rem;
}

/* ---------- Insights: Client Wins section ---------- */
/* Big featured case study with a 4-up stat row, then a 2x2 mini-case grid,
   then two pull quotes. Draws on the site's card / sec-head / usecase-tag
   vocabulary; adds only the callout numerals and the stat-row layout. */
.page-blog .cw-feature {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--elev-1);
  margin-top: var(--space-5);
  border-top: 4px solid var(--pisteyo-red);
}
.page-blog .cw-feature-head { max-width: 780px; margin-bottom: var(--space-5); }
.page-blog .cw-feature-head h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--heading-primary);
  margin: var(--space-2) 0;
}
.page-blog .cw-feature-head .lead { margin: 0; }

.page-blog .cw-stat-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) {
  .page-blog .cw-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .page-blog .cw-stat-row { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
}
.page-blog .cw-stat .cw-stat-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--pisteyo-red);
  font-variant-numeric: tabular-nums;
}
.page-blog .cw-stat p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
}

.page-blog .cw-detail-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 900px) {
  .page-blog .cw-detail-grid { grid-template-columns: repeat(3, 1fr); }
}
.page-blog .cw-detail-grid h4 {
  color: var(--violet-blue);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.page-blog .cw-detail-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-blog .cw-detail-grid li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.page-blog .cw-detail-grid li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--pisteyo-red);
  border-radius: 50%;
}
.page-blog .cw-bottom-line {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
}

.page-blog .cw-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 720px) { .page-blog .cw-grid { grid-template-columns: repeat(2, 1fr); } }

.page-blog .cw-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-top: 3px solid var(--pisteyo-red);
}
.page-blog .cw-card .cw-num-lg {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pisteyo-red);
  font-variant-numeric: tabular-nums;
  margin: var(--space-2) 0;
}
.page-blog .cw-card .cw-num-lg span {
  font-size: 0.5em;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0;
  margin-left: 4px;
}
.page-blog .cw-card h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--heading-primary);
  margin: 0 0 var(--space-2);
}
.page-blog .cw-card p {
  margin: 0 0 var(--space-2);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.page-blog .cw-card .cw-outcome {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  color: var(--violet-blue);
  font-weight: 600;
  font-style: italic;
}

.page-blog .cw-quotes {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 900px) { .page-blog .cw-quotes { grid-template-columns: 1fr 1fr; } }
.page-blog .cw-quote {
  background: var(--white);
  border-left: 4px solid var(--pisteyo-red);
  padding: var(--space-4);
  margin: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--elev-1);
}
.page-blog .cw-quote p {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--heading-primary);
  margin: 0 0 var(--space-2);
}
.page-blog .cw-quote cite {
  font-style: normal;
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

/* ---------- Chat widget sizing (Macadona) ----------
   The remote widget script defaults to widget_width_vw:28 /
   widget_height_vh:75, which at desktop widths renders ~400x680 and up,
   and at large viewports spills over the footer CTA. Override the two
   CSS variables the widget reads (--widget-width, --widget-height) with
   the standard SaaS chat panel footprint (~380x580). The fullscreen
   variant used on /tool-enabled-syd-for-executives is untouched.
   Also lift the launcher off page margins. */
macadona-widget:not(.fullscreen) {
  --widget-width: 380px !important;
  --widget-height: min(580px, calc(100vh - 96px)) !important;
}
@media (max-width: 480px) {
  macadona-widget:not(.fullscreen) {
    --widget-width: calc(100vw - 24px) !important;
    --widget-height: calc(100vh - 96px) !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Industries dropdown (nav sub-nav) ----------
   A consultancy-grade panel in the offices-band vocabulary: dark navy
   ground, dot field, soft red/blue glows. ICP sectors lead as cards
   ("Where we go deepest"); legacy sectors sit below as quiet links.
   Links are real anchors in static HTML (SEO); the panel is click-to-
   open, Esc-closable, and the mobile drawer gets a native accordion. */
.nav-dd { position: static; }
.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0;
}
.nav-dd-btn:hover { color: var(--pisteyo-red); }
.nav-dd-caret { transition: transform var(--t-fast); margin-top: 1px; }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }

.nav-dd-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  background: var(--white);
  border-bottom: 3px solid var(--pisteyo-red);
  box-shadow: 0 24px 48px rgba(20, 24, 32, 0.14);
  z-index: 99;
}
.nav-dd-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(46, 51, 61, 0.06) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}
.nav-dd.open .nav-dd-panel { display: block; animation: dd-in 0.18s ease-out; }
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-dd.open .nav-dd-panel { animation: none; }
}

.nav-dd-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 26px 30px;
  display: grid;
  gap: 26px;
}
@media (min-width: 900px) {
  .nav-dd-inner { grid-template-columns: 240px 1fr; gap: 44px; }
}

.nav-dd-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
  margin-bottom: 10px;
}
.nav-dd-lede {
  color: var(--text-secondary);
  opacity: 1;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.nav-links .nav-dd-all,
.nav-dd-all {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 2px solid var(--pisteyo-red);
  padding-bottom: 2px;
}
.nav-links .nav-dd-all:hover,
.nav-dd-all:hover { color: var(--pisteyo-red); }

.nav-dd-group {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.85;
  margin: 0 0 12px;
}
.nav-dd-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 680px) { .nav-dd-grid { grid-template-columns: 1fr 1fr; } }
.nav-dd-card {
  display: block;
  text-decoration: none;
  background: var(--board);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.nav-dd-card:hover {
  border-color: rgba(255, 87, 88, 0.55);
  background: var(--white);
  transform: translateY(-2px);
}
.nav-dd-name {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.nav-dd-name i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pisteyo-red);
  box-shadow: 0 0 8px rgba(255, 87, 88, 0.7);
  flex: none;
}
.nav-dd-desc {
  display: block;
  margin-top: 5px;
  padding-left: 16px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0.95;
}
.nav-dd-tail { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-dd-tail a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--light-grey);
  border-radius: 999px;
  padding: 6px 14px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.nav-dd-tail a:hover { border-color: var(--pisteyo-red); color: var(--text-primary); }

/* mobile drawer accordion */
.drawer-dd details { border-bottom: 1px solid var(--border); }
.drawer-dd summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.drawer-dd summary::-webkit-details-marker { display: none; }
.drawer-dd summary::after {
  content: '+';
  color: var(--pisteyo-red);
  font-size: 1.25rem;
  font-weight: 400;
}
.drawer-dd details[open] summary::after { content: '\2212'; }
.drawer-dd-list { list-style: none; margin: 0 0 10px; padding: 0 0 4px 14px; }
.drawer-dd-list li { border-bottom: 0 !important; }
.drawer-dd-list a { font-size: 0.95rem; padding: 8px 0 !important; }

/* Services / Company panel variants: list-style items in columns, lighter
   than the Industries cards so the two panel types read differently. */
.nav-dd-cols { display: grid; gap: 24px; }
@media (min-width: 880px) { .nav-dd-cols { grid-template-columns: 1fr 0.9fr 1.05fr; gap: 34px; } }
.nav-dd-group b {
  color: var(--pisteyo-red);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 5px;
}
.nav-dd-item {
  display: block;
  text-decoration: none;
  padding: 8px 10px;
  margin: 0 -10px 2px;
  border-radius: 8px;
  transition: background var(--t-fast);
}
.nav-dd-item:hover { background: var(--board-alt); }
.nav-dd-item .nav-dd-name { font-size: 0.92rem; }
.nav-dd-item .nav-dd-desc { margin-top: 2px; font-size: 0.76rem; }
.nav-dd-grid .nav-dd-item { margin: 0; }

/* ==========================================================================
   Client Case Studies  (.page-case-studies hub  +  .page-case-study detail)
   Generated section — see tools/build_case_studies.py / data/case-studies.json.
   Each page sets --cs-hue on the hero/cards for a per-capability accent.
   ========================================================================== */
.page-case-study,
.page-case-studies { --cs-hue: var(--violet-blue); }

/* ---- Shared metric grid (hero "at a glance") --------------------------- */
.cs-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
}
@media (min-width: 720px) { .cs-metric-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.cs-metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cs-hue);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3) var(--space-3);
  box-shadow: var(--elev-1);
}
.cs-metric-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1;
  color: var(--cs-hue);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.cs-metric-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); line-height: 1.35; }

/* ---- HUB: hero --------------------------------------------------------- */
.page-case-studies .cs-hub-hero { background:
    radial-gradient(1100px 460px at 82% -8%, rgba(0,76,116,0.10), transparent 60%),
    radial-gradient(760px 380px at 6% 4%, rgba(255,87,88,0.08), transparent 55%); }
.page-case-studies .cs-hub-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.cs-metric-grid-hero { max-width: 980px; }

/* ---- HUB: featured engagement banner ----------------------------------- */
.cs-engagement { padding-top: var(--space-6); padding-bottom: var(--space-4); }
.cs-engagement-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cs-engagement-head h2 { margin: 4px 0 6px; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.cs-client-badge {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 116px; height: 116px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--elev-2);
  padding: var(--space-2);
}
.cs-client-badge img { max-width: 100%; height: auto; }
.cs-client-sector { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); font-weight: 600; font-size: 0.92rem; }
.cs-engagement-intro { margin-top: var(--space-4); max-width: 900px; }
.cs-pill {
  display: inline-block;
  font-family: var(--font-body); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--violet-blue);
  background: var(--light-azure-soft);
  border: 1px solid rgba(0,76,116,0.18);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* ---- HUB: case card grid ----------------------------------------------- */
.cs-card-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 680px) { .cs-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cs-card-grid { grid-template-columns: repeat(3, 1fr); } }
.cs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.cs-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cs-hue); }
.cs-card:hover { transform: translateY(-4px); box-shadow: var(--elev-3); }
.cs-card > a { display: flex; flex-direction: column; height: 100%; padding: var(--space-4); padding-top: calc(var(--space-4) + 4px); text-decoration: none; color: inherit; }
.cs-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.cs-card-product { font-family: var(--font-body); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-hue); }
.cs-card-status { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); text-align: right; }
.cs-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.2; color: var(--heading-primary); margin-bottom: 8px; }
.cs-card-tagline { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; margin-bottom: var(--space-3); }
.cs-card-metrics { display: flex; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.cs-card-metric { display: flex; flex-direction: column; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); line-height: 1.25; }
.cs-card-metric b { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--heading-primary); font-variant-numeric: tabular-nums; }
.cs-card-more { margin-top: var(--space-3); font-weight: 700; font-size: 0.86rem; color: var(--cs-hue); }
.cs-card:hover .cs-card-more span { margin-left: 4px; }

/* ---- HUB: approach strip ----------------------------------------------- */
.cs-approach-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cs-approach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cs-approach-grid { grid-template-columns: repeat(4, 1fr); } }
.cs-approach-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--elev-1); }
.cs-approach-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.cs-approach-card p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }

/* ---- DETAIL: hero ------------------------------------------------------ */
.page-case-study .cs-hero {
  background:
    radial-gradient(1000px 440px at 84% -12%, color-mix(in srgb, var(--cs-hue) 16%, transparent), transparent 60%),
    radial-gradient(680px 340px at 0% 0%, rgba(255,87,88,0.06), transparent 55%);
  border-bottom: 1px solid var(--border);
}
.cs-crumbs { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-3); }
.cs-crumbs a { color: var(--cs-hue); text-decoration: none; }
.cs-crumbs a:hover { text-decoration: underline; }
.cs-hero-client { display: inline-flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 16px 6px 8px; box-shadow: var(--elev-1); margin-bottom: var(--space-3); }
.cs-hero-client img { height: 30px; width: auto; }
.cs-hero-client span { font-weight: 700; font-size: 0.9rem; color: var(--heading-primary); }
.page-case-study .cs-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 18ch; }
.cs-hero-status { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-3); font-weight: 700; font-size: 0.86rem; color: var(--heading-primary); }
.cs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cs-hue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs-hue) 20%, transparent); }

/* ---- DETAIL: two-column layouts ---------------------------------------- */
.cs-two-col { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .cs-two-col { grid-template-columns: 1.35fr 0.9fr; gap: var(--space-6); }
  .cs-two-col-wide { grid-template-columns: 1fr 1fr; }
}
.cs-summary > p { font-size: 1.06rem; line-height: 1.7; color: var(--text-primary); }
.cs-flagship { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-dark); color: var(--white); box-shadow: var(--elev-2); }
.cs-flagship-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: #fff; }
.cs-flagship-label { display: block; margin-top: 8px; font-size: 0.9rem; color: rgba(255,255,255,0.82); font-weight: 600; }

/* snapshot / stack definition lists */
.cs-snapshot { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.cs-snapshot h2 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.cs-snap, .cs-stack-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.cs-snap-row, .cs-stack-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.cs-snap-row:first-child, .cs-stack-row:first-child { border-top: 0; }
@media (min-width: 460px) { .cs-snap-row, .cs-stack-row { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2); } }
.cs-snap-row dt, .cs-stack-row dt { font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pisteyo-red); align-self: center; }
.cs-stack-row dt { color: var(--cs-hue); }
.cs-snap-row dd, .cs-stack-row dd { margin: 0; font-size: 0.92rem; color: var(--text-primary); font-weight: 600; }

/* ---- DETAIL: challenge -> solution ------------------------------------- */
.cs-cstable { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-cstable-row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--elev-1); }
@media (min-width: 760px) { .cs-cstable-row { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.cs-cstable-problem, .cs-cstable-solution { font-size: 0.95rem; line-height: 1.5; color: var(--text-primary); }
.cs-cstable-tag { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 4px; }
.cs-cstable-problem .cs-cstable-tag { color: var(--gray-azure); }
.cs-cstable-solution { font-weight: 600; }
.cs-cstable-solution .cs-cstable-tag { color: var(--cs-hue); }
.cs-cstable-arrow { color: var(--cs-hue); font-size: 1.4rem; font-weight: 700; text-align: center; }

/* ---- DETAIL: how it works flow ----------------------------------------- */
.cs-flow { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-5); }
.cs-flow-step { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cs-hue); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-weight: 600; font-size: 0.9rem; box-shadow: var(--elev-1); }
.cs-flow-n { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cs-hue); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; }
.cs-flow-arrow { display: none; align-items: center; color: var(--cs-hue); font-size: 1.3rem; font-weight: 700; }
@media (min-width: 980px) { .cs-flow { flex-wrap: nowrap; } .cs-flow-arrow { display: flex; } .cs-flow-step { flex: 1 1 0; } }

.cs-stack { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.cs-stack h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }

/* ---- DETAIL: results + before/after ------------------------------------ */
.cs-results-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
@media (min-width: 760px) { .cs-results-list { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); } }
.cs-results-list li { position: relative; padding-left: 30px; font-size: 0.96rem; line-height: 1.55; color: var(--text-primary); }
.cs-results-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cs-hue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/72% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/72% no-repeat; }

.cs-ba { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--elev-1); }
.cs-ba-head { display: none; background: var(--surface-dark); color: rgba(255,255,255,0.9); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-ba-head > div { padding: var(--space-2) var(--space-3); }
.cs-ba-row { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border); }
.cs-ba-row:first-child { border-top: 0; }
.cs-ba-row > div { padding: var(--space-2) var(--space-3); }
.cs-ba-dim { font-weight: 700; color: var(--heading-primary); font-size: 0.92rem; background: var(--surface-alt); }
.cs-ba-before, .cs-ba-after { font-size: 0.92rem; color: var(--text-primary); }
.cs-ba-before span, .cs-ba-after span { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px; color: var(--gray-azure); }
.cs-ba-after { border-left: 3px solid var(--cs-hue); }
.cs-ba-after span { color: var(--cs-hue); }
@media (min-width: 760px) {
  .cs-ba-head { display: grid; grid-template-columns: 0.9fr 1.05fr 1.05fr; }
  .cs-ba-row { grid-template-columns: 0.9fr 1.05fr 1.05fr; }
  .cs-ba-dim { background: transparent; }
  .cs-ba-after { border-left: 0; box-shadow: inset 3px 0 0 var(--cs-hue); }
}

/* ---- DETAIL: quote ----------------------------------------------------- */
.cs-quote-section { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.cs-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.cs-quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.4; color: var(--heading-primary); margin: 0 0 var(--space-3); }
.cs-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.cs-quote-author { font-weight: 800; color: var(--cs-hue); }
.cs-quote-role { font-size: 0.88rem; color: var(--text-secondary); font-weight: 600; }

/* ---- DETAIL: security check-list + horizon ----------------------------- */
.cs-check-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.cs-check-list li { position: relative; padding-left: 28px; font-size: 0.94rem; line-height: 1.55; color: var(--text-primary); }
.cs-check-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--cs-hue) 16%, transparent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/100% no-repeat; background-color: var(--cs-hue); }
.cs-horizon { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--cs-hue); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--elev-1); }
.cs-horizon p { margin: var(--space-1) 0 0; color: var(--text-primary); font-size: 0.98rem; line-height: 1.6; }

/* ---- DETAIL: related --------------------------------------------------- */
.cs-related-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cs-related-grid { grid-template-columns: repeat(2, 1fr); } }
.cs-related-card { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cs-hue); border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none; color: inherit; box-shadow: var(--elev-1); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.cs-related-card:hover { transform: translateY(-3px); box-shadow: var(--elev-2); }
.cs-related-product { font-family: var(--font-body); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-hue); }
.cs-related-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--heading-primary); line-height: 1.25; }
.cs-related-metric { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); }

/* ---- Homepage: Detego proof feature ------------------------------------ */
.page-home .cs-proof { background:
    radial-gradient(900px 400px at 88% 0%, rgba(0,76,116,0.08), transparent 60%); }
.cs-proof-card { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--elev-2); }
@media (min-width: 900px) { .cs-proof-card { grid-template-columns: 1.1fr 1.4fr; gap: var(--space-6); padding: var(--space-6); } }
.cs-proof-intro .cs-hero-client { margin-bottom: var(--space-3); }
.cs-proof-intro h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: var(--space-2); }
.cs-proof-intro p { color: var(--text-secondary); margin-bottom: var(--space-3); }
.cs-proof-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 520px) { .cs-proof-metrics { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .cs-proof-metrics { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
.cs-proof-metric { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface-alt); border: 1px solid var(--border); }
.cs-proof-metric b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; color: var(--violet-blue); font-variant-numeric: tabular-nums; }
.cs-proof-metric span { display: block; margin-top: 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); line-height: 1.35; }

/* ---- Industry page: Detego proof callout ------------------------------- */
.ind-proof { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--elev-1); display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .ind-proof { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-6); } }
.ind-proof-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.ind-proof-metric b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--violet-blue); line-height: 1; font-variant-numeric: tabular-nums; }
.ind-proof-metric span { display: block; margin-top: 5px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); line-height: 1.3; }

/* ==========================================================================
   Case Studies — long-form components (TOC, process, timeline, blockers, FAQ)
   ========================================================================== */
.page-case-study .sec-head-left { text-align: left; margin-left: 0; margin-right: 0; max-width: 760px; }
.page-case-study .cs-subhead { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-2); }

/* On-this-page nav */
.cs-toc { position: sticky; top: var(--nav-height); z-index: 20; background: color-mix(in srgb, var(--board) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.cs-toc > .container { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; }
.cs-toc-label { flex: 0 0 auto; font-family: var(--font-body); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-secondary); }
.cs-toc-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.cs-toc-links::-webkit-scrollbar { display: none; }
.cs-toc-links a { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); }
.cs-toc-links a:hover { color: var(--cs-hue); background: color-mix(in srgb, var(--cs-hue) 10%, transparent); }
html { scroll-behavior: smooth; }
.page-case-study [id] { scroll-margin-top: calc(var(--nav-height) + 64px); }

/* Prose */
.cs-prose-wrap { max-width: 820px; }
.cs-prose { font-size: 1.08rem; line-height: 1.75; color: var(--text-primary); margin: 0; }
.page-case-study .sec-head-left .lead { margin-left: 0; }

/* Process — numbered steps */
.cs-steps { list-style: none; counter-reset: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
@media (min-width: 760px) { .cs-steps { grid-template-columns: 1fr 1fr; gap: var(--space-3); } }
.cs-step { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--elev-1); }
.cs-step-n { flex: 0 0 auto; font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; line-height: 1; color: color-mix(in srgb, var(--cs-hue) 55%, transparent); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cs-step p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--text-primary); }

/* Timeline */
.cs-timeline { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--elev-1); }
.cs-tl-head { display: none; background: var(--surface-dark); color: rgba(255,255,255,0.9); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-tl-head > div { padding: var(--space-2) var(--space-4); }
.cs-tl-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); position: relative; }
.cs-tl-row:first-child { border-top: 0; }
.cs-tl-when { font-weight: 800; color: var(--cs-hue); font-size: 0.9rem; }
.cs-tl-what { color: var(--text-primary); font-size: 0.95rem; }
@media (min-width: 680px) {
  .cs-tl-head { display: grid; grid-template-columns: 0.32fr 0.68fr; }
  .cs-tl-row { grid-template-columns: 0.32fr 0.68fr; gap: var(--space-3); align-items: baseline; }
  .cs-tl-when { border-left: 3px solid var(--cs-hue); padding-left: var(--space-3); margin-left: -4px; }
}

/* Friction points & blockers */
.cs-blocker-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cs-blocker-grid { grid-template-columns: 1fr 1fr; } }
.cs-blocker { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--elev-1); position: relative; padding-left: calc(var(--space-4) + 6px); }
.cs-blocker::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cs-hue); border-radius: var(--radius-lg) 0 0 var(--radius-lg); opacity: 0.7; }
.cs-blocker h3 { font-size: 1rem; margin-bottom: 6px; color: var(--heading-primary); }
.cs-blocker p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; }

/* FAQ */
.cs-faq { max-width: 820px; display: grid; gap: var(--space-2); }
.cs-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-1); overflow: hidden; }
.cs-faq-item summary { list-style: none; cursor: pointer; padding: var(--space-3) var(--space-4); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--heading-primary); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cs-faq-item summary::-webkit-details-marker { display: none; }
.cs-faq-item summary::after { content: ""; flex: 0 0 auto; width: 18px; height: 18px; background: var(--cs-hue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/100% no-repeat; transition: transform var(--t-fast); }
.cs-faq-item[open] summary::after { transform: rotate(45deg); }
.cs-faq-a { padding: 0 var(--space-4) var(--space-3); }
.cs-faq-a p { margin: 0; color: var(--text-secondary); font-size: 0.96rem; line-height: 1.6; }

/* Go-deeper service links */
.cs-svc-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cs-svc-link { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 10px 18px; font-weight: 700; font-size: 0.9rem; color: var(--heading-primary); text-decoration: none; box-shadow: var(--elev-1); transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
.cs-svc-link span { color: var(--cs-hue); }
.cs-svc-link:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--cs-hue) 40%, var(--border)); }

/* ---------- Lead-page flagship components ----------
   The Happy Path band (management consulting): a cream board with a live
   dot field where scattered work converges onto the route as you advance
   the eight stages; stage rail + detail card below the canvas. */
.hp-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 440px at 85% 4%, rgba(255, 87, 88, 0.06), transparent 60%),
    radial-gradient(720px 440px at 4% 98%, rgba(0, 76, 116, 0.06), transparent 60%),
    var(--board);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-8) 0;
}
.hp-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(46, 51, 61, 0.06) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hp-band > .container { position: relative; z-index: 1; }
.hp-band .sec-head { text-align: center; }
.hp-band .sec-head::before { display: none; }
.hp-band .sec-head h2 { color: var(--heading-primary); letter-spacing: -0.028em; text-wrap: balance; margin: var(--space-2) 0 0; }
.hp-band .sec-head .lead { color: var(--text-secondary); max-width: 62ch; margin: var(--space-3) auto 0; }
.hp-band .eyebrow { color: var(--pisteyo-red); justify-content: center; }

.hp-canvas {
  display: block;
  width: 100%;
  height: 300px;
  margin-top: var(--space-5);
}
@media (max-width: 720px) { .hp-canvas { height: 220px; } }

.hp-layout {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .hp-layout { grid-template-columns: 300px 1fr; gap: var(--space-6); align-items: start; }
}
.hp-stages { display: grid; gap: 6px; }
.hp-stage {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit;
  color: var(--text-secondary);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.hp-stage:hover { background: var(--board-alt); color: var(--text-primary); }
.hp-stage.on {
  background: var(--white);
  border-color: rgba(255, 87, 88, 0.5);
  color: var(--heading-primary);
  box-shadow: var(--elev-1);
}
.hp-stage:focus-visible { outline: 2px solid var(--pisteyo-red); outline-offset: 2px; }
.hp-stage b {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--pisteyo-red);
  letter-spacing: 0.08em;
  flex: none;
}
.hp-stage span { font-weight: 600; font-size: 0.94rem; line-height: 1.35; }

.hp-detail {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: var(--space-5);
  min-height: 220px;
}
.hp-detail h3 {
  font-family: var(--font-heading);
  color: var(--heading-primary);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}
.hp-detail p { color: var(--text-secondary); line-height: 1.65; margin: 0 0 var(--space-3); }
.hp-detail .hp-takeaway {
  display: block;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  color: var(--heading-primary);
  font-weight: 600;
}
.hp-detail .hp-takeaway b {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
  margin-bottom: 6px;
}
.hp-note {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--pisteyo-red);
  opacity: 0.85;
  font-size: 1.02rem;
}

/* ---------- Happy Path — scroll-driven hero (management consulting) ----------
   A tall scroll track (.hp-hero) with a pinned viewport (.hp-sticky). As the
   reader scrolls, js/happy-path.js draws more of the smile-shaped route stage
   by stage, then forms the eyes so the field resolves into a smiley face. */
.hp-hero {
  position: relative;
  height: 300vh;                 /* scroll distance: pin + 8 stages + the face */
  background:
    radial-gradient(820px 460px at 85% 6%, rgba(255, 87, 88, 0.06), transparent 60%),
    radial-gradient(760px 460px at 6% 96%, rgba(0, 76, 116, 0.06), transparent 60%),
    var(--board);
  border-bottom: 1px solid var(--border);
}
/* Operating Model hero (Business Consulting) has 7 functions to reveal, so it
   needs a longer scroll track than the Happy Path — more scroll per stage keeps
   the staging from feeling twitchy. Scoped to [data-osm] so the Management
   Consulting hero is unaffected. */
.hp-hero[data-osm] { height: 560vh; }
/* Management Consulting Happy Path (8 stages + the face) gets the same longer
   track so its scroll staging is gentle, matching the Operating Model hero. */
.hp-hero[data-hp] { height: 560vh; }
.hp-sticky {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hp-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(46, 51, 61, 0.06) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}
.hp-inner { position: relative; z-index: 1; width: 100%; }
.hp-head { text-align: center; }
.hp-head .eyebrow { justify-content: center; color: var(--pisteyo-red); }
.hp-head h2 {
  color: var(--heading-primary);
  letter-spacing: -0.028em;
  text-wrap: balance;
  margin: var(--space-2) 0 0;
  font-size: clamp(1.6rem, 3.1vw, 2.4rem);
}
.hp-head .lead { color: var(--text-secondary); max-width: 62ch; margin: var(--space-3) auto 0; }
.hp-scrollcue { color: var(--pisteyo-red); font-weight: 600; white-space: nowrap; }
.hp-hero .hp-canvas {
  display: block;
  width: 100%;
  height: clamp(200px, 34vh, 360px);
  margin-top: var(--space-3);
}
.hp-readout { max-width: 720px; margin: var(--space-3) auto 0; }
.hp-detail-wrap { display: grid; }
.hp-hero .hp-detail {
  grid-area: 1 / 1;              /* stack cards; wrap height = tallest card */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med, 0.35s) ease;
}
.hp-hero .hp-detail.is-active { opacity: 1; visibility: visible; }
.hp-hero .hp-detail h3 {
  font-family: var(--font-heading);
  color: var(--heading-primary);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}
.hp-hero .hp-detail p { color: var(--text-secondary); line-height: 1.6; margin: 0 auto var(--space-2); max-width: 56ch; }
.hp-hero .hp-takeaway { display: inline-block; border: 0; padding: 0; color: var(--heading-primary); font-weight: 600; }
.hp-hero .hp-takeaway b {
  display: inline;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pisteyo-red);
  margin-right: 8px;
}
.hp-pips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.hp-pips button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.hp-pips button.done { color: var(--pisteyo-red); border-color: rgba(255, 87, 88, 0.5); }
.hp-pips button.on { background: var(--pisteyo-red); color: #fff; border-color: var(--pisteyo-red); transform: scale(1.08); }
.hp-pips button:focus-visible { outline: 2px solid var(--pisteyo-red); outline-offset: 2px; }

@media (max-width: 720px) {
  .hp-hero { height: 260vh; }
  .hp-hero[data-osm] { height: 480vh; }
  .hp-hero[data-hp] { height: 480vh; }
  .hp-scrollcue { display: block; white-space: normal; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero { height: auto; }
  .hp-sticky { position: static; height: auto; min-height: 0; padding: var(--space-8) 0; }
  .hp-hero .hp-detail { transition: none; }
}

/* Operator credibility strip */
.op-strip {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 860px) { .op-strip { grid-template-columns: auto 1fr; gap: var(--space-7); } }
.op-faces { display: flex; }
.op-faces span {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid var(--white);
  box-shadow: var(--elev-1);
  background-size: cover;
  background-position: center;
  flex: none;
}
.op-faces span + span { margin-left: -18px; }
@media (max-width: 480px) { .op-faces span { width: 72px; height: 72px; } }
.op-copy h2 { margin: var(--space-2) 0 var(--space-3); }
.op-copy .lead { max-width: 58ch; }

/* Crawl / Walk / Run strip */
.cwr { display: grid; gap: var(--space-4); }
@media (min-width: 780px) { .cwr { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); } }
.cwr .card { position: relative; padding-top: var(--space-5); }
.cwr-steps { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-bottom: var(--space-3); }
.cwr-steps i {
  width: 12px;
  border-radius: 3px 3px 0 0;
  background: var(--light-azure);
  display: block;
}
.cwr-steps i.lit { background: var(--pisteyo-red); }
.cwr .card h3 { margin-bottom: var(--space-2); }

/* Magic wand note (reuses the board hand/tape vocabulary) */
.mw-note {
  max-width: 640px;
  margin: var(--space-5) auto 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: var(--space-5) var(--space-5) var(--space-4);
  position: relative;
}
.mw-note::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 110px;
  height: 26px;
  background: var(--tape);
}
.mw-note .hand { color: var(--pisteyo-red); font-size: 1.1rem; display: block; margin-bottom: var(--space-2); }
.mw-note blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--heading-primary);
}
.mw-note p { margin: var(--space-3) 0 0; color: var(--text-secondary); }

/* Decoupling chart: throughput climbs, cost stays flat */
.dcv { max-width: 760px; margin: var(--space-5) auto 0; }
.dcv svg { display: block; width: 100%; height: auto; }
.dcv .dcv-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.reveal.in .dcv-line, .no-anim .dcv-line { animation: dcv-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.dcv .dcv-line + .dcv-line { animation-delay: 0.35s; }
@keyframes dcv-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dcv .dcv-line { stroke-dashoffset: 0 !important; animation: none !important; }
}
.dcv-legend { display: flex; gap: var(--space-5); justify-content: center; margin-top: var(--space-3); flex-wrap: wrap; }
.dcv-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.dcv-legend i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }

/* Aha pull-quote */
.aha-pull {
  max-width: 720px;
  margin: var(--space-5) auto 0;
  border-left: 4px solid var(--pisteyo-red);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}
.aha-pull blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--heading-primary);
  text-wrap: balance;
}
.aha-pull .hand { color: var(--pisteyo-red); display: block; margin-top: var(--space-3); }

/* ---------- Light field band (business + change centerpieces) ----------
   Cream ground with an ink dot-field and whisper-soft brand tints, so the
   canvas fields read on the light site rather than as dark slabs. */
.field-light {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(820px 440px at 85% 4%, rgba(255, 87, 88, 0.06), transparent 60%),
    radial-gradient(720px 440px at 4% 98%, rgba(0, 76, 116, 0.06), transparent 60%),
    var(--board);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.field-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(46, 51, 61, 0.06) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}
.field-light > .container { position: relative; z-index: 1; }
.field-light .sec-head { text-align: center; }
.field-light .sec-head::before { display: none; }
.field-light .sec-head .lead { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* Operating System field (business consulting) */
.osm-canvas { display: block; width: 100%; height: 380px; margin-top: var(--space-4); }
@media (max-width: 720px) { .osm-canvas { height: 320px; } }
.osm-hint {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Adoption Field (change management) */
.adopt-wrap { position: relative; margin-top: var(--space-4); }
.adopt-canvas { display: block; width: 100%; height: 380px; }
@media (max-width: 720px) { .adopt-canvas { height: 320px; } }
.adopt-meter { position: absolute; top: 8px; right: 8px; text-align: right; pointer-events: none; }
.adopt-meter .adopt-pct {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--pisteyo-red);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.adopt-meter .adopt-lbl {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 4px;
}
.adopt-controls { display: flex; align-items: center; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); flex-wrap: wrap; }
.adopt-controls .adopt-hint { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
.btn-quiet {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.btn-quiet:hover { border-color: var(--pisteyo-red); color: var(--pisteyo-red); }
.btn-quiet:focus-visible { outline: 2px solid var(--pisteyo-red); outline-offset: 2px; }
/* ==========================================================================
   Mid-size positioning notes (homepage cs-proof card + case-studies hub)
   ========================================================================== */
.cs-proof-note {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.cs-proof-note::before {
  content: "";
  display: inline-block;
  width: 26px; height: 3px;
  background: var(--violet-blue);
  border-radius: 2px;
  margin-right: 12px;
  vertical-align: 4px;
}
.cs-midsize-note {
  max-width: 860px;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--violet-blue);
  background: var(--surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--elev-1);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-primary);
}

/* ==========================================================================
   Globe band — operators across the globe, the work moves with the sun.
   Deep navy field; hairline-divided offices; live local time per city.
   ========================================================================== */
.globe-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 160% at 82% -10%, #0B6395 0%, var(--violet-blue) 42%, #05334E 100%);
  color: var(--white);
}
.globe-band::after {
  /* the board's dot motif, ghosted onto the night side of the band */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(211, 245, 255, 0.10) 1px, transparent 1px);
  background-size: var(--dot-tile) var(--dot-tile);
  mask-image: linear-gradient(115deg, transparent 45%, rgba(0,0,0,0.9) 100%);
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
}
.globe-band .container { position: relative; z-index: 1; }
.globe-band .eyebrow { color: var(--light-azure); }
.globe-band h2 { color: var(--white); }
.globe-band .lead { color: rgba(255, 255, 255, 0.82); }

.globe-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.globe-arc {
  position: absolute;
  left: 4%; right: 4%; top: -84px;
  width: 92%; height: 100px;
  color: rgba(211, 245, 255, 0.5);
  pointer-events: none;
  display: none;
}
.globe-sun {
  fill: var(--light-azure);
  filter: drop-shadow(0 0 6px rgba(211, 245, 255, 0.9));
}
.globe-office {
  padding: var(--space-4) var(--space-3);
}
.globe-office + .globe-office { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.globe-role {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light-azure);
  margin-bottom: var(--space-1);
}
.globe-city {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 1.05;
  color: var(--white);
  margin: 0 0 4px;
}
.globe-country {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.globe-time {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--light-azure);
  min-height: 1.4em;
}
.globe-time::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--light-azure);
  align-self: center;
  animation: globe-pulse 2.6s ease-in-out infinite;
}
.globe-time em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.globe-time[hidden] { display: none; }
@keyframes globe-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-time::before { animation: none; }
}
.globe-hand { margin-top: var(--space-3); text-align: right; }

@media (min-width: 760px) {
  .globe-grid { grid-template-columns: repeat(3, 1fr); }
  .globe-office { padding: var(--space-5) var(--space-4); }
  .globe-office + .globe-office { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.16); }
  .globe-arc { display: block; }
  .globe-grid { margin-top: calc(var(--space-5) + 68px); }
}

/* Client Results band injected into the Insights page (see build_case_studies.py) */
.cs-insights-band .cs-band-all { text-align: center; margin-top: var(--space-5); }