/* =========================================================
   endlosEV — Design System
   Consulting insight. Technology delivery. Managed support.
   ========================================================= */

/* Display voice is Inter — the face the 21st.dev hero reference renders in (that
   component declares no font-family of its own, so it inherits the demo's Inter
   default). DM Sans keeps longer copy open and readable, and IBM Plex Mono
   retains the technical labels. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,600;1,9..40,700&family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap');

/* Jcorbs — the brand's wide sci-fi titling face from endlosev.com (uppercase
   only). Self-hosted from the licensed file. Used sparingly, for the tagline and
   the short section eyebrows; display + body stay Inter / DM Sans. */
@font-face {
  font-family: 'Jcorbs';
  src: url('../fonts/jcorbs.woff2') format('woff2'),
       url('../fonts/jcorbs.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --color-bg: #000000;
  /* Kept warm and clearly stepped so surfaces still layer against a black base. */
  --color-bg-elevated: #16120d;
  --color-bg-floating: #221c14;
  /* Deepened + more saturated so the gold reads as gold, not champagne. The old
     ramp (#c9a15a / #e8cf97) looked pale, especially the light end used by the
     logo and hero accent. */
  --color-gold: #c0953c;
  --color-gold-light: #dcbb61;
  --color-gold-dark: #7d5f26;
  --color-cream: #f3efe4;
  --color-cream-dim: #cfc9ba;
  --color-muted: #948c7d;
  /* Body copy that needs to sit brighter than --color-cream-dim without going full cream. */
  --color-cream-soft: #ded8c9;
  --color-line: rgba(243, 239, 228, 0.12);
  --color-line-strong: rgba(243, 239, 228, 0.22);
  --color-gold-line: rgba(192, 149, 60, 0.35);

  /* Type */
  --font-display: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --font-brand: 'Jcorbs', var(--font-display);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;
  --space-8: 12rem;

  --container-w: 1280px;
  --edge: clamp(1.25rem, 4vw, 4rem);
  --header-h: 92px;

  --ease-spring: cubic-bezier(0.18, 0.89, 0.32, 1.15);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--color-bg);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Ambient grain texture, applied once behind all content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient warmth. Kept faint: the base should read as black, with just enough
   glow at the crown to stop large empty areas going dead flat. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(78, 58, 31, 0.10), transparent 52%),
    radial-gradient(90% 60% at 100% 100%, rgba(46, 35, 22, 0.06), transparent 55%);
}

::selection { background-color: var(--color-gold-dark); color: var(--color-cream); }

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

a, button { cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--color-cream);
}

.eyebrow {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.eyebrow::before {
  content: '';
  width: 1.4em;
  height: 1px;
  background: var(--color-gold);
  display: inline-block;
}

.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--color-cream-dim);
  line-height: 1.65;
  max-width: 42ch;
}

/* Weight 500, not 700/800: at display scale the size carries the emphasis on its
   own, and heavier weights + very tight tracking close the counters up into a
   slab. This is the one heading voice the whole site shares. */
.display-1 {
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  font-weight: 500;
}

.display-2 {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  letter-spacing: -0.035em;
}

.display-3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.02em;
}

.accent {
  font-style: normal;
  color: var(--color-gold-light);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--edge);
  position: relative;
  z-index: 1;
}

.section {
  padding-block: var(--space-6);
  position: relative;
  z-index: 1;
}

.section--tight { padding-block: var(--space-5); }
.section--flush-top { padding-top: 0; }

/* ---------- Section rhythm: surface bands ----------
   A full-bleed elevated chapter that lifts off the black base. Warm and quiet,
   with a faint gold crown glow and hairline edges, so the page reads as distinct
   surfaces without leaving the dark, monotone register. Alternated against the
   pure-black sections to give the scroll a rhythm rather than one flat plane. */
.section--band {
  background:
    radial-gradient(120% 130% at 50% -12%, rgba(201, 161, 90, 0.07), transparent 58%),
    linear-gradient(180deg, var(--color-bg-elevated) 0%, #100d09 100%);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
/* The hairline edges get a faint warm bloom where they meet the band, so the
   seam reads as a lit edge rather than a hard cut. */
.section--band::before,
.section--band::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-gold-line) 50%, transparent);
  opacity: 0.6;
}
.section--band::before { top: -1px; }
.section--band::after { bottom: -1px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 800px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1050px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold) 60%, var(--color-gold-dark));
  color: #16130d;
  box-shadow: 0 10px 30px -12px rgba(201, 161, 90, 0.55), 0 2px 8px -2px rgba(0,0,0,0.6);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -14px rgba(201, 161, 90, 0.7), 0 4px 10px -2px rgba(0,0,0,0.6);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-cream);
}
.btn-ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold-light);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); }

.btn svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.link-arrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2em;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}
.link-arrow:hover { border-color: var(--color-gold); gap: 0.75em; color: var(--color-gold-light); }

/* ---------- Header / Nav ---------- */
/* Full-bleed glass bar. The tint and blur sit on the header itself so the band
   runs edge to edge, and the inner row drops the container's max-width so the
   brand sits at the far left with the nav free to centre on the viewport.
   Height resolves to --header-h, which the mobile-nav inset and the heroes'
   negative top margin both depend on — keep that intact. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 10, 7, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.9);
}

.site-header .container {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
  padding-inline: clamp(1.1rem, 3.5vw, 3rem);
}

/* Three tracks so the nav is centred on the viewport, not in whatever space the
   brand leaves over — an auto-margin would push it right of true centre. The
   third track stays empty (the CTA that used to live there is now a nav item);
   it exists purely to balance the brand. */
@media (min-width: 1180px) {
  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
}

.brand {
  display: flex;
  align-items: center;
  /* No flex gap: "endlos" is a bare text node and "EV" a <span>, so they are two
     separate flex items — any gap would render inside the wordmark as "endlos EV".
     The mark is spaced with its own margin instead. */
  gap: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-cream);
}

.brand-mark {
  width: 38px;
  height: 38px;
  margin-right: 0.75rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-gold-line);
  flex-shrink: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.brand span { color: var(--color-gold-light); }

