/* ════════════════════════════════════════════════════════════════════════
   workm8-website · site.css
   Loads after tokens.css. References its custom properties.
   ──────────────────────────────────────────────────────────────────────
   Order: reset → base → utilities → buttons/pills → chrome (nav/footer)
        → page-head + sections → homepage components → final CTA
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   RESET / BASE
   ────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth-scroll only when the user hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Skip-to-content link — visible only when focused. Rendered as the
   first child of the nav-host so keyboard users hit it on the first Tab. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  transform: translateY(-110%);
  transition: transform 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--ink-on-dark);
  outline: 2px solid var(--jtr-blue-lt);
  outline-offset: 2px;
}

/* When jumping to in-page anchors (e.g. nav → #services), leave
   room for the sticky 64px nav bar so the heading doesn't hide
   under it. */
.section[id] { scroll-margin-top: 80px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink-2);
  background: var(--surface);
}

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

a {
  color: var(--jtr-blue-dk);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--jtr-blue); }

/* Lift the brand blue used for inline links and small-text accents in
   dark mode — #1E5A8E falls below AA on a near-black canvas. The
   product UI already keeps a lighter tint (--jtr-blue-lt-2) on hand
   for exactly this purpose. The list below covers every element that
   sits on the regular page canvas (not on always-dark slabs like the
   cta-strip, testimonial-strip, footer, or lane-card backs, which keep
   their own treatments). */
:root[data-theme="dark"] a { color: var(--jtr-blue-lt-2); }
:root[data-theme="dark"] a:hover { color: var(--jtr-blue-lt); }
:root[data-theme="dark"] .nav-brand-sub,
:root[data-theme="dark"] .hero-quiet-accent,
:root[data-theme="dark"] .hero-quiet-mark-icon,
:root[data-theme="dark"] .tile-statement,
:root[data-theme="dark"] .tile-cta,
:root[data-theme="dark"] .tile-foot,
:root[data-theme="dark"] .step::before,
:root[data-theme="dark"] .pricing-card-eyebrow {
  color: var(--jtr-blue-lt-2);
}
:root[data-theme="dark"] .tile-cta:hover,
:root[data-theme="dark"] .tile-foot:hover {
  color: var(--jtr-blue-lt);
}
/* Mobile nav-link.is-active uses --jtr-blue-dk for emphasis (the dropdown
   replaces the desktop ::after underline). Lift it in dark mode the same
   way; desktop's --ink-based active link already flips correctly. */
@media (max-width: 880px) {
  :root[data-theme="dark"] .nav-link.is-active {
    color: var(--jtr-blue-lt-2);
  }
}

ul, ol { list-style: none; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ──────────────────────────────────────────────────────────────────────
   LAYOUT UTILITIES
   ────────────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow { max-width: 880px; }

.section { padding: var(--space-20) 0; }
.section-tight { padding: var(--space-12) 0; }
.section-warm { background: var(--surface-3); }
.section-warmer { background: var(--line); }
.section-cool { background: var(--jtr-blue-bg); }

.sec-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-12);
  align-items: end;
  margin-bottom: var(--space-12);
}
@media (max-width: 880px) {
  .sec-head { grid-template-columns: 1fr; gap: var(--space-6); }
}
/* Variant: heading-only section head (no companion lede in column 2). */
.sec-head--solo { grid-template-columns: 1fr; }

/* ──────────────────────────────────────────────────────────────────────
   BUTTONS
   ────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
  white-space: nowrap;
  text-decoration: none;
}
.btn-sm  { padding: 10px 16px; font-size: 13px; }
.btn-lg  { padding: 14px 24px; font-size: 15px; }

/* Primary button contrast: white on --jtr-blue (#2E75B6) is 4.86:1,
   above WCAG AA 4.5:1 but Lighthouse flagged it. Stepping the resting
   state down to --jtr-blue-dk (#1E5A8E) gives 7.3:1 (passes AAA) and
   keeps brand blue identity. Hover deepens further to jtr-blue-darker. */
.btn-primary {
  background: var(--jtr-blue-dk);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover { background: var(--jtr-blue-darker); color: var(--ink-on-dark); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-secondary:hover { border-color: var(--ink-3); color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }

.btn-on-dark {
  background: var(--ink-on-dark);
  color: var(--surface-dark);
}
.btn-on-dark:hover { background: rgba(255, 255, 255, 0.92); color: var(--surface-dark); }

/* In dark mode the surrounding canvas is also dark, so the always-dark
   cta-strip slab no longer pops against it. A pure-white pill becomes
   a free-floating bright spot rather than reading as "primary on dark
   slab". Step the button down to brand blue so it stays the primary
   action without overheating against the dark canvas. */
:root[data-theme="dark"] .btn-on-dark {
  background: var(--jtr-blue-dk);
  color: var(--ink-on-dark);
}
:root[data-theme="dark"] .btn-on-dark:hover {
  background: var(--jtr-blue-darker);
  color: var(--ink-on-dark);
}

.btn-on-dark-secondary {
  background: transparent;
  color: var(--ink-on-dark);
  border-color: rgba(255,255,255,0.25);
}
.btn-on-dark-secondary:hover { border-color: rgba(255,255,255,0.5); color: var(--ink-on-dark); }

/* Arrow glyph next to button text */
.btn .arrow { width: 14px; height: 14px; }

/* ──────────────────────────────────────────────────────────────────────
   PILLS / BADGES
   ────────────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jtr-blue);
}
.pill-gold {
  background: var(--gold-bg);
  color: var(--gold);
  border-color: rgba(180, 83, 9, 0.18);
}
.pill-gold .pill-dot { background: var(--gold); }
.pill-neutral { background: var(--surface-2); color: var(--ink-2); }
.pill-emerald { background: var(--emerald-bg); color: var(--emerald-dk); border-color: rgba(5, 150, 105, 0.18); }

/* Pills in dark mode: the tinted backgrounds become translucent against
   the dark canvas, so the deep status colours fall out of contrast.
   Lift the foreground to the lighter mid-tone of each hue. */
:root[data-theme="dark"] .pill-gold     { color: var(--gold); border-color: var(--gold-border); }
:root[data-theme="dark"] .pill-emerald  { color: var(--emerald); border-color: var(--emerald-border); }

/* ──────────────────────────────────────────────────────────────────────
   NAV (rendered by chrome.js)
   ────────────────────────────────────────────────────────────────────── */

/* The nav is rendered into <div id="nav-host"></div> by chrome.js.
   `display: contents` removes the wrapper from the layout tree so
   the .nav can stick to the viewport instead of being constrained
   by the wrapper's containing block. */
#nav-host { display: contents; }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .nav {
  background: rgba(11, 18, 32, 0.85);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-brand:hover { color: var(--ink); }
.nav-brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.nav-brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.nav-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
}
.nav-brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--jtr-blue-dk);
  letter-spacing: 0.18em;
  line-height: 1;
  margin-top: 3px;
  /* Compensate for trailing letter-spacing so the visible text
     sits centred under "WorkM8" rather than slightly left. */
  padding-left: 0.18em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-grow: 1;
  justify-content: flex-end;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav-link {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 0;
  position: relative;
  text-decoration: none;
  transition: color 120ms;
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--jtr-blue);
  border-radius: 1px;
}

