/* Inter, self-hosted (SIL Open Font License, assets/fonts/OFL.txt). One
   variable file covers every weight the site uses; the latin range keeps it
   at 48 KB. Without it, visitors got Segoe UI, San Francisco, or Roboto. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: dark;
  --bg: #0b1218;
  --bg-raised: #111d26;
  --text: #eef5f6;
  --text-body: #b8c8d1;
  --text-muted: #92a7b4;
  --border: #2a3b46;
  /* Lines and outlines inside diagrams: 3:1 against the page, so connectors
     stay visible (WCAG 1.4.11); --border is for quiet dividers only. */
  --line: #536b7a;
  --accent: #81e4c1;
  --accent-bright: #81e4c1;
  --accent-soft: #19392f;
  --accent2: #f2b155;
  --inverse-bg: #0a151c;
  --inverse-text: #d8dee9;
  --inverse-text-muted: #8b93a3;
  --inverse-heading: #eef5f6;
  --text-on-accent-bright: #06231b;
  --danger: #e0776e;
  --maxw: 1160px;
  --site-maxw: 1160px;
  --hero-dot: rgba(146, 167, 180, 0.32);
  --hero-glow-a: rgba(129, 228, 193, 0.13);
  --hero-glow-b: rgba(242, 177, 85, 0.07);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8faf9;
  --bg-raised: #fff;
  --text: #142c36;
  --text-body: #425b68;
  --text-muted: #526c78;
  --border: #d3dfdf;
  --line: #78929a;
  --accent: #176b53;
  --accent-bright: #81e4c1;
  --accent-soft: #e1f3ea;
  --accent2: #7a4a0f;
  --inverse-bg: #0a151c;
  --inverse-text: #d8dee9;
  --inverse-text-muted: #8b93a3;
  --inverse-heading: #eef5f6;
  --text-on-accent-bright: #06231b;
  --danger: #b3403a;
  --hero-dot: rgba(82, 108, 120, 0.26);
  --hero-glow-a: rgba(23, 107, 83, 0.09);
  --hero-glow-b: rgba(122, 74, 15, 0.05);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font:
    16px/1.7 "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p {
  margin: 0;
}
pre {
  margin: 16px 0;
  max-width: 100%;
  overflow-x: auto;
}
h1,
h2,
h3 {
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
a {
  color: inherit;
  text-underline-offset: 4px;
}
button {
  font: inherit;
  cursor: pointer;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
summary {
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
::selection {
  background: var(--accent);
  color: var(--bg);
}
.wrap {
  max-width: var(--maxw);
  margin: auto;
  padding: 0 32px;
}
/* A .wrap inside another .wrap (sections written into a page body) must not
   add a second set of side padding and indent its content. */
.wrap .wrap {
  max-width: none;
  padding: 0;
}
.eyebrow,
.section-eyebrow {
  font:
    600 11px/1.6 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.type-eyebrow {
  font:
    600 11px/1.6 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 1em;
}
.type-word {
  color: var(--accent2);
}
.type-cursor {
  display: inline-block;
  width: 7px;
  height: 11px;
  margin-left: 1px;
  background: var(--accent2);
  vertical-align: -1px;
  animation: type-blink 0.9s steps(1) infinite;
}
@keyframes type-blink {
  50% {
    opacity: 0;
  }
}
/* Text for screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Keep screen-reader text inside its link, so it can't stretch a scrolling
   row (the toolbox) or the page sideways. */
.tool-chip,
.nav-icon {
  position: relative;
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -100px;
  background: var(--accent);
  color: var(--bg);
  padding: 12px;
  z-index: 100;
}
.skip-link:focus {
  top: 12px;
}
nav.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  gap: 24px;
}
.brand {
  color: var(--text);
  text-decoration: none;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand {
    background: linear-gradient(95deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.navlinks {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 12px;
  margin-left: auto;
}
/* Mobile menu button — hidden until the small-screen breakpoint. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars {
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before {
  top: -5px;
}
.nav-toggle-bars::after {
  top: 5px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-5px) rotate(-45deg);
}
.navlinks a {
  text-decoration: none;
}
.navlinks a:hover,
.back:hover {
  color: var(--accent);
}
/* Breadcrumb contextual navigation */
.breadcrumb-bar {
  padding: 20px 0 0;
  font-size: 13px;
}
.breadcrumb-bar .wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb-bar a,
.breadcrumb-bar .back-link,
.breadcrumb-bar .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: color 0.15s ease;
}
.breadcrumb-bar a:hover,
.breadcrumb-bar .back-link:hover,
.breadcrumb-bar .back:hover {
  color: var(--accent);
}
#themeToggle {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 21px;
  flex-shrink: 0;
}
.nav-cta {
  color: var(--accent);
}
/* Navigation dropdown */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  margin: -8px 0;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--accent);
}
.nav-arrow {
  font-size: 8px;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
  opacity: 0.7;
}
.nav-dropdown:hover .nav-arrow,
.nav-dropdown:focus-within .nav-arrow,
.nav-dropdown.is-open .nav-arrow {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 250px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
}
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  display: block;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-dropdown-item strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.nav-dropdown-item small {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.nav-dropdown-item:hover strong,
.nav-dropdown-item:focus strong {
  color: var(--accent);
}
.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}
.hero {
  padding: 86px 0 0;
  position: relative;
  overflow: hidden;
}
.hero > .wrap {
  position: relative;
  z-index: 1;
}

/* Hero background: a slow aurora glow, a hub-and-spoke network where traffic
   flows through a transit gateway and PROD periodically fails over to DR, and
   (site.js) a glow that follows the pointer. Decorative only: aria-hidden, no
   pointer events. Under reduced motion the diagram stays, static and healthy. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  width: 820px;
  height: 820px;
  right: -160px;
  top: -260px;
  /* closest-side keeps both glows fully faded inside the box, so the
     rotating box never shows an edge. */
  background:
    radial-gradient(closest-side at 40% 42%, var(--hero-glow-a), transparent),
    radial-gradient(closest-side at 68% 70%, var(--hero-glow-b), transparent);
  animation: hero-aurora 24s ease-in-out infinite alternate;
}
@keyframes hero-aurora {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-90px, 50px) scale(1.12) rotate(12deg); }
  100% { transform: translate(-30px, 110px) scale(0.94) rotate(-8deg); }
}

/* Drawn on the 1440px design grid and centred, so it lines up with the
   1160px content column at any desktop width; hidden where the layout
   reflows and the gaps it uses disappear (below 1280px the right-hand
   DR node would be clipped). */