.main-nav { display: none; }
@media (min-width: 1180px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    justify-self: center;
  }
  .main-nav a {
    position: relative;
    padding-block: 0.4em;
    color: var(--color-cream);
    transition: color 0.25s var(--ease-out);
  }
  .main-nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--color-gold);
    transition: right 0.3s var(--ease-out);
  }
  .main-nav a:hover, .main-nav a.is-active { color: var(--color-gold-light); }
  .main-nav a:hover::after, .main-nav a.is-active::after { right: 0; }

  /* Static, so the mega panel's containing block is the header .container
     (already position:relative). Anchored to the trigger instead, a 700px
     panel runs off the right edge of a 1180px viewport. */
  .nav-item { position: static; display: flex; align-items: center; }
  .dropdown-trigger { display: inline-flex; align-items: center; gap: 0.4em; }
  .dropdown-trigger .chevron { transition: transform 0.25s var(--ease-out); }
  .nav-item:hover .dropdown-trigger .chevron,
  .nav-item:focus-within .dropdown-trigger .chevron { transform: rotate(180deg); }

  .dropdown-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 220px;
    padding: 0.5rem;
    margin-top: var(--space-2);
    background: var(--color-bg-floating);
    border: 1px solid var(--color-line);
    border-radius: 14px;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,0.7), 0 8px 24px -12px rgba(201,161,90,0.14);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  }
  .nav-item:hover .dropdown-panel,
  .nav-item:focus-within .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .dropdown-panel a {
    padding: 0.65em 0.9em;
    border-radius: 8px;
    white-space: nowrap;
  }
  .dropdown-panel a::after { content: none; }
  .dropdown-panel a:hover, .dropdown-panel a.is-active { color: var(--color-gold-light); background: rgba(201, 161, 90, 0.08); }

  /* --- Services mega menu --- */
  .dropdown-panel--mega {
    min-width: 700px;
    padding: 0.85rem;
  }
  .mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.5rem;
  }
  .dropdown-panel--mega .mega-link {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.8em 0.9em;
    border-radius: 12px;
    white-space: normal;
    transition: background-color 0.25s var(--ease-out);
  }
  .mega-link__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(201, 161, 90, 0.32);
    background: radial-gradient(circle at 30% 25%, rgba(232, 207, 151, 0.24), rgba(201, 161, 90, 0.10));
    color: var(--color-gold-light);
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.3s var(--ease-spring);
  }
  /* Overrides the stroke-width attribute on the inline SVGs. */
  .mega-link__icon svg { width: 26px; height: 26px; stroke-width: 1.7; }
  .mega-link__text { min-width: 0; }
  .mega-link__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-cream);
    transition: color 0.25s var(--ease-out);
  }
  .mega-link__desc {
    display: block;
    margin-top: 0.15em;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-muted);
    letter-spacing: 0;
    transition: color 0.25s var(--ease-out);
  }
  .dropdown-panel--mega .mega-link:hover,
  .dropdown-panel--mega .mega-link.is-active { background: rgba(201, 161, 90, 0.08); }
  .mega-link:hover .mega-link__icon,
  .mega-link.is-active .mega-link__icon {
    color: var(--color-cream);
    border-color: var(--color-gold);
    background: radial-gradient(circle at 30% 25%, rgba(232, 207, 151, 0.38), rgba(201, 161, 90, 0.18));
    transform: translateY(-2px);
  }
  .mega-link:hover .mega-link__title,
  .mega-link.is-active .mega-link__title { color: var(--color-gold-light); }
  .mega-link:hover .mega-link__desc { color: var(--color-cream-dim); }
  .dropdown-panel--mega .mega-link:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }

  /* Recessed CTA card sitting below the grid. */
  .dropdown-panel--mega .mega-promo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.65rem;
    padding: 1rem;
    border: 1px solid var(--color-line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.55);
    white-space: normal;
    transition: background-color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  }
  .mega-promo__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid rgba(201, 161, 90, 0.32);
    background: radial-gradient(circle at 30% 25%, rgba(232, 207, 151, 0.24), rgba(201, 161, 90, 0.10));
    color: var(--color-gold-light);
    transition: color 0.25s var(--ease-out);
  }
  .mega-promo__icon svg { width: 28px; height: 28px; stroke-width: 1.6; }
  .mega-promo__text { min-width: 0; flex: 1; }
  .mega-promo__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-cream);
    transition: color 0.25s var(--ease-out);
  }
  .mega-promo__desc {
    display: block;
    margin-top: 0.2em;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-muted);
    letter-spacing: 0;
  }
  .mega-promo__go {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-gold);
    color: var(--color-bg);
    transition: background-color 0.25s var(--ease-out), transform 0.3s var(--ease-spring);
  }
  .mega-promo__go svg { width: 16px; height: 16px; }
  .dropdown-panel--mega .mega-promo:hover {
    background: rgba(201, 161, 90, 0.08);
    border-color: var(--color-gold-line);
  }
  .mega-promo:hover .mega-promo__icon { color: var(--color-gold-light); }
  .mega-promo:hover .mega-promo__go {
    background: var(--color-gold-light);
    transform: translateX(3px);
  }
  .dropdown-panel--mega .mega-promo:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }
}


.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  color: var(--color-cream);
}
@media (min-width: 1180px) { .nav-toggle { display: none; } }

.nav-toggle svg { width: 18px; height: 18px; }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--color-bg);
  z-index: 60;
  padding: var(--space-4) var(--edge);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-nav a { padding-block: var(--space-2); border-bottom: 1px solid var(--color-line); color: var(--color-cream-dim); }
.mobile-nav a.is-active, .mobile-nav a:hover { color: var(--color-gold-light); }
@media (min-width: 1180px) { .mobile-nav { display: none; } }

.mobile-nav details { border-bottom: 1px solid var(--color-line); }
.mobile-nav details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  color: var(--color-cream-dim);
  cursor: pointer;
  list-style: none;
}
.mobile-nav details > summary::-webkit-details-marker { display: none; }
.mobile-nav details > summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.mobile-nav details[open] > summary::after { transform: rotate(225deg); }
.mobile-nav details > summary:hover,
.mobile-nav details > summary.is-active { color: var(--color-gold-light); }
.mobile-nav .mobile-submenu { display: flex; flex-direction: column; padding-bottom: var(--space-2); }
.mobile-nav .mobile-submenu a { border-bottom: none; padding-block: 0.6em; padding-left: var(--space-3); font-size: 0.9rem; }

/* ---------- Hero ---------- */
/* Centred "spotlight" hero. Pulled up by the header height so the glow and the
   dotted surface run behind the floating pill, the way the reference layers its
   nav over the background wash. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(94vh, 940px);
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-6);
  text-align: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(201,161,90,0.16), rgba(201,161,90,0) 70%);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, rgba(232,207,151,0.08), rgba(232,207,151,0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Animated glowy-waves canvas — sits behind the hero content. */
.hero-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-waves canvas { display: block; }

.hero-content {
  max-width: 1040px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Soft light bars raking across the top-left, recreated in CSS from the
   reference's blurred SVG rects — rotated, heavily blurred, and ramped from
   brand gold to transparent instead of the reference's blue. */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__glow::before,
.hero__glow::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  transform: rotate(-31deg);
  filter: blur(56px);
}
.hero__glow::before {
  top: -9rem;
  left: -3rem;
  width: 5.5rem;
  height: 36rem;
  opacity: 0.85;
  background: linear-gradient(to bottom, rgba(214, 172, 96, 0.95), rgba(201, 161, 90, 0));
}
.hero__glow::after {
  top: -12rem;
  left: 7rem;
  width: 3.6rem;
  height: 34rem;
  opacity: 0.6;
  background: linear-gradient(to bottom, rgba(240, 219, 170, 0.75), rgba(232, 207, 151, 0));
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--color-cream);
  max-width: 16ch;
}
.hero-title .accent { color: var(--color-gold-light); }