.nav-cta { display: inline-flex; gap: var(--space-2); flex-shrink: 0; }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  position: relative;
  background: transparent;
  margin-left: auto;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 180ms, opacity 180ms;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 24px; }
.nav.is-open .nav-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-inner { height: 60px; }
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute;
    top: 60px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--space-6);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform 180ms, opacity 180ms, visibility 180ms;
    box-shadow: var(--shadow);
  }
  .nav.is-open .nav-menu { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-link:last-child { border-bottom: 0; }
  .nav-link.is-active::after { display: none; }
  .nav-link.is-active { color: var(--jtr-blue-dk); font-weight: 600; }
  .nav-cta { flex-direction: column; gap: var(--space-2); align-items: stretch; padding-top: var(--space-2); }
  .nav-cta .btn { width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────
   FOOTER (rendered by chrome.js)
   ────────────────────────────────────────────────────────────────────── */

.footer {
  background: var(--surface-dark);
  color: var(--ink-4);
  padding: var(--space-16) 0 var(--space-8);
}
.footer .container { padding: 0 var(--space-6); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8); }
  .footer-brand-col { grid-column: 1 / -1; margin-bottom: var(--space-6); }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.footer-brand-mark { width: 36px; height: 36px; border-radius: 8px; }
.footer-brand-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-on-dark);
  letter-spacing: -0.01em;
  line-height: 1;
}
.footer-brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: var(--jtr-blue-lt);
  letter-spacing: 0.18em;
  line-height: 1;
  margin-top: 3px;
  /* Mirror nav: compensate for trailing letter-spacing. */
  padding-left: 0.18em;
}
.footer-tag {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-4);
  max-width: 36ch;
  margin-bottom: var(--space-4);
}

.footer-regions {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-regions li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-4);
}
.footer-region-flag { font-size: 14px; }
.footer-region-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--surface-2);
  margin-left: auto;
}

.footer-col h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-allcaps-sm);
  color: var(--ink-on-dark);
  margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: var(--ink-4);
  font-size: 13.5px;
  transition: color 120ms;
}
.footer-col a:hover { color: var(--ink-on-dark); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px;
  color: var(--ink-4);
}
.footer-bottom-domain {
  font-family: var(--font-mono);
  font-size: 12px;
}

.footer-legal {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: 12px;
  color: var(--ink-4);
}
.footer-legal a { color: var(--ink-4); }
.footer-legal a:hover { color: var(--ink-on-dark); }
.footer-legal span { color: var(--ink-3); }

/* ──────────────────────────────────────────────────────────────────────
   PAGE HEAD (used on inner pages — not the homepage)
   ────────────────────────────────────────────────────────────────────── */