.hub-net {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -720px;
  opacity: 0.75;
}
@media (max-width: 1279px) {
  .hub-net {
    display: none;
  }
}
/* Below 1280px the background network has nowhere to go, so the same diagram
   (same classes, same failover cycle) sits under the hero buttons instead. */
.hub-net-compact {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-top: 36px;
}
@media (min-width: 1280px) {
  .hub-net-compact {
    display: none;
  }
}
/* On phones the drawing would push the stats and case studies a full screen
   further down; the interactive architecture panel below it stays. */
@media (max-width: 640px) {
  .hub-net-compact {
    display: none;
  }
}
.hub-link {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.2;
}
.hub-joint {
  fill: var(--border);
}
.pk {
  fill: var(--accent);
}
.hub-node rect {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1;
}
.hub-node text {
  fill: var(--text-muted);
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-anchor: middle;
}
.hub-node .hub-state {
  fill: var(--accent);
  font-size: 8px;
}
.hub-node-hub rect {
  stroke: var(--accent);
}
.hub-node-hub text {
  fill: var(--accent);
}

/* The failover cycle (18s): PROD fails, its traffic stops, DR goes active
   and takes traffic, then PROD recovers and DR returns to standby. */
.hub-node-prod rect { animation: hub-prod-rect 18s infinite; }
.hub-link-prod { animation: hub-prod-link 18s infinite; }
.pk-prod { animation: hub-prod-traffic 18s infinite; }
.hub-state-ok { animation: hub-show-normal 18s infinite; }
.hub-node .hub-state-bad { fill: var(--accent2); opacity: 0; animation: hub-show-failover 18s infinite; }
.hub-node-dr rect { stroke-dasharray: 3 3; animation: hub-dr-rect 18s infinite; }
.hub-link-dr { stroke-dasharray: 3 4; animation: hub-dr-link 18s infinite; }
.pk-dr { opacity: 0; animation: hub-show-failover 18s infinite; }
.hub-node .hub-state-standby { fill: var(--text-muted); animation: hub-show-normal 18s infinite; }
.hub-state-active { opacity: 0; animation: hub-show-failover 18s infinite; }

@keyframes hub-show-normal {
  0%, 52% { opacity: 1; }
  55%, 82% { opacity: 0; }
  85%, 100% { opacity: 1; }
}
@keyframes hub-show-failover {
  0%, 52% { opacity: 0; }
  55%, 82% { opacity: 1; }
  85%, 100% { opacity: 0; }
}
@keyframes hub-prod-traffic {
  0%, 50% { opacity: 1; }
  53%, 84% { opacity: 0; }
  87%, 100% { opacity: 1; }
}
@keyframes hub-prod-rect {
  0%, 50% { stroke: var(--border); }
  53%, 82% { stroke: var(--accent2); }
  85%, 100% { stroke: var(--border); }
}
@keyframes hub-prod-link {
  0%, 50% { stroke: var(--border); stroke-dasharray: none; }
  53%, 82% { stroke: var(--accent2); stroke-dasharray: 2 5; }
  85%, 100% { stroke: var(--border); stroke-dasharray: none; }
}
@keyframes hub-dr-rect {
  0%, 52% { stroke: var(--border); stroke-dasharray: 3 3; }
  55%, 82% { stroke: var(--accent); stroke-dasharray: none; }
  85%, 100% { stroke: var(--border); stroke-dasharray: 3 3; }
}
@keyframes hub-dr-link {
  0%, 52% { stroke: var(--border); stroke-dasharray: 3 4; }
  55%, 82% { stroke: var(--accent); stroke-dasharray: none; }
  85%, 100% { stroke: var(--border); stroke-dasharray: 3 4; }
}
/* Packets move by SVG animation, which the global CSS kill switch can't stop. */
@media (prefers-reduced-motion: reduce) {
  .hub-packets {
    display: none;
  }
}