.hero-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  color: var(--color-cream-dim);
  max-width: 48ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-2);
}

/* Hero buttons, in the reference component's shape: full pill, larger label,
   wide 0.2em tracking. Solid variant is white rather than the site's gold. */
.btn-hero {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding: 1.05em 2.1em;
}

.btn-hero--solid {
  background: #f6f3ec;
  border-color: #f6f3ec;
  color: #16130d;
  box-shadow:
    0 12px 34px -14px rgba(255, 255, 255, 0.3),
    0 2px 8px -2px rgba(0, 0, 0, 0.6);
}
.btn-hero--solid:hover,
.btn-hero--solid:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 18px 44px -16px rgba(255, 255, 255, 0.42),
    0 3px 10px -3px rgba(0, 0, 0, 0.65);
}
.btn-hero--solid:active { transform: translateY(0); }

.btn-hero--outline {
  background: rgba(18, 15, 11, 0.5);
  border-color: rgba(245, 240, 232, 0.22);
  color: rgba(245, 240, 232, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-hero--outline:hover,
.btn-hero--outline:focus-visible {
  background: rgba(32, 26, 18, 0.6);
  border-color: rgba(245, 240, 232, 0.45);
  color: #ffffff;
  transform: translateY(-2px);
}
.btn-hero--outline:active { transform: translateY(0); }

/* ---------- Hero landing sequence ---------- */
/* Staggered blur-and-rise, one step per element — the vanilla equivalent of the
   reference's <TimelineAnimation animationNum={n}>. Steps are declared with
   data-hero-step so the order is readable in the markup. */
.js-anim [data-hero-step] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(9px);
}

.hero-in [data-hero-step] {
  animation: hero-step 0.85s var(--ease-out) both;
  will-change: transform, opacity;
}
.hero-in [data-hero-step='1'] { animation-delay: 0.05s; }
.hero-in [data-hero-step='2'] { animation-delay: 0.17s; }
.hero-in [data-hero-step='3'] { animation-delay: 0.29s; }
.hero-in [data-hero-step='4'] { animation-delay: 0.41s; }
.hero-in [data-hero-step='5'] { animation-delay: 0.5s; }

@keyframes hero-step {
  from { opacity: 0; transform: translateY(26px); filter: blur(9px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Still used by the industries hero. */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-hero-step] { opacity: 1; transform: none; filter: none; }
  .hero-in [data-hero-step] { animation: none; }
}

/* ---------- Page header (interior pages) ---------- */
.page-hero {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
  position: relative;
}

.page-hero .display-2 { margin-top: var(--space-2); max-width: 20ch; }

/* ---------- Cards ---------- */
.card {
  display: block;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.card::before {
  content: '';
  position: absolute;
  top: -35%;
  right: -20%;
  width: 65%;
  height: 65%;
  background: radial-gradient(circle, rgba(201,161,90,0.22), rgba(201,161,90,0) 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out);
}
.card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: var(--color-gold-line);
  box-shadow: 0 32px 76px -28px rgba(0,0,0,0.75), 0 10px 30px -12px rgba(201,161,90,0.22);
}
.card:hover::before { opacity: 1; }

.card-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  transition: color 0.35s var(--ease-out);
}
.card:hover .card-index { color: var(--color-gold-light); }

.card h3 {
  font-size: 1.3rem;
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

.card p { color: var(--color-cream-dim); font-size: 0.95rem; }

.card--gold {
  background: linear-gradient(155deg, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dark));
  color: #16130d;
  border-color: transparent;
}
.card--gold::before { display: none; }
.card--gold:hover {
  border-color: transparent;
  box-shadow: 0 32px 76px -28px rgba(0,0,0,0.5), 0 10px 26px -10px rgba(0,0,0,0.32);
}
.card--gold .card-index, .card--gold h3 { color: #16130d; }
.card--gold:hover .card-index { color: #16130d; }
.card--gold p { color: rgba(22,19,13,0.72); }

/* ---------- Service detail pages ---------- */
.service-hero-media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  aspect-ratio: 16 / 9;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
@media (min-width: 800px) {
  .service-hero-media { aspect-ratio: 21 / 9; }
}
.service-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1) brightness(1.02);
}
/* Brand colour treatment + legibility scrim, matching the service cards. */
.service-hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(to bottom, rgba(201, 161, 90, 0.16), rgba(138, 107, 52, 0.05) 55%, rgba(0, 0, 0, 0) 100%);
}
.service-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
}

.service-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .service-split { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
  .service-split > aside { position: sticky; top: 120px; align-self: start; }
}
.service-split .prose p { color: var(--color-cream-dim); margin-bottom: var(--space-2); max-width: 62ch; }
.service-split .prose p:last-child { margin-bottom: 0; }

.capability-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .capability-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }
}
.capability-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  padding-block: 0.8em;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-cream-dim);
  font-size: 0.95rem;
}
.capability-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-gold);
  transform: translateY(-1px);
}

.usecase-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
}
.usecase-row:last-child { border-bottom: 1px solid var(--color-line); }
.usecase-row h3 { font-size: 1.15rem; }
.usecase-row p { color: var(--color-cream-dim); font-size: 0.95rem; max-width: 58ch; margin-top: 0.35em; }

/* Prev / next pager between service pages */
.service-pager {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 700px) { .service-pager { grid-template-columns: 1fr 1fr; } }
.service-pager a {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-bg-elevated);
  transition: border-color 0.3s var(--ease-out), transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.service-pager a:hover {
  border-color: var(--color-gold-line);
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.7), 0 8px 22px -12px rgba(201, 161, 90, 0.18);
}
.service-pager a.pager-next { text-align: right; align-items: flex-end; }
.service-pager .pager-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.service-pager .pager-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  transition: color 0.3s var(--ease-out);
}
.service-pager a:hover .pager-title { color: var(--color-gold-light); }

/* ---------- Services carousel ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
.section-head__text { max-width: 38rem; }
.section-head__text .lede { max-width: 100%; }

.carousel-arrows { display: none; gap: var(--space-1); flex-shrink: 0; }
@media (min-width: 700px) { .carousel-arrows { display: flex; } }

.carousel-arrow {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-cream);
  cursor: pointer;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out), transform 0.35s var(--ease-spring),
    opacity 0.25s var(--ease-out);
}
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold-line);
  background: rgba(201, 161, 90, 0.08);
}
.carousel-arrow:active { transform: scale(0.94); }
.carousel-arrow:disabled { opacity: 0.32; cursor: default; pointer-events: none; }

.services-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleed to the right so the next card peeks past the container edge. */
  margin-right: calc(-1 * var(--edge));
}
.services-carousel__viewport::-webkit-scrollbar { display: none; }

.services-carousel__track {
  position: relative;
  display: flex;
  gap: var(--space-3);
  /* Vertical room so the hover lift + shadow are not clipped by overflow. */
  padding: 14px 0 42px;
  padding-right: var(--edge);
}