.page-head {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.crumbs {
  display: flex;
  gap: var(--space-2);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-bottom: var(--space-4);
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.page-head-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-12);
  align-items: end;
}
@media (max-width: 880px) {
  .page-head-inner { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ──────────────────────────────────────────────────────────────────────
   HOMEPAGE — HERO (quiet-authority variant)
   ────────────────────────────────────────────────────────────────────── */

.hero-quiet {
  padding: clamp(80px, 10vw, 140px) 0 var(--space-16);
  background: var(--surface);
}
.hero-quiet-lede { max-width: 52ch; }
.hero-quiet-rule { height: 1px; background: var(--line); }
.hero-quiet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-8);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-quiet-meta-sep { color: var(--ink-4); }

.hero-quiet-h {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 112px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 var(--space-12);
  text-wrap: balance;
}
.hero-quiet-accent { color: var(--jtr-blue-dk); }

.hero-quiet-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: end;
}
@media (max-width: 720px) {
  .hero-quiet-foot { grid-template-columns: 1fr; gap: var(--space-5); }
}
.hero-quiet-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.hero-quiet-marks {
  margin-top: clamp(64px, 8vw, 120px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 880px) {
  .hero-quiet-marks { grid-template-columns: 1fr 1fr; }
}
.hero-quiet-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.hero-quiet-mark-icon {
  width: 20px;
  height: 20px;
  color: var(--jtr-blue-dk);
  flex-shrink: 0;
}

/* Two-column hero: copy on the left, lego animation on the right. */
.hero-quiet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
}
.hero-quiet-content { min-width: 0; }
.hero-quiet-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
@media (max-width: 880px) {
  .hero-quiet-grid { grid-template-columns: 1fr; }
  .hero-quiet-visual { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   HOMEPAGE — HERO LEGO ANIMATION (3D pick-and-place brick configurations)
   ────────────────────────────────────────────────────────────────────── */

.lego-stage {
  --u: 38px;
  --brick-w: calc(var(--u) * 2);
  --brick-d: calc(var(--u) * 2);
  --brick-h: var(--u);
  --stud-r: calc(var(--u) * 0.3);
  --stud-h: calc(var(--u) * 0.2);

  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  background: transparent;
  display: grid;
  place-items: center;
  perspective: 2000px;
  perspective-origin: 50% 42%;
}

.lego-scene {
  width: 0;
  height: 0;
  position: relative;
  transform-style: preserve-3d;
  animation: lego-spin 32s linear infinite;
}

@keyframes lego-spin {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateX(-22deg) rotateY(360deg); }
}

.lego-brick {
  position: absolute;
  width: var(--brick-w);
  height: var(--brick-h);
  left: calc(var(--brick-w) / -2);
  top: calc(var(--brick-h) / -2);
  transform-style: preserve-3d;
}

.lego-face {
  position: absolute;
  background: var(--c);
  box-shadow: inset 0 0 22px rgba(0,0,0,0.16);
}
.lego-face.front,
.lego-face.back {
  width: var(--brick-w);
  height: var(--brick-h);
  left: 0; top: 0;
}
.lego-face.front { transform: translateZ(calc(var(--brick-d) /  2)); }
.lego-face.back  { transform: translateZ(calc(var(--brick-d) / -2)) rotateY(180deg); background: var(--c-dark); }

.lego-face.left,
.lego-face.right {
  width: var(--brick-d);
  height: var(--brick-h);
  left: calc((var(--brick-w) - var(--brick-d)) / 2);
  top: 0;
}
.lego-face.left  { transform: translateX(calc(var(--brick-w) / -2)) rotateY(-90deg); background: var(--c-dark); }
.lego-face.right { transform: translateX(calc(var(--brick-w) /  2)) rotateY( 90deg); }

.lego-face.top,
.lego-face.bottom {
  width: var(--brick-w);
  height: var(--brick-d);
  left: 0;
  top: calc((var(--brick-h) - var(--brick-d)) / 2);
}
.lego-face.top    { transform: translateY(calc(var(--brick-h) / -2)) rotateX( 90deg); background: var(--c-light); }
.lego-face.bottom { transform: translateY(calc(var(--brick-h) /  2)) rotateX(-90deg); background: var(--c-darker); }

.lego-stud {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate3d(
    calc(var(--x) * var(--u)),
    calc(var(--brick-h) / -2),
    calc(var(--z) * var(--u))
  );
}
.lego-stud .cap {
  position: absolute;
  width: calc(var(--stud-r) * 2);
  height: calc(var(--stud-r) * 2);
  left: calc(var(--stud-r) * -1);
  top: calc(var(--stud-r) * -1);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-hi) 0%, var(--c-light) 38%, var(--c) 78%, var(--c-dark) 100%);
  transform: translateY(calc(var(--stud-h) * -1)) rotateX(90deg);
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}
.lego-stud .wall {
  position: absolute;
  left: 0; top: 0;
  transform-style: preserve-3d;
}
.lego-stud .wall .slice {
  position: absolute;
  top: calc(var(--stud-h) * -1);
  height: var(--stud-h);
}

@media (prefers-reduced-motion: reduce) {
  .lego-scene { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   AUTOMATION — orchestration animation (extends the lego primitives)
   ──────────────────────────────────────────────────────────────────────
   Embedded right-column animation on automation.html showing 5 bricks
   re-arranging between orchestration patterns (Pipeline / Fan-out /
   Fan-in / Loop / Branch) with glowing wires + pulses between them.
   Reuses .lego-stage / .lego-scene / .lego-brick / .lego-face /
   .lego-stud machinery from above; adds dark stage backdrop, halo
   flash, wires, pulses, and a small HUD. Driven by
   automation-orchestration.js. */

.orchestration-stage {
  --u: 28px; /* tighter than the home-page hero (38) — bricks need to
                fit five spread across a single column */
  --brick-w: calc(var(--u) * 2);
  --brick-d: calc(var(--u) * 2);
  --brick-h: var(--u);
  --stud-r: calc(var(--u) * 0.3);
  --stud-h: calc(var(--u) * 0.2);

  --wire-c: #4a90d9;
  --wire-glow: rgba(74, 144, 217, 0.55);

  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: transparent;
  display: grid;
  place-items: center;
  perspective: 2400px;
  perspective-origin: 50% 45%;
}

.orchestration-stage .lego-scene {
  animation: lego-spin 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .orchestration-stage .lego-scene {
    animation: none;
    transform: rotateX(-22deg) rotateY(-25deg);
  }
}

/* Active-brick halo: a 2D plane rendered inside the brick. Animating
   `filter` on .lego-brick directly would force flat presentation
   (filter forces transform-style: flat), collapsing the 3D cuboid for
   the duration of the animation. The halo isolates the flash to its
   own plane so the brick stays a proper cuboid. */
.lego-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--brick-w) * 1.9);
  height: calc(var(--brick-w) * 1.9);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(74,144,217,0.65) 0%,
    rgba(74,144,217,0.30) 35%,
    rgba(74,144,217,0)    70%);
  transform: translate(-50%, -50%) rotateX(90deg) scale(0.7);
  opacity: 0;
  pointer-events: none;
}
.lego-brick.is-active .lego-halo { animation: lego-halo-flash 0.7s ease-out; }
@keyframes lego-halo-flash {
  0%   { opacity: 0;    transform: translate(-50%, -50%) rotateX(90deg) scale(0.7); }
  30%  { opacity: 0.95; transform: translate(-50%, -50%) rotateX(90deg) scale(1.05); }
  100% { opacity: 0;    transform: translate(-50%, -50%) rotateX(90deg) scale(1.4); }
}

/* Wires + pulses */
.orchestration-wire {
  position: absolute;
  left: 0; top: 0;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--wire-glow) 12%,
    var(--wire-c)    50%,
    var(--wire-glow) 88%,
    transparent      100%);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  box-shadow: 0 0 8px var(--wire-glow);
}
.orchestration-wire.is-shown { opacity: 0.9; }

.orchestration-pulse {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #cfe1f6 35%, var(--wire-c) 70%, transparent 100%);
  box-shadow: 0 0 10px #fff, 0 0 22px var(--wire-c);
  pointer-events: none;
  opacity: 0;
}

/* Two-column layout used by the "How we run it" + viability sections.
   Prose left, supporting visual / CTA right. Stacks below 880px. */