.hero-spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-glow-a), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}
.hero-spot.is-on {
  opacity: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(44px, 5vw, 66px);
  font-weight: 600;
  margin: 22px 0 24px;
  line-height: 1.06;
  letter-spacing: -0.06em;
}
.hero h1 span {
  color: var(--accent);
}
.hero .lede {
  max-width: 510px;
  font-size: 16px;
  line-height: 1.8;
}
.hero-intro {
  margin-top: 18px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  flex-shrink: 0;
  display: block;
}
.hero-intro-text {
  min-width: 0;
  line-height: 1.5;
}
.hero-name-link {
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.hero-name-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.hero-name-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  border-radius: 4px;
}
.text-link {
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
}
.text-link:hover {
  text-decoration: underline;
}
.architecture {
  position: relative;
  background:
    radial-gradient(ellipse at center, var(--hero-glow-a), transparent 70%),
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:
    auto,
    32px 32px,
    32px 32px;
  border: 1px solid var(--border);
  /* Mostly opaque so the hero's dot grid doesn't show through its own grid. */
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  border-radius: 8px;
  padding: 24px;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.arch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font:
    10px ui-monospace,
    monospace;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.trace-btn {
  font:
    600 10px ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--accent);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.trace-btn:hover {
  border-color: var(--accent);
}
.trace-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.arch-core {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 25px 16px;
  text-align: center;
  margin: 28px 36px 0;
  box-shadow: 0 0 35px var(--hero-glow-a);
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.arch-core.pulse {
  box-shadow: 0 0 0 4px var(--accent-soft);
  border-color: var(--accent-bright);
}
.arch-core strong {
  font-size: 19px;
  font-weight: 550;
  color: var(--text);
}
.arch-core small {
  display: block;
  font:
    10px ui-monospace,
    monospace;
  color: var(--accent);
  margin-top: 7px;
  letter-spacing: 0.06em;
}
.arch-branch {
  height: 38px;
  width: 1px;
  background: var(--accent);
  margin: auto;
  position: relative;
  overflow: visible;
}
.arch-branch::after {
  content: "";
  position: absolute;
  left: -3px;
  top: -7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent2);
  opacity: 0;
}
.arch-branch.flowing::after {
  opacity: 1;
  animation: branch-drop 0.5s ease forwards;
}
@keyframes branch-drop {
  from {
    top: -7px;
    opacity: 1;
  }
  to {
    top: 100%;
    opacity: 0;
  }
}
.arch-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.arch-services span {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 16px 4px;
  text-align: center;
  color: var(--text);
  font-size: 11px;
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}
.arch-services span.visited {
  border-color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 10%, var(--bg-raised));
}
.arch-services span.active {
  border-color: var(--accent2);
  transform: translateY(-2px);
}
.arch-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font:
    10px ui-monospace,
    monospace;
  color: var(--text-muted);
}
.dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}
.trace-caption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
  min-height: 32px;
}
.trace-caption b {
  color: var(--accent2);
  font-weight: 600;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 64px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat strong {
  display: block;
  color: var(--accent2);
  font-size: 30px;
  font-weight: 550;
  letter-spacing: -0.045em;
}
.stat span {
  font-size: 12px;
  color: var(--text-muted);
}
section {
  padding: 86px 0;
  border-bottom: 1px solid var(--border);
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}
.section-head h2 {
  font-size: 36px;
  font-weight: 550;
  margin-top: 10px;
}
.section-head > p {
  font-size: 13px;
  max-width: 330px;
  color: var(--text-muted);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.filter {
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 15px;
  font-size: 12px;
}
.filter[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.filter:hover {
  border-color: var(--accent);
}
.filter-status {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
/* Homepage engagement cards: two per row on wide screens. */
.case-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.case-list .case {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.case-list .case-grid {
  grid-template-columns: 1fr;
  gap: 22px;
  padding-bottom: 22px;
}
.case-list .case-result {
  border-left: 0;
  border-top: 1px solid var(--border);
  padding: 18px 0 0;
}
.case-list .case h3 {
  font-size: 22px;
}
.case-list .case-bottom {
  margin-top: auto;
}
.case {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: 7px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s ease, box-shadow 0.2s ease;
}
.case:hover {
  border-color: var(--text-muted);
}
@media (hover: hover) {
  .case:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }
}
.case[hidden] {
  display: none;
}
.case-grid {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 44px;
  padding: 32px;
}
.case .tag {
  font:
    11px/1.6 ui-monospace,
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}
.case h3 {
  font-size: 25px;
  font-weight: 550;
  max-width: 600px;
  margin-bottom: 15px;
}
.case h3 a {
  color: inherit;
  text-decoration: none;
}
.case h3 a:hover {
  color: var(--accent);
}
.case .ctx {
  font-size: 13px;
  max-width: 610px;
}
.case-stack {
  font:
    11.5px/1.7 ui-monospace,
    monospace;
  color: var(--text-muted);
  margin-top: 22px;
}
.case-result {
  border-left: 1px solid var(--border);
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-result strong {
  font-size: 37px;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-weight: 550;
}
.case-result p {
  font-size: 12px;
  margin-top: 8px;
}
.case-result small {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}
.case-bottom {
  padding: 16px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
}
.case-bottom a {
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
}
.case-bottom a:hover {
  text-decoration: underline;
}
.case details {
  font-size: 12px;
  padding: 0 32px 22px;
}
.case summary {
  cursor: pointer;
  color: var(--text);
  width: fit-content;
}
.case details ul {
  padding-left: 18px;
  max-width: 760px;
  margin: 18px 0 0;
}
.case details li {
  margin-bottom: 10px;
}
.case details b {
  color: var(--text);
}
.case-bottom span {
  font:
    11px ui-monospace,
    monospace;
  color: var(--text-muted);
}
.capabilities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.capability {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.capability .index {
  font:
    11px ui-monospace,
    monospace;
  color: var(--accent);
}
.capability h3 {
  font-size: 18px;
  margin: 18px 0 14px;
  font-weight: 550;
  line-height: 1.3;
}
.capability p {
  font-size: 12px;
  color: var(--text-muted);
}
.background-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 65px;
}
.background-grid h2 {
  font-size: 36px;
  font-weight: 550;
  margin: 12px 0 20px;
}
.background-grid .intro {
  font-size: 14px;
}
.role {
  padding: 0 0 24px 22px;
  border-left: 1px solid var(--border);
  position: relative;
}
.role:before {
  content: "";
  position: absolute;
  left: -4px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.role:last-child {
  padding-bottom: 0;
}
.period {
  font:
    10px ui-monospace,
    monospace;
  color: var(--accent);
  margin-bottom: 9px;
}
.role h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
}
.role p {
  font-size: 12px;
  color: var(--text-muted);
}
.aside {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 28px;
}
.credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.cred {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.cred h3 {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  letter-spacing: 0;
}
.cred p {
  font-size: 11px;
  margin-top: 5px;
  color: var(--text-muted);
}
.closing {
  padding: 90px 0;
  background: var(--accent-soft);
}
.closing .wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}
.closing h2 {
  font-size: clamp(30px, 4vw, 45px);
  font-weight: 550;
  max-width: 650px;
  margin: 14px 0 20px;
}
.closing p {
  font-size: 14px;
  max-width: 600px;
}
.contact-actions {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 15px;
}
.contact-actions .email {
  font-size: 11px;
}
.copy-email {
  border: 0;
  padding: 3px 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
}
#copyStatus {
  font-size: 11px;
  max-width: 250px;
  min-height: 20px;
}
footer {
  padding: 25px 0;
  color: var(--text-muted);
  font-size: 12px;
}
/* Footer: the site's sections, then the small print. */
.footer-nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.footer-nav a {
  color: var(--text-body);
  font-size: 13px;
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--accent);
}
/* Room under the last row, so the floating assistant button can't cover it. */
@media (max-width: 640px) {
  footer {
    padding-bottom: 84px;
  }
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.footer-inner a {
  text-decoration: none;
}
@media (min-width: 1500px) {
  .hero {
    padding-top: 110px;
  }
  /* Follow the content down by the extra 24px of padding. */
  .hub-net {
    top: 24px;
  }
}
/* Large screens: every page widens to 1320px instead of sitting in a narrow
   column with wide empty margins, so all pages share the homepage's width.
   Running text on reading pages keeps its own line length (--measure in
   deepdive.css). The homepage network switches to its layout drawn for this
   width. */
.hub-net-wide {
  display: none;
  margin-left: -800px;
}
@media (min-width: 1600px) {
  :root {
    --site-maxw: 1320px;
    --maxw: 1320px;
  }
  .hub-net:not(.hub-net-wide) {
    display: none;
  }
  .hub-net-wide {
    display: block;
  }
}
@media (max-width: 900px) {
  .hero-grid {
    gap: 32px;
    grid-template-columns: 1.2fr 1fr;
  }
  .architecture {
    padding: 16px;
    min-height: 310px;
  }
  .arch-core {
    margin-left: 10px;
    margin-right: 10px;
  }
  .navlinks {
    gap: 18px;
  }
  .capabilities {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-list {
    grid-template-columns: 1fr;
  }
  .closing .wrap {
    grid-template-columns: 1fr;
  }
  .background-grid {
    gap: 32px;
  }
  .hero h1 {
    font-size: 48px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
/* Below 1024px the full row of links no longer fits beside the name, so
   they collapse behind the Menu button (the same as on phones) instead of
   wrapping onto two or three lines. */
@media (max-width: 1059px) {
  .nav-inner {
    gap: 12px;
    min-height: 72px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .brand {
    font-size: 16px;
    margin-right: auto;
  }
  .navlinks {
    order: 5;
    width: 100%;
    justify-content: space-between;
    gap: 8px 10px;
    font-size: 11px;
    flex-wrap: wrap;
    margin-left: 0;
  }
  #themeToggle,
  .nav-toggle {
    width: 36px;
    height: 36px;
  }
  #themeToggle {
    font-size: 18px;
  }
  /* With JavaScript, the links collapse behind the Menu button. */
  html.js .nav-toggle {
    display: grid;
  }
  html.js .navlinks {
    display: none;
  }
  html.js .navlinks.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 4px;
    font-size: 15px;
  }
  html.js .navlinks.is-open > a,
  html.js .navlinks.is-open .nav-dropdown-trigger {
    display: flex;
    padding: 13px 2px;
    border-top: 1px solid var(--border);
  }
  html.js .navlinks.is-open .nav-dropdown {
    display: block;
  }
  html.js .navlinks.is-open .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
  }
  html.js .navlinks.is-open .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    min-width: 0;
    max-width: none;
    margin: 0 0 10px;
  }
  html.js .navlinks.is-open .nav-dropdown-menu::before {
    display: none;
  }
  .nav-dropdown {
    position: static;
    padding: 0;
    margin: 0;
  }
  .nav-dropdown-menu {
    left: 16px;
    right: 16px;
    top: calc(100% + 4px);
    transform: none;
    min-width: auto;
    width: auto;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    transform: none;
  }
}
@media (max-width: 640px) {
  .wrap {
    padding: 0 22px;
  }
  .hero {
    padding-top: 45px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero h1 {
    font-size: 46px;
  }
  .hero .lede {
    font-size: 14px;
  }
  .hero-intro {
    font-size: 11px;
  }
  .hero-avatar {
    width: 36px;
    height: 36px;
  }
  .architecture {
    min-height: 290px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
    margin-top: 36px;
  }
  .stat strong {
    font-size: 25px;
  }
  .stat span {
    font-size: 12px;
    line-height: 1.5;
    display: block;
    margin-top: 5px;
  }
  section {
    padding: 56px 0;
  }
  .section-head {
    display: block;
  }
  .section-head h2,
  .background-grid h2 {
    font-size: 30px;
  }
  .section-head > p {
    margin-top: 18px;
  }
  .case-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .case h3 {
    font-size: 23px;
  }
  .case-result {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 18px 0 0;
  }
  .case-result strong {
    font-size: 30px;
  }
  .case-bottom {
    padding: 16px 24px;
    align-items: start;
  }
  .case-bottom span {
    display: none;
  }
  .case details {
    padding: 0 24px 20px;
  }
  .capabilities {
    gap: 28px 20px;
  }
  .background-grid {
    grid-template-columns: 1fr;
  }
  .credentials {
    grid-template-columns: 1fr;
  }
  .closing {
    padding: 56px 0;
  }
  .closing .wrap {
    gap: 28px;
  }
  .footer-inner {
    flex-wrap: wrap;
  }
  .breadcrumb-bar {
    padding: 14px 0 0;
  }
  .breadcrumb-bar a,
  .breadcrumb-bar .back-link,
  .breadcrumb-bar .back {
    font-size: 12px;
  }
  .back {
    font-size: 12px;
  }
  html {
    scroll-padding-top: 140px;
  }
}
/* Scroll reveal (theme.js). Only blocks that start below the fold are ever
   marked pending, so on-screen content never blinks and a script failure
   hides nothing. html.js raises specificity above per-card transitions. */
html.js .reveal-pending {
  opacity: 0;
  transform: translateY(18px);
}
html.js .reveal-in {
  transition:
    opacity 0.6s ease var(--reveal-delay, 0ms),
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}
@media print {
  html.js .reveal-pending {
    opacity: 1;
    transform: none;
  }
}

/* Reading progress on long-form pages: scroll-driven, no JavaScript.
   Browsers without scroll timelines simply don't show it. */
@supports (animation-timeline: scroll()) {
  body.deepdive::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    z-index: 30;
    background: var(--accent);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
    animation: read-progress linear both;
    animation-timeline: scroll(root);
  }
  @keyframes read-progress {
    to {
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------- Privacy page */
.privacy-body h2 {
  font-size: 22px;
  margin: 34px 0 12px;
}
.privacy-body h2:first-child {
  margin-top: 0;
}

/* ---------------------------------- 404 page */
.not-found {
  padding: 110px 0 120px;
}
.not-found h1 {
  font-size: 48px;
  font-weight: 600;
  margin: 14px 0 18px;
}
.not-found-lede {
  max-width: 560px;
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 30px;
}

/* ---------------------------------- Latest case studies (homepage strip) */
.latest {
  padding: 44px 0 52px;
}
.latest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.latest-head h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.recent-card-item {
  margin: 0;
  padding: 0;
  display: flex;
}
.recent-card-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.recent-card-link:hover {
  border-color: var(--accent);
}
.recent-card-link:focus-visible,
.recent-all-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.recent-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.recent-card-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.recent-card-badge {
  font-size: 10.5px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.recent-card-title {
  display: block;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
}
.recent-card-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-body);
  flex: 1;
}
.recent-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.recent-card-link:hover .recent-card-cta {
  text-decoration: underline;
}
.recent-all-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.recent-all-link:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .recent-list {
    grid-template-columns: 1fr;
  }
}

@media print {
  nav,
  .filters,
  #themeToggle,
  .copy-email {
    display: none !important;
  }
  body {
    background: white;
    color: #222;
  }
  h1,
  h2,
  h3 {
    color: #111;
  }
  .case {
    break-inside: avoid;
  }
  .architecture {
    display: none;
  }
  .hero-grid {
    display: block;
  }
  .case[hidden] {
    display: block;
  }
  .closing {
    background: none;
  }
}

/* theme.js marks animated diagrams that are off screen. */
.anim-paused,
.anim-paused * {
  animation-play-state: paused;
}

/* "Pause animations" (theme.js): stops every CSS animation site-wide. */
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
}
.motion-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  min-height: 32px;
  cursor: pointer;
}
.motion-toggle:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Keep keyboard-focused elements clear of the floating "Ask" button
   (WCAG 2.2 Focus Not Obscured). */
html {
  scroll-padding-bottom: 88px;
}

/* ------------------------------------------------------- Homepage polish
   Alternating section bands, card-style credentials, a header call to action
   with a LinkedIn shortcut, and a two-column contact section. Mobile
   overrides sit at the end of this block so they win over the base rules. */
section.band {
  background: var(--bg-raised);
}

/* Header: "Let's connect" as an outlined pill, LinkedIn as an icon button. */
.navlinks a.nav-cta {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 600;
  transition: background 0.15s ease;
}
.navlinks a.nav-cta:hover {
  background: var(--accent-soft);
}
.nav-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font: 700 15px/1 system-ui, sans-serif;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Credentials: cards with a badge icon. */
.credentials {
  gap: 16px;
}
.cred {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color 0.2s ease;
}
.cred:hover {
  border-color: var(--accent);
}
.cred-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.cred-icon svg {
  width: 22px;
  height: 22px;
}
.cred h3 {
  font-size: 15px;
}
.cred p {
  font-size: 12px;
}

/* Contact: text on the left, a card of direct actions on the right, over a
   faint grid that echoes the hero's architecture panel. */
.closing {
  background-color: var(--accent-soft);
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 9%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
}
.closing .wrap {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
}
.contact-card {
  justify-self: end;
  width: 100%;
  max-width: 380px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);
}
.closing .contact-card-label {
  margin: 0 0 18px;
  font:
    600 11px ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-card .button {
  align-self: stretch;
  text-align: center;
}
.contact-actions .email {
  font-size: 13px;
}

@media (max-width: 900px) {
  .closing .wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-card {
    justify-self: stretch;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .nav-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .credentials {
    grid-template-columns: 1fr;
  }
  /* Inside the opened mobile menu, the pill becomes a plain menu row. */
  html.js .navlinks.is-open > a.nav-cta {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 13px 2px;
  }
}

/* Cards sit on whichever background their section has. */
.cred {
  background: var(--bg-raised);
}
.band .cred {
  background: var(--bg);
}

/* "In practice": the case studies behind each How I work column. */
.in-practice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  font-size: 12px;
}
.in-practice span {
  font:
    10px ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.in-practice a {
  color: var(--accent);
  text-decoration: none;
}
.in-practice a::before {
  content: "→ ";
}
.in-practice a:hover {
  text-decoration: underline;
}

/* Toolbox: layers as compact cards; most-used tools first, the rest folded. */
.toolbox {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tool-layer {
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-raised);
}
.tool-layer h3 {
  margin: 0 0 12px;
  font:
    600 10.5px ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.tool-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 3px 4px 3px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tool-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tool-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font:
    600 10.5px ui-monospace,
    monospace;
}
.tool-more {
  margin-top: 8px;
}
.tool-more summary {
  cursor: pointer;
  padding: 3px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.tool-more summary:hover {
  color: var(--accent);
}
.tool-more[open] summary {
  margin-bottom: 6px;
}
@media (max-width: 1100px) {
  .toolbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tool-hint {
  display: none;
}
/* Phones: one swipeable row instead of eight stacked cards, with the next
   card peeking in so it is obvious there is more. */
@media (max-width: 640px) {
  .toolbox {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 12px;
    margin-right: -22px;
    padding: 2px 22px 10px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .tool-layer {
    scroll-snap-align: start;
  }
  .tool-hint {
    display: block;
    margin: -14px 0 12px;
    font: 11px ui-monospace, monospace;
    color: var(--text-muted);
  }
}

/* How a change reaches production: WBS and ITIL change control as five
   connected steps (a row on wide screens, a vertical timeline on narrow). */
.change-flow {
  margin-top: 48px;
  padding: 30px 30px 26px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}
.change-flow-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px 40px;
}
.change-flow-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font:
    600 10.5px ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.change-flow-head h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 550;
  line-height: 1.25;
}
.change-flow-head p:not(.change-flow-eyebrow) {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.change-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.change-step {
  position: relative;
  padding-top: 50px;
}
/* The connector from each step's node to the next one. */
.change-step::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 42px;
  right: -16px;
  height: 1px;
  background: linear-gradient(to right, var(--accent), var(--border));
  transform-origin: left;
}
.change-step:last-child::before {
  display: none;
}
.change-num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font:
    600 11px ui-monospace,
    monospace;
}
.change-step h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.change-step p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.change-step a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.change-step a::before {
  content: "→ ";
}
.change-step a:hover {
  text-decoration: underline;
}
/* Reveal (site.js adds .is-armed only when motion is welcome). */
.change-flow.is-armed .change-step {
  opacity: 0;
  transform: translateY(10px);
}
.change-flow.is-armed .change-step::before {
  transform: scaleX(0);
}
.change-flow.is-armed.is-visible .change-step {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.change-flow.is-armed.is-visible .change-step::before {
  transform: none;
  transition: transform 0.5s ease 0.25s;
}
.change-flow.is-armed.is-visible .change-step:nth-child(2) { transition-delay: 0.15s; }
.change-flow.is-armed.is-visible .change-step:nth-child(3) { transition-delay: 0.3s; }
.change-flow.is-armed.is-visible .change-step:nth-child(4) { transition-delay: 0.45s; }
.change-flow.is-armed.is-visible .change-step:nth-child(5) { transition-delay: 0.6s; }
@media (max-width: 900px) {
  .change-flow-head {
    grid-template-columns: 1fr;
  }
  .change-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .change-step {
    padding: 4px 0 22px 52px;
  }
  .change-step:last-child {
    padding-bottom: 0;
  }
  .change-step::before {
    top: 38px;
    bottom: 2px;
    left: 17px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, var(--accent), var(--border));
    transform-origin: top;
  }
  .change-flow.is-armed .change-step::before {
    transform: scaleY(0);
  }
}
@media (max-width: 640px) {
  .change-flow {
    padding: 22px 18px;
  }
}

/* Futuristic portfolio system: shared across the static publication. */
:root {
  --bg: #080d16;
  --bg-raised: #111b29;
  --text: #edf6ff;
  --text-body: #b9c8da;
  --text-muted: #9aadc3;
  --border: #293b50;
  --line: #627b96;
  --accent: #76eee2;
  --accent-bright: #76eee2;
  --accent-soft: #153b3d;
  --accent2: #b4a6ff;
  --inverse-bg: #080d16;
  --text-on-accent-bright: #082326;
  --hero-glow-a: rgba(71,219,220,.15);
  --hero-glow-b: rgba(123,104,255,.13);
  --maxw: 1240px;
  --site-maxw: 1240px;
}
:root[data-theme="light"] {
  --bg: #f1f5fc;
  --bg-raised: #fff;
  --text: #14243d;
  --text-body: #3e526b;
  --text-muted: #526780;
  --border: #c8d6e5;
  --accent: #096f70;
  --accent-soft: #d8efee;
  --accent2: #6750b5;
  --hero-glow-a: rgba(34,165,173,.12);
  --hero-glow-b: rgba(123,104,255,.1);
}
body { background-image: radial-gradient(ellipse at 90% 0, var(--hero-glow-b), transparent 35%); }
::selection { background: var(--accent); color: var(--bg); }
.topnav { background: color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.brand { letter-spacing: -.05em; font-weight: 750; }
.nav-cta { border-radius:7px; background:var(--accent-soft); }
.hero { padding: 80px 0 0; overflow:hidden; }
.hero-bg { opacity:.35; }
.hero-grid { grid-template-columns: 1.15fr 1fr; gap:48px; align-items:center; }
.hero-edition { font:10px/1.7 ui-monospace,monospace; letter-spacing:.19em; color:var(--text-muted); margin-top:28px; }
.hero h1 { font-size:clamp(48px,5.6vw,80px); line-height:1.02; letter-spacing:-.065em; font-weight:750; margin:16px 0 26px; }
.hero h1 span { color:var(--accent); text-shadow:0 0 45px var(--hero-glow-a); }
.hero .lede { font-size:16px; max-width:470px; }
.type-eyebrow { display:inline-flex; padding:7px 12px; border:1px solid var(--border); border-radius:100px; background:var(--bg-raised); }
.button { border-radius:7px; padding:14px 23px; box-shadow:0 6px 30px var(--hero-glow-a); transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-3px); box-shadow:0 10px 35px var(--hero-glow-a); }
.architecture { padding:22px; border-radius:18px; background:linear-gradient(140deg,var(--hero-glow-a),transparent 45%),linear-gradient(320deg,var(--hero-glow-b),transparent 55%),var(--bg); box-shadow:0 24px 90px #0003,inset 0 1px 0 #ffffff0d; }
.orbital-scene { position:relative; margin:-2px -12px 14px; }
.orbital-coordinate { display:block; font:9px ui-monospace,monospace; letter-spacing:.2em; color:var(--text-muted); padding:8px 12px; }
.orbital-scene svg { display:block; width:100%; max-height:260px; filter:drop-shadow(0 0 9px #58e8e92b); }
.arch-core { margin:18px 20px 0; padding:16px; border-radius:8px; }
.arch-services span { border-radius:6px; background:var(--bg-raised); }
.arch-label { font-size:9px; }
.trace-caption { min-height:65px; }
.hub-net,.hub-net-wide,.hub-net-compact { display:none; }
.stats { margin-top:68px; border:1px solid var(--border); border-radius:14px 14px 0 0; background:color-mix(in srgb,var(--bg-raised) 75%,transparent); padding:28px; }
.stat { padding:0 22px; }
.stat strong { letter-spacing:-.055em; color:var(--text); }
.stat span { font-size:11px; }
section { padding:100px 0; }
.section-head { margin-bottom:40px; }
h2 { font-size:clamp(30px,3.5vw,48px); letter-spacing:-.055em; }
.eyebrow,.section-eyebrow { font-family:ui-monospace,monospace; letter-spacing:.18em; font-size:10px; }
.recent-card-link { border-radius:12px; background:linear-gradient(145deg,var(--hero-glow-a),transparent 65%),var(--bg-raised); padding:26px; transition:transform .25s,border-color .25s; }
.recent-card-link:hover { transform:translateY(-6px); border-color:var(--accent); }
.recent-card-title { letter-spacing:-.035em; }
.recent-card-meta { font-family:ui-monospace,monospace; }
.case-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.case-list .case { margin:0; border:1px solid var(--border); border-radius:14px; padding:30px; background:linear-gradient(150deg,var(--hero-glow-b),transparent 60%),var(--bg-raised); transition:transform .25s,border-color .25s; }
.case-list .case:hover { transform:translateY(-4px); border-color:var(--accent); }
.case-list .case-grid { grid-template-columns:1fr; gap:24px; }
.case-list .case-result { border-left:0; border-top:1px solid var(--border); padding:20px 0 0; }
.case-list .case h3 { font-size:25px; }
.case-list .case-bottom { margin-top:24px; }
.filter { border-radius:100px; padding:9px 17px; }
.band { background:linear-gradient(110deg,var(--hero-glow-b),transparent 65%),var(--bg-raised); }
.tool-layer { border-radius:12px; background:var(--bg); padding:24px; border:1px solid var(--border); }
.tool-chip { border-radius:6px; }
.contact-card { border-radius:18px; background:radial-gradient(ellipse at 100% 0,var(--hero-glow-a),transparent 70%),var(--bg-raised); }
@media(min-width:1000px) { .hero > .wrap { padding-top:0; } .stats { display:grid;grid-template-columns:repeat(4,1fr); } }
@media(max-width:900px) { .hero { padding-top:42px; } .hero-grid { grid-template-columns:1fr; gap:40px; } .hero h1 { font-size:clamp(46px,9vw,72px); } .architecture { max-width:580px;width:100%; } .stats { margin-top:40px; } .case-list { grid-template-columns:1fr; } section { padding:64px 0; } }
@media(max-width:540px) { .hero h1 { font-size:clamp(40px,10vw,54px); } .hero-edition { font-size:8px;letter-spacing:.1em; } .stats { padding:20px 8px; } .stat { padding:12px; } .case-list .case { padding:22px; } .architecture { padding:16px; } .arch-label { flex-wrap:wrap; } .hero-name-link { white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .button,.recent-card-link,.case-list .case { transition:none; } }
.type-eyebrow { gap: .35em; }
/* Reference refinement: a layered architecture console and expertise deck. */
.hero { margin:26px 24px 0; padding:52px 0 0; border:1px solid var(--border); border-radius:20px; background:radial-gradient(ellipse at 0 0,var(--hero-glow-a),transparent 55%),radial-gradient(ellipse at 95% 20%,var(--hero-glow-a),transparent 45%),linear-gradient(125deg,var(--bg-raised),var(--bg)); box-shadow:inset 0 1px 0 #a6fff41a,0 30px 90px #0002; }
.hero-grid { grid-template-columns:1fr 1.15fr; gap:38px; }
.hero h1 { font-size:clamp(42px,4.3vw,65px); text-transform:uppercase; font-weight:800; line-height:1.07; letter-spacing:-.055em; }
.hero h1 span { color:var(--text); }
.hero-edition { color:var(--accent); }
.architecture { border-color:color-mix(in srgb,var(--accent) 30%,var(--border)); box-shadow:0 0 75px var(--hero-glow-a),inset 0 1px 0 #b6ffff17; background:linear-gradient(140deg,var(--hero-glow-a),transparent 60%),var(--bg); padding:18px; }
.orbital-scene svg { max-height:360px; }
.orbital-coordinate { color:var(--accent); }
.arch-core { padding:12px;margin-top:14px; }
.arch-core strong { font-size:16px; }
.arch-services span { padding:12px 4px;font-size:11px; }
.trace-caption { min-height:0;font-size:11px; }
.stats { margin-top:42px;border-radius:10px 10px 0 0;padding:20px; }
.hero .lede { font-size:14px; }
.expertise-deck { padding:46px 0 24px; }
.expertise-heading { display:flex;justify-content:space-between;gap:15px;margin-bottom:20px; }
.expertise-heading > span { font:10px ui-monospace,monospace;color:var(--text-muted); }
.expertise-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; }
.expertise-grid a { display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;padding:24px 12px;border:1px solid var(--border);border-radius:12px;background:radial-gradient(ellipse at 50% 0,var(--hero-glow-a),transparent 85%),var(--bg-raised);transition:transform .2s,border-color .2s; }
.expertise-grid a:hover { transform:translateY(-5px);border-color:var(--accent); }
.expertise-symbol { font-size:36px;color:var(--accent);text-shadow:0 0 20px var(--accent);line-height:1.2;margin-bottom:16px; }
.expertise-grid strong { font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--text); }
.expertise-grid small { font-size:11px;color:var(--text-muted);margin-top:6px; }
@media(max-width:900px) { .hero { margin:12px;padding-top:32px; }.hero-grid { grid-template-columns:1fr; }.hero h1 { font-size:clamp(38px,7.5vw,65px); }.expertise-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:540px) { .hero {margin:8px;}.hero > .wrap {width:100%;padding-left:18px;padding-right:18px;}.hero h1 {font-size:clamp(32px,8.2vw,44px);}.expertise-heading {flex-wrap:wrap;}.expertise-grid {gap:10px;}.expertise-grid strong {font-size:11px;}.orbital-scene svg {max-height:300px;} }
@media(prefers-reduced-motion:reduce) { .expertise-grid a {transition:none;} }
/* Approved concept: architecture command center with a holographic guide. */
.hero {
  margin: 0;
  padding: 36px 0 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background:
    radial-gradient(ellipse at 65% 35%, var(--hero-glow-a), transparent 55%),
    radial-gradient(ellipse at 95% 95%, var(--hero-glow-b), transparent 45%),
    var(--bg);
}
.hero > .wrap { width: min(1400px, calc(100% - 80px)); max-width: none; }
.hero-grid { grid-template-columns: 1fr 1.15fr .85fr; gap: 26px; align-items: center; }
.hero-copy { position: relative; z-index: 3; padding: 0 0 28px; }
.hero h1 { font-size: clamp(38px, 3.2vw, 50px); line-height: 1.04; font-weight: 850; letter-spacing: -.055em; margin: 24px 0; }
.hero h1 span { color: var(--accent); }
.hero-edition { font-size: 9px; letter-spacing: .14em; margin-top: 22px; }
.hero .lede { max-width: 360px; font-size: 14px; line-height: 1.85; }
.hero .actions { gap: 18px; margin-top: 25px; }
.hero .button { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 20px var(--hero-glow-a), 0 0 20px var(--hero-glow-a); border-radius: 6px; }
.hero-intro-text { font-size: 10px; }
.hero-avatar { width: 34px; height: 34px; }
.architecture { z-index: 2; border-radius: 10px; padding: 14px; background: linear-gradient(155deg, var(--hero-glow-a), transparent 55%), color-mix(in srgb, var(--bg) 92%, transparent); }
.orbital-coordinate { font-size: 8px; letter-spacing: .16em; }
.orbital-scene { margin: 0 -14px 8px; }
.orbital-scene svg { max-height: 250px; }
.arch-label { letter-spacing: .04em; font-size: 8px; }
.arch-core { margin: 15px 8px 0; padding: 13px 5px; }
.arch-core strong { font-size: 15px; }
.arch-core small { font-size: 8px; }
.arch-services { gap: 8px; }
.arch-services span { padding: 8px 2px; font-size: 10px; }
.arch-branch { height: 24px; }
.arch-footer { font-size: 9px; margin-top: 12px; }
.trace-caption { font-size: 10px; line-height: 1.6; }
.globe-grid { position: absolute; width: 920px; height: 920px; border-radius: 50%; right: -130px; top: -80px; border: 1px solid var(--accent); background: repeating-radial-gradient(ellipse at center, transparent 0 50px, var(--hero-glow-a) 51px 52px, transparent 53px 80px); opacity: .35; transform: rotate(-20deg) scaleY(.85); }
.hero-bg::before { background: radial-gradient(circle, var(--hero-dot) .7px, transparent 1px); background-size: 16px 16px; opacity: .18; }
.stats { position: relative; z-index: 3; margin-top: 22px; border-radius: 0; border-width: 1px 0 0; padding: 22px 0; background: transparent; }
.stat strong { font-size: 30px; line-height: 1.2; margin-bottom: 8px; }
.stat span { display: block; line-height: 1.5; }
.stat { border-color: var(--border); }
.expertise-deck { padding: 36px 0; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--hero-glow-a), transparent); }
.expertise-deck > .wrap { max-width: var(--maxw); }
.expertise-grid a { align-items: flex-start; text-align: left; position: relative; padding: 22px 24px; }
.expertise-grid a::after { content: '↗'; position: absolute; right: 22px; top: 25px; color: var(--accent); font-size: 18px; }
.expertise-symbol { filter: drop-shadow(0 0 8px var(--hero-glow-a)); margin-bottom: 14px; }
.expertise-symbol svg { display: block; width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.recent-card-link { position: relative; overflow: hidden; }
.recent-card-link::after { content: ''; position: absolute; width: 110px; height: 110px; border: 1px solid var(--border); border-radius: 50%; right: -25px; bottom: -40px; box-shadow: 0 0 0 20px var(--hero-glow-a), 0 0 0 40px var(--hero-glow-b); pointer-events: none; }


@media (max-width: 1199px) {
  .hero > .wrap { width: calc(100% - 48px); }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .architecture { grid-column: 1 / -1; grid-row: 2; max-width: 720px; width: 100%; margin: 0 auto; }
  .orbital-scene svg { max-height: 340px; }
  .hero h1 { font-size: clamp(40px, 5vw, 58px); }
}
@media (max-width: 767px) {
  .hero { padding-top: 30px; }
  .hero > .wrap { width: calc(100% - 36px); padding: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .hero-copy { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .hero h1 { font-size: clamp(38px, 8.5vw, 60px); }
  .hero .lede { max-width: 480px; }
  .architecture { grid-column: 1; grid-row: 3; }
  .stats { margin-top: 24px; }
  .stat strong { font-size: 24px; }
  .expertise-grid a { padding: 18px 14px; }
  .expertise-grid a::after { right: 14px; top: 20px; }
  .expertise-grid strong { letter-spacing: .01em; }
}


.orbital-scene img { display: block; width: 100%; height: auto; max-height: 250px; object-fit: contain; filter: drop-shadow(0 0 9px #58e8e92b); }
@media (max-width: 1199px) { .orbital-scene img { max-height: 340px; } }
@media (max-width: 767px) { .orbital-scene img { max-height: 300px; } }
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { min-width: 0; }
}
@media (max-width: 360px) { .hero h1 { font-size: 32px; } }

/* Keep the architecture and professional experience prominent without the guide. */
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 60px; }
.hero .lede { max-width: 480px; }
@media (min-width: 1200px) { .hero h1 { font-size: clamp(44px, 4vw, 62px); } }
@media (max-width: 1199px) { .architecture { grid-column: 2; grid-row: 1; } }
@media (max-width: 767px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .architecture { grid-column: 1; grid-row: 2; } }

/* Clear reading hierarchy and accessible diagram enlargement. */
.background-grid .experience-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 20px 0 0; font-size: 14px; line-height: 1.6; }
.role { position: relative; border-left: 2px solid var(--border); padding-left: 22px; }
.role::before { content: ''; position: absolute; left: -5px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.case-overview { padding: 28px 0; border-bottom: 1px solid var(--border); }
.case-overview h2 { font-size: 20px; margin-bottom: 20px; }
.case-overview dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 40px; margin: 0; }
.case-overview dt { color: var(--accent); font-weight: 650; margin-bottom: 8px; }
.case-overview dd { margin: 0; color: var(--text-body); line-height: 1.7; }
.diagram-expand { display: block; margin: 12px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--accent); background: var(--bg); font: inherit; cursor: pointer; }
.diagram-viewer { width: min(1100px,94vw); max-width: 94vw; max-height: 90vh; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); }
.diagram-viewer::backdrop { background: #000b; }
.diagram-viewer header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.diagram-viewer h2 { font-size: 20px; }
.diagram-viewer .diagram-expand { margin: 0; }
.diagram-content { overflow: auto; margin-top: 20px; }
.diagram-content img { display: block; width: 100%; min-width: 640px; height: auto; }
.diagram-content pre { min-width: max-content; font-size: 16px; }
.diagram-content .flow-body { min-width: 800px; }
@media(max-width:767px) { .case-overview dl { grid-template-columns: 1fr; } .diagram-viewer { padding: 16px; } }

/* Defer layout of long below-fold homepage sections until they approach the viewport. */
body:not(.deepdive) #work, body:not(.deepdive) #approach, body:not(.deepdive) #background, body:not(.deepdive) #credentials { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.diagram-expand { width: fit-content; font-size: 13px; }

/* Align the homepage hero with the header and reading column. */
.portfolio-home .hero > .wrap { width: 100%; max-width: var(--maxw); padding-inline: 32px; }
.brand { margin-left: 8px; white-space: nowrap; }
@media(max-width:767px) { .portfolio-home .hero > .wrap { padding-inline: 18px; } .brand { margin-left: 4px; } }

.portfolio-home .hero-grid { grid-template-columns: minmax(0,1fr); }
.portfolio-home .hero-copy { max-width: 850px; }
.portfolio-home .hero h1 { font-size: clamp(38px,5vw,68px); }
.portfolio-home .hero .lede { max-width: 640px; font-size: 16px; }
.expertise-heading h2 { font-size: 24px; margin: 0; }
.expertise-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding: 4px 2px; scrollbar-width: none; }
.expertise-grid::-webkit-scrollbar { display: none; }
.expertise-grid a { flex: 0 0 calc((100% - 54px) / 4); min-height: 210px; display: flex; flex-direction: column; scroll-snap-align: start; }
.expertise-grid a::after { content: none; }
.expertise-grid strong { min-height: 44px; line-height: 1.45; font-size: 14px; }
.expertise-grid small { margin-top: 8px; line-height: 1.6; }
.expertise-controls { display: flex; gap: 8px; }
.expertise-controls[hidden] { display: none; }
.expertise-controls button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
@media(max-width:1199px) { .expertise-grid a { flex-basis: calc((100% - 18px) / 2); } }
@media(max-width:767px) { .expertise-grid a { flex-basis: 100%; } }

.expertise-controls { justify-content: center; align-items: center; gap: 16px; margin-top: 14px; }
.expertise-dots { display: flex; align-items: center; }
.expertise-dots button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; }
.expertise-dots button::before { content: ''; width: 8px; height: 8px; border-radius: 10px; background: var(--text-muted); transition: width .2s; }
.expertise-dots button[aria-current="true"]::before { width: 24px; background: var(--accent); }
.expertise-play { font-size: 12px; }
.expertise-play[hidden] { display: none; }
.expertise-grid { cursor: grab; }
.expertise-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media(prefers-reduced-motion:reduce) { .expertise-dots button::before { transition: none; } }

.expertise-grid.has-tail::after { content: ""; flex: 0 0 var(--expertise-tail); }

/* Slow movement for the decorative hero rings. Global motion pause still applies. */
@media screen and (prefers-reduced-motion: no-preference) {
  .globe-grid { animation: hero-ring-drift 10s ease-in-out infinite alternate; }
}
@keyframes hero-ring-drift {
  from { transform: translate(-16px, 8px) rotate(-20deg) scaleY(.85) scale(.98); opacity: .32; }
  to { transform: translate(20px, -12px) rotate(-12deg) scaleY(.88) scale(1.08); opacity: .42; }
}