.service-slide {
  flex: 0 0 auto;
  width: clamp(256px, 76vw, 344px);
  scroll-snap-align: start;
}

.service-card {
  position: relative;
  display: block;
  height: 27rem;
  border-radius: 18px;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  transition: transform 0.5s var(--ease-spring), box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}
.service-card__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.98) brightness(1.06);
  transition: transform 0.6s var(--ease-out), filter 0.45s var(--ease-out);
}
/* Gold colour treatment (multiply) — warms the image toward the brand palette.
   Multiply can only darken, so this stays light; the warmth comes from the hue,
   not from the density. */
.service-card__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(
    to bottom,
    rgba(201, 161, 90, 0.08),
    rgba(138, 107, 52, 0.02) 52%,
    rgba(0, 0, 0, 0) 100%
  );
}
/* Dark scrim for text legibility. The copy block occupies roughly the bottom
   45% of the card, so the scrim stays dense to ~55% — the cards run over bright
   photos as well as dark ones — then clears fast to keep the image open above. */
.service-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.88) 32%,
    rgba(0, 0, 0, 0.62) 55%,
    rgba(0, 0, 0, 0.18) 78%,
    rgba(0, 0, 0, 0) 100%
  );
}
.service-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3) var(--space-3) var(--space-4);
}
.service-card__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-gold-light);
  margin-bottom: var(--space-1);
}
.service-card__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-cream);
}
.service-card__desc {
  margin-top: var(--space-1);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-cream-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.service-card__cta svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-out); }

/* Hover / focus states */
.service-card:hover, .service-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--color-gold-line);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.8),
    0 12px 32px -14px rgba(201, 161, 90, 0.3);
}
.service-card:hover .service-card__img { transform: scale(1.06); filter: saturate(1.05) brightness(1.12); }
.service-card:hover .service-card__cta svg { transform: translateX(4px); }

.services-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: var(--space-2);
}
.services-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(201, 161, 90, 0.25);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-spring);
}
.services-carousel__dot:hover { background: rgba(201, 161, 90, 0.5); }
.services-carousel__dot.is-active { background: var(--color-gold); transform: scale(1.35); }

@media (max-width: 700px) {
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Service grid (promo cards) ----------
   Image on top, a solid dark content panel below carrying the title, description
   and a gold "Explore" link pinned to the base of every card. Replaces the
   overlay carousel: larger cards, all six services visible at once. */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 620px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The photo is the card surface: it fills the whole tile and the type is overlaid
   on it, so the grid carries its own colour and never reads as flat panels. */
.svc-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  /* Square corners: the hard edge is what gives the tiles their sharpness. */
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.5s var(--ease-spring), box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}
.svc-card:hover, .svc-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--color-gold-line);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.85),
    0 12px 32px -14px rgba(201, 161, 90, 0.3);
}

/* --- Media: fills the entire card --- */
.svc-card__media { position: absolute; inset: 0; z-index: 0; }
.svc-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Contrast is the lever that reads as "sharper" — CSS has no unsharp mask —
     with brightness and saturation lifting the photo out of the scrim. */
  filter: saturate(1.12) contrast(1.08) brightness(1.14);
  transition: transform 0.7s var(--ease-out), filter 0.45s var(--ease-out);
}
.svc-card:hover .svc-card__img {
  transform: scale(1.06);
  filter: saturate(1.2) contrast(1.12) brightness(1.2);
}
/* Landscape sources whose subject sits right of centre would lose it to the
   portrait crop's default 50% centring. */
.svc-card__img--focus-right { object-position: 80% center; }
/* Gold colour treatment (multiply) toward the brand palette. */
.svc-card__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(to bottom, rgba(201, 161, 90, 0.1), rgba(138, 107, 52, 0.03) 50%, rgba(0, 0, 0, 0) 100%);
}
/* Legibility scrim: dense at the crown where the type sits, clearing through the
   middle so the photo stays open, then lifting again at the base for the CTA.
   The cards run over bright photos as well as dark ones, so the top stays heavy. */
.svc-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.7) 30%,
    rgba(0, 0, 0, 0.26) 56%,
    rgba(0, 0, 0, 0.04) 76%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

/* --- Body: overlaid on the photo, type at the crown, CTA at the base --- */
.svc-card__body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3);
}
.svc-card__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.svc-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.5vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  /* Pure white rather than the site's cream: on photography the colder white
     reads as a harder, sharper edge. */
  color: #ffffff;
  margin-top: var(--space-2);
  text-wrap: balance;
  transition: color 0.35s var(--ease-out);
}
.svc-card:hover .svc-card__title { color: var(--color-gold-light); }
.svc-card__desc {
  margin-top: var(--space-2);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* margin-top:auto drops the CTA to the base, leaving the photo open between it
   and the type block above. */
.svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.svc-card__cta svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.25s var(--ease-out);
}
.svc-card:hover .svc-card__cta svg { transform: translateX(4px); }

/* Light column stagger as the cards scroll into view. */
.svc-card:nth-child(3n + 2) { transition-delay: 0.07s; }
.svc-card:nth-child(3n + 3) { transition-delay: 0.14s; }

/* ---------- Chips / tags ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  padding: 0.65em 1.1em;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  color: var(--color-cream-dim);
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.chip:hover { border-color: var(--color-gold); color: var(--color-gold-light); }

/* ---------- CDM Loop (signature element) ---------- */
.cdm-loop {
  display: grid;
  place-items: center;
  padding-block: var(--space-5);
}

.cdm-loop-diagram {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
}

/* Ambient glow so the diagram lifts off the flat background. */
.cdm-loop-diagram::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 161, 90, 0.24), rgba(201, 161, 90, 0.06) 46%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

/* Outer track — the dashed orbit the spark travels. Brightened and given a soft
   halo so the diagram's outer edge is clearly defined against the band. */
.cdm-loop-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(201, 161, 90, 0.7);
  box-shadow: 0 0 70px -24px rgba(201, 161, 90, 0.4);
  animation: cdm-spin 90s linear infinite;
}
/* Inner ring — the loop the three phases sit on. This is the primary outline, so
   it carries a solid gold stroke and a gentle inner/outer bloom instead of the
   near-invisible hairline it used to be. */
.cdm-loop-ring::before {
  content: '';
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 161, 90, 0.55);
  box-shadow:
    0 0 44px -14px rgba(201, 161, 90, 0.5),
    inset 0 0 60px -26px rgba(201, 161, 90, 0.4);
}

/* A spark that endlessly traces the loop — the "loops back" idea, in motion. */
.cdm-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: cdm-spin 15s linear infinite;
}
.cdm-orbit::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--color-gold-light);
  box-shadow: 0 0 14px 3px rgba(232, 207, 151, 0.55);
}

/* Center hub. */
.cdm-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(201, 161, 90, 0.18), transparent 68%);
  pointer-events: none;
}
.cdm-core::before {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(201, 161, 90, 0.55);
  box-shadow: 0 0 30px -10px rgba(201, 161, 90, 0.45);
  animation: cdm-pulse 3.6s var(--ease-out) infinite;
}
.cdm-core__label {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--color-gold);
  opacity: 0.85;
}