.managed-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 880px) {
  .managed-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

/* Calculator CTA card in the right column of the viability section. */
.viability-cta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.viability-cta h3 {
  margin: 0;
}
.viability-cta p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.viability-cta .btn {
  margin-top: var(--space-3);
}

/* HUD beneath the orchestration stage — pattern title + description */
.orchestration-hud {
  margin-top: var(--space-5);
  text-align: center;
}
.orchestration-hud-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0;
}
.orchestration-hud-description {
  margin-top: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  /* Reserve space for two lines so the right column's height stays
     stable as patterns cycle. Some descriptions wrap to two lines
     ("One orchestrator dispatches work to many workers in parallel.")
     and some don't ("Cyclic flow, output feeds back into input."),
     which was nudging the centred left column up and down. */
  min-height: 3em;
}


/* ──────────────────────────────────────────────────────────────────────
   HOMEPAGE — SERVICES PREVIEW
   ────────────────────────────────────────────────────────────────────── */

/* Asymmetric grid: lead service (StartUp) spans both columns, the four
   secondary services fill a 2×2 below. On narrow viewports everything
   collapses to a single column. The first-child trick keeps the markup
   a flat 5-tile sequence. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.tile-grid > .tile:first-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.tile:hover {
  border-color: var(--ink-4);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
/* Lead tile: two-column layout at desktop. Left column is the pitch
   (heading + statement). Right column stacks the official Gold Partner
   badge at the top and the price + CTA at the bottom — flex column
   with space-between pushes them apart so the badge anchors the
   credentials and the CTA stays in its conventional bottom-right spot. */
.tile-grid > .tile:first-child {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-10);
  align-items: stretch;
  padding: var(--space-10) var(--space-8);
}
.tile-grid > .tile:first-child .tile-lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
.tile-grid > .tile:first-child .h-card { font-size: 28px; line-height: 1.15; }
.tile-grid > .tile:first-child .tile-statement { font-size: 16px; max-width: 52ch; }
.tile-grid > .tile:first-child .tile-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-width: 260px;
}
.tile-grid > .tile:first-child .tile-bottom { width: 100%; margin-top: 0; }

.tile-badge { display: inline-block; line-height: 0; align-self: flex-end; }
.tile-badge:hover img { opacity: 0.85; }
.tile-badge img {
  display: block;
  height: clamp(64px, 6vw, 88px);
  width: auto;
  transition: opacity 120ms ease;
}

@media (max-width: 880px) {
  .tile-grid > .tile:first-child {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .tile-grid > .tile:first-child .tile-aside {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    gap: var(--space-4);
  }
  .tile-grid > .tile:first-child .tile-badge { align-self: center; }
  .tile-grid > .tile:first-child .tile-bottom { flex: 1 1 220px; }
}
.tile h3 { color: var(--ink); }
.tile p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.tile-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jtr-blue-dk);
}
.tile-foot:hover { color: var(--jtr-blue); }

/* New tile pattern (statement + price + CTA): being trialled on
   the ServiceM8 StartUp tile. Once we settle the pattern we'll
   roll it out to the other four. */
.tile-statement {
  font-size: 16px;
  line-height: 1.55;
  color: var(--jtr-blue-dk);
  font-weight: 500;
  margin: 0;
  text-wrap: pretty;
}
.tile-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
}
.tile-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.tile-price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}
.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jtr-blue-dk);
  align-self: flex-start;
}
.tile-cta:hover { color: var(--jtr-blue); }

/* ──────────────────────────────────────────────────────────────────────
   HOMEPAGE — INDUSTRIES (compact 2×2 lane cards)
   ────────────────────────────────────────────────────────────────────── */

.lane-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 720px) {
  .lane-grid { grid-template-columns: 1fr; }
}

/* Outer card = perspective scene; no visible styling of its own.
   The two faces inside carry the bg/border/padding/etc. */
.lane-card-simple {
  perspective: 1200px;
  position: relative;
}

/* The flipper holds both faces in the same grid cell; the cell
   sizes to whichever face is taller (so all four cards line up
   to the tallest content). transform-style: preserve-3d makes
   children render in 3D space. */
.lane-card-flipper {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .lane-card-simple:hover .lane-card-flipper {
    transform: rotateY(180deg);
  }
}
/* Touch + keyboard fallback — chrome.js makes cards focusable and
   adds click + Enter/Space handlers that toggle .is-flipped. Keyboard
   users on hover-capable devices also reveal the back via :focus-visible. */
.lane-card-simple.is-flipped .lane-card-flipper,
.lane-card-simple:focus-visible .lane-card-flipper {
  transform: rotateY(180deg);
}
.lane-card-simple:focus-visible {
  outline: 2px solid var(--jtr-blue);
  outline-offset: 4px;
  border-radius: var(--radius-xl);
}

/* Both faces stack in cell (1, 1). backface-visibility: hidden
   ensures only the face currently pointing at us renders. */
.lane-card-face {
  grid-column: 1;
  grid-row: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lane-card-front {
  background: var(--surface);
  border: 1px solid var(--line);
}

.lane-card-back {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  transform: rotateY(180deg);
  justify-content: center;
}

.lane-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.lane-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lane-card-bullets li {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.lane-card-bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jtr-blue-dk);
  margin-top: 9px;
}

/* Back face — "what we wire up" facts */
.lane-card-back-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--jtr-blue-lt);
  margin: 0 0 var(--space-2);
}
.lane-card-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.lane-card-facts > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.lane-card-facts > div:first-child { border-top: 0; padding-top: 0; }
.lane-card-facts dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.lane-card-facts dd {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-on-dark);
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   HOMEPAGE — INDUSTRIES (legacy "pick your lane" tab styles)
   Kept for now until we're sure the simple grid is final; can be
   removed in a future cleanup pass.
   ────────────────────────────────────────────────────────────────────── */

.lane-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-8);
}
.lane-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.lane-tab:hover { border-color: var(--ink-4); color: var(--ink); }
.lane-tab.is-active {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  border-color: var(--ink);
}
.lane-tab svg { width: 14px; height: 14px; }

.lane-pane {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 980px) {
  .lane-pane { grid-template-columns: 1fr; gap: var(--space-6); }
}
.lane-pain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: var(--amber-bg);
  border: 1px solid rgba(180,83,9,0.18);
  color: var(--amber-dk);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}
.lane-pain svg { width: 14px; height: 14px; }
.lane-headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.lane-lede { margin-bottom: var(--space-6); }