.cdm-node {
  position: absolute;
  width: 32%;
  text-align: center;
  transform: translate(-50%, -50%);
  isolation: isolate;
  outline: none;
  will-change: transform;
  transition: transform 0.45s var(--ease-out), opacity 0.4s var(--ease-out);
}
.cdm-node > * { position: relative; z-index: 1; }
.cdm-node::before {
  content: '';
  position: absolute;
  inset: -16% -14%;
  z-index: 0;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 42%, rgba(201, 161, 90, 0.2), transparent 66%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}

.cdm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75em;
  border-radius: 50%;
  border: 1px solid var(--color-gold-line);
  background: rgba(201, 161, 90, 0.06);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-gold-light);
  transition: transform 0.45s var(--ease-spring), background-color 0.4s var(--ease-out),
    color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.cdm-node .card-index { display: block; margin-bottom: 0.3em; color: var(--color-gold); }
.cdm-node h3 { font-size: 1.15rem; margin: 0 0 0.35em; transition: color 0.4s var(--ease-out); }
.cdm-node p { font-size: 0.82rem; color: var(--color-cream-dim); }

.cdm-node--consult { top: 13%; left: 50%; }
.cdm-node--deploy { top: 70%; left: 13%; }
.cdm-node--manage { top: 70%; left: 87%; }
@media (max-width: 640px) {
  .cdm-node { width: 40%; }
}

/* Focus one phase, recede the rest. Works on hover and keyboard focus. */
.cdm-loop-diagram:hover .cdm-node,
.cdm-loop-diagram:focus-within .cdm-node { opacity: 0.4; }
.cdm-loop-diagram .cdm-node:hover,
.cdm-loop-diagram .cdm-node:focus-visible,
.cdm-loop-diagram .cdm-node:focus-within {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
}
.cdm-node:hover::before,
.cdm-node:focus-within::before { opacity: 1; }
.cdm-node:hover .cdm-badge,
.cdm-node:focus-within .cdm-badge {
  transform: translateY(-2px) scale(1.1);
  background: linear-gradient(155deg, var(--color-gold-light), var(--color-gold) 60%, var(--color-gold-dark));
  color: #16130d;
  border-color: transparent;
  box-shadow: 0 12px 28px -8px rgba(201, 161, 90, 0.55);
}
.cdm-node:hover h3,
.cdm-node:focus-within h3 { color: var(--color-gold-light); }

@keyframes cdm-spin { to { transform: rotate(360deg); } }
@keyframes cdm-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.16); opacity: 0.9; }
}

/* ---------- Quote / testimonial ---------- */
.quote-block {
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-3);
}
.quote-block p {
  font-family: var(--font-body);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--color-cream);
  line-height: 1.4;
}
.quote-block cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* ---------- Streaming text reveal (js/animated-text.js) ---------- */
/* Held hidden until the script has split the copy into parts, so the full text
   never flashes before the reveal starts. visibility (not display) keeps the
   element's box, so it reserves its final height and nothing below it shifts.
   Without JS the .js-anim guard is absent and the text is simply visible. */
.js-anim [data-animate-text] { visibility: hidden; }
.js-anim [data-animate-text].at-ready { visibility: visible; }

.at-part {
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
}
.at-part.is-shown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .at-part { opacity: 1; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(120deg, var(--color-bg-floating), var(--color-bg-elevated));
  border: 1px solid var(--color-gold-line);
  border-radius: 24px;
  padding: var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,161,90,0.18), transparent 60%);
  pointer-events: none;
}
.cta-band .actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  position: relative;
}
.cta-band h2 { position: relative; margin-inline: auto; max-width: 20ch; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-6);
}

.footer-wordmark {
  position: relative;
  height: clamp(110px, 18vw, 220px);
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 0;
  opacity: 0.6;
}
.footer-wordmark span {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(5rem, 16vw, 13rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--color-gold-line);
  white-space: nowrap;
  letter-spacing: -0.02em;
  animation: drift 32s linear infinite;
}
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.footer-main {
  padding-block: var(--space-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}
@media (min-width: 780px) {
  .footer-main { grid-template-columns: 1.4fr repeat(3, 1fr); }
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 400;
  margin-bottom: var(--space-3);
}
.footer-col a, .footer-col p {
  display: block;
  color: var(--color-cream-soft);
  font-size: 0.975rem;
  line-height: 1.5;
  margin-bottom: 0.85em;
  transition: color 0.25s var(--ease-out);
}
.footer-col a { width: fit-content; }
.footer-col a:hover { color: var(--color-gold-light); }

/* Brand tagline in the Jcorbs titling face — the one place the sci-fi wordmark
   voice from endlosev.com carries over. */
.footer-tagline {
  font-family: var(--font-brand);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--color-gold-light);
  margin-bottom: 0.9em;
  max-width: 22ch;
}

.footer-bottom {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-cream-dim);
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 700px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.field input, .field textarea, .field select {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  padding: 0.85em 1em;
  color: var(--color-cream);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-line-strong); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 90, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}
.contact-detail:first-child { padding-top: 0; }
.contact-detail h4 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 400;
}
.contact-detail p, .contact-detail a { color: var(--color-cream); font-size: 1rem; }

/* =========================================================
   About page — editorial recomposition
   Motif: signal traces. Orthogonal gold paths routing out of a
   core node, reused at three scales: hero figure, process rail,
   differentiator glyphs.
   ========================================================= */

/* --- Shared section frame: hairline rule + sticky label gutter --- */
.editorial-section {
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-line);
  position: relative;
  z-index: 1;
}
.editorial-section > .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 900px) {
  .editorial-section > .container {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-5);
  }
  .editorial-section__label {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    align-self: start;
  }
}
/* Full-width variant: the label sits above instead of in a gutter, so large
   display type gets the whole measure. */
@media (min-width: 900px) {
  .editorial-section--wide > .container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .editorial-section--wide .editorial-section__label { position: static; }
}

.editorial-section__label {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.editorial-section__label::before {
  content: '';
  width: 1.4em;
  height: 1px;
  background: var(--color-gold);
  flex-shrink: 0;
}
/* Section statement — shared with the industries sector board. */
.editorial-statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--color-cream);
  text-wrap: balance;
}
.editorial-statement strong {
  font-weight: 500;
  color: var(--color-gold-light);
}

/* =========================================================
   ABOUT PAGE
   Signature device: a single continuous gold thread running the
   length of the page. The company's whole pitch is "we stay past
   the handover" — one accountable line from advisory to daily
   operations — so the page is built as one unbroken run rather
   than a stack of separate cards. Every section hangs off that
   thread at a numbered node, and the thread deliberately does not
   terminate: it fades onward past the final step.
   Dark ground throughout, consistent with the rest of the site.
   ========================================================= */

.about-page {
  --ab-rail: 13rem;          /* gutter reserved for the thread + marker */
  --ab-node: 11px;
}

/* --- Shared section shell ------------------------------------ */
.ab-sec {
  position: relative;
  padding-block: clamp(3.25rem, 6.5vw, 5.75rem);
}
.ab-sec > .container { position: relative; }

/* Numbered marker that pins each section to the thread. */
.ab-marker {
  display: flex;
  align-items: baseline;
  gap: 0.85em;
  margin-bottom: var(--space-4);
}
.ab-marker__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-gold);
  opacity: 0.75;
}
.ab-marker__label {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* --- The thread ---------------------------------------------- */
/* Desktop only: below the rail breakpoint the markers simply sit
   inline and the line would have nothing to align to. */
@media (min-width: 1080px) {
  .ab-flow { position: relative; }

  /* The line itself. Fades in from the hero and out past the end,
     so it reads as continuing rather than starting/stopping. */
  .ab-flow::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((100vw - min(var(--container-w), 100vw - var(--edge) * 2)) / 2 + var(--edge));
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--color-gold-line) 6%,
      var(--color-gold-line) 88%,
      transparent
    );
    pointer-events: none;
  }

  .ab-sec > .container { padding-left: var(--ab-rail); }

  /* Marker moves out into the rail and sits on the line. */
  .ab-marker {
    position: absolute;
    left: 0;
    top: 0.35em;
    width: calc(var(--ab-rail) - var(--space-4));
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    margin-bottom: 0;
    padding-left: 1.75rem;
  }
  .ab-marker::before {
    content: '';
    position: absolute;
    left: calc(var(--ab-node) / -2);
    top: 0.45em;
    width: var(--ab-node);
    height: var(--ab-node);
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 0 5px var(--color-bg), 0 0 18px -2px rgba(201, 161, 90, 0.5);
  }
  .ab-marker__label { line-height: 1.3; }
}

/* --- 1. Hero -------------------------------------------------- */
.ab-hero {
  position: relative;
  overflow: hidden;
  min-height: min(88vh, 900px);
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--space-5);
}
.ab-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 30%, rgba(201, 161, 90, 0.15), transparent 70%),
    radial-gradient(45% 40% at 85% 70%, rgba(232, 207, 151, 0.07), transparent 70%);
}
.ab-hero > .container {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 900px) {
  .ab-hero > .container { grid-template-columns: 1.15fr 0.85fr; }
  /* Meta rail spans the full width beneath both columns. */
  .ab-hero__meta { grid-column: 1 / -1; }
}

.ab-hero__title {
  font-size: clamp(2.9rem, 7vw, 5.75rem);
  margin-top: var(--space-3);
  max-width: 13ch;
}
.ab-hero__title em {
  font-style: normal;
  color: var(--color-gold-light);
}
.ab-hero__intro {
  margin-top: var(--space-3);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-cream-dim);
  max-width: 52ch;
}

/* Meta rail pinned to the foot of the hero. */
.ab-hero__meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.ab-hero__meta span { display: inline-flex; align-items: center; gap: 0.6em; }
.ab-hero__meta span::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* Signal-trace figure: eight routes leaving one core. */
.ab-figure { position: relative; aspect-ratio: 1; max-width: 460px; margin-inline: auto; width: 100%; }
.ab-figure svg { width: 100%; height: 100%; overflow: visible; }
.trace-grid { fill: rgba(201, 161, 90, 0.16); }
.trace-path {
  fill: none;
  stroke: var(--color-gold-line);
  stroke-width: 1;
}
.trace-node { fill: var(--color-bg); stroke: var(--color-gold); stroke-width: 1; }
.trace-node--filled { fill: var(--color-gold); stroke: none; }
.trace-core {
  fill: var(--color-bg-elevated);
  stroke: var(--color-gold);
  stroke-width: 1;
}
.trace-core-label {
  fill: var(--color-gold-light);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
}
.trace-pulse {
  fill: none;
  stroke: var(--color-gold-light);
  stroke-width: 1.5;
  stroke-dasharray: 26 300;
  animation: trace-run 7s linear infinite;
}
.trace-pulse--b { animation-duration: 9s; animation-delay: -3s; }
@keyframes trace-run { to { stroke-dashoffset: -326; } }
@media (prefers-reduced-motion: reduce) {
  .trace-pulse { animation: none; opacity: 0.5; }
}

/* --- 2. Perspective ------------------------------------------ */
.ab-statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--color-cream);
  max-width: 20ch;
  text-wrap: balance;
}
.ab-statement strong {
  font-weight: 500;
  color: var(--color-gold-light);
}

.ab-split {
  display: grid;
  gap: var(--space-4) var(--space-6);
}
@media (min-width: 900px) {
  .ab-split { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.ab-prose p {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-cream-soft);
  max-width: 58ch;
}
.ab-prose p + p { margin-top: var(--space-3); }

/* --- 3. In practice (photographic moment) --------------------- */
.ab-showcase {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 900px) {
  .ab-showcase { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.ab-showcase__media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  aspect-ratio: 4 / 3;
}
.ab-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.7s var(--ease-out);
}
.ab-showcase__media:hover img { transform: scale(1.05); }
/* Gradient scrim + warm multiply layer, so photography sits in the
   palette instead of punching a bright hole in the dark page. */
.ab-showcase__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 6, 4, 0.75), rgba(8, 6, 4, 0.05) 60%),
    linear-gradient(120deg, rgba(201, 161, 90, 0.16), transparent 60%);
}
.ab-showcase__lead {
  margin-top: var(--space-3);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-cream-soft);
  max-width: 52ch;
}
.ab-points {
  list-style: none;
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.ab-points li {
  position: relative;
  padding-left: 1.6em;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-cream-dim);
}
.ab-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
}

/* --- 4. Direction: vision + mission --------------------------- */
/* Deliberately unequal: the vision is the loud one, the mission is
   the quiet operational counterweight. Matching cards would say
   they carry the same weight — they don't. */
.ab-direction { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .ab-direction { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
}
.ab-vision,
.ab-mission {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: 20px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
}
.ab-vision {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(201, 161, 90, 0.14), transparent 60%),
    var(--color-bg-elevated);
  border-color: var(--color-gold-line);
}
.ab-vision__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.7vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -0.03em;
  color: var(--color-cream);
  margin-top: var(--space-2);
  text-wrap: balance;
}
.ab-mission { background: var(--color-bg-elevated); }
.ab-mission p {
  margin-top: var(--space-2);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-cream-soft);
}

/* --- 5. Values ------------------------------------------------ */
.ab-values {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.ab-value {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  background: var(--color-bg-elevated);
  transition: transform 0.35s var(--ease-spring), border-color 0.3s var(--ease-out);
}
/* Name sits at the foot of the card, so the five read as one baseline row
   even when a label wraps to two lines. */
.ab-value__name { margin-top: auto; }
.ab-value:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold-line);
}
.ab-value__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--color-gold);
  background: rgba(201, 161, 90, 0.08);
  border: 1px solid var(--color-gold-line);
  margin-bottom: var(--space-3);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.ab-value:hover .ab-value__glyph {
  color: var(--color-gold-light);
  background: rgba(201, 161, 90, 0.14);
}
.ab-value__glyph svg { width: 24px; height: 24px; }
.ab-value__name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-cream);
}