.lane-card {
  background: var(--surface-app);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  box-shadow: var(--shadow-lg);
}
.lane-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-4) var(--space-5) var(--space-3);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.lane-card-head svg { width: 18px; height: 18px; color: var(--jtr-blue-dk); }
.lane-facts { background: var(--surface); border-radius: var(--radius-lg); }
.lane-fact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.lane-fact:last-child { border-bottom: 0; }
.lane-fact-k { font-size: 13.5px; color: var(--ink-2); }
.lane-fact-v {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────────────────────────────────
   HOMEPAGE — HOW IT WORKS (preview)
   ────────────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  counter-reset: step;
}
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  position: relative;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--jtr-blue-dk);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-3);
}
.step h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.step p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ──────────────────────────────────────────────────────────────────────
   TESTIMONIAL STRIP (dark band, two-column, video right)
   ────────────────────────────────────────────────────────────────────── */

.testimonial-strip {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  padding: clamp(96px, 12vw, 160px) 0;
}
.testimonial-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 880px) {
  .testimonial-strip-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.testimonial-strip-text h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  margin: var(--space-3) 0 var(--space-4);
  text-wrap: balance;
}
.testimonial-strip-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-4);
  max-width: 50ch;
}
.eyebrow.eyebrow-on-dark {
  color: var(--jtr-blue-lt);
}

/* Responsive 16:9 video container, used inside the strip. */
.testimonial-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #000;
}
.testimonial-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Click-to-play poster: <img> + play button. On click chrome.js
   swaps the inner HTML for the iframe with autoplay. */
.video-poster {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: #000;
  display: block;
}
.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.video-poster:hover img {
  transform: scale(1.02);
}
.video-poster-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 200ms ease, background 200ms;
}
.video-poster:hover .video-poster-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: #fff;
}
.video-poster-play svg {
  width: 36px;
  height: 36px;
  /* Theme-stable dark triangle: the circle stays white in both themes,
     so the icon must too. --ink flips to near-white in dark mode and
     would render the triangle invisible against the white circle. */
  color: var(--surface-dark);
  margin-left: 4px; /* visually centre the play triangle */
}

/* Optional dark scrim over the poster — used when the source thumbnail
   is bright/washed-out and needs softening against a dark band. Opt in
   by adding .testimonial-video--scrim to the wrapper. The overlay sits
   between the image and the play button (z-index 1 vs 2) and is
   removed automatically when chrome.js swaps in the iframe on click. */
.testimonial-video--scrim .video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.40);
  transition: background 200ms ease;
  pointer-events: none;
  z-index: 1;
}
.testimonial-video--scrim .video-poster:hover::after {
  background: rgba(15, 23, 42, 0.20);
}
.testimonial-video--scrim .video-poster-play {
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────────────────
   PHOTO MOMENT BREAK (full-bleed banner)
   ────────────────────────────────────────────────────────────────────── */

.photo-break {
  width: 100%;
  height: clamp(280px, 35vw, 480px);
  background: var(--surface-dark);
  overflow: hidden;
}
.photo-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────
   ABOUT — narrative prose, team cards, principles
   ────────────────────────────────────────────────────────────────────── */

/* About — Origin section with photo bg.
   Photo (Māori wood carving) sits behind a high-opacity tint so the
   narrative prose remains the focus and stays legible at body sizes.
   The tint matches --surface-2 (the same warm off-white the page-head
   uses) so the section blends with the editorial rhythm of the page. */
.origin-bg {
  background-color: var(--surface-2);
  background-image:
    linear-gradient(rgba(248, 250, 252, 0.80), rgba(248, 250, 252, 0.90)),
    url("images/photos/wood-carving-maori.webp?v=1");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Dark theme: mirror the scrim so the carving stays as faint atmospheric
   texture behind the prose, but the band reads as a dark slab against
   the page canvas. The light scrim above would render the section as a
   bright panel under dark mode, making light body text invisible. */
:root[data-theme="dark"] .origin-bg {
  background-image:
    linear-gradient(rgba(11, 18, 32, 0.85), rgba(11, 18, 32, 0.92)),
    url("images/photos/wood-carving-maori.webp?v=1");
}

/* Editorial column for narrative copy (origin story etc.). Narrow
   measure (~68ch) for comfortable reading; scales down on mobile. */
.prose {
  max-width: 68ch;
  display: grid;
  gap: var(--space-5);
}
.prose p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Team — 3-up cards on desktop, single-column on mobile. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.team-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--jtr-blue-bg);
  color: var(--jtr-blue-dk);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.team-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.team-role {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin: 0;
}
.team-bio {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* Principles — 2×2 text blocks, no card chrome (lighter than .step). */
.principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-12);
}
@media (max-width: 700px) { .principles { grid-template-columns: 1fr; gap: var(--space-6); } }

.principle h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.principle p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}


/* ──────────────────────────────────────────────────────────────────────
   COACHING — curriculum (numbered single-column stage list)
   ──────────────────────────────────────────────────────────────────────
   Used on coaching.html for the four-stage StartUp Coaching curriculum.
   The foundations are taught in order during the 90-minute session,
   so the markup is an ordered list and the numerals are generated by
   CSS counters (mirrors the .steps counter pattern on the home page).
   Single column, big "01"–"04" numeral on the left, name + body on the
   right. Hairline rules between stages keep them visually distinct
   without adding card chrome. Mobile stacks the numeral above the body. */

.curriculum {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: curriculum-step;
}

.curriculum-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8);
  border-top: 1px solid var(--line);
  counter-increment: curriculum-step;
}
.curriculum-step:last-child {
  border-bottom: 1px solid var(--line);
}
.curriculum-step::before {
  content: counter(curriculum-step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tighter);
  color: var(--jtr-blue);
  font-variant-numeric: tabular-nums;
  min-width: 1.8ch;
}

.curriculum-body h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.curriculum-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

@media (max-width: 700px) {
  .curriculum-step {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-6);
  }
  .curriculum-step::before {
    font-size: 36px;
  }
}