/* --- 6. Process ----------------------------------------------- */
/* The thread's climax. Five steps on one rule that does not stop at
   the last node — it fades onward, which is the literal claim in
   the hero headline. */
.ab-process { position: relative; }
.ab-track {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  position: relative;
}
@media (min-width: 860px) {
  .ab-track {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
  }
  /* The run-on rule behind the nodes. */
  .ab-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: calc(-1 * var(--space-5));
    top: 23px;
    height: 1px;
    background: linear-gradient(
      to right,
      var(--color-gold-line) 0%,
      var(--color-gold-line) 82%,
      transparent 100%
    );
  }
}
.ab-step { position: relative; }
.ab-step__node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--color-gold);
  background: var(--color-bg);
  border: 1px solid var(--color-gold-line);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
    transform 0.35s var(--ease-spring);
}
.ab-step:hover .ab-step__node {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
  transform: translateY(-3px);
}
.ab-step__node svg { width: 20px; height: 20px; }
.ab-step__index {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-gold);
  opacity: 0.7;
}
.ab-step h3 {
  margin-top: 0.35em;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
/* Reads as the thread continuing past the engagement, not a caption. */
.ab-process__onward {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.ab-process__onward span { color: var(--color-gold); }

/* --- 7. Why us ------------------------------------------------ */
.ab-diffs {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 860px) {
  .ab-diffs { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.ab-diff {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-gold-line);
}
.ab-diff__glyph { color: var(--color-gold); display: block; margin-bottom: var(--space-3); }
.ab-diff__glyph svg { width: 32px; height: 32px; }
.ab-diff h3 {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
}
.ab-diff p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-cream-soft);
}

/* --- 7. Closing statement, run straight into the footer --- */
.page-closing {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--color-line);
  position: relative;
  z-index: 1;
  background:
    radial-gradient(80% 120% at 50% 100%, rgba(201, 161, 90, 0.12), transparent 65%);
}
.page-closing__text {
  font-size: clamp(2.25rem, 5.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 16ch;
  text-wrap: balance;
}
.page-closing__text em {
  font-style: normal;
  color: var(--color-gold-light);
}
.page-closing .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
/* The footer picks the page up from here — no gap, no seam. */
.flush-footer .site-footer { border-top: none; padding-top: 0; }
/* =========================================================
   Industries page
   Signature: the sector board. Eleven sectors set as large display
   type; engaging one recedes the rest and brings up an oversized
   ghost numeral. Gold is spent only on the row you are reading.
   ========================================================= */

/* --- Hero: light dome behind a stepped skyline ---------------------------
   Ported from the React/Tailwind reference: layered elliptical dome, arc grid,
   centre beam, and a symmetric pillar silhouette that rises from the centre out
   on load. Retinted from the reference's red→violet to the endlosEV palette.
   Layer order: dome(1) → vignette(2) → grid(3) → beam(4) → skyline(5) → copy(6).
   ------------------------------------------------------------------------- */
.industries-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(80vh, 800px);
  display: flex;
  align-items: center;
  /* Sits darker than the page so the dome has something to bloom against. */
  background-color: #0b0906;
}
/* Only position/pointer-events here. Do NOT set `inset` on this selector: it is
   a class+attribute compound (0,2,0) and would outrank the single-class rules
   below (0,1,0), pinning the beam and skyline to the wrong corner. */
.industries-hero > [aria-hidden] { position: absolute; pointer-events: none; }
.industries-hero__dome,
.industries-hero__vignette,
.industries-hero__grid { inset: 0; }

/* The dome. Warm gold core sitting low, so the skyline silhouettes against it. */
.industries-hero__dome {
  z-index: 1;
  background-image:
    radial-gradient(74% 52% at 50% 72%,
      rgba(250, 236, 205, 0.70) 0%,
      rgba(232, 207, 151, 0.52) 18%,
      rgba(201, 161, 90, 0.42) 34%,
      rgba(112, 82, 44, 0.32) 50%,
      rgba(40, 31, 20, 0.30) 66%,
      rgba(11, 9, 6, 0) 84%),
    radial-gradient(80% 55% at 12% 4%,
      rgba(232, 207, 151, 0.24) 0%,
      rgba(201, 161, 90, 0.14) 32%,
      rgba(40, 30, 18, 0) 62%),
    /* Cool rim, kept desaturated — depth, not neon. */
    radial-gradient(66% 48% at 88% 14%,
      rgba(138, 150, 178, 0.16) 0%,
      rgba(16, 16, 20, 0) 55%);
}

/* Darkens the upper half so the headline never sits on the bright band. */
.industries-hero__vignette {
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(11, 9, 6, 0.82) 0%, rgba(11, 9, 6, 0.35) 45%, rgba(11, 9, 6, 0) 70%),
    radial-gradient(140% 120% at 50% 0%, transparent 55%, rgba(0, 0, 0, 0.8));
}

/* Vertical rules plus concentric arcs that follow the dome's curvature.
   No blend mode — screen blending against the fixed body gradient produced
   artefacts, and plain low-alpha lines read the same. */
.industries-hero__grid {
  z-index: 3;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(243, 239, 228, 0.055) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(243, 239, 228, 0.028) 0 1px, transparent 1px 24px),
    repeating-radial-gradient(74% 52% at 50% 72%, rgba(243, 239, 228, 0.05) 0 1px, transparent 1px 110px);
}

/* The shaft of light the skyline parts around. */
.industries-hero__beam {
  z-index: 4;
  inset: auto auto 8vh 50%;
  width: 9rem;
  height: 15rem;
  transform: translateX(-50%);
  border-radius: 50% 50% 12px 12px;
  background: linear-gradient(to bottom,
    rgba(250, 243, 228, 0.55),
    rgba(232, 207, 151, 0.34) 42%,
    rgba(201, 161, 90, 0.10) 74%,
    rgba(201, 161, 90, 0) 100%);
  /* Heavy blur so it reads as light escaping the notch, not a lit rectangle. */
  filter: blur(26px);
  animation: hero-beam-pulse 6s ease-in-out infinite;
}
@keyframes hero-beam-pulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}

/* --- Hero copy ----------------------------------------------------------- */
.industries-hero__content {
  z-index: 6;
  text-align: center;
  padding-block: var(--space-5);
  margin-inline: auto;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--color-gold-line);
  background: rgba(201, 161, 90, 0.07);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.hero-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

.industries-hero__title {
  margin-top: var(--space-3);
  font-size: clamp(2.5rem, 6.4vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 17ch;
  margin-inline: auto;
  text-wrap: balance;
}
.industries-hero__title em { font-style: normal; color: var(--color-gold-light); }

.industries-hero__intro {
  margin: var(--space-3) auto 0;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--color-cream-soft);
  max-width: 58ch;
  text-wrap: balance;
}