/* ──────────────────────────────────────────────────────────────────────
   AUTOMATION — case-card flip grid (use-case proof of build)
   ──────────────────────────────────────────────────────────────────────
   Used on automation.html for the "in the wild" section: 2x2 (mobile
   1-up) grid of real builds. Each card has two faces:

     Front (light): headline, two-logo strip (ServiceM8 + key tool),
                    imperative-voice value summary.
     Back (dark):   industry/region/platform meta row + the longer
                    how-it-works paragraph.

   Mechanism mirrors .lane-card-flipper on the home page (perspective
   wrapper, preserve-3d transform, hover triggers rotateY(180deg)).
   For touch devices a small chrome.js handler toggles a .is-flipped
   class on tap so the back content stays accessible without hover. */

.cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr; /* equalise row heights so all four cards line up */
  gap: var(--space-6);
}
@media (max-width: 720px) { .cases { grid-template-columns: 1fr; } }

.case {
  perspective: 1200px;
  position: relative;
  cursor: pointer;
  height: 100%; /* fill the equalised grid cell */
}

.case-flipper {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%; /* fill .case so both faces share the same height */
}
@media (hover: hover) {
  .case:hover .case-flipper {
    transform: rotateY(180deg);
  }
}
.case.is-flipped .case-flipper,
.case:focus-visible .case-flipper {
  transform: rotateY(180deg);
}
.case:focus-visible {
  outline: 2px solid var(--jtr-blue);
  outline-offset: 4px;
  border-radius: var(--radius-xl);
}

.case-face {
  grid-column: 1;
  grid-row: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.case-front {
  background: var(--surface);
  border: 1px solid var(--line);
}
.case-back {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  transform: rotateY(180deg);
}

/* Front face content */
.case-front h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.case-logos {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
  flex-wrap: wrap;
}
.case-logos img {
  height: 28px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

.case-value {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Back face content */
.case-back .case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-allcaps-sm);
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0;
}
.case-back .case-meta-platform {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-on-dark);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.case-back p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-on-dark-2);
  margin: 0;
}


/* ──────────────────────────────────────────────────────────────────────
   ADDONS — directory grid + per-add-on sub-page support
   ──────────────────────────────────────────────────────────────────────
   Used on addons.html (directory) and the three add-on sub-pages
   (job-time-entry.html, photo-gps.html, zip-attachments.html). The
   .addon-grid holds 3-up cards at desktop, 2-up tablet, 1-up mobile.
   Each .addon-card carries the icon, name, summary, status badge,
   and one or two action buttons. */

.addon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 980px) { .addon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .addon-grid { grid-template-columns: 1fr; } }

.addon-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-xl);
}

.addon-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: block;
  object-fit: contain;
}

.addon-card-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.addon-card-status--active   { background: var(--emerald-bg);  color: var(--emerald-dk); }
.addon-card-status--coming   { background: var(--amber-bg);    color: var(--amber-dk); }
.addon-card-status--beta     { background: var(--jtr-blue-bg); color: var(--jtr-blue-dk); }
.addon-card-status--external { background: var(--jtr-blue-bg); color: var(--jtr-blue-dk); }

/* Same legibility lift as .pill-* when on dark canvas. */
:root[data-theme="dark"] .addon-card-status--active   { color: var(--emerald); }
:root[data-theme="dark"] .addon-card-status--coming   { color: var(--gold); }
:root[data-theme="dark"] .addon-card-status--beta,
:root[data-theme="dark"] .addon-card-status--external { color: var(--jtr-blue-lt-2); }

.addon-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}

.addon-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  flex: 1; /* push the actions row to the bottom of equal-height cards */
}

.addon-card-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.addon-card[aria-disabled="true"] {
  opacity: 0.6;
}

/* Per-add-on sub-page hero: bigger icon next to the headline. */
.addon-page-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.addon-page-head-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* Footer-of-page legal/support strip on each add-on sub-page. Compact;
   sits as the last section above the global site footer. */
.addon-meta {
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: 1fr 1fr;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
@media (max-width: 720px) { .addon-meta { grid-template-columns: 1fr; } }
.addon-meta dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  margin-bottom: 2px;
}
.addon-meta dd {
  margin: 0;
}
.addon-meta dd a { color: var(--jtr-blue-dk); }


/* ──────────────────────────────────────────────────────────────────────
   FORMS — pricing pair, form-store list
   ────────────────────────────────────────────────────────────────────── */

/* Two-up pricing cards — used on Forms (scoping consult / build pair).
   Designed to read as a numbered sequence rather than a comparison. */
.pricing-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 720px) { .pricing-pair { grid-template-columns: 1fr; } }

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-card-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--ls-allcaps-sm);
  text-transform: uppercase;
  color: var(--jtr-blue-dk);
}
.pricing-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.pricing-card-price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
/* Optional row that places a CTA (e.g. "Book now") to the right of the
   price + meta. Wraps to a new line on narrow widths. */
.pricing-card-priceline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.pricing-card-priceline .btn { flex-shrink: 0; }
.pricing-card-meta {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: var(--space-1);
}

/* Status pill used in place of a "Book now" button when the offering
   is gated (e.g. "By invitation only" on Ongoing Coaching, since it
   requires StartUp Coaching first). Sits in the same flex slot as
   .btn but reads as a label rather than an action. */
.pricing-card-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-3);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.pricing-card-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* Process diagram — small SVG centred above the .steps grid in the
   Five-phases section. Acts as a visual TL;DR of the methodology. */
.process-diagram {
  margin: 0 0 var(--space-12);
  display: flex;
  justify-content: center;
}
.process-diagram img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}

/* In-prose figure — image woven into a .prose narrative as a feature
   break (e.g. the form-output photo inside the value-education
   section). Fills the prose column width with a soft border + shadow
   so the image reads as a sample, not a screenshot. */
.prose-figure {
  margin: var(--space-3) 0;
}
.prose-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.prose-figure figcaption {
  margin-top: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

/* Form gallery — 4 portrait sample images in a row at desktop, paired
   captions underneath. Subtle border + shadow so each image reads as
   a "displayed artefact" (catalogue piece, not a screenshot). */
.form-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .form-gallery { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 480px) { .form-gallery { grid-template-columns: 1fr; } }

.form-gallery-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
/* Image is wrapped in a button so keyboard users can activate it.
   Reset the button chrome and add a focus ring on the image inside. */
.form-gallery-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
  border-radius: var(--radius);
  transition: transform 200ms ease;
}
.form-gallery-trigger:hover { transform: translateY(-2px); }
.form-gallery-trigger:focus-visible {
  outline: 2px solid var(--jtr-blue);
  outline-offset: 4px;
}
.form-gallery-trigger img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: box-shadow 200ms ease;
}
.form-gallery-trigger:hover img { box-shadow: var(--shadow-lg); }
.form-gallery-caption {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  text-align: center;
  letter-spacing: -0.005em;
}


/* ──────────────────────────────────────────────────────────────────────
   LIGHTBOX (form-sample viewer)
   Native <dialog> + JS in forms.html. Click thumbnail → open. Click
   image inside → toggle fit-to-viewport vs natural size. Backdrop or
   × closes. ESC closes (browser default for <dialog>).
   ────────────────────────────────────────────────────────────────────── */

.lightbox::backdrop {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox[open] {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
}
/* Stage wraps the image so a too-large (zoomed) image still scrolls. */
.lightbox-stage {
  min-width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}
.lightbox-image {
  display: block;
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  cursor: zoom-in;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  user-select: none;
}
/* Zoomed: render at natural pixel size, dialog scrolls. */
.lightbox-image.is-zoomed {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
  border-radius: 0;
}
.lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease, background 120ms ease;
}
.lightbox-close:hover {
  background: #fff;
  transform: scale(1.05);
}
.lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-caption {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 48px);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, 0.6);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: center;
  pointer-events: none;
}

/* Form-store list — clean unstyled list with subtle bullet, two columns
   on desktop so it doesn't run on too long. */
.store-list {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-8);
  max-width: 68ch;
}
@media (max-width: 720px) { .store-list { grid-template-columns: 1fr; } }
.store-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.store-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jtr-blue);
}


/* ──────────────────────────────────────────────────────────────────────
   PRICING — funnel (numbered, expandable stage cards)
   Used on /pricing.html for the ServiceM8 StartUp 4-stage funnel.
   Each step is a native <details> card. Summary (always visible):
   number + name + price + CTA / prereq + chevron. Detail (collapsed
   by default, except Stage 01): description + bullets + meta footnote.
   ────────────────────────────────────────────────────────────────────── */

.funnel {
  display: grid;
  gap: var(--space-5);
}

.funnel-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.funnel-step[open] {
  background: var(--surface);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}

/* Always-visible summary row: icon-mark · headline-block · chevron.
   Dark-blue ground (matches the JTR sign-in screen palette) gives the
   funnel header rows a strong, branded presence. The detail panel
   below stays light surface for body-copy readability. */
.funnel-step-summary {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6) var(--space-8);
  cursor: pointer;
  list-style: none;
  background: var(--jtr-blue-darker);
  color: var(--ink-on-dark);
  transition: background 200ms ease;
}
.funnel-step-summary::-webkit-details-marker { display: none; }
.funnel-step-summary::marker { content: ""; }
.funnel-step-summary:hover { background: var(--jtr-blue-deepest); }
.funnel-step-summary:focus-visible {
  outline: 2px solid var(--ink-on-dark);
  outline-offset: -2px;
}

@media (max-width: 720px) {
  .funnel-step-summary {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    align-items: start;
  }
}

/* Left column of the summary row — themed icon + small "Stage 0X"
   label underneath. Replaces the previous big "01–04" display number;
   each stage now reads visually at a glance, with the order preserved
   in the label. */
.funnel-step-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.funnel-step-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: var(--frost-surface);
  color: var(--ink-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.funnel-step-icon svg { width: 40px; height: 40px; }

.funnel-step-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-on-dark-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .funnel-step-icon { width: 56px; height: 56px; }
  .funnel-step-icon svg { width: 28px; height: 28px; }
}

/* Headline block — middle column of the summary row. Holds the stage
   name + the price/CTA priceline. */
.funnel-step-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.funnel-step-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  margin: 0;
}
@media (max-width: 720px) {
  .funnel-step-name { font-size: 22px; }
}

/* Chevron — rotates 180° on open. Muted-white on the dark summary;
   full white when [open] to signal the state change. */
.funnel-step-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--ink-on-dark-3);
  transition: transform 200ms ease, color 200ms ease;
}
.funnel-step[open] .funnel-step-toggle {
  transform: rotate(180deg);
  color: var(--ink-on-dark);
}

/* Scoped overrides — components that live elsewhere on the site keep
   their default styling, but inside the dark summary row they need to
   read on blue. */
.funnel-step-summary .pricing-card-price { color: var(--ink-on-dark); }
.funnel-step-summary .pricing-card-meta  { color: var(--ink-on-dark-3); }

/* Book Now: white pill with deep-blue text on the dark ground (matches
   the JTR sign-in screen primary action). */
.funnel-step-summary .btn-primary {
  background: var(--surface);
  color: var(--jtr-blue-darker);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18),
              0 4px 12px rgba(0, 0, 0, 0.18);
}
.funnel-step-summary .btn-primary:hover {
  background: var(--surface-2);
  color: var(--jtr-blue-darker);
}

/* Prereq pill — frosted on the dark ground. */
.funnel-step-summary .funnel-step-prereq {
  background: var(--frost-surface);
  color: var(--ink-on-dark-2);
  border-color: var(--frost-border);
}

/* Detail panel — light surface for body-copy readability after the
   dark-blue summary header. No border-top (the colour change is the
   separator). */
.funnel-step-detail {
  padding: var(--space-6) var(--space-8) var(--space-8);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .funnel-step-detail {
    padding: var(--space-4) var(--space-6) var(--space-6);
  }
}
.funnel-step-detail > p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* Bullet list of inclusions per step. Same blue-dot bullet as
   .store-list for visual consistency. */
.funnel-step-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.funnel-step-includes li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.funnel-step-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jtr-blue);
}

/* Small footnote-style line for regional pricing or prerequisites. */
.funnel-step-meta {
  font-size: 13px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  margin: 0;
}

/* Pill-style badge in place of a CTA button when the step is gated by
   a prerequisite. Visually quieter than the .btn so the eye knows
   it's not clickable. */
.funnel-step-prereq {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}