.industries-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Sector strip — the reference's logo row, doing real work: it previews the index. */
.hero-sectors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6em 1.6em;
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.hero-sectors span { transition: color 0.3s var(--ease-out); }
.hero-sectors span:hover { color: var(--color-gold-light); }

/* Staggered load. Guarded by .js-anim so copy is never stranded invisible. */
.js-anim .hero-anim { opacity: 0; }
.industries-hero.is-mounted .hero-anim { animation: hero-fade-up 0.8s var(--ease-out) both; }

@media (max-width: 780px) {
  .industries-hero { min-height: auto; }
  .industries-hero__content { padding-block: var(--space-6); }
  .industries-hero__beam { bottom: 16vh; width: 5rem; height: 7rem; }
}

/* =========================================================
   The sector board — the signature element
   ========================================================= */
.sector-index {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-4);
}

.sector {
  position: relative;
  border-bottom: 1px solid var(--color-line);
  transition: opacity 0.45s var(--ease-out);
}

/* Focus one sector, recede the others — the same interaction language as the
   CDM loop on the home page, so the site reads as one system. */
@media (hover: hover) {
  .sector-index:hover .sector,
  .sector-index:focus-within .sector { opacity: 0.32; }
  .sector-index .sector:hover,
  .sector-index .sector:focus-within,
  .sector-index .sector[open] { opacity: 1; }
}

/* Gold hairline that draws across the row on engagement. */
.sector::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), rgba(201, 161, 90, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.sector:hover::after,
.sector:focus-within::after,
.sector[open]::after { transform: scaleX(1); }

.sector > summary {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
  position: relative;
  z-index: 1;
}
.sector > summary::-webkit-details-marker { display: none; }
@media (min-width: 900px) {
  .sector > summary {
    grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 38ch) auto;
    gap: var(--space-5);
    padding-block: var(--space-4);
  }
}

.sector__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  transition: color 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.sector:hover .sector__num,
.sector:focus-within .sector__num,
.sector[open] .sector__num { color: var(--color-gold); }

/* Where the oversized numeral is shown, the small one hands off to it. */
@media (min-width: 1100px) {
  .sector:hover .sector__num,
  .sector:focus-within .sector__num,
  .sector[open] .sector__num { opacity: 0; }
}

/* Big display type is what makes this read as an index, not a table. */
.sector__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--color-cream);
  text-wrap: balance;
  transition: color 0.4s var(--ease-out), transform 0.6s var(--ease-out);
}
@media (min-width: 900px) {
  .sector:hover .sector__name,
  .sector:focus-within .sector__name,
  .sector[open] .sector__name { transform: translateX(14px); }
}
.sector:hover .sector__name,
.sector:focus-within .sector__name,
.sector[open] .sector__name { color: var(--color-gold-light); }

.sector__context {
  font-size: 0.975rem;
  line-height: 1.6;
  color: var(--color-cream-dim);
  grid-column: 2 / -1;
  transition: color 0.4s var(--ease-out);
}
@media (min-width: 900px) {
  .sector__context { grid-column: auto; }
}
.sector:hover .sector__context,
.sector:focus-within .sector__context,
.sector[open] .sector__context { color: var(--color-cream-soft); }

/* Oversized outlined numeral, bleeding into the label gutter. Appears only on
   engagement, so a resting page stays quiet. */
.sector__ghost {
  position: absolute;
  left: calc(-1 * var(--space-5));
  top: 50%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-gold-line);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-24px);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
.sector:hover .sector__ghost,
.sector:focus-within .sector__ghost,
.sector[open] .sector__ghost {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
@media (max-width: 1099px) {
  .sector__ghost { display: none; }
}

/* Plus / minus affordance, drawn in CSS so it needs no icon font. */
.sector__toggle {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  justify-self: end;
  grid-row: 1;
  grid-column: -1;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-gold);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out),
    transform 0.5s var(--ease-spring);
}
.sector__toggle::before,
.sector__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
.sector__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.sector:hover .sector__toggle,
.sector:focus-within .sector__toggle {
  border-color: var(--color-gold-line);
  background: rgba(201, 161, 90, 0.08);
}
.sector[open] .sector__toggle {
  background: var(--color-gold);
  border-color: transparent;
  color: #16130d;
  transform: rotate(180deg);
}
.sector[open] .sector__toggle::after { opacity: 0; }

.sector__detail {
  position: relative;
  z-index: 1;
  padding-bottom: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 900px) {
  /* Line the capabilities up under the sector name, not the numeral. */
  .sector__detail { padding-left: calc(4rem + var(--space-5) + 14px); }
}
.sector__caps-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.sector__caps { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* Chips arrive in sequence rather than all at once. */
.sector[open] .sector__caps .chip { animation: chip-in 0.5s var(--ease-out) both; }
.sector[open] .sector__caps .chip:nth-child(1) { animation-delay: 0.04s; }
.sector[open] .sector__caps .chip:nth-child(2) { animation-delay: 0.09s; }
.sector[open] .sector__caps .chip:nth-child(3) { animation-delay: 0.14s; }
.sector[open] .sector__caps .chip:nth-child(4) { animation-delay: 0.19s; }
.sector[open] .sector__caps .chip:nth-child(5) { animation-delay: 0.24s; }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sector[open] .sector__caps .chip { animation: none; }
}

/* --- Cross-industry approach: four planes, stacked and offset --- */
.approach {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 860px) {
  .approach { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

.approach__cell {
  position: relative;
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.45s var(--ease-out), transform 0.5s var(--ease-spring),
    box-shadow 0.45s var(--ease-out);
}
/* Each plane is offset from the one before it — the stack, not a grid of boxes. */
@media (min-width: 860px) {
  .approach__cell:nth-child(2) { transform: translateY(var(--space-4)); }
  .approach__cell:nth-child(3) { transform: translateY(calc(-1 * var(--space-2))); }
  .approach__cell:nth-child(4) { transform: translateY(var(--space-2)); }
  .approach__cell:nth-child(1):hover { transform: translateY(-6px); }
  .approach__cell:nth-child(2):hover { transform: translateY(calc(var(--space-4) - 6px)); }
  .approach__cell:nth-child(3):hover { transform: translateY(calc(-1 * var(--space-2) - 6px)); }
  .approach__cell:nth-child(4):hover { transform: translateY(calc(var(--space-2) - 6px)); }
}
.approach__cell::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(201, 161, 90, 0.16), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.approach__cell:hover {
  border-color: var(--color-gold-line);
  box-shadow: 0 30px 70px -32px rgba(0, 0, 0, 0.75), 0 10px 28px -14px rgba(201, 161, 90, 0.2);
}
.approach__cell:hover::before { opacity: 1; }

.approach__index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--color-gold);
}
.approach__glyph {
  color: var(--color-gold);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.approach__glyph svg { width: 32px; height: 32px; }
.approach__cell h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-1);
}
.approach__cell p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-cream-soft);
  max-width: 44ch;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Utility ---------- */
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.muted{color:var(--color-cream-dim)}