/* ──────────────────────────────────────────────────────────────────────
   DISCLOSURE LIST — collapsible items (native <details>/<summary>)
   Used on /pricing.html for the "When ServiceM8 isn't the right tool"
   section so headlines stay visible at low visual load and the
   detailed rationale opens on click. No JS — uses native browser
   disclosure semantics (focus, keyboard, screen-reader friendly).
   ────────────────────────────────────────────────────────────────────── */

.disclosure-list {
  display: grid;
  gap: var(--space-3);
}

.disclosure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background 200ms ease, border-color 200ms ease;
}
.disclosure[open] {
  background: var(--surface-2);
  border-color: var(--line-2);
}

/* Hide native disclosure marker; we render our own chevron in the
   summary so we control its style + animation. */
.disclosure-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary::marker { content: ""; }
.disclosure-summary:hover { background: var(--surface-2); }
.disclosure-summary:focus-visible {
  outline: 2px solid var(--jtr-blue);
  outline-offset: -2px;
}

.disclosure-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.disclosure-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--ink-3);
  transition: transform 200ms ease, color 200ms ease;
}
.disclosure[open] .disclosure-icon {
  transform: rotate(180deg);
  color: var(--jtr-blue-dk);
}

.disclosure-body {
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--line);
}
.disclosure-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
}


/* ──────────────────────────────────────────────────────────────────────
   LEGAL DOC — long-form legal pages (privacy, terms, EULA, etc.)
   Narrow measure (~720px) for comfortable reading; numbered clauses
   styled as flat lists with an inset hanging number; sub-clauses use
   native ol[type=a] for the (a)/(b)/(c) lettering.
   ────────────────────────────────────────────────────────────────────── */

.legal-doc {
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.legal-doc-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 var(--space-4);
}

.legal-doc p {
  margin: 0 0 var(--space-4);
}

.legal-doc h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--space-12) 0 var(--space-4);
}

.legal-doc h2:first-child {
  margin-top: var(--space-8);
}

/* Top-level clauses: flat unstyled list. Clause numbers (1.1, 1.2 …)
   are inline as the leading bold of each item. */
.legal-doc .legal-clauses {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.legal-doc .legal-clauses > li {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-6);
  position: relative;
}

.legal-doc .legal-clauses > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jtr-blue);
}

/* Sub-clauses (a)/(b)/(c) — use native lower-alpha numbering. */
.legal-doc .legal-subclauses {
  list-style: lower-alpha;
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
}

.legal-doc .legal-subclauses > li {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-2);
}

.legal-doc .legal-subclauses > li::marker {
  color: var(--ink-3);
  font-weight: 500;
}

.legal-doc strong { color: var(--ink); }

.legal-doc a { color: var(--jtr-blue-dk); }
.legal-doc a:hover { color: var(--jtr-blue); text-decoration: underline; }

.legal-doc-foot {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}


/* ──────────────────────────────────────────────────────────────────────
   CONTACT — region cards + email/post aux
   Used on /contact.html for the three-region booking dispatcher.
   ────────────────────────────────────────────────────────────────────── */

.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 980px) { .region-grid { grid-template-columns: 1fr; } }

.region-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.region-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}

.region-flag {
  font-size: 36px;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.region-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.region-city {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
}

.region-phone {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-decoration: none;
  margin-top: var(--space-3);
}
.region-phone:hover { color: var(--jtr-blue-dk); }

.region-cta {
  margin-top: auto;
  align-self: flex-start;
}


/* Email + post sub-section ────────────────────────────────────────── */

.contact-aux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
}
@media (max-width: 880px) {
  .contact-aux { grid-template-columns: 1fr; gap: var(--space-8); }
}

.contact-aux-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-email {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--jtr-blue-dk);
  text-decoration: none;
  word-break: break-all;
}
.contact-email:hover {
  color: var(--jtr-blue);
  text-decoration: underline;
}

.contact-post {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
}


/* ──────────────────────────────────────────────────────────────────────
   FINAL CTA STRIP
   ────────────────────────────────────────────────────────────────────── */

.cta-strip {
  background: var(--surface-dark);
  color: var(--ink-on-dark);
  padding: var(--space-16) 0;
}
/* Always-dark slabs (cta-strip, testimonial-strip) read as a clear band
   against a white canvas in light mode. In dark mode the canvas is also
   near-black, so the slab boundary disappears. Hairline frost borders
   restore the band shape without changing the slab's identity. */
:root[data-theme="dark"] .cta-strip,
:root[data-theme="dark"] .testimonial-strip {
  border-top: 1px solid var(--frost-border);
  border-bottom: 1px solid var(--frost-border);
}
.cta-strip-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 880px) { .cta-strip-grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.cta-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.cta-strip p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-4);
  max-width: 56ch;
}
.cta-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-self: end;
}
@media (max-width: 880px) { .cta-actions { justify-self: start; } }

/* ──────────────────────────────────────────────────────────────────────
   ARROW ICON HELPER (used inline in buttons, links)
   ────────────────────────────────────────────────────────────────────── */

.icon-arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* ──────────────────────────────────────────────────────────────────────
   THEME TOGGLE
   Sun/moon button injected into the nav by chrome.js. Hidden on pages
   that haven't opted into the theme system (those that don't set
   <html data-theme-host="marketing"> via the inline bootstrap script).
   The icon swaps based on the current resolved theme so it always
   advertises the action it'll take.
   ────────────────────────────────────────────────────────────────────── */

.theme-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
:root[data-theme-host="marketing"] .theme-toggle { display: inline-flex; }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-2); background: var(--surface-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--jtr-blue); outline-offset: 2px; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .theme-toggle-sun { display: none; }
.theme-toggle .theme-toggle-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: none; }

/* On mobile, the toggle inherits the column layout of .nav-cta and
   stretches to full width like the buttons next to it. */
@media (max-width: 880px) {
  :root[data-theme-host="marketing"] .nav-cta .theme-toggle {
    width: 100%;
    height: 40px;
    border-radius: var(--radius);
    gap: var(--space-2);
  }
  .theme-toggle::after {
    content: attr(data-mobile-label);
    font-size: 14px;
    font-weight: 500;
  }
}
@media (min-width: 881px) {
  .theme-toggle::after { display: none; }
}