/* ==========================================================================
   Veltrix Digital Solutions Inc. — Site stylesheet
   Plain CSS, no framework. Sections:
   1. Tokens          6. Hero              11. Tiles & cards
   2. Base            7. Section headings  12. Insights
   3. Layout          8. Services          13. Forms
   4. Buttons/links   9. Approach / steps  14. Legal & prose
   5. Header & nav   10. Dark sections     15. Footer, CTA, motion
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --charcoal: #222428;
  --charcoal-deep: #1b1c1f;
  --charcoal-soft: #2c2e33;
  --copper: #c66b3d;
  --copper-ink: #b35c30;        /* AA-compliant copper for text & filled buttons on light */
  --copper-ink-hover: #9a4c25;
  --copper-light: #d9875d;      /* AA-compliant copper on charcoal */
  --warm: #f6f5f2;
  --warm-deep: #eeece7;
  --slate: #777b82;
  --white: #ffffff;

  --text: #222428;
  --text-muted: #565a61;
  --text-on-dark: #c4c6ca;
  --text-on-dark-muted: #9ea1a7;
  --line: #e3e1dc;
  --line-strong: #cdcac2;
  --line-dark: rgba(255, 255, 255, 0.12);

  --success: #25613f;
  --success-bg: #eff6f1;
  --error: #b42318;
  --error-bg: #fdf2f1;

  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.6rem, 1.45rem + 4.6vw, 5.4rem);
  --fs-h1: clamp(2.35rem, 1.55rem + 3.3vw, 4.4rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.55vw, 1.6rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 2.75rem + 6.5vw, 8.5rem);
  --header-h: 76px;
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow-sm: 0 1px 2px rgba(34, 36, 40, 0.06);
  --shadow-md: 0 18px 40px -22px rgba(34, 36, 40, 0.32);
  --shadow-lg: 0 34px 70px -34px rgba(34, 36, 40, 0.45);
}

@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

::selection { background: rgba(198, 107, 61, 0.22); }

:focus-visible {
  outline: 2px solid var(--copper-ink);
  outline-offset: 3px;
}

.section--dark :focus-visible { outline-color: var(--copper-light); }
.cta :focus-visible { outline-color: var(--copper-ink); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--charcoal);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
}

.skip-link:focus { top: 1rem; }

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

/* 3. Layout ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-y); }
.section--white { background: var(--white); }
.section--warm { background: var(--warm); }
.section--tight { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }

.section--dark {
  background: var(--charcoal);
  color: var(--text-on-dark);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--white); }

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
}

@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--center { align-items: center; }
}

.stack > * + * { margin-top: 1.25rem; }
.u-mt-sm { margin-top: 1rem; }
.u-mt-md { margin-top: 1.5rem; }
.u-mt-lg { margin-top: 2.25rem; }
.u-mt-xl { margin-top: clamp(3rem, 5vw, 4.5rem); }
.u-measure { max-width: 36rem; }

.rules {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rules .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 100%;
}

.rules span { border-left: 1px solid rgba(34, 36, 40, 0.055); }
.rules span:last-child { border-right: 1px solid rgba(34, 36, 40, 0.055); }

@media (max-width: 639px) {
  .rules span:nth-child(2),
  .rules span:nth-child(3) { border-left-color: transparent; }
}

/* 4. Buttons & links ------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.875rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn__icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.35s var(--ease);
}

.btn:hover .btn__icon { transform: translateX(4px); }

.btn--primary { background: var(--copper-ink); color: var(--white); }
.btn--primary:hover { background: var(--copper-ink-hover); }

.btn--dark { background: var(--charcoal); color: var(--white); }
.btn--dark:hover { background: #3a3d43; }

.btn--outline { border-color: var(--line-strong); color: var(--charcoal); background: transparent; }
.btn--outline:hover { border-color: var(--charcoal); background: rgba(34, 36, 40, 0.03); }

.btn--light { background: var(--white); color: var(--charcoal); }
.btn--light:hover { background: var(--warm-deep); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.3); color: var(--white); background: transparent; }
.btn--outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }

.btn[disabled] { opacity: 0.7; cursor: progress; }

.btn__spinner {
  display: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading .btn__icon { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.link-arrow svg { width: 0.95rem; height: 0.95rem; transition: transform 0.35s var(--ease); }
.link-arrow:hover { border-color: var(--copper); }
.link-arrow:hover svg { transform: translateX(4px); }

.section--dark .link-arrow,
.link-arrow--light { color: var(--white); border-color: rgba(255, 255, 255, 0.28); }
.section--dark .link-arrow:hover,
.link-arrow--light:hover { border-color: var(--copper-light); }

.text-link {
  color: var(--copper-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.text-link:hover { color: var(--copper-ink-hover); }
.section--dark .text-link { color: var(--copper-light); }

/* 5. Header & navigation --------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
}

/* Background lives on a pseudo-element so backdrop-filter doesn't trap the fixed mobile menu. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--warm);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-scrolled::before {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(34, 36, 40, 0.4);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

.brand { display: inline-flex; flex: none; }
.brand img { width: auto; height: 42px; }

@media (min-width: 1024px) {
  .brand img { height: 50px; }
}

.nav__list { list-style: none; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0.8rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--charcoal);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.nav__chev {
  width: 10px;
  height: 10px;
  transition: transform 0.25s var(--ease);
}

.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.dropdown__list { list-style: none; }

.dropdown__link {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease);
}

.dropdown__text { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }

.dropdown__icon,
.dropdown__arrow { display: none; flex: none; fill: none; stroke: currentColor; }

.dropdown__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--charcoal);
}

.dropdown__desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.dropdown__link[aria-current="page"] .dropdown__title { color: var(--copper-ink); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 44px;
  padding: 0 0.25rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle__icon {
  position: relative;
  width: 22px;
  height: 12px;
}

.nav-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.nav-toggle__icon span:first-child { top: 0; }
.nav-toggle__icon span:last-child { top: calc(100% - 1.5px); }

.nav-open .nav-toggle__icon span:first-child { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle__icon span:last-child { top: 5px; transform: rotate(-45deg); }

/* Mobile & tablet navigation */
@media (max-width: 1023px) {
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem var(--gutter) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--warm);
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }

  .nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav-open { overflow: hidden; }
  .nav-open .site-header::before { background: var(--warm); }

  .nav__list > li { border-bottom: 1px solid var(--line); }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1.1rem 0;
    font-size: 1.375rem;
    letter-spacing: -0.015em;
  }

  .nav__link[aria-current="page"],
  .nav__link.is-active { color: var(--copper-ink); }

  .nav__chev { width: 14px; height: 14px; }

  .dropdown { display: none; padding: 0 0 1.25rem; }
  .is-open > .dropdown { display: block; }

  .dropdown__link {
    padding: 0.7rem 0 0.7rem 1.25rem;
    border-left: 1px solid var(--line-strong);
    border-radius: 0;
  }

  .dropdown__link[aria-current="page"] { border-left-color: var(--copper); }
  .dropdown__desc { display: none; }
  .dropdown__title { font-size: 1.0625rem; font-weight: 600; }

  .nav__cta { width: 100%; }
}

/* Desktop navigation */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0.4rem;
    height: 1.5px;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after,
  .nav__link.is-active::after { transform: scaleX(1); }

  .nav__item--dropdown { position: relative; }

  .dropdown {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: -10rem;
    width: 600px;
    padding: 0.6rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--copper);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }

  /* Hover bridge between trigger and panel */
  .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1rem;
    height: 1rem;
  }

  .is-open > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .dropdown__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .dropdown__item--overview,
  .dropdown__item--cta { grid-column: 1 / -1; }

  .dropdown__item--overview {
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
  }

  .dropdown__item--cta { margin-top: 0.35rem; }

  .dropdown__icon {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.45rem;
    border: 1px solid var(--line);
    background: var(--warm);
    color: var(--copper-ink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  }

  .dropdown__arrow {
    display: block;
    align-self: center;
    width: 14px;
    height: 14px;
    color: var(--copper-ink);
    stroke-width: 1.5;
    transition: transform 0.25s var(--ease);
  }

  .dropdown__link:hover,
  .dropdown__link:focus-visible { background: var(--warm); }

  .dropdown__link:hover .dropdown__icon,
  .dropdown__link:focus-visible .dropdown__icon,
  .dropdown__link[aria-current="page"] .dropdown__icon { border-color: var(--copper-ink); background: var(--copper-ink); color: var(--white); }

  .dropdown__link:hover .dropdown__arrow,
  .dropdown__link:focus-visible .dropdown__arrow { transform: translateX(3px); }

  .dropdown__item--cta .dropdown__link { align-items: center; background: var(--charcoal); }
  .dropdown__item--cta .dropdown__title { color: var(--white); }
  .dropdown__item--cta .dropdown__desc { color: var(--text-on-dark); }
  .dropdown__item--cta .dropdown__arrow { color: var(--copper-light); }
  .dropdown__item--cta .dropdown__link:hover,
  .dropdown__item--cta .dropdown__link:focus-visible { background: var(--charcoal-soft); }
  .dropdown__item--cta .dropdown__link[aria-current="page"] .dropdown__title { color: var(--copper-light); }

  .nav__cta { min-height: 2.9rem; padding-inline: 1.35rem; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .nav__link { padding-inline: 0.55rem; font-size: 0.875rem; }
  .nav__link::after { left: 0.55rem; right: 0.55rem; }
  .site-nav { gap: 1rem; }
}

/* 6. Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--warm);
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(3rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}

.hero__title {
  max-width: 12.5ch;
  margin-bottom: 1.75rem;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.accent { color: var(--copper); }

.hero__lead {
  max-width: 35rem;
  margin-bottom: 2.5rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.hero__paths {
  display: grid;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 640px) {
  .hero__paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero__path {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem 1.5rem 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .hero__path { border-bottom: 0; }
  .hero__path + .hero__path { padding-left: 1.5rem; border-left: 1px solid var(--line); }
}

.hero__path-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--charcoal);
}

.hero__path-label svg { width: 1rem; height: 1rem; color: var(--copper); transition: transform 0.35s var(--ease); }
.hero__path:hover .hero__path-label svg { transform: translateX(4px); }
.hero__path-text { font-size: var(--fs-small); color: var(--text-muted); }

.hero__visual { position: relative; }

.hero__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .hero__frame { aspect-ratio: 5 / 6; }
}

/* Hero artwork animation
   Every arrow advances exactly one slot (110 user units) per cycle while taking on
   the style of the slot it moves into, so the loop point is visually seamless.
   Different easing curves per arrow create the stagger without breaking the loop. */
.hero-art {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-art__arrow,
.hero-art__layer {
  animation-duration: 4.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.hero-art__arrow--enter,
.hero-art__arrow--enter .hero-art__layer { animation-timing-function: cubic-bezier(0.62, 0.04, 0.42, 1); }
.hero-art__arrow--1,
.hero-art__arrow--1 .hero-art__layer { animation-timing-function: cubic-bezier(0.58, 0.04, 0.38, 1); }
.hero-art__arrow--2,
.hero-art__arrow--2 .hero-art__layer { animation-timing-function: cubic-bezier(0.54, 0.04, 0.34, 1); }
.hero-art__arrow--3,
.hero-art__arrow--3 .hero-art__layer { animation-timing-function: cubic-bezier(0.5, 0.04, 0.3, 1); }

.hero-art__arrow { animation-name: hero-arrow-advance; }
.hero-art__arrow--enter { animation-name: hero-arrow-advance, hero-arrow-enter; }

.hero-art__arrow--lead {
  animation-name: hero-arrow-advance, hero-arrow-exit;
  animation-timing-function: cubic-bezier(0.46, 0.04, 0.26, 1), ease-in-out;
}

.hero-art__arrow--1 .hero-art__outline { animation-name: hero-outline-brighten; }
.hero-art__arrow--2 .hero-art__outline { animation-name: hero-outline-soften; }
.hero-art__arrow--2 .hero-art__fill { animation-name: hero-fill-in; }
.hero-art__arrow--3 .hero-art__copper { animation-name: hero-copper-in; }

@keyframes hero-arrow-advance { from { transform: translateX(0); } to { transform: translateX(110px); } }
@keyframes hero-arrow-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-arrow-exit { 0%, 6% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes hero-outline-brighten { from { stroke-opacity: 0.09; } to { stroke-opacity: 0.16; } }
@keyframes hero-outline-soften { from { stroke-opacity: 0.16; } to { stroke-opacity: 0.08; } }
@keyframes hero-fill-in { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@keyframes hero-copper-in { 0%, 4% { opacity: 0; } 36%, 100% { opacity: 1; } }

/* Dashed data line: dashes drift forward while a glowing segment sweeps left to right. */
.hero-art__dashes {
  stroke-dasharray: 6 10;
  animation: hero-dash-drift 9s linear infinite;
}

.hero-art__beam { animation: hero-beam-sweep 4.4s cubic-bezier(0.45, 0.05, 0.3, 1) infinite; }

/* Node pulse, timed to the data packet's arrival along the connector. */
.hero-art__pulse {
  transform-origin: 380px 200px;
  animation: hero-node-pulse 4.4s cubic-bezier(0.2, 0.6, 0.35, 1) 1.9s infinite both;
}

@keyframes hero-dash-drift { to { stroke-dashoffset: -160; } }
@keyframes hero-beam-sweep { from { transform: translateX(0); } to { transform: translateX(780px); } }
@keyframes hero-node-pulse {
  0% { opacity: 0.7; transform: scale(0.7); }
  60%, 100% { opacity: 0; transform: scale(2.3); }
}

.hero-art.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-art * { animation: none !important; }
  .hero-art__beam,
  .hero-art__packet { display: none; }
  .hero-art__pulse { opacity: 0.35; }
}

.hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-dark);
  background: rgba(27, 28, 31, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__caption span {
  padding: 1rem 1.1rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hero__caption span + span { border-left: 1px solid var(--line-dark); }

@media (max-width: 519px) {
  .hero__caption span { padding: 0.8rem 0.7rem; font-size: 0.5625rem; letter-spacing: 0.1em; }
}
.hero__caption b { display: block; margin-bottom: 0.2rem; color: var(--copper-light); font-weight: 700; }
.hero__caption { z-index: 2; }

/* Cutout sits outside the frame so it can break the top and left edges;
   the frame is not a stacking context, so the caption still layers over it. */
.hero__person {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 54%;
  aspect-ratio: 900 / 1290;
  overflow: hidden;
  pointer-events: none;
}

.hero__person img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.35));
}

@media (min-width: 1024px) {
  .hero__visual { margin-top: 4rem; }
  .hero__frame { aspect-ratio: 6 / 5; }
  .hero__person { width: 72%; }
}

.js .hero__person img {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s var(--ease) 0.35s, transform 1.1s var(--ease) 0.35s;
}

.js .hero__visual.is-revealed .hero__person img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__person img { opacity: 1; transform: none; transition: none; }
}

.hero__corner {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 72px;
  height: 72px;
  border-top: 2px solid var(--copper);
  border-right: 2px solid var(--copper);
  pointer-events: none;
}

@media (max-width: 1023px) {
  .hero__corner { right: 0; top: -12px; width: 56px; height: 56px; }
}

/* Interior page hero */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--warm);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem);
}

.page-hero__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-hero__grid--text { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

.page-hero__title {
  max-width: 17ch;
  margin-bottom: 1.5rem;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.page-hero__lead {
  max-width: 40rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.page-hero .actions { margin-top: 2.25rem; }

.page-hero__art {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: var(--shadow-md);
}

.page-hero__art img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb {
  margin-bottom: 2rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line-strong);
}

.breadcrumb a:hover { color: var(--charcoal); text-decoration: underline; text-underline-offset: 0.2em; }
.breadcrumb [aria-current="page"] { color: var(--charcoal); font-weight: 500; }

/* 7. Section headings ------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  flex: none;
  background: currentColor;
}

.section--dark .eyebrow { color: var(--copper-light); }
.cta .eyebrow { color: var(--copper-ink); }

.h2 {
  max-width: 19ch;
  font-size: var(--fs-h2);
  line-height: 1.07;
  letter-spacing: -0.032em;
}

.h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
}

.muted { color: var(--text-muted); }
.section--dark .lead,
.section--dark .muted { color: var(--text-on-dark); }

.section-head {
  display: grid;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

@media (min-width: 960px) {
  .section-head--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

.section-head .lead { max-width: 38rem; }

.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* Intro block */
.intro__body .lead { color: var(--charcoal); }
.intro__body p + p { margin-top: 1.25rem; }

.intro__head {
  display: grid;
  gap: 1.75rem clamp(2rem, 5vw, 5rem);
}

@media (min-width: 960px) {
  .intro__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.intro__more { margin-top: 2rem; }

/* Technology + Talent = Transformation */
.formula {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  list-style: none;
}

@media (min-width: 960px) {
  .formula {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
  }
}

.formula__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  background: var(--warm);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.formula__card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.formula__card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.formula__card:hover::before { transform: scaleX(1); }

.formula__num {
  position: absolute;
  top: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  right: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--slate);
}

.formula__icon { width: 2.5rem; height: 2.5rem; color: var(--copper-ink); }

.formula__title {
  margin-top: 0.5rem;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.formula__card p { font-size: 0.9375rem; color: var(--text-muted); }

.formula__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
}

.formula__link svg { width: 0.9rem; height: 0.9rem; transition: transform 0.3s var(--ease); }
.formula__link:hover { color: var(--copper-ink); }
.formula__link:hover svg { transform: translateX(4px); }

.formula__op {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  color: var(--white);
  background: var(--copper-ink);
  border-radius: 50%;
}

@media (min-width: 960px) {
  .formula__op {
    position: relative;
    z-index: 1;
    align-self: center;
    margin-inline: -1.375rem;
    box-shadow: 0 0 0 6px var(--white);
  }
}

.formula__card--result {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

.formula__card--result .formula__title,
.formula__card--result .formula__link { color: var(--white); }
.formula__card--result p { color: var(--text-on-dark); }
.formula__card--result .formula__icon,
.formula__card--result .formula__link:hover { color: var(--copper-light); }
.formula__card--result .formula__num { color: var(--text-on-dark-muted); }
.formula__card--result:hover { border-color: var(--charcoal); }

@media (prefers-reduced-motion: reduce) {
  .formula__card:hover { transform: none; }
}

/* 8. Services -------------------------------------------------------------- */
/* Dark section with a photo behind a charcoal overlay */
.section--photo { overflow: hidden; isolation: isolate; }
.section--photo > .container { position: relative; }

.section-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: grayscale(0.35);
}

.section-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(34, 36, 40, 0.96) 0%, rgba(34, 36, 40, 0.8) 38%, rgba(34, 36, 40, 0.9) 100%),
    linear-gradient(90deg, rgba(198, 107, 61, 0.14), rgba(34, 36, 40, 0) 60%);
}

.section--photo .service-panel {
  background: rgba(34, 36, 40, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Dark section with a fine square grid, plus a few copper-tinted cells */
.section--squares { overflow: hidden; isolation: isolate; }

.section--squares::before,
.section--squares::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.section--squares::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 70% 45%, #000 20%, transparent 85%);
  mask-image: radial-gradient(ellipse 85% 75% at 70% 45%, #000 20%, transparent 85%);
}

.section--squares::after {
  background-image:
    linear-gradient(rgba(198, 107, 61, 0.18), rgba(198, 107, 61, 0.18)),
    linear-gradient(rgba(198, 107, 61, 0.14), rgba(198, 107, 61, 0.14)),
    linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
    linear-gradient(rgba(198, 107, 61, 0.1), rgba(198, 107, 61, 0.1));
  background-repeat: no-repeat;
  background-size: 27px 27px;
  background-position:
    calc(50% + 0.5px + 28px * 9) calc(1px + 28px * 3),
    calc(50% + 0.5px + 28px * 16) calc(1px + 28px * 6),
    calc(50% + 0.5px + 28px * 5) calc(1px + 28px * 13),
    calc(50% + 0.5px - 28px * 3) calc(1px + 28px * 18);
}

.service-panels { display: grid; gap: 1.5rem; }

@media (min-width: 960px) {
  .service-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .service-panel + .service-panel { border-left-width: 0; }
}

.service-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  border: 1px solid var(--line-dark);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
  transition: background-color 0.4s var(--ease);
}

.service-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0.12);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.service-panel:hover::before,
.service-panel:focus-within::before { transform: scaleX(1); }

.service-panel__index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-light);
}

.service-panel__title {
  margin: 1.25rem 0 1rem;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -0.03em;
}

.service-panel__text {
  max-width: 34rem;
  margin-bottom: 2.25rem;
  color: var(--text-on-dark);
}

.service-list {
  list-style: none;
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--line-dark);
}

.service-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
  transition: color 0.25s var(--ease), padding-left 0.35s var(--ease);
}

.service-list svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  opacity: 0.45;
  transition: opacity 0.25s var(--ease), transform 0.35s var(--ease);
}

.service-list a:hover { color: var(--copper-light); padding-left: 0.5rem; }
.service-list a:hover svg { opacity: 1; transform: translateX(3px); }

.service-panel .link-arrow { margin-top: auto; align-self: flex-start; }

.services-also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.9375rem;
  color: var(--text-on-dark-muted);
}

.services-also a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  transition: border-color 0.25s var(--ease);
}

.services-also a:hover { border-color: var(--copper-light); }

.check-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.25rem;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-muted);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 0.75rem;
  height: 1.5px;
  background: var(--copper);
}

.section--dark .check-list li { color: var(--text-on-dark); }

@media (min-width: 640px) {
  .check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

/* 9. Approach / steps ------------------------------------------------------ */
.steps {
  display: grid;
  list-style: none;
}

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

@media (min-width: 1100px) {
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 2rem; }
}

.step {
  position: relative;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--line-strong);
}

.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--copper);
  transition: width 0.6s var(--ease);
}

.step:hover::before { width: 100%; }

.step__num {
  display: block;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2.2rem + 1.8vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--slate);
}

.step__title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.step p { font-size: 0.9375rem; color: var(--text-muted); }

/* Timeline steps with forward flow. A copper pulse travels along the track 01 → 04;
   as it reaches each node, the node fills and its card lifts. One 6s loop, steps
   offset by 1.3s. Horizontal at ≥1100px, vertical below. Runs only while in view. */
.steps--flow {
  position: relative;
  gap: 1.25rem;
  overflow: clip;
  overflow-clip-margin: 1.5rem;
}

.steps--flow .step { --flow-delay: 0s; }
.steps--flow .step:nth-child(2) { --flow-delay: 1.3s; }
.steps--flow .step:nth-child(3) { --flow-delay: 2.6s; }
.steps--flow .step:nth-child(4) { --flow-delay: 3.9s; }

.steps--flow .step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 1.25rem;
  padding: 0;
  border-top: 0;
}

.steps--flow .step::before { display: none; }

/* Track */
.steps--flow::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  left: calc(1.75rem - 0.5px);
  width: 1px;
  background: var(--line-strong);
}

.step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--slate);
  background: var(--warm);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.step__node svg { width: 1.5rem; height: 1.5rem; }

.step__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.step__card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.step__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.step__phase {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.steps--flow .step__num {
  margin: 0;
  font-size: clamp(2rem, 1.7rem + 1vw, 2.75rem);
  color: var(--line-strong);
  transition: color 0.4s var(--ease);
}

.steps--flow .step__title { font-size: 1.1875rem; }

.step:hover .step__card { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.step:hover .step__card::before { transform: scaleX(1); }
.step:hover .step__node { color: var(--white); background: var(--copper-ink); border-color: var(--copper-ink); }
.step:hover .step__num { color: var(--copper); }

.step__arrow { display: none; }

/* Pulse (vertical below 1100px) */
.steps--flow::after {
  content: "";
  position: absolute;
  top: -18%;
  left: calc(1.75rem - 1px);
  width: 2px;
  height: 18%;
  background: linear-gradient(180deg, rgba(198, 107, 61, 0), var(--copper) 70%, #e9a07a 92%, rgba(198, 107, 61, 0));
  box-shadow: 0 0 12px 1px rgba(198, 107, 61, 0.45);
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 720px) and (max-width: 1099px) {
  .steps--flow { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .steps--flow { column-gap: 2.5rem; row-gap: 0; }

  .steps--flow .step {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .steps--flow .step__card { flex: 1; }

  .steps--flow::before {
    top: calc(1.75rem - 0.5px);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .steps--flow::after {
    top: calc(1.75rem - 1px);
    left: -18%;
    width: 18%;
    height: 2px;
    background: linear-gradient(90deg, rgba(198, 107, 61, 0), var(--copper) 70%, #e9a07a 92%, rgba(198, 107, 61, 0));
  }

  .steps--flow .step__arrow {
    position: absolute;
    top: calc(1.75rem - 9px);
    right: calc(-1.25rem - 12px);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 18px;
    color: var(--slate);
    background: var(--warm);
  }

  .step__arrow svg { width: 18px; height: 12px; }
}

.section--white .step__node,
.section--white .steps--flow .step__arrow { background: var(--white); }
.section--white .step__card { background: var(--warm); }

/* Animation */
.steps--flow.is-flowing::after { animation: flow-pulse-v 6s linear infinite; }
.steps--flow.is-flowing .step__node { animation: flow-node 6s var(--ease) var(--flow-delay) infinite both; }
.steps--flow.is-flowing .step__card { animation: flow-card 6s var(--ease) var(--flow-delay) infinite both; }
.steps--flow.is-flowing .step__card::before { animation: flow-card-line 6s var(--ease) var(--flow-delay) infinite both; }
.steps--flow.is-flowing .step__num { animation: flow-num 6s var(--ease) var(--flow-delay) infinite both; }
.steps--flow.is-flowing .step__arrow { animation: flow-arrow 6s var(--ease) calc(var(--flow-delay) + 1.15s) infinite both; }
.steps--flow.is-flowing .step:hover .step__node,
.steps--flow.is-flowing .step:hover .step__card,
.steps--flow.is-flowing .step:hover .step__card::before,
.steps--flow.is-flowing .step:hover .step__num { animation: none; }

@media (min-width: 1100px) {
  .steps--flow.is-flowing::after { animation-name: flow-pulse; }
}

@keyframes flow-pulse {
  0% { left: -18%; opacity: 0; }
  4%, 80% { opacity: 1; }
  88%, 100% { left: 100%; opacity: 0; }
}

@keyframes flow-pulse-v {
  0% { top: -18%; opacity: 0; }
  4%, 80% { opacity: 1; }
  88%, 100% { top: 100%; opacity: 0; }
}

@keyframes flow-node {
  0%, 100% { color: var(--slate); background-color: var(--warm); border-color: var(--line-strong); box-shadow: 0 0 0 0 rgba(198, 107, 61, 0); }
  6% { color: var(--white); background-color: var(--copper-ink); border-color: var(--copper-ink); box-shadow: 0 0 0 0 rgba(198, 107, 61, 0.45); }
  18% { box-shadow: 0 0 0 12px rgba(198, 107, 61, 0); }
  26% { color: var(--white); background-color: var(--copper-ink); border-color: var(--copper-ink); }
  42% { color: var(--slate); background-color: var(--warm); border-color: var(--line-strong); }
}

@keyframes flow-card {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(34, 36, 40, 0); border-color: var(--line); }
  8%, 26% { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
  42% { transform: translateY(0); box-shadow: 0 0 0 rgba(34, 36, 40, 0); border-color: var(--line); }
}

@keyframes flow-card-line {
  0%, 100% { transform: scaleX(0); }
  12%, 28% { transform: scaleX(1); }
  44% { transform: scaleX(0); }
}

@keyframes flow-num {
  0%, 100% { color: var(--line-strong); }
  6%, 26% { color: var(--copper); }
  42% { color: var(--line-strong); }
}

@keyframes flow-arrow {
  0%, 100% { color: var(--slate); transform: translateX(0); }
  5% { color: var(--copper-ink); transform: translateX(4px); }
  18% { color: var(--copper-ink); transform: translateX(0); }
  34% { color: var(--slate); }
}

@media (prefers-reduced-motion: reduce) {
  .steps--flow.is-flowing::after,
  .steps--flow.is-flowing .step__node,
  .steps--flow.is-flowing .step__card,
  .steps--flow.is-flowing .step__card::before,
  .steps--flow.is-flowing .step__num,
  .steps--flow.is-flowing .step__arrow { animation: none; }
  .steps--flow .step__arrow { color: var(--copper-ink); }
  .step:hover .step__card { transform: none; }
}

.section--dark .step { border-top-color: var(--line-dark); }
.section--dark .step__num { color: var(--text-on-dark-muted); }
.section--dark .step p { color: var(--text-on-dark); }

.approach__intro {
  display: grid;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

@media (min-width: 960px) {
  .approach__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

/* 10. Dark sections: Why Veltrix ------------------------------------------- */
.why {
  display: grid;
  gap: 3rem 5rem;
}

@media (min-width: 1024px) {
  .why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .why__head { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
}

.why__head .lead { margin-top: 1.5rem; max-width: 30rem; }

.why-list {
  display: grid;
  list-style: none;
}

.why-list { gap: 1.25rem; }

@media (min-width: 640px) {
  .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.why-item {
  position: relative;
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg, rgba(48, 50, 56, 0.92) 0%, rgba(38, 40, 45, 0.92) 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 24px 40px -28px rgba(0, 0, 0, 0.6);
  transition: border-color 0.4s var(--ease);
}

.why-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 56px;
  height: 2px;
  background: var(--copper);
  transition: width 0.5s var(--ease);
}

.why-item:hover { border-color: rgba(198, 107, 61, 0.45); }

.why-item:hover::before { width: calc(100% + 2px); }

.why-item__icon {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 10px;
  margin-bottom: 1.5rem;
  color: var(--copper-light);
  background: rgba(198, 107, 61, 0.12);
  border: 1px solid rgba(198, 107, 61, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .why-item,
  .why-item::before { transition: none; }
}

.why-item h3 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.why-item p { color: var(--text-on-dark); font-size: 0.9375rem; }

/* 11. Tiles & cards -------------------------------------------------------- */
.tile-grid {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 640px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  transition: background-color 0.35s var(--ease);
}

.section--warm .tile { background: transparent; }

a.tile:hover,
.tile--link:hover { background: var(--warm); }

.section--warm a.tile:hover { background: var(--white); }

.tile__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0.75rem;
  color: var(--copper);
}

.tile__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.tile__title {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.tile p { color: var(--text-muted); font-size: 0.9375rem; }

.tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
}

.tile__more svg { width: 0.9rem; height: 0.9rem; color: var(--copper); transition: transform 0.35s var(--ease); }
a.tile:hover .tile__more svg { transform: translateX(4px); }

.tile--tall { min-height: 19rem; }

.section--dark .tile-grid,
.section--dark .tile { border-color: var(--line-dark); }
.section--dark .tile { background: transparent; }
.section--dark .tile p { color: var(--text-on-dark); }
.section--dark .tile__label { color: var(--copper-light); }

.note {
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Feature card (white panel on warm) */
.panel {
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.panel__title {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.role-list {
  display: grid;
  list-style: none;
}

@media (min-width: 520px) {
  .role-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

.role-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
}

.role-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--copper);
  transform: rotate(45deg);
}

/* Media block */
.media {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  aspect-ratio: 16 / 11;
}

.media img { width: 100%; height: 100%; object-fit: cover; }
.media picture,
.insight-card__media picture { display: block; height: 100%; }

/* Industry detail rows */
.industry-row {
  display: grid;
  gap: 2rem 4rem;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}

.industry-row:first-child { border-top: 0; padding-top: 0; }

@media (min-width: 960px) {
  .industry-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.industry-row__head { display: flex; flex-direction: column; gap: 1rem; }
.industry-row__head .tile__icon { margin-bottom: 0.5rem; }
.industry-row__head h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); letter-spacing: -0.03em; }
.industry-row__body > p { color: var(--text-muted); }
.industry-row__body h3 { margin-top: 2rem; font-size: 1rem; letter-spacing: 0; }

.chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
  list-style: none;
}

.chip-links a {
  display: inline-flex;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--charcoal);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.chip-links a:hover { border-color: var(--copper); color: var(--copper-ink); }

/* Callout */
.callout {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  background: var(--white);
}

@media (min-width: 860px) {
  .callout { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.callout h3 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.callout p { color: var(--text-muted); }

/* 12. Insights ------------------------------------------------------------- */
.insight-grid {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 720px) {
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .insight-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}

.insight-card:hover,
.insight-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.insight-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--charcoal);
}

.insight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.insight-card:hover .insight-card__media img { transform: scale(1.035); }

.insight-card__visual { position: relative; }

/* Floating cutout: overlaps the cover's bottom edge, away from the meta text on the left. */
.insight-card__sticker {
  position: absolute;
  z-index: 1;
  right: 6%;
  bottom: -8%;
  width: 32%;
  pointer-events: none;
  animation: sticker-float 6s ease-in-out infinite;
}

.insight-card__sticker img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 16px rgba(20, 21, 24, 0.32)) drop-shadow(0 2px 3px rgba(20, 21, 24, 0.2));
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--ease);
}

.insight-card__sticker--laptop { width: 32%; right: 3%; bottom: -9%; animation-duration: 6.4s; }
.insight-card__sticker--handshake { width: 26%; right: 5%; bottom: -7%; animation-duration: 5.6s; animation-delay: -1.4s; }
.insight-card__sticker--magnifier { width: 14%; right: 4%; bottom: -10%; animation-name: sticker-sway; animation-duration: 5s; animation-delay: -0.8s; }
.insight-card__sticker--gears { width: 27%; bottom: -9%; animation-duration: 7s; animation-delay: -2.2s; }

.insight-card:hover .insight-card__sticker img { transform: translateY(-8px) scale(1.06) rotate(-2deg); }

@keyframes sticker-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-1.5deg); }
}

@keyframes sticker-sway {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(-10px, -8px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .insight-card__sticker { animation: none; }
  .insight-card__sticker img { transition: none; }
  .insight-card:hover .insight-card__sticker img { transform: none; }
}

.insight-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.meta span + span { color: var(--text-muted); letter-spacing: 0.08em; }

.insight-card__title {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.insight-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.insight-card__title a:focus-visible { outline: none; }
.insight-card:has(a:focus-visible) { outline: 2px solid var(--copper-ink); outline-offset: 3px; }

.insight-card p { font-size: 0.9375rem; color: var(--text-muted); }

.insight-card .tile__more { padding-top: 0.75rem; }
.insight-card:hover .tile__more svg { transform: translateX(4px); }

/* Article (full text on insights page) */
.article {
  display: grid;
  gap: 2rem 5rem;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .article { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .article__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

.article__head h2 {
  margin: 1rem 0 1.25rem;
  font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.4rem);
  letter-spacing: -0.03em;
}

.article__head p { color: var(--text-muted); }
.article__head .media { margin-top: 2rem; aspect-ratio: 16 / 10; }
.article__back { margin-top: 2.5rem; }

/* 13. Forms ---------------------------------------------------------------- */
.form-layout {
  display: grid;
  gap: 3rem 4.5rem;
}

@media (min-width: 1024px) {
  .form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .form-layout__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

.form-card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.form-card__head { margin-bottom: 2rem; }
.form-card__head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 0.6rem; }
.form-card__head p { color: var(--text-muted); }

.form { display: grid; gap: 1.5rem; }

.form__row { display: grid; gap: 1.5rem; }

@media (min-width: 640px) {
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: grid; gap: 0.5rem; align-content: start; }

.field__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
}

.field__optional {
  margin-left: 0.35rem;
  font-weight: 500;
  color: var(--text-muted);
}

.field__req { color: var(--copper-ink); margin-left: 0.15rem; }

.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field__input::placeholder { color: #8b8f95; }
.field__input:hover { border-color: #b3afa6; }

.field__input:focus {
  outline: none;
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(198, 107, 61, 0.22);
}

select.field__input {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23222428' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  cursor: pointer;
}

textarea.field__input { min-height: 10rem; resize: vertical; }

.field__input[type="file"] {
  padding: 0.6rem;
  min-height: auto;
  cursor: pointer;
  font-size: 0.9375rem;
}

.field__input[type="file"]::file-selector-button {
  margin-right: 1rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--charcoal);
  background: var(--warm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.field__input[type="file"]:hover::file-selector-button { background: var(--warm-deep); }

.field__hint { font-size: 0.8125rem; color: var(--text-muted); }

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--error);
}

.field__error:empty { display: none; }

.field__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--white);
  background: var(--error);
  border-radius: 50%;
}

.field.is-invalid .field__input { border-color: var(--error); }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  cursor: pointer;
}

.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  flex: none;
  accent-color: var(--copper-ink);
  cursor: pointer;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-top: 0.5rem;
}

.form__footer p { font-size: 0.8125rem; color: var(--text-muted); }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  display: none;
  padding: 1.15rem 1.35rem;
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.form-status.is-visible { display: block; }
.form-status:focus { outline: none; }
.form-status strong { display: block; margin-bottom: 0.25rem; font-family: var(--font-display); font-size: 1rem; }

.form-status--success { color: #1d4a31; background: var(--success-bg); border-color: var(--success); }
.form-status--error { color: #7a1a12; background: var(--error-bg); border-color: var(--error); }
.form-status--info { color: var(--charcoal); background: #fbf3ee; border-color: var(--copper); }

.aside-block { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.aside-block:first-child { padding-top: 0; border-top: 0; }
.aside-block h2,
.aside-block h3 { margin-bottom: 0.75rem; font-size: 1.125rem; }
.aside-block p { color: var(--text-muted); font-size: 0.9375rem; }
.aside-block .link-arrow { margin-top: 1rem; }

.mini-steps {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.25rem;
  list-style: none;
  counter-reset: mini;
}

.mini-steps li {
  position: relative;
  padding-left: 2.6rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
  counter-increment: mini;
}

.mini-steps li::before {
  content: counter(mini, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--copper-ink);
}

.mini-steps strong { display: block; color: var(--charcoal); font-family: var(--font-display); }

/* 14. Legal & prose -------------------------------------------------------- */
.legal {
  display: grid;
  gap: 3rem 5rem;
}

@media (min-width: 1024px) {
  .legal { grid-template-columns: 15rem minmax(0, 1fr); }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

.legal__toc h2 {
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.legal__toc ol {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  font-size: 0.9rem;
}

.legal__toc a { color: var(--text-muted); transition: color 0.2s var(--ease); }
.legal__toc a:hover { color: var(--charcoal); }

.prose { max-width: 46rem; color: var(--text-muted); }
.prose > * + * { margin-top: 1.15rem; }

.prose h2 {
  margin-top: 3rem;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 2rem; font-size: 1.125rem; color: var(--charcoal); }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.45rem; }
.prose li::marker { color: var(--copper); }
.prose a { color: var(--copper-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.prose strong { color: var(--charcoal); }
.prose .lead { color: var(--charcoal); }

/* 14b. FAQ, jobs, articles ------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__question {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--charcoal);
  list-style: none;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--copper-ink); }
.faq__question:focus-visible { outline: 2px solid var(--copper-ink); outline-offset: 4px; }

.faq__icon {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--copper-ink);
  transition: transform 0.3s var(--ease);
}

.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }

.faq__answer {
  padding: 0 2.5rem 1.75rem 0;
  color: var(--text-muted);
}

.faq__answer a { color: var(--copper-ink); text-decoration: underline; text-underline-offset: 0.2em; }

.section--warm .faq,
.section--warm .faq__item { border-color: var(--line-strong); }

/* Notices & preview bar */
.notice { margin-bottom: 2rem; }

.preview-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 0.7rem 0;
  font-size: var(--fs-small);
  color: var(--white);
  background: var(--copper-ink);
}

.preview-bar strong { font-family: var(--font-display); }
body:has(.preview-bar) { padding-bottom: 3.5rem; }

/* Job filters & listings */
.job-filters {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 720px) {
  .job-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-filters__search { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .job-filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); align-items: end; }
  .job-filters__search { grid-column: auto; }
  .job-filters__actions { grid-column: 1 / -1; }
}

.job-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  font-size: var(--fs-small);
}

.job-results {
  margin: 2rem 0 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.job-list { display: grid; gap: 1rem; }
.job-list__item[hidden] { display: none; }

.job-card {
  position: relative;
  display: grid;
  gap: 1.25rem 2rem;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (min-width: 900px) {
  .job-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.job-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.job-card:has(a:focus-visible) { outline: 2px solid var(--copper-ink); outline-offset: 3px; }

.job-card__title {
  margin: 0.65rem 0 0.6rem;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.job-card__title a::after { content: ""; position: absolute; inset: 0; }
.job-card__title a:focus-visible { outline: none; }

.job-card__summary { max-width: 46rem; font-size: 0.9375rem; color: var(--text-muted); }

.job-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1rem;
  font-size: var(--fs-small);
  color: var(--charcoal);
  list-style: none;
}

.job-card__facts li { position: relative; }
.job-card__facts li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.7rem;
  width: 4px;
  height: 4px;
  background: var(--copper);
  transform: translateY(-50%) rotate(45deg);
}

.job-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  white-space: nowrap;
}

.job-card__cta svg { transition: transform 0.3s var(--ease); }
.job-card:hover .job-card__cta svg { transform: translateX(4px); }

.job-card__flag {
  padding: 0.1rem 0.45rem;
  color: var(--copper-ink);
  border: 1px solid currentColor;
}

.job-empty {
  padding: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--line-strong);
}

.job-empty h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.job-empty p { max-width: 34rem; margin-inline: auto; color: var(--text-muted); }
.job-empty a { color: var(--copper-ink); }

/* Job & article detail layout */
.page-hero__title--article {
  max-width: 22ch;
  font-size: clamp(2.1rem, 1.45rem + 2.6vw, 3.6rem);
}

.page-hero .meta { margin-bottom: 1.25rem; }

.article-layout {
  display: grid;
  gap: 3rem 5rem;
}

@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .article-aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}

.article-body__cover { aspect-ratio: 16 / 9; margin-bottom: clamp(2rem, 4vw, 3rem); }

.article-body .prose,
.job-detail .prose { max-width: 44rem; font-size: 1.0625rem; }

.article-aside .aside-block:first-child { padding-top: 0; }

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 !important;
  list-style: none;
}

.prose .skill-tags li {
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: var(--fs-small);
  color: var(--charcoal);
  background: var(--warm);
  border: 1px solid var(--line);
}

.job-facts dl { display: grid; gap: 1rem; }
.job-facts dl > div { display: grid; gap: 0.15rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.job-facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.job-facts dd { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--charcoal); }
.job-facts__cta { width: 100%; justify-content: center; margin-top: 1.75rem; }

.cf-turnstile { min-height: 65px; }

/* 15. CTA, footer, motion -------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
  background: linear-gradient(135deg, #f9f1eb 0%, #f3e6dc 100%);
  border-top: 1px solid var(--line);
  color: var(--charcoal);
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(34, 36, 40, 0.12) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 12% 50%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 70% at 12% 50%, #000 15%, transparent 75%);
}

.cta > .container { position: relative; }

.cta > .container::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(5rem, 3.5rem + 6vw, 9rem) - 1px);
  left: var(--gutter);
  width: 4.5rem;
  height: 2px;
  background: var(--copper);
}

.cta .btn--outline { background: var(--white); }
.cta .btn--outline:hover { border-color: var(--charcoal); background: var(--white); }

.cta__art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 760px);
  pointer-events: none;
}

.cta__art picture { display: block; height: 100%; }
.cta__art img { width: 100%; height: 100%; object-fit: contain; object-position: right center; }

@media (max-width: 767px) {
  .cta__art { width: 100%; opacity: 0.35; }
}

.cta__inner { position: relative; max-width: 44rem; }

.cta__title {
  margin-bottom: 1.5rem;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--charcoal);
}

.cta__text {
  max-width: 34rem;
  margin-bottom: 2.5rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(4rem, 3rem + 4vw, 6.5rem);
  background: var(--charcoal-deep);
  border-top: 1px solid var(--line-dark);
  color: var(--text-on-dark-muted);
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.site-footer::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 85% 20%, #000 10%, transparent 75%);
}

.site-footer::after {
  background: radial-gradient(ellipse 40% 55% at 95% 0%, rgba(198, 107, 61, 0.14), rgba(198, 107, 61, 0) 70%);
}

.site-footer > .container { position: relative; }

.site-footer > .container::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(4rem, 3rem + 4vw, 6.5rem) - 1px);
  left: var(--gutter, 1.25rem);
  width: 4.5rem;
  height: 2px;
  background: var(--copper);
}

.site-footer :focus-visible { outline-color: var(--copper-light); }

.footer__grid {
  display: grid;
  gap: 3rem 2.5rem;
}

@media (min-width: 720px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .footer__grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); }
}

.footer__brand img { width: auto; height: 58px; }

.footer__tagline {
  margin: 1.75rem 0 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--copper-light);
}

.footer__desc { max-width: 23rem; font-size: 0.9375rem; color: var(--text-on-dark-muted); }

.footer__heading {
  position: relative;
  margin-bottom: 1.6rem;
  padding-bottom: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  background: var(--copper);
}

.footer__links {
  display: grid;
  gap: 0.85rem;
  list-style: none;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9375rem;
  color: var(--text-on-dark-muted);
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}

.footer__icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.footer__links a:hover { color: var(--white); transform: translateX(3px); }
.footer__links a:hover .footer__icon { color: var(--copper-light); opacity: 1; }

.footer__contact p { font-size: 0.9375rem; color: var(--text-on-dark-muted); margin-bottom: 1.5rem; }

.footer__actions { display: grid; gap: 0.6rem; list-style: none; }

.footer__action {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem 0.55rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-dark);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.footer__action > span:nth-child(2) { flex: 1; }

.footer__action-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  color: var(--copper-light);
  border: 1px solid rgba(217, 135, 93, 0.45);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.footer__action-icon .footer__icon { opacity: 1; }
.footer__action .btn__icon { width: 0.85rem; height: 0.85rem; color: var(--copper-light); transition: transform 0.25s var(--ease); }

.footer__action:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(217, 135, 93, 0.6); }
.footer__action:hover .footer__action-icon { color: var(--white); background: var(--copper); border-color: var(--copper); }
.footer__action:hover .btn__icon { transform: translateX(3px); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3.5rem, 5vw, 5rem);
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.875rem;
  color: var(--text-on-dark-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  list-style: none;
}

.footer__legal a { color: var(--text-on-dark-muted); transition: color 0.2s var(--ease); }
.footer__legal a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }

.footer__legal .footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  color: var(--white);
  border: 1px solid var(--line-dark);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.footer__legal .footer__top:hover { text-decoration: none; border-color: var(--copper-light); }
.footer__top .footer__icon { color: var(--copper-light); opacity: 1; }

/* About page ---------------------------------------------------------------- */
.ab-hero {
  position: relative;
  overflow: hidden;
  --ab-line-gap: clamp(1.5rem, 3vw, 2.5rem);
  --ab-line-h: clamp(64px, 6.5vw, 100px);
  padding-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  background: var(--charcoal);
  color: var(--text-on-dark);
}

.ab-hero .rules span { border-color: rgba(255, 255, 255, 0.045); }
.ab-hero .breadcrumb { color: var(--text-on-dark-muted); }
.ab-hero .breadcrumb li + li::before { color: rgba(255, 255, 255, 0.25); }
.ab-hero .breadcrumb a:hover,
.ab-hero .breadcrumb [aria-current="page"] { color: var(--white); }
.ab-hero .eyebrow { color: var(--copper-light); }
.ab-hero :focus-visible { outline-color: var(--copper-light); }

.ab-hero__inner { position: relative; }

.ab-hero__layout {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
  padding-top: clamp(0.5rem, 2vw, 2rem);
}

@media (min-width: 1024px) {
  .ab-hero__layout { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding-top: 0; }
}

.ab-hero__intro {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line-dark);
}

.ab-hero__title {
  max-width: 15ch;
  font-size: clamp(2.5rem, 1.2rem + 2.9vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--white);
}

.ab-hero__title span { display: block; color: var(--copper-light); }

@media (min-width: 1024px) {
  .ab-hero__title { max-width: none; font-size: clamp(2.6rem, 0.4rem + 3.4vw, 3.75rem); white-space: nowrap; }
}

/* The photo is cropped flat at the bottom, so it is pulled down past the
   alignment lines to sit flush on the section's bottom edge. */
.ab-hero__team {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  align-self: end;
  justify-self: end;
  margin-bottom: calc(-1 * (var(--ab-line-gap) + var(--ab-line-h)));
}

.ab-hero__team::before {
  content: "";
  position: absolute;
  inset: 0 -10% 0;
  background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(198, 107, 61, 0.26), rgba(198, 107, 61, 0) 70%);
  pointer-events: none;
}

.ab-hero__team img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 -6px 30px rgba(0, 0, 0, 0.35));
}

/* Desktop: stretch from the top of the copy column to the section's bottom edge. */
@media (min-width: 1024px) {
  .ab-hero__team { align-self: stretch; }

  .ab-hero__team img {
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

@media (min-width: 1200px) {
  .ab-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-hero__copy { position: relative; z-index: 2; }
  .ab-hero__team { width: calc(100% + 4rem); max-width: 50rem; margin-left: -4rem; }
}

.ab-hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-on-dark);
}

.ab-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-top: 1.75rem;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}

.ab-hero__tags li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.85em;
  margin-inline: 0.9rem;
  vertical-align: -0.1em;
  background: var(--copper);
}

@media (max-width: 479px) {
  .ab-hero__tags { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .ab-hero__tags li + li::before { margin-inline: 0.55rem; }
}

.ab-hero__align {
  width: 100%;
  height: var(--ab-line-h);
  margin-top: var(--ab-line-gap);
  fill: none;
  stroke-width: 1.5;
}

.ab-hero__strand {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ab-draw 1.6s var(--ease) 0.4s forwards;
}

.ab-hero__strand--joined { animation-delay: 1.5s; }

.ab-hero__knot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation: ab-knot 0.6s var(--ease) 1.4s forwards;
}

@keyframes ab-draw { to { stroke-dashoffset: 0; } }
@keyframes ab-knot { to { transform: scale(1); } }

.ab-hero__pulse {
  fill: none;
  stroke: var(--copper-light);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.14 1.2;
  stroke-dashoffset: calc(0.14 - var(--align, 0) * 1.34);
  opacity: calc(min(var(--align, 0) * 6, 1));
}

.ab-hero__pulse--joined { stroke-dashoffset: calc(0.14 - max(var(--align, 0) - 0.45, 0) * 2.44); opacity: calc(min(max(var(--align, 0) - 0.45, 0) * 8, 1)); }

.ab-hero__knot-ring {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(1 + var(--align, 0) * 2.2));
  opacity: calc(var(--align, 0) * 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero__pulse,
  .ab-hero__knot-ring { display: none; }
}

.ab-section-head { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }

/* Who we are */
.ab-who {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .ab-who { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.ab-who__text .lead { max-width: 36rem; margin-top: 1.75rem; }
.ab-who__text .muted { max-width: 34rem; margin-top: 1.25rem; }

.ab-venn {
  position: relative;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--line);
}

.ab-venn::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3rem;
  height: 3rem;
  border-top: 2px solid var(--copper);
  border-left: 2px solid var(--copper);
}

.ab-venn svg { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; }

.ab-venn {
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(198, 107, 61, 0.07), rgba(198, 107, 61, 0) 70%),
    var(--white);
}

.ab-venn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34, 36, 40, 0.16) 1px, transparent 1.4px);
  background-size: 16px 16px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
}

.ab-venn::before { z-index: 2; }

/* Decorative motion layers */
.ab-venn__orbit {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2 7;
  transform-box: view-box;
  animation: venn-orbit 60s linear infinite;
}

.ab-venn__orbit--a { stroke: rgba(34, 36, 40, 0.3); transform-origin: 185px 140px; }
.ab-venn__orbit--b { stroke: rgba(198, 107, 61, 0.55); transform-origin: 295px 140px; animation-direction: reverse; }

.ab-venn__flow {
  fill: none;
  stroke: rgba(34, 36, 40, 0.18);
  stroke-width: 1;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.ab-venn__flow--b { stroke: rgba(198, 107, 61, 0.4); }

.ab-venn__dot--a { fill: var(--charcoal); }
.ab-venn__dot--b { fill: var(--copper); }

.ab-venn__glow {
  transform-box: view-box;
  transform-origin: 240px 140px;
  animation: venn-breathe 4.8s ease-in-out infinite;
}

.ab-venn__pulse {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.25;
  transform-box: view-box;
  transform-origin: 240px 140px;
  animation: venn-pulse 3.2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.ab-venn__chip circle { fill: var(--white); stroke-width: 1.25; }
.ab-venn__chip path { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-venn__chip--a circle { stroke: rgba(34, 36, 40, 0.45); }
.ab-venn__chip--a path { stroke: var(--charcoal); }
.ab-venn__chip--b circle { stroke: rgba(198, 107, 61, 0.7); }
.ab-venn__chip--b path { stroke: var(--copper-ink); }

@keyframes venn-orbit { to { transform: rotate(360deg); } }
@keyframes venn-breathe { 0%, 100% { opacity: 0.65; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes venn-pulse { 0% { opacity: 0.6; transform: scale(0.75); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

.ab-venn svg.is-paused * { animation-play-state: paused; }

.js .ab-venn .ab-venn__fx { opacity: 0; transition: opacity 0.9s var(--ease) 1.4s; }
.js .ab-venn.is-revealed .ab-venn__fx { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ab-venn__orbit,
  .ab-venn__glow { animation: none; }
  .ab-venn__pulse,
  .ab-venn__dot { display: none; }
}

.ab-venn__ring {
  fill: none;
  stroke: var(--charcoal);
  stroke-opacity: 0.35;
  stroke-width: 1.5;
  transition: transform 1.1s var(--ease) 0.2s;
}

.ab-venn__ring--b { stroke: var(--copper); stroke-opacity: 0.85; }
.ab-venn__lens { fill: var(--copper); fill-opacity: 0.16; transition: opacity 0.8s var(--ease) 1s; }

.ab-venn__label,
.ab-venn__core {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--charcoal);
}

.ab-venn__core { font-size: 16px; letter-spacing: 0.06em; text-transform: none; fill: var(--copper-ink); transition: opacity 0.8s var(--ease) 1.1s; }

.js .ab-venn .ab-venn__ring--a { transform: translateX(-36px); }
.js .ab-venn .ab-venn__ring--b { transform: translateX(36px); }
.js .ab-venn .ab-venn__lens,
.js .ab-venn .ab-venn__core { opacity: 0; }
.js .ab-venn.is-revealed .ab-venn__ring { transform: none; }
.js .ab-venn.is-revealed .ab-venn__lens,
.js .ab-venn.is-revealed .ab-venn__core { opacity: 1; }
/* What we do */
.section--grid-light { overflow: hidden; isolation: isolate; }

.section--grid-light::before,
.section--grid-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.section--grid-light::before {
  background-image:
    linear-gradient(rgba(34, 36, 40, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 36, 40, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 60%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 60%, #000 25%, transparent 85%);
}

.section--grid-light::after {
  background-image:
    linear-gradient(rgba(198, 107, 61, 0.12), rgba(198, 107, 61, 0.12)),
    linear-gradient(rgba(198, 107, 61, 0.09), rgba(198, 107, 61, 0.09)),
    linear-gradient(rgba(34, 36, 40, 0.05), rgba(34, 36, 40, 0.05)),
    linear-gradient(rgba(198, 107, 61, 0.08), rgba(198, 107, 61, 0.08));
  background-repeat: no-repeat;
  background-size: 27px 27px;
  background-position:
    calc(50% + 0.5px + 28px * 12) calc(1px + 28px * 3),
    calc(50% + 0.5px + 28px * 19) calc(1px + 28px * 8),
    calc(50% + 0.5px - 28px * 15) calc(1px + 28px * 5),
    calc(50% + 0.5px - 28px * 20) calc(1px + 28px * 17);
}

.ab-focus { position: relative; display: grid; gap: 1.5rem; }

@media (min-width: 960px) {
  .ab-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
}

.ab-focus__link {
  position: relative;
  z-index: 3;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-block: -2.25rem;
  border: 1px solid var(--copper);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 10px 24px -12px rgba(34, 36, 40, 0.35);
}

.ab-focus__link::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--copper);
  border-radius: 50%;
  animation: focus-ring 3s var(--ease) infinite;
}

.ab-focus__link svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: var(--charcoal);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

.ab-focus__link .ab-focus__chev { stroke: var(--copper); animation: focus-chev 3s var(--ease) infinite; }

@media (min-width: 960px) {
  .ab-focus__link {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0;
    transform: translate(-50%, -50%);
  }

  .ab-focus__link svg { width: 1.6rem; height: 1.6rem; transform: none; }
}

@keyframes focus-ring {
  0% { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

@keyframes focus-chev {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

.ab-panel {
  --art-ink: rgba(34, 36, 40, 0.55);
  --art-soft: rgba(34, 36, 40, 0.18);
  --art-accent: var(--copper);
  --art-bg: var(--warm);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(198, 107, 61, 0.08), rgba(198, 107, 61, 0) 45%),
    var(--warm);
  border: 1px solid var(--line);
  transition: box-shadow 0.5s var(--ease);
}

.ab-panel:hover { box-shadow: inset 0 0 0 1px rgba(198, 107, 61, 0.25), 0 24px 48px -32px rgba(34, 36, 40, 0.35); }

.ab-panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.ab-panel:hover::before,
.ab-panel:focus-within::before { transform: scaleX(1); }

.ab-panel__art {
  position: absolute;
  top: calc(clamp(2rem, 1.5rem + 2.5vw, 3.5rem) - 0.75rem);
  right: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  width: clamp(6rem, 2rem + 7.5vw, 9.5rem);
  height: auto;
  overflow: visible;
}

.ab-art__stroke,
.ab-art__link,
.ab-art__glyph,
.ab-art__sync path {
  fill: none;
  stroke: var(--art-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-art__fill { fill: var(--art-soft); }
.ab-art__fill--accent { fill: var(--art-accent); }

.ab-art__code {
  fill: var(--art-soft);
  transform-box: fill-box;
  transform-origin: left center;
  animation: art-type 6s var(--ease) var(--d, 0s) infinite both;
}

.ab-art__code--accent { fill: var(--art-accent); opacity: 0.7; }
.ab-art__cursor { fill: var(--art-accent); animation: art-blink 1s steps(1) infinite; }
.ab-art__cloud { fill: var(--art-bg); stroke: var(--art-accent); stroke-width: 1.5; stroke-linejoin: round; }
.ab-art__sync { transform-box: view-box; transform-origin: 129px 38px; animation: art-spin 5s linear infinite; }
.ab-art__sync path { stroke: var(--art-accent); }

.ab-art__link { stroke: var(--art-soft); stroke-dasharray: 2 5; animation: art-dash 1.6s linear infinite; }
.ab-art__link--base { animation: none; }

.ab-art__match {
  fill: none;
  stroke: var(--art-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 72;
  animation: art-match 6s var(--ease) infinite both;
}

.ab-art__node { fill: var(--art-bg); stroke: var(--art-ink); stroke-width: 1.5; }
.ab-art__node--role { stroke: var(--art-accent); }
.ab-art__person--match .ab-art__node { animation: art-node 6s var(--ease) infinite both; }

.ab-art__check { transform-box: view-box; transform-origin: 146px 44px; animation: art-check 6s var(--ease) infinite both; }
.ab-art__check circle { fill: var(--art-accent); }
.ab-art__check path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ab-art.is-paused * { animation-play-state: paused; }

@keyframes art-type {
  0% { transform: scaleX(0); opacity: 1; }
  14%, 78% { transform: scaleX(1); opacity: 1; }
  88%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes art-blink { 50% { opacity: 0; } }
@keyframes art-spin { to { transform: rotate(360deg); } }
@keyframes art-dash { to { stroke-dashoffset: -14; } }

@keyframes art-match {
  0%, 10% { stroke-dashoffset: 72; opacity: 1; }
  40%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes art-node {
  0%, 8%, 92%, 100% { stroke: var(--art-ink); }
  14%, 86% { stroke: var(--art-accent); }
}

@keyframes art-check {
  0%, 40% { transform: scale(0); opacity: 0; }
  48%, 85% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-art *,
  .ab-focus__link::before,
  .ab-focus__link .ab-focus__chev { animation: none !important; }
  .ab-art__match { stroke-dashoffset: 0; }
  .ab-art__person--match .ab-art__node { stroke: var(--art-accent); }
  .ab-focus__link::before { display: none; }
}

.ab-panel__kicker {
  display: flex;
  gap: 0.75rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ab-panel__kicker span { color: var(--copper-ink); }

.ab-panel__title {
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  letter-spacing: -0.03em;
}

.ab-panel__text { max-width: 30rem; font-size: 1.0625rem; color: var(--text-muted); }

.ab-panel__list {
  display: grid;
  margin: 2rem 0 2.5rem;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 560px) {
  .ab-panel__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
}

.ab-panel__list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.25rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.9375rem;
  font-weight: 500;
}

.ab-panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.55rem;
  width: 0.5rem;
  height: 1px;
  background: var(--copper);
}

.ab-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--charcoal);
  transition: color 0.25s var(--ease);
}

.ab-panel__link:hover { color: var(--copper-ink); }
.ab-panel__link .btn__icon { transition: transform 0.3s var(--ease); }
.ab-panel__link:hover .btn__icon { transform: translateX(4px); }

.ab-panel__link { position: relative; }

.ab-panel__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.ab-panel__link:hover::after,
.ab-panel__link:focus-visible::after { transform: scaleX(1); }

.js .ab-panel[data-reveal] .ab-panel__list li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .ab-panel[data-reveal] .ab-panel__list li::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.js .ab-panel.is-revealed .ab-panel__list li { opacity: 1; transform: none; }
.js .ab-panel.is-revealed .ab-panel__list li::before { transform: scaleX(1); }
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(1),
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(1)::before { transition-delay: 0.35s; }
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(2),
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(2)::before { transition-delay: 0.45s; }
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(3),
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(3)::before { transition-delay: 0.55s; }
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(4),
.js .ab-panel.is-revealed .ab-panel__list li:nth-child(4)::before { transition-delay: 0.65s; }

.ab-panel--dark {
  --art-ink: rgba(255, 255, 255, 0.6);
  --art-soft: rgba(255, 255, 255, 0.2);
  --art-accent: var(--copper-light);
  --art-bg: var(--charcoal);
  background:
    radial-gradient(circle at 100% 0%, rgba(198, 107, 61, 0.16), rgba(198, 107, 61, 0) 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px),
    var(--charcoal);
  border-color: var(--charcoal);
}
.ab-panel--dark .ab-panel__title { color: var(--white); }
.ab-panel--dark .ab-panel__text { color: var(--text-on-dark); }
.ab-panel--dark .ab-panel__kicker { color: var(--text-on-dark-muted); }
.ab-panel--dark .ab-panel__kicker span,
.ab-panel--dark .ab-panel__link:hover { color: var(--copper-light); }
.ab-panel--dark .ab-panel__link::after { background: var(--copper-light); }
.ab-panel--dark .ab-panel__list,
.ab-panel--dark .ab-panel__list li { border-color: var(--line-dark); }
.ab-panel--dark .ab-panel__list li { color: var(--white); }
.ab-panel--dark .ab-panel__link { color: var(--white); }
.ab-panel--dark :focus-visible { outline-color: var(--copper-light); }

/* Approach timeline */
.ab-approach {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
}

@media (min-width: 960px) {
  .ab-approach { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ab-approach__head { position: sticky; top: calc(var(--header-h) + 2.5rem); align-self: start; }
}

.ab-timeline {
  --marker: 0.875rem;
  position: relative;
  list-style: none;
}

.ab-timeline::before,
.ab-timeline::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: calc(var(--marker) / 2 - 0.5px);
  width: 1px;
}

.ab-timeline::before {
  bottom: 0;
  background: linear-gradient(var(--line-strong) 80%, transparent);
}

.ab-timeline::after {
  left: calc(var(--marker) / 2 - 1px);
  width: 2px;
  height: var(--fill, calc(100% - 1.4rem));
  max-height: calc(100% - 1.4rem);
  background: var(--copper);
}

.ab-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) clamp(3.5rem, 2.5rem + 3vw, 6rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.ab-timeline__item:last-child { padding-bottom: 0; }

.ab-timeline__marker {
  position: relative;
  z-index: 1;
  width: var(--marker);
  height: var(--marker);
  margin-top: calc(1.4rem - var(--marker) / 2);
  border: 1.5px solid var(--copper);
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 6px rgba(198, 107, 61, 0.14);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.ab-timeline__num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--copper-ink);
  transition: color 0.4s var(--ease);
}

.ab-timeline__title {
  margin-bottom: 0.5rem;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
}

.ab-timeline__item p { max-width: 30rem; color: var(--text-muted); }

.js .ab-timeline__item:not(.is-active) .ab-timeline__marker {
  border-color: var(--line-strong);
  background: var(--warm);
  box-shadow: 0 0 0 6px rgba(198, 107, 61, 0);
}

.js .ab-timeline__item:not(.is-active) .ab-timeline__num { color: var(--line-strong); }

/* Values */
.ab-section-head--split {
  display: grid;
  gap: 1.25rem 4rem;
  align-items: end;
}

@media (min-width: 960px) {
  .ab-section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.section--dots { overflow: hidden; isolation: isolate; }

.section--dots::before,
.section--dots::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.section--dots::before {
  background-image: radial-gradient(rgba(34, 36, 40, 0.13) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 68%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 68%, #000 20%, transparent 80%);
}

.section--dots::after {
  background: radial-gradient(ellipse 40% 45% at 18% 22%, rgba(198, 107, 61, 0.07), rgba(198, 107, 61, 0) 70%);
}

.ab-values-wrap { position: relative; }

.ab-values__thread {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(198, 107, 61, 0.6), rgba(198, 107, 61, 0.12));
  pointer-events: none;
}

.ab-values__thread::after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 0 4px rgba(198, 107, 61, 0.15), 0 0 14px 2px rgba(198, 107, 61, 0.45);
  animation: thread-v 7s var(--ease) infinite;
}

.ab-values__thread.is-paused::after { animation-play-state: paused; }

@keyframes thread-v {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 7px); opacity: 0; }
}

@keyframes thread-h {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

@media (min-width: 640px) {
  .ab-values__thread {
    top: 0;
    bottom: auto;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(198, 107, 61, 0.12), rgba(198, 107, 61, 0.6) 50%, rgba(198, 107, 61, 0.12));
  }

  .ab-values__thread::after { top: -3px; left: 0; animation-name: thread-h; }
}

.ab-values {
  display: grid;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

@media (min-width: 640px) {
  .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .ab-values { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ab-value {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(0deg, var(--warm), rgba(246, 245, 242, 0.4) 70%, rgba(246, 245, 242, 0)) no-repeat left bottom / 100% 0%,
    var(--white);
  transition: background-size 0.6s var(--ease);
}

.ab-value:hover { background-size: 100% 100%, auto; }

.ab-value::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  left: -5px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--copper);
  border-radius: 50%;
  background: var(--white);
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.ab-value:hover::after { background: var(--copper); transform: scale(1.25); }

@media (min-width: 640px) {
  .ab-value::after { top: -5px; left: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
}

.ab-value__top,
.ab-value__title,
.ab-value p { position: relative; z-index: 1; }

.ab-value__mark {
  margin-top: -0.4rem;
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 3rem + 1.6vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 107, 61, 0.35);
  pointer-events: none;
  user-select: none;
  transition: transform 0.6s var(--ease), -webkit-text-stroke-color 0.6s var(--ease);
}

.ab-value:hover .ab-value__mark { transform: translateY(-4px); -webkit-text-stroke-color: rgba(198, 107, 61, 0.7); }

.ab-value::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.ab-value:hover::before { transform: scaleX(1); }

.ab-value__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.ab-value__badge {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 1px solid rgba(198, 107, 61, 0.3);
  background: rgba(198, 107, 61, 0.07);
  color: var(--copper-ink);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}

.ab-value:hover .ab-value__badge {
  border-color: var(--copper-ink);
  background: var(--copper-ink);
  color: var(--white);
  transform: scale(1.06);
}

.ab-value__icon {
  width: 2.25rem;
  height: 2.25rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-value__icon .v-draw {
  stroke-dasharray: 1;
  animation: v-draw 6s var(--ease) var(--d) infinite both;
}

.ab-value__icon .v-draw--late { animation-name: v-draw-late; }

.ab-value__icon .v-trace {
  stroke: var(--copper-light);
  stroke-width: 2;
  stroke-dasharray: 14 86;
  opacity: 0;
  animation: v-trace 6s linear var(--d) infinite both;
}

.ab-value__icon .v-link { stroke-dasharray: 1.5 2; opacity: 0.8; animation: v-link 1.4s linear infinite; }
.ab-value__icon .v-left { animation: v-left 6s var(--ease) var(--d) infinite both; }
.ab-value__icon .v-right { animation: v-right 6s var(--ease) var(--d) infinite both; }

.ab-value__icon .v-spin {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: v-spin 6s var(--ease) var(--d) infinite both;
}

.ab-value__icon .v-core { fill: currentColor; stroke: none; animation: v-core 6s var(--ease) var(--d) infinite both; }

.ab-value__icon .v-bar {
  fill: currentColor;
  stroke: none;
  opacity: 0.25;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: v-bar 6s var(--ease) calc(var(--d) + var(--b)) infinite both;
}

.ab-value__icon .v-draw--trend { animation-name: v-draw-late; }
.ab-value__icon .v-head { animation: v-head 6s var(--ease) var(--d) infinite both; }

.ab-value__icon.is-paused * { animation-play-state: paused; }

@keyframes v-draw {
  0% { stroke-dashoffset: 1; }
  30%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0.25; }
}

@keyframes v-draw-late {
  0%, 30% { stroke-dashoffset: 1; }
  48%, 88% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0.25; }
}

@keyframes v-trace {
  0%, 50% { stroke-dashoffset: 0; opacity: 0; }
  55% { opacity: 1; }
  80% { stroke-dashoffset: -100; opacity: 1; }
  85%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes v-link { to { stroke-dashoffset: -7; } }

@keyframes v-left {
  0%, 15%, 85%, 100% { transform: translateX(0); }
  35%, 65% { transform: translateX(1.2px); }
}

@keyframes v-right {
  0%, 15%, 85%, 100% { transform: translateX(0); }
  35%, 65% { transform: translateX(-1.2px); }
}

@keyframes v-spin {
  0%, 20% { transform: rotate(0deg); }
  45%, 70% { transform: rotate(180deg); }
  95%, 100% { transform: rotate(360deg); }
}

@keyframes v-core {
  0%, 20%, 95%, 100% { opacity: 0.35; }
  45%, 70% { opacity: 1; }
}

@keyframes v-bar {
  0% { transform: scaleY(0); }
  18%, 88% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

@keyframes v-head {
  0%, 46% { opacity: 0; transform: translate(-2px, 2px); }
  54%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

.ab-value__title {
  margin-bottom: 0.75rem;
  font-size: clamp(1.25rem, 1.15rem + 0.35vw, 1.45rem);
  letter-spacing: -0.02em;
}

.ab-value p { color: var(--text-muted); }

.ab-value p::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 1px;
  margin-bottom: 0.85rem;
  background: var(--copper);
  transform-origin: left;
  transition: transform 0.6s var(--ease) 0.45s;
}

.js .ab-value[data-reveal] p::before { transform: scaleX(0); }
.js .ab-value.is-revealed p::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .ab-value::before { transition: none; }
  .ab-value__icon *,
  .ab-values__thread::after { animation: none !important; }
  .ab-value__icon .v-trace,
  .ab-values__thread::after { display: none; }
  .ab-value__icon .v-core { opacity: 1; }
}

/* Vision */
.ab-vision { overflow: hidden; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

.ab-vision__layout {
  position: relative;
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .ab-vision__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); }
}

.ab-vision__visual {
  position: relative;
  width: 100%;
  max-width: 22rem;
  justify-self: center;
  aspect-ratio: 1;
}

@media (min-width: 1024px) {
  .ab-vision__visual { max-width: 34rem; justify-self: end; }
}

.ab-vision__visual::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 50% 55%, rgba(198, 107, 61, 0.16), rgba(198, 107, 61, 0) 60%);
  pointer-events: none;
}

.ab-vision__float {
  position: absolute;
  inset: 0;
  transform: translateY(var(--parallax, 0px));
}

.ab-vision__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
  pointer-events: none;
}

.ab-vision__art .ab-vision__disc { fill: url(#vision-disc); stroke: none; }

.ab-vision__person {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 50%), radial-gradient(circle closest-side at 50% 50%, #000 73.1%, transparent 73.4%);
  mask-image: linear-gradient(#000 50%, transparent 50%), radial-gradient(circle closest-side at 50% 50%, #000 73.1%, transparent 73.4%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ab-vision__person img {
  position: absolute;
  left: 19%;
  bottom: 13.33%;
  width: 62%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
}

.ab-vision__pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.ab-vision__pillar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-dark);
}

@media (min-width: 1200px) {
  .ab-vision__pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ab-vision__pillar { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding: 1.25rem 0; border-bottom: 0; }
}

.ab-vision__pillar-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(198, 107, 61, 0.35);
  background: rgba(198, 107, 61, 0.1);
  color: var(--copper-light);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.ab-vision__pillar:hover .ab-vision__pillar-icon { background: var(--copper); color: var(--white); }

.ab-vision__pillar-label {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--white);
}

.ab-pillar {
  width: 1.4rem;
  height: 1.4rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-pillar .p-draw { stroke-dasharray: 1; animation: v-draw 6s var(--ease) var(--d) infinite both; }
.ab-pillar .p-draw--late { animation-name: v-draw-late; }
.ab-pillar--progress .p-draw { animation-name: v-draw-late; }
.ab-pillar .p-head { animation: v-head 6s var(--ease) var(--d) infinite both; }
.ab-pillar .p-cursor { animation: art-blink 1.1s steps(1) infinite; }
.ab-pillar .p-link { stroke-dasharray: 1.5 2; animation: v-link 1.4s linear infinite; }
.ab-pillar .p-spin { transform-box: view-box; transform-origin: 12px 13.5px; animation: art-spin 5s linear infinite; }

.ab-pillar .p-check {
  transform-box: fill-box;
  transform-origin: center;
  animation: p-pop 6s var(--ease) var(--d) infinite both;
}

.ab-pillar.is-paused * { animation-play-state: paused; }

@keyframes p-pop {
  0%, 30% { transform: scale(0); opacity: 0; }
  40%, 88% { transform: scale(1); opacity: 1; }
  96%, 100% { transform: scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-pillar * { animation: none !important; }
}

.ab-vision__accent { stroke: var(--copper); stroke-opacity: 0.55; }

.ab-vision__arc,
.ab-vision__orbit,
.ab-vision__wave {
  transform-box: view-box;
  transform-origin: 300px 300px;
}

.ab-vision__art .ab-vision__arc,
.ab-vision__art .ab-vision__orbit,
.ab-vision__art .ab-vision__wave { animation-play-state: paused; }

.ab-vision__art.is-flowing .ab-vision__arc,
.ab-vision__art.is-flowing .ab-vision__orbit,
.ab-vision__art.is-flowing .ab-vision__wave { animation-play-state: running; }

.ab-vision__arc {
  stroke: var(--copper);
  stroke-linecap: round;
  animation: ab-spin 26s linear infinite;
}

.ab-vision__arc--outer { stroke-width: 1.5; stroke-opacity: 0.7; stroke-dasharray: 9 91; }
.ab-vision__arc--mid { stroke-width: 1.5; stroke-opacity: 0.55; stroke-dasharray: 14 86; animation-duration: 18s; animation-direction: reverse; }
.ab-vision__arc--inner { stroke-width: 1.5; stroke-opacity: 0.45; stroke-dasharray: 6 44; animation-duration: 14s; }
.ab-vision__arc--core { stroke-width: 2; stroke-opacity: 0.9; stroke-dasharray: 22 78; animation-duration: 7s; animation-direction: reverse; }

.ab-vision__orbit { animation: ab-spin 40s linear infinite; }
.ab-vision__dot { fill: var(--copper); stroke: none; }

.ab-vision__wave {
  stroke: var(--copper);
  stroke-width: 1;
  opacity: 0;
  animation: ab-wave 6s ease-out infinite;
}

.ab-vision__wave--late { animation-delay: 3s; }

@keyframes ab-spin { to { transform: rotate(360deg); } }
@keyframes ab-wave { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

@media (prefers-reduced-motion: reduce) {
  .ab-vision__arc, .ab-vision__orbit, .ab-vision__wave { animation: none; }
}

.ab-vision__title {
  max-width: 20ch;
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.ab-vision__text {
  max-width: 38rem;
  margin-top: 2rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--copper);
  font-size: var(--fs-lead);
  color: var(--text-on-dark);
}

/* Closing call to action */
.ab-close__box {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  background: var(--white);
  border: 1px solid var(--line);
}

.ab-close__box::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: -1px;
  width: 6rem;
  height: 3px;
  background: var(--copper);
}

.js .ab-close__box::before { transition: width 1.4s var(--ease) 0.4s; }
.js .ab-close__box.is-revealed::before { width: calc(100% + 2px); }

.ab-close__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ab-close__art::before,
.ab-close__art::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ab-close__art::before {
  background-image:
    linear-gradient(rgba(34, 36, 40, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 36, 40, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: right -1px top -1px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
  mask-image: linear-gradient(to left, #000, transparent 70%);
}

.ab-close__art::after {
  background: radial-gradient(ellipse 45% 70% at 100% 0%, rgba(198, 107, 61, 0.12), rgba(198, 107, 61, 0) 70%);
}

.ab-close__art svg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  overflow: visible;
}

@media (min-width: 960px) {
  .ab-close__art svg { width: min(62%, 44rem); opacity: 1; }
}

.ab-close__track { fill: none; stroke: rgba(34, 36, 40, 0.14); stroke-width: 1.5; stroke-dasharray: 2 7; }

.ab-close__route {
  fill: none;
  stroke: url(#close-fade);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
}

.js .ab-close__box .ab-close__route { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) 0.5s; }
.js .ab-close__box.is-revealed .ab-close__route { stroke-dashoffset: 0; }

.ab-close__chev { fill: none; stroke: var(--copper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-close__goal { fill: var(--copper); }

.ab-close__pulse {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: close-pulse 2.4s var(--ease) infinite;
}

.ab-close__art svg.is-paused .ab-close__pulse { animation-play-state: paused; }

@keyframes close-pulse {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}

.ab-close__copy,
.ab-close__actions { position: relative; }

.ab-close__paths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  list-style: none;
}

.ab-close__path {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 1.1rem 0.75rem;
  border: 1px solid var(--line-strong);
  background: var(--warm);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.ab-close__path-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ab-close__path-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--charcoal);
  transition: color 0.3s var(--ease);
}

.ab-close__path .btn__icon { transition: transform 0.3s var(--ease); }
.ab-close__path:hover { border-color: var(--copper); background: var(--white); }
.ab-close__path:hover .ab-close__path-name { color: var(--copper-ink); }
.ab-close__path:hover .btn__icon { transform: translateX(4px); }

.ab-close__actions .btn--primary { position: relative; overflow: hidden; }

.ab-close__actions .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease);
}

.ab-close__actions .btn--primary:hover::after { transform: translateX(120%); }
.ab-close__actions .btn--outline { background: var(--white); }
.ab-close__actions .btn--outline:hover { border-color: var(--copper-ink); color: var(--copper-ink); }

@media (prefers-reduced-motion: reduce) {
  .ab-close__pulse, .ab-close__chev { display: none; }
  .js .ab-close__box .ab-close__route { stroke-dashoffset: 0; transition: none; }
}

@media (min-width: 960px) {
  .ab-close__box { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
}

.ab-close__title {
  max-width: 18ch;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.ab-close__text { max-width: 34rem; margin-top: 1rem; font-size: 1.0625rem; color: var(--text-muted); }

/* Service pages ------------------------------------------------------------ */
.svc-title {
  max-width: 16ch;
  margin-bottom: 1.5rem;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.svc-lead {
  max-width: 40rem;
  font-size: var(--fs-lead);
  color: var(--text-muted);
}

.svc-actions { margin-top: 2.25rem; }

.svc-head {
  display: grid;
  gap: 1.5rem 4rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.svc-head .lead { max-width: 36rem; }

@media (min-width: 960px) {
  .svc-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.svc-link svg { width: 0.95rem; height: 0.95rem; transition: transform 0.35s var(--ease); }
.svc-link:hover { color: var(--copper-ink); border-color: var(--copper); }
.svc-link:hover svg { transform: translateX(4px); }

/* Shared hero shells */
.sv-hero,
.it-hero,
.tl-hero,
.rt-hero,
.dark-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem);
  background: var(--warm);
}

.sv-hero > .container,
.it-hero > .container,
.tl-hero > .container,
.rt-hero > .container,
.dark-hero > .container { position: relative; }

.dark-hero,
.hero--dark { background: var(--charcoal); color: var(--text-on-dark); }
.dark-hero .rules span,
.hero--dark .rules span { border-left-color: rgba(255, 255, 255, 0.05); }
.dark-hero .breadcrumb,
.hero--dark .breadcrumb { color: var(--text-on-dark-muted); }
.dark-hero .breadcrumb li + li::before,
.hero--dark .breadcrumb li + li::before { color: rgba(255, 255, 255, 0.25); }
.dark-hero .breadcrumb a:hover,
.dark-hero .breadcrumb [aria-current="page"],
.hero--dark .breadcrumb a:hover,
.hero--dark .breadcrumb [aria-current="page"] { color: var(--white); }
.dark-hero .eyebrow,
.hero--dark .eyebrow { color: var(--copper-light); }
.dark-hero .svc-title,
.hero--dark .svc-title,
.hero--dark .page-hero__title { color: var(--white); }
.dark-hero .svc-lead,
.hero--dark .svc-lead,
.hero--dark .page-hero__lead { color: var(--text-on-dark); }
.dark-hero :focus-visible,
.hero--dark :focus-visible { outline-color: var(--copper-light); }
.hero--dark .btn--outline { border-color: rgba(255, 255, 255, 0.3); color: var(--white); }
.hero--dark .btn--outline:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }
.hero--dark .meta { color: var(--copper-light); }
.hero--dark .meta span + span { color: var(--text-on-dark-muted); }
.hero--dark .page-hero__art { box-shadow: 0 0 0 1px var(--line-dark), var(--shadow-lg); }
.hero--dark .sv-index,
.hero--dark .it-roles { box-shadow: var(--shadow-lg); }
.hero--dark .tl-network__links path { stroke: rgba(255, 255, 255, 0.22); }
.hero--dark .tl-network__nodes circle { fill: var(--charcoal); stroke: rgba(255, 255, 255, 0.75); }

/* Services overview */
.sv-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 1024px) {
  .sv-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.sv-hero__side { position: relative; align-self: center; }

.sv-net {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  max-width: 46rem;
  height: auto;
  overflow: visible;
  opacity: 0.6;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .sv-net { width: 150%; opacity: 1; }
}

.sv-net__dots { opacity: 0.16; }
.sv-net__ring { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 3 8; transform-box: view-box; transform-origin: 300px 300px; animation: ab-spin 80s linear infinite; }
.sv-net__ring--inner { stroke: rgba(198, 107, 61, 0.35); animation-direction: reverse; animation-duration: 60s; }
.sv-net__mesh { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
.sv-net__line { fill: none; stroke-width: 1; stroke: rgba(255, 255, 255, 0.16); }
.sv-net__line--talent { stroke: rgba(198, 107, 61, 0.35); }
.sv-net__flow--tech { fill: var(--white); }
.sv-net__flow--talent { fill: var(--copper-light); }
.sv-net__node { fill: var(--charcoal); stroke-width: 1.5; }
.sv-net__node--tech { stroke: rgba(255, 255, 255, 0.7); }
.sv-net__node--talent { stroke: var(--copper-light); }
.sv-net__core { fill: var(--copper); }

.sv-net__pulse {
  fill: none;
  stroke: var(--copper);
  transform-box: fill-box;
  transform-origin: center;
  animation: close-pulse 3s var(--ease) infinite;
}

.sv-net__chip > circle { fill: var(--charcoal); stroke: var(--copper-light); stroke-width: 1.2; }
.sv-net__chip path,
.sv-net__chip rect,
.sv-net__chip g > circle { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sv-net.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sv-net__ring, .sv-net__pulse { animation: none; }
  .sv-net__flow { display: none; }
}

.sv-index {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: rgba(34, 36, 40, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.sv-index::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--copper);
  transform-origin: left;
}

.js .sv-index::before { transform: scaleX(0.2); transition: transform 1.2s var(--ease) 0.5s; }
.js .sv-index.is-revealed::before { transform: scaleX(1); }

.sv-index__label {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.sv-index ol { list-style: none; }

.sv-index a {
  display: grid;
  grid-template-columns: 1.75rem 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.25s var(--ease), padding-left 0.35s var(--ease);
}

.sv-index li:last-child a { border-bottom: 0; padding-bottom: 0.25rem; }
.sv-index__num { font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--text-on-dark-muted); transition: color 0.25s var(--ease); }

.sv-index__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(198, 107, 61, 0.35);
  background: rgba(198, 107, 61, 0.12);
  color: var(--copper-light);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.sv-index__icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-index a > svg { width: 1rem; height: 1rem; opacity: 0.4; transition: opacity 0.25s var(--ease), transform 0.35s var(--ease); }
.sv-index a:hover { color: var(--copper-light); padding-left: 0.35rem; }
.sv-index a:hover .sv-index__num { color: var(--copper-light); }
.sv-index a:hover .sv-index__icon { background: var(--copper); color: var(--white); }
.sv-index a:hover > svg { opacity: 1; transform: translateX(3px); }

.sv-rows { border-top: 1px solid var(--line); }

.sv-row {
  display: grid;
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 960px) {
  .sv-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
  .sv-row--alt { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .sv-row--alt .sv-row__emblem { order: 2; }
}

.sv-row__emblem {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--charcoal);
}

.sv-row__emblem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 28, 31, 0.45) 0%, rgba(27, 28, 31, 0) 32%, rgba(27, 28, 31, 0) 62%, rgba(27, 28, 31, 0.7) 100%);
  pointer-events: none;
}

.sv-row__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.sv-row:hover .sv-row__photo { transform: scale(1.04); }

.sv-row__big {
  position: absolute;
  z-index: 1;
  left: 1.25rem;
  bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.75rem + 2.5vw, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--copper-light);
  transition: color 0.5s var(--ease);
}

.sv-row:hover .sv-row__big { color: rgba(198, 107, 61, 0.35); }

.sv-row__emblem::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  width: 3rem;
  height: 3rem;
  border-top: 2px solid var(--copper);
  border-left: 2px solid var(--copper);
  transform: scale(0);
  transform-origin: top left;
  transition: transform 0.5s var(--ease);
}

.sv-row:hover .sv-row__emblem::before { transform: scale(1); }

.sv-row { position: relative; isolation: isolate; }

.sv-row:not(.sv-row--alt) {
  background: var(--warm);
  box-shadow: 0 0 0 100vmax var(--warm);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 960px) {
  .sv-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(clamp(2.5rem, 5vw, 4rem) - 1.5rem);
    left: -1.5rem;
    width: 11rem;
    height: 11rem;
    background-image:
      linear-gradient(rgba(34, 36, 40, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 36, 40, 0.1) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at 0 0, #000 30%, transparent 72%);
    mask-image: radial-gradient(circle at 0 0, #000 30%, transparent 72%);
  }

  .sv-row--alt::before {
    left: auto;
    right: -1.5rem;
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 72%);
    mask-image: radial-gradient(circle at 100% 0, #000 30%, transparent 72%);
  }
}

.sv-row__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }

.sv-row__badge {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(198, 107, 61, 0.3);
  background: rgba(198, 107, 61, 0.07);
  color: var(--copper-ink);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.sv-row:hover .sv-row__badge { background: var(--copper-ink); color: var(--white); }
.sv-row__badge .sv-row__icon { width: 1.75rem; height: 1.75rem; }

.sv-row__pill {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sv-row__pill--technology { background: var(--charcoal); color: var(--white); }
.sv-row__pill--talent { background: var(--copper-ink); color: var(--white); }

@media (min-width: 960px) {
  .sv-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .sv-row--alt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.sv-row__body { max-width: 42rem; }

.sv-row__title {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  letter-spacing: -0.03em;
}

.sv-row__text { margin: 1rem 0 1.75rem; font-size: var(--fs-lead); color: var(--text-muted); }

.sv-row__caps {
  display: grid;
  margin-bottom: 2rem;
  list-style: none;
}

@media (min-width: 640px) {
  .sv-row__caps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

.sv-row__caps li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.4rem;
  font-size: 0.9375rem;
  color: var(--charcoal);
  border-top: 1px solid var(--line);
}

.sv-row__caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.7rem;
  height: 1.5px;
  background: var(--copper);
}

.js .sv-row[data-reveal] .sv-row__caps li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .sv-row[data-reveal] .sv-row__caps li::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.js .sv-row.is-revealed .sv-row__caps li { opacity: 1; transform: none; }
.js .sv-row.is-revealed .sv-row__caps li::before { transform: scaleX(1); }
.js .sv-row.is-revealed .sv-row__caps li:nth-child(1),
.js .sv-row.is-revealed .sv-row__caps li:nth-child(1)::before { transition-delay: 0.3s; }
.js .sv-row.is-revealed .sv-row__caps li:nth-child(2),
.js .sv-row.is-revealed .sv-row__caps li:nth-child(2)::before { transition-delay: 0.4s; }
.js .sv-row.is-revealed .sv-row__caps li:nth-child(3),
.js .sv-row.is-revealed .sv-row__caps li:nth-child(3)::before { transition-delay: 0.5s; }
.js .sv-row.is-revealed .sv-row__caps li:nth-child(4),
.js .sv-row.is-revealed .sv-row__caps li:nth-child(4)::before { transition-delay: 0.6s; }

.sv-process {
  display: grid;
  gap: 2.5rem;
  list-style: none;
}

@media (min-width: 768px) {
  .sv-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .sv-process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
  .sv-process__step { padding: 2.5rem 2rem 0 0; }
  .sv-process__step + .sv-process__step { padding-left: 2rem; border-left: 1px solid var(--line-strong); }
}

.sv-process__step { position: relative; }

.sv-process__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--copper);
  transition: color 0.4s var(--ease);
}

.sv-process__step:hover .sv-process__num { color: var(--copper); }
.sv-process__title { margin: 1.5rem 0 0.75rem; font-size: 1.25rem; }
.sv-process__step p { color: var(--text-muted); font-size: 0.9375rem; }

.sv-cta {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .sv-cta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.sv-cta__head .lead { max-width: 30rem; margin-top: 1.5rem; }

.sv-doors { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .sv-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sv-door {
  --art-ink: rgba(34, 36, 40, 0.55);
  --art-soft: rgba(34, 36, 40, 0.18);
  --art-accent: var(--copper);
  --art-bg: var(--warm);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 100% 100%, rgba(198, 107, 61, 0.12), rgba(198, 107, 61, 0) 50%),
    radial-gradient(rgba(34, 36, 40, 0.1) 1px, transparent 1.5px) 0 0 / 16px 16px,
    var(--warm);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.sv-door::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.sv-door:hover::before,
.sv-door:focus-visible::before { transform: scaleX(1); }

.sv-door__art {
  position: absolute;
  right: clamp(1.25rem, 2.5vw, 2rem);
  bottom: clamp(1.25rem, 2.5vw, 2rem);
  width: clamp(6rem, 4rem + 3vw, 7.5rem);
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.sv-door__tick { transform-box: fill-box; transform-origin: center; animation: p-pop 6s var(--ease) infinite both; }
.sv-door__tick circle { fill: var(--art-accent); }
.sv-door__tick path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sv-door__go { position: relative; }

.sv-door__go::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--copper);
  opacity: 0;
  pointer-events: none;
}

.sv-door:hover .sv-door__go::after { animation: door-ring 1.4s var(--ease) infinite; }

@keyframes door-ring {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-door__tick, .sv-door:hover .sv-door__go::after { animation: none; }
}

.sv-door:hover { border-color: var(--charcoal); transform: translateY(-4px); box-shadow: var(--shadow-md); }

.sv-door__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.sv-door__title {
  margin: 0.85rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--charcoal);
}

.sv-door__text { margin-bottom: 2rem; color: var(--text-muted); font-size: 0.9375rem; }

.sv-door__go {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-top: auto;
  border: 1px solid var(--line-strong);
  color: var(--charcoal);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.sv-door__go svg { width: 1rem; height: 1rem; transition: transform 0.35s var(--ease); }
.sv-door:hover .sv-door__go { background: var(--copper-ink); border-color: var(--copper-ink); color: var(--white); }
.sv-door:hover .sv-door__go svg { transform: translateX(3px); }

.sv-door--dark {
  --art-ink: rgba(255, 255, 255, 0.6);
  --art-soft: rgba(255, 255, 255, 0.2);
  --art-accent: var(--copper-light);
  --art-bg: var(--charcoal);
  background:
    radial-gradient(circle at 100% 100%, rgba(198, 107, 61, 0.22), rgba(198, 107, 61, 0) 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 14px),
    var(--charcoal);
  border-color: var(--charcoal);
}
.sv-door--dark .sv-door__label { color: var(--copper-light); }
.sv-door--dark .sv-door__title { color: var(--white); }
.sv-door--dark .sv-door__text { color: var(--text-on-dark); }
.sv-door--dark .sv-door__go { border-color: rgba(255, 255, 255, 0.25); color: var(--white); }
.sv-door--dark:focus-visible { outline-color: var(--copper-ink); }

/* Software Consulting */
.sc-hero {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .sc-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.sc-window {
  background: var(--charcoal-deep);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
}

.sc-window__bar {
  display: flex;
  gap: 0.45rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line-dark);
}

.sc-window__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.sc-window__bar span:first-child { background: var(--copper); }

.sc-window__body {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.sc-window__body span {
  display: block;
  width: var(--w);
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.14);
  transform-origin: left center;
}

.sc-window__body .is-indent { margin-left: 1.75rem; }
.sc-window__body .is-indent2 { margin-left: 3.5rem; }
.sc-window__body .is-copper { background: var(--copper); opacity: 0.8; }

.sc-window__cursor {
  display: block;
  width: 0.5rem;
  height: 0.9rem;
  margin-left: 1.75rem;
  background: var(--copper-light);
}

@media (prefers-reduced-motion: no-preference) {
  .sc-window__body span { animation: sc-type 0.6s var(--ease) both; }
  .sc-window__body span:nth-child(2) { animation-delay: 0.15s; }
  .sc-window__body span:nth-child(3) { animation-delay: 0.3s; }
  .sc-window__body span:nth-child(4) { animation-delay: 0.45s; }
  .sc-window__body span:nth-child(5) { animation-delay: 0.6s; }
  .sc-window__body span:nth-child(6) { animation-delay: 0.75s; }
  .sc-window__body span:nth-child(7) { animation-delay: 0.9s; }
  .sc-window__body span:nth-child(8) { animation-delay: 1.05s; }
  .sc-window__body span:nth-child(9) { animation-delay: 1.2s; }
  .sc-window__cursor { animation: sc-blink 1.1s steps(1) infinite; }
}

@keyframes sc-type { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-blink { 50% { opacity: 0; } }

.sc-intro {
  display: grid;
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
}

@media (min-width: 960px) {
  .sc-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.sc-intro__list { list-style: none; border-top: 1px solid var(--line); }

.sc-intro__list li {
  display: grid;
  gap: 0.5rem 2rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .sc-intro__list li { grid-template-columns: 9rem minmax(0, 1fr); }
}

.sc-intro__list strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--charcoal);
}

.sc-intro__list strong::after { content: "."; color: var(--copper); }
.sc-intro__list p { color: var(--text-muted); }

.sc-specs {
  display: grid;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 768px) {
  .sc-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-spec:nth-child(odd) { padding-right: clamp(2rem, 4vw, 3.5rem); }
  .sc-spec:nth-child(even) { padding-left: clamp(2rem, 4vw, 3.5rem); border-left: 1px solid var(--line-strong); }
}

.sc-spec {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-strong);
}

.sc-spec__head { display: flex; align-items: baseline; gap: 1rem; }

.sc-spec__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--copper-ink);
}

.sc-spec__title { font-size: var(--fs-h3); transition: color 0.3s var(--ease); }
.sc-spec:target .sc-spec__title { color: var(--copper-ink); }
.sc-spec__text { margin: 1rem 0 1.25rem; color: var(--text-muted); }

.sc-spec__list { list-style: none; }

.sc-spec__list li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.4rem;
  font-size: 0.9375rem;
  color: var(--charcoal);
}

.sc-spec__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 0.7rem;
  height: 1.5px;
  background: var(--copper);
}

.sc-board {
  display: grid;
  gap: 1px;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 768px) {
  .sc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .sc-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sc-board__phase {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--white);
  transition: background-color 0.35s var(--ease);
}

.sc-board__phase:hover { background: var(--warm); }

.sc-board__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.sc-board__title { margin: 0.9rem 0 0.75rem; font-size: 1.375rem; }
.sc-board__phase p { margin-bottom: 1.5rem; font-size: 0.9375rem; color: var(--text-muted); }

.sc-board__phase .sc-board__outcome {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--charcoal);
}

.sc-board__outcome span {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

/* IT Staffing */
.it-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 1024px) {
  .it-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.it-roles {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--white);
  border-top: 3px solid var(--copper);
  box-shadow: var(--shadow-md);
}

.it-roles__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

.it-roles .role-list li { font-size: 0.9375rem; }

.it-grid { display: grid; gap: 2.5rem; }

@media (min-width: 768px) {
  .it-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 0; }
  .it-cell { padding-right: 2.5rem; }
  .it-cell:nth-child(even) { padding-left: 2.5rem; border-left: 1px solid var(--line-strong); }
}

@media (min-width: 1200px) {
  .it-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .it-cell { padding-inline: 2rem; }
  .it-cell:first-child { padding-left: 0; }
  .it-cell:last-child { padding-right: 0; }
  .it-cell + .it-cell { border-left: 1px solid var(--line-strong); }
}

.it-cell { display: flex; flex-direction: column; }

.it-cell__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.75rem;
  fill: none;
  stroke: var(--copper-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--ease);
}

.it-cell:hover .it-cell__icon { transform: translateY(-3px); }
.it-cell__title { margin-bottom: 0.9rem; font-size: 1.375rem; }
.it-cell p { font-size: 0.9375rem; color: var(--text-muted); }

.it-cell .it-cell__fit {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--charcoal);
}
.it-cell__fit span {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.it-chevrons { display: grid; gap: 0.75rem; list-style: none; }

.it-chevron {
  position: relative;
  padding: 1.75rem 1.75rem 1.75rem 2rem;
  background: var(--warm);
  border-left: 3px solid var(--copper);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

@media (min-width: 1024px) {
  .it-chevrons { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }

  .it-chevron {
    padding: 2.25rem 2.25rem 2.25rem 2.5rem;
    border-left: 0;
    clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 50%, calc(100% - 1.25rem) 100%, 0 100%, 1.25rem 50%);
  }

  .it-chevron:first-child {
    padding-left: 2rem;
    clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 50%, calc(100% - 1.25rem) 100%, 0 100%);
  }
}

.it-chevron__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--copper-ink);
}

.it-chevron__title { margin: 0.75rem 0 0.6rem; font-size: 1.25rem; transition: color 0.35s var(--ease); }
.it-chevron p { font-size: 0.9375rem; color: var(--text-muted); transition: color 0.35s var(--ease); }

.it-chevron:hover { background: var(--charcoal); }
.it-chevron:hover .it-chevron__num { color: var(--copper-light); }
.it-chevron:hover .it-chevron__title { color: var(--white); }
.it-chevron:hover p { color: var(--text-on-dark); }

/* Technology Solutions */
.ts-hero {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .ts-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.ts-stack { width: 100%; max-width: 30rem; justify-self: center; overflow: visible; }

.ts-stack__layer rect { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
.ts-stack__layer--base rect { fill: rgba(198, 107, 61, 0.08); stroke: var(--copper-light); }

.ts-stack__layer text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  fill: var(--white);
}

.ts-stack__link { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; stroke-dasharray: 4 5; }
.ts-stack__flow { fill: none; stroke: var(--copper-light); stroke-width: 2; stroke-dasharray: 10 35; opacity: 0; }
.ts-stack__node { fill: var(--copper); transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .ts-stack__flow { opacity: 1; animation: ts-flow 1.6s linear infinite; }
  .ts-stack__node { animation: ts-pulse 2.4s var(--ease) infinite; }
  .ts-stack__node:nth-of-type(2) { animation-delay: 0.8s; }
  .ts-stack__node:nth-of-type(3) { animation-delay: 1.6s; }
}

@keyframes ts-flow { from { stroke-dashoffset: 45; } to { stroke-dashoffset: 0; } }
@keyframes ts-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.ts-shifts { list-style: none; border-top: 1px solid var(--line); }

.ts-shift {
  display: grid;
  gap: 0.75rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .ts-shift { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr); align-items: center; gap: 2.5rem; }
}

.ts-shift__from { color: var(--text-muted); }

.ts-shift__to {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--charcoal);
}

.ts-shift__arrow {
  width: 2.5rem;
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.5;
  transition: transform 0.4s var(--ease);
}

@media (max-width: 767px) {
  .ts-shift__arrow { width: 1.75rem; transform: rotate(90deg); transform-origin: center; }
}

@media (min-width: 768px) {
  .ts-shift:hover .ts-shift__arrow { transform: translateX(6px); }
}

.ts-bento { display: grid; gap: 1rem; }

@media (min-width: 768px) {
  .ts-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-cap--lead { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .ts-bento { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); }
  .ts-cap--lead { grid-column: 1; grid-row: span 2; }
}

.ts-cap {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}

.ts-cap:hover { border-color: var(--charcoal); }

.ts-cap__icon {
  width: 2.25rem;
  height: 2.25rem;
  fill: none;
  stroke: var(--copper-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ts-cap__title { margin: 1.5rem 0 0.75rem; font-size: 1.375rem; }
.ts-cap p { font-size: 0.9375rem; color: var(--text-muted); }

.ts-cap__list { margin-top: auto; padding-top: 1.5rem; list-style: none; }

.ts-cap__list li {
  padding: 0.55rem 0;
  font-size: 0.875rem;
  color: var(--charcoal);
  border-top: 1px solid var(--line);
}

.ts-cap--lead { background: var(--charcoal); border-color: var(--charcoal); }
.ts-cap--lead:hover { border-color: var(--copper); }
.ts-cap--lead .ts-cap__icon { width: 2.75rem; height: 2.75rem; stroke: var(--copper-light); }
.ts-cap--lead .ts-cap__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); color: var(--white); }
.ts-cap--lead p { font-size: 1rem; color: var(--text-on-dark); }
.ts-cap--lead .ts-cap__list li { color: var(--white); border-top-color: var(--line-dark); }

.ts-starts { display: grid; gap: 2.5rem; list-style: none; }

@media (min-width: 960px) {
  .ts-starts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
}

.ts-start {
  display: flex;
  flex-direction: column;
  padding-top: 1.75rem;
  border-top: 1px solid var(--charcoal);
}

.ts-start__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--line-strong);
  transition: color 0.4s var(--ease);
}

.ts-start:hover .ts-start__num { color: var(--copper); }
.ts-start__title { margin: 1.25rem 0 0.75rem; font-size: var(--fs-h3); }
.ts-start p { margin-bottom: 1.5rem; color: var(--text-muted); }

.ts-start .ts-start__fit {
  margin-top: auto;
  padding: 1rem 1.15rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  background: var(--warm);
}
.ts-start__fit strong { font-family: var(--font-display); color: var(--charcoal); }

/* Talent Solutions */
.tl-hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .tl-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.tl-network { width: 100%; max-width: 26rem; justify-self: center; overflow: visible; }
.tl-network__links path { fill: none; stroke: rgba(34, 36, 40, 0.22); stroke-width: 1.25; }
.tl-network__pulses path { fill: none; stroke: var(--copper); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 12 88; opacity: 0; }
.tl-network__nodes circle { fill: var(--white); stroke: var(--charcoal); stroke-width: 1.5; }
.tl-network__hub { fill: var(--copper); }
.tl-network__hub-ring { fill: none; stroke: var(--copper); stroke-width: 1; opacity: 0.45; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .tl-network__pulses path { opacity: 1; animation: tl-pulse 2.8s linear infinite; }
  .tl-network__pulses path:nth-child(2) { animation-delay: 0.7s; }
  .tl-network__pulses path:nth-child(3) { animation-delay: 1.4s; }
  .tl-network__pulses path:nth-child(4) { animation-delay: 2.1s; }
  .tl-network__hub-ring { animation: tl-ring 2.8s var(--ease) infinite; }
}

@keyframes tl-pulse { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -88; } }
@keyframes tl-ring { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }

.tl-scope {
  display: grid;
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

@media (min-width: 960px) {
  .tl-scope { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.tl-scope .lead { max-width: 32rem; margin-top: 1.5rem; }

.tl-compare { display: grid; border: 1px solid var(--line); }

@media (min-width: 640px) {
  .tl-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tl-compare__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.tl-compare__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.tl-compare__text { margin: 0.9rem 0 1.75rem; color: var(--text-muted); }
.tl-compare__col .svc-link,
.tl-compare__here { margin-top: auto; }

.tl-compare__col--active { background: var(--charcoal); }
.tl-compare__col--active .tl-compare__label { color: var(--copper-light); }
.tl-compare__col--active .tl-compare__text { color: var(--white); font-size: 1.0625rem; }

.tl-compare__here {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}

.tl-compare__here::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }

.tl-caps { border-top: 1px solid var(--line-strong); }

.tl-cap {
  position: relative;
  display: grid;
  gap: 0.75rem 3rem;
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--line-strong);
}

@media (min-width: 960px) {
  .tl-cap { grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
}

.tl-cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}

.tl-cap:hover::before { transform: scaleX(1); }

.tl-cap__num {
  padding-top: 0.3rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--copper-ink);
}

.tl-cap__question { margin-bottom: 0.5rem; font-size: 0.9375rem; font-style: italic; color: var(--slate); }
.tl-cap__title { font-size: var(--fs-h3); }
.tl-cap__text { color: var(--text-muted); }

@media (min-width: 960px) {
  .tl-cap__text { padding-top: 1.9rem; }
}

.tl-table-wrap { background: var(--white); border: 1px solid var(--line); }

.tl-table { width: 100%; border-collapse: collapse; text-align: left; }

.tl-table th,
.tl-table td {
  padding: 1.35rem clamp(1.25rem, 2.5vw, 2rem);
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.tl-table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--warm-deep);
}

.tl-table tbody th {
  width: 24%;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--charcoal);
}

.tl-table td { font-size: 0.9375rem; color: var(--text-muted); }
.tl-table tbody tr:last-child > * { border-bottom: 0; }
.tl-table tbody tr { transition: background-color 0.25s var(--ease); }
.tl-table tbody tr:hover { background: var(--warm); }
.tl-table tbody tr:hover th { color: var(--copper-ink); }

@media (max-width: 719px) {
  .tl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tl-table,
  .tl-table tbody,
  .tl-table tr,
  .tl-table th,
  .tl-table td { display: block; width: 100%; }
  .tl-table tbody tr { padding: 1.5rem 1.25rem; border-bottom: 1px solid var(--line); }
  .tl-table tbody tr:last-child { border-bottom: 0; }
  .tl-table th,
  .tl-table td { padding: 0; border: 0; }
  .tl-table tbody th { width: 100%; font-size: 1.125rem; }
  .tl-table td { margin-top: 1rem; }
  .tl-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--copper-ink);
  }
}

.tl-questions {
  display: grid;
  gap: 2rem clamp(2.5rem, 6vw, 6rem);
}

@media (min-width: 960px) {
  .tl-questions { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.tl-questions__list {
  display: grid;
  list-style: none;
  counter-reset: tl-q;
}

@media (min-width: 640px) {
  .tl-questions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}

.tl-questions__list li {
  position: relative;
  padding: 1.25rem 0 1.25rem 2.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--charcoal);
  border-top: 1px solid var(--line);
  counter-increment: tl-q;
}

.tl-questions__list li::before {
  content: counter(tl-q, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.45rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--copper-ink);
}

/* Request Talent */
.rt-hero__grid {
  display: grid;
  gap: 1.5rem clamp(2.5rem, 5vw, 4rem);
  align-items: end;
}

@media (min-width: 960px) {
  .rt-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rt-hero .svc-title { margin-bottom: 0; }
}

.rt-hero .svc-lead { padding-left: 1.5rem; border-left: 2px solid var(--copper); }

/* 404 */
.not-found { min-height: 60vh; display: grid; align-content: center; }

/* Scroll reveal (enabled only when JS runs) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal-style="left"] { transform: translateX(-32px); }
.js [data-reveal-style="right"] { transform: translateX(32px); }

.js [data-reveal-style="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal-style="clip"].is-revealed { clip-path: inset(0); }

.js [data-reveal].is-revealed { opacity: 1; transform: none; }

.js [data-reveal] .eyebrow::before,
.js .eyebrow[data-reveal]::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.3s;
}

.js .is-revealed .eyebrow::before,
.js .eyebrow.is-revealed::before { transform: none; }

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.cta__art { transform: translate3d(0, var(--parallax, 0px), 0); }
.page-hero__art img { transform: translate3d(0, var(--parallax, 0px), 0) scale(1.08); }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.5s var(--ease) both; }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.js [data-reveal="2"] { transition-delay: 0.08s; }
.js [data-reveal="3"] { transition-delay: 0.16s; }
.js [data-reveal="4"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .cta, .site-footer, .nav-toggle { display: none; }
  body { color: #000; }
}

/* Service detail pages: shared hero art + capability polish */
section:has(.svc-art) { overflow: hidden; }

.svc-art {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: 100%;
  max-width: 30rem;
}

.svc-art::before {
  content: "";
  position: absolute;
  inset: -14% -12%;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px),
    radial-gradient(closest-side, rgba(198, 107, 61, 0.22), transparent);
  background-size: 18px 18px, 100% 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

.svc-art.is-paused *,
.svc-art.is-paused::before { animation-play-state: paused; }

.cap-badge {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  color: var(--copper-ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.cap-badge .ab-pillar {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  stroke: currentColor;
  stroke-width: 1.6;
}

.cap-fx { position: relative; }

.cap-fx::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}

.cap-fx:hover::after { transform: scaleX(1); }

.cap-fx:hover .cap-badge,
.tl-cap:hover .cap-badge { color: var(--white); background: var(--copper); border-color: var(--copper); }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .cap-list li { opacity: 0; transform: translateX(-10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .js .is-revealed .cap-list li { opacity: 1; transform: none; }
  .js .is-revealed .cap-list li:nth-child(1) { transition-delay: 0.25s; }
  .js .is-revealed .cap-list li:nth-child(2) { transition-delay: 0.35s; }
  .js .is-revealed .cap-list li:nth-child(3) { transition-delay: 0.45s; }
  .js .is-revealed .cap-list li:nth-child(4) { transition-delay: 0.55s; }
}

.ab-pillar .p-check { animation-delay: calc(var(--d, 0s) + var(--b, 0s)); }
.ab-pillar .p-sweep { animation: p-sweep 4s ease-in-out infinite; }
.ab-pillar .p-bar { transform-box: fill-box; transform-origin: bottom; animation: p-bar 4s var(--ease) var(--b, 0s) infinite both; }
.ab-pillar .p-nudge { animation: p-nudge 2s var(--ease) var(--b, 0s) infinite; }
.ab-pillar .p-rise { animation: p-rise 2.4s var(--ease) infinite; }
.ab-pillar .p-turn { transform-box: view-box; transform-origin: 12px 12px; animation: art-spin 8s linear infinite; }

@keyframes p-sweep {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1px, -1.5px); }
  75% { transform: translate(1.5px, 1px); }
}

@keyframes p-bar {
  0%, 10% { transform: scaleY(0.35); }
  40%, 85% { transform: scaleY(1); }
  100% { transform: scaleY(0.35); }
}

@keyframes p-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }

@keyframes p-rise {
  0% { transform: translateY(2px); opacity: 0; }
  30%, 70% { opacity: 1; }
  100% { transform: translateY(-2px); opacity: 0; }
}

/* Software Consulting hero scene */
.sc-art { padding: 2.25rem 0 4.75rem; }
.sc-art .sc-window { position: relative; z-index: 1; }

.sc-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(34, 36, 40, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-md);
}

.sc-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.sc-chip--a { top: 0; right: 1.5rem; }
.sc-chip--b { top: 42%; left: -1rem; }
.sc-chip--c { bottom: 1.25rem; left: 1.25rem; }

.sc-link {
  position: absolute;
  right: 12rem;
  bottom: 1.6rem;
  width: 5rem;
  height: 5rem;
  overflow: visible;
}

.sc-link__line { fill: none; stroke: var(--copper-light); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.7; }
.sc-link__dot { fill: var(--copper-light); }

.sc-build {
  position: absolute;
  right: -0.75rem;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 1rem;
  width: 12.5rem;
  padding: 0.95rem 1.1rem;
  background: var(--white);
  border-top: 3px solid var(--copper);
  box-shadow: var(--shadow-lg);
}

.sc-build__label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}

.sc-build__bar { grid-column: 1; height: 6px; background: var(--line); overflow: hidden; }
.sc-build__bar i { display: block; height: 100%; background: var(--copper); transform-origin: left; }

.sc-build__check {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--copper);
}

.sc-build__check svg { width: 1.1rem; fill: none; stroke: var(--white); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 639px) {
  .sc-chip--b { left: 0; }
  .sc-build { right: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .sc-art .sc-window__body span { animation-name: sc-loop; animation-duration: 6s; animation-iteration-count: infinite; }
  .sc-chip { animation: sc-float 6s ease-in-out infinite; }
  .sc-chip--b { animation-delay: -2s; }
  .sc-chip--c { animation-delay: -4s; }
  .sc-chip::before { animation: sc-phase 6s steps(1) infinite; }
  .sc-chip--b::before { animation-delay: 2s; }
  .sc-chip--c::before { animation-delay: 4s; }
  .sc-build__bar i { animation: sc-fill 6s var(--ease) infinite both; }
  .sc-build__check { animation: p-pop 6s var(--ease) infinite both; }
  .sc-link__line { animation: v-link 1.4s linear infinite; stroke-dasharray: 4 3; }
}

@keyframes sc-loop {
  0% { transform: scaleX(0); opacity: 1; }
  14%, 82% { transform: scaleX(1); opacity: 1; }
  94%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sc-phase { 0% { background: var(--copper-light); box-shadow: 0 0 0 4px rgba(198, 107, 61, 0.25); } 33.33%, 100% { background: rgba(255, 255, 255, 0.25); box-shadow: none; } }

@keyframes sc-fill {
  0%, 8% { transform: scaleX(0); opacity: 1; }
  32%, 92% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.sc-spec .cap-badge { margin-bottom: 1.25rem; }

.sc-specs { gap: 1rem; border-top: 0; }

.sc-specs .sc-spec,
.sc-specs .sc-spec:nth-child(odd),
.sc-specs .sc-spec:nth-child(even) {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.sc-specs .sc-spec:hover { background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-md); }

.it-grid { gap: 1rem; }

.it-grid .it-cell,
.it-grid .it-cell:first-child,
.it-grid .it-cell:last-child,
.it-grid .it-cell:nth-child(even),
.it-grid .it-cell + .it-cell,
.tl-caps .tl-cap {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.it-grid .it-cell:hover,
.tl-caps .tl-cap:hover { background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-md); }

.tl-caps { display: grid; gap: 1rem; border-top: 0; }
.tl-caps .tl-cap::before { top: 0; }

/* IT Staffing hero scene */
.it-hero__grid { align-items: center; }
.it-art { display: grid; place-items: center; max-width: 30rem; padding-block: 3.5rem; }

.it-map {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 165%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.it-map__links path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.25; stroke-dasharray: 3 6; }
.it-map__ring { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; stroke-dasharray: 2 7; transform-box: view-box; transform-origin: 220px 220px; }
.it-map__flows circle { fill: var(--copper-light); }
.it-map__people circle:first-child { fill: var(--charcoal); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.25; }
.it-map__people circle + circle,
.it-map__people path { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.5; stroke-linecap: round; }
.it-map__match circle:first-child { stroke: var(--copper-light); stroke-width: 2; }
.it-map__lens { transform-box: view-box; transform: translate(60px, 70px); }
.it-map__lens circle { fill: rgba(198, 107, 61, 0.1); stroke: var(--copper-light); stroke-width: 2; }
.it-map__lens path { fill: none; stroke: var(--copper-light); stroke-width: 3; stroke-linecap: round; }

.it-art .it-roles {
  width: 100%;
  background: rgba(34, 36, 40, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--copper);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.it-art .it-roles__title { color: var(--copper-light); }
.it-art .role-list li { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: no-preference) {
  .it-map__ring { animation: art-spin 40s linear infinite; }
  .it-map__ring--b { animation-duration: 60s; animation-direction: reverse; }
  .it-map__lens { animation: it-lens 12s var(--ease) infinite; }
  .it-map__match circle:first-child { animation: it-match 3s var(--ease) infinite; }
}

@keyframes it-lens {
  0%, 100% { transform: translate(60px, 70px); }
  25% { transform: translate(390px, 60px); }
  50% { transform: translate(50px, 360px); }
  75% { transform: translate(400px, 370px); }
}

@keyframes it-match { 0%, 100% { stroke-opacity: 1; stroke-width: 2; } 50% { stroke-opacity: 0.4; stroke-width: 5; } }

.it-cell .cap-badge { margin-bottom: 1.5rem; }

/* Technology Solutions hero scene + bento */
.ts-art { max-width: 30rem; padding-block: 1rem; }
.ts-art .ts-stack { max-width: none; }
.ts-stack__glyph { fill: none; stroke: var(--copper-light); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ts-stack__packets rect { fill: var(--copper-light); }
.ts-stack__scan { fill: var(--copper-light); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ts-stack__scan { animation: ts-scan 5s linear infinite; }
  .ts-stack__layer rect { animation: ts-glow 6s var(--ease) infinite; }
  .ts-stack__layer:nth-of-type(2) rect { animation-delay: 2s; }
  .ts-stack__layer:nth-of-type(3) rect { animation-delay: 4s; }
}

@keyframes ts-scan {
  0% { transform: translateY(20px); opacity: 0; }
  10%, 85% { opacity: 0.6; }
  100% { transform: translateY(320px); opacity: 0; }
}

@keyframes ts-glow {
  0%, 30%, 100% { stroke-opacity: 1; }
  12% { stroke: var(--copper-light); fill: rgba(198, 107, 61, 0.12); }
}

.ts-cap .cap-badge { align-self: flex-start; }
.ts-cap--lead .cap-badge { color: var(--copper-light); background: rgba(255, 255, 255, 0.05); border-color: var(--line-dark); }

.ts-chart {
  position: absolute;
  top: clamp(1.75rem, 3vw, 2.25rem);
  right: clamp(1.75rem, 3vw, 2.25rem);
  width: 7.5rem;
  overflow: visible;
}

.ts-chart__grid { fill: none; stroke: rgba(255, 255, 255, 0.08); }
.ts-chart__bar { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.28); transform-box: fill-box; transform-origin: bottom; }
.ts-chart__bar:last-of-type { fill: rgba(198, 107, 61, 0.35); stroke: var(--copper-light); }
.ts-chart__trend { fill: none; stroke: var(--copper-light); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }

@media (prefers-reduced-motion: no-preference) {
  .ts-chart__bar { animation: p-bar 6s var(--ease) var(--b, 0s) infinite both; }
  .ts-chart__trend { animation: v-draw 6s var(--ease) infinite both; }
}

.ts-chart.is-paused * { animation-play-state: paused; }

/* Talent Solutions hero network + question rows */
.tl-network__people circle,
.tl-network__people path { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; }

.tl-network__labels text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--text-on-dark-muted);
}

.tl-network__orbit { fill: none; stroke: var(--copper-light); stroke-width: 1.25; stroke-dasharray: 3 7; opacity: 0.7; transform-box: fill-box; transform-origin: center; }
.tl-network__hub-icon { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; }
.tl-network.is-paused * { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  .tl-network__orbit { animation: art-spin 18s linear infinite; }
}

.tl-cap { padding-left: clamp(1rem, 2vw, 1.5rem); }

.tl-cap::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--copper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--ease);
}

.tl-cap:hover::after { transform: scaleY(1); }
.tl-cap__question { transition: color 0.35s var(--ease); }
.tl-cap:hover .tl-cap__question { color: var(--copper-ink); }

.tl-cap__lead { display: flex; align-items: center; gap: 1rem; }
.tl-cap__lead .tl-cap__num { padding-top: 0; }

@media (min-width: 960px) {
  .tl-cap { grid-template-columns: 3.5rem minmax(0, 6fr) minmax(0, 6fr); }
  .tl-cap__lead { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* Industries, Careers, Insights, Contact: hero scenes + cards */
.page-hero__grid--art { align-items: center; }
.page-hero .svc-art { max-width: 28rem; }

.svc-art--light::before {
  background-image:
    radial-gradient(rgba(34, 36, 40, 0.16) 1px, transparent 1.6px),
    radial-gradient(closest-side, rgba(198, 107, 61, 0.14), transparent);
}

.glass-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.cap-badge.in-badge { width: 4rem; height: 4rem; }
.cap-badge.in-badge .ab-pillar { width: 2.25rem; height: 2.25rem; margin: 0; }

/* Industries hero */
.in-hub { display: block; width: 100%; overflow: visible; }
.in-hub__orbit { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 3 8; transform-box: view-box; transform-origin: 220px 200px; }
.in-hub__orbit--inner { stroke: rgba(198, 107, 61, 0.45); stroke-dasharray: 2 6; }
.in-hub__links path { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.25; }
.in-hub__flows circle { fill: var(--copper-light); }
.in-hub__node > circle { fill: var(--charcoal); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; }
.in-hub__node g { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.in-hub__node .in-hub__fill { fill: var(--copper-light); stroke: none; }
.in-hub__node .in-hub__pulse { stroke: var(--copper-light); stroke-dasharray: 1; }
.in-hub__node text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text-on-dark-muted);
}
.in-hub__core { fill: var(--copper); }
.in-hub__ring { fill: none; stroke: var(--copper-light); stroke-width: 1; opacity: 0.5; transform-box: fill-box; transform-origin: center; }
.in-hub__mark { fill: none; stroke: var(--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .in-hub__orbit { animation: art-spin 50s linear infinite; }
  .in-hub__orbit--inner { animation-duration: 24s; animation-direction: reverse; }
  .in-hub__ring { animation: tl-ring 2.8s var(--ease) infinite; }
  .in-hub__node > circle { animation: in-node 8s var(--ease) infinite; }
  .in-hub__node:nth-of-type(4) > circle { animation-delay: 2s; }
  .in-hub__node:nth-of-type(5) > circle { animation-delay: 4s; }
  .in-hub__node:nth-of-type(6) > circle { animation-delay: 6s; }
  .in-hub__node .in-hub__pulse { animation: v-draw 4s var(--ease) infinite both; }
}

@keyframes in-node {
  0%, 30%, 100% { stroke: rgba(255, 255, 255, 0.5); }
  10%, 20% { stroke: var(--copper-light); }
}

/* Industries rows */
.section--grid-light .industry-row,
.section--grid-light .industry-row:first-child {
  margin-bottom: 1rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.section--grid-light .industry-row:last-child { margin-bottom: 0; }
.section--grid-light .industry-row:hover { background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-md); }
.industry-row:hover .cap-badge { color: var(--white); background: var(--copper); border-color: var(--copper); }
.industry-row .chip-links a { transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease); }
.industry-row .chip-links a:hover { color: var(--white); background: var(--copper); border-color: var(--copper); }

/* Careers hero */
.ca-path { display: block; width: 100%; overflow: visible; }
.ca-path__route { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; stroke-dasharray: 4 6; }
.ca-path__card rect:first-child,
.ca-path__role rect:first-child { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.22); }
.ca-path__role rect:first-child { stroke: var(--copper-light); }
.ca-path__avatar { fill: rgba(198, 107, 61, 0.2); stroke: var(--copper-light); stroke-width: 1.5; }
.ca-path__head { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-linecap: round; }
.ca-path__bar { fill: rgba(255, 255, 255, 0.2); transform-box: fill-box; transform-origin: left; }
.ca-path__bar--b { fill: var(--copper); opacity: 0.8; }
.ca-path__stage circle { fill: var(--charcoal); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; }
.ca-path__tick,
.ca-path__done path { fill: none; stroke: var(--copper-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ca-path__done circle { fill: var(--copper); }
.ca-path__done path { stroke: var(--white); }
.ca-path__dot { fill: var(--copper-light); }
.ca-path text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text-on-dark-muted);
}
.ca-path__role text { fill: var(--white); }

@media (prefers-reduced-motion: no-preference) {
  .ca-path__card .ca-path__bar { animation: p-bar-x 6s var(--ease) infinite both; }
  .ca-path__card .ca-path__bar--b { animation-delay: 0.2s; }
  .ca-path__card .ca-path__bar--c { animation-delay: 0.4s; }
  .ca-path__route { animation: v-link 1.6s linear infinite; stroke-dasharray: 4 3; }
}

@keyframes p-bar-x {
  0%, 5% { transform: scaleX(0.2); }
  25%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(0.2); }
}

/* Careers cards */
.tile-grid--cards { gap: 1rem; border: 0; }

.tile-grid--cards .tile {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tile-grid--cards .tile:hover { background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-md); }
.tile-grid--cards .cap-badge { margin-bottom: 0.5rem; }

.section--grid-light .job-card,
.section--grid-light .panel {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.section--grid-light .job-card:hover { background: rgba(255, 255, 255, 0.94); }

/* Insights hero + cards */
.is-stack { display: block; width: 100%; overflow: visible; }
.is-stack__card { fill: #2c2e33; stroke: rgba(255, 255, 255, 0.18); }
.is-stack__card--front { fill: #303237; stroke: rgba(255, 255, 255, 0.28); }
.is-stack__chip { fill: rgba(198, 107, 61, 0.18); stroke: var(--copper-light); stroke-width: 1; }
.is-stack__chip-text { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--copper-light); }
.is-stack__line { fill: rgba(255, 255, 255, 0.18); }
.is-stack__icon { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.is-stack__glow { stroke: var(--copper-light); }
.is-stack__media { fill: var(--charcoal-deep); }
.is-stack__grid { fill: none; stroke: rgba(255, 255, 255, 0.07); }
.is-stack__col { fill: rgba(255, 255, 255, 0.12); transform-box: fill-box; transform-origin: bottom; }
.is-stack__col--hi { fill: var(--copper); opacity: 0.85; }
.is-stack__trend { fill: none; stroke: var(--copper-light); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.is-stack__type { fill: rgba(255, 255, 255, 0.85); transform-box: fill-box; transform-origin: left; }
.is-stack__type--soft { fill: rgba(255, 255, 255, 0.22); }

@media (prefers-reduced-motion: no-preference) {
  .is-stack__float { animation: sc-float 7s ease-in-out infinite; }
  .is-stack__float--b { animation-delay: -2.3s; }
  .is-stack__float--c { animation-delay: -4.6s; }
  .is-stack__col { animation: p-bar 6s var(--ease) var(--b, 0s) infinite both; }
  .is-stack__trend { animation: v-draw 6s var(--ease) infinite both; }
  .is-stack__type { animation: sc-loop 6s var(--ease) var(--b, 0s) infinite both; }
  .is-stack__glow { animation: art-blink 1.6s steps(1) infinite; }
}

.section--dots .insight-card {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(34, 36, 40, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.section--dots .insight-card::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  z-index: 2;
  height: 2px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}

.section--dots .insight-card:hover::after { transform: scaleX(1); }

/* Contact hero */
.co-flow { display: block; width: 100%; overflow: visible; }
.co-flow__route { fill: none; stroke: rgba(34, 36, 40, 0.3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.co-flow__card { fill: var(--white); stroke: rgba(34, 36, 40, 0.12); filter: drop-shadow(0 18px 30px rgba(34, 36, 40, 0.1)); }
.co-flow__label { fill: rgba(34, 36, 40, 0.25); }
.co-flow__field { fill: var(--warm); stroke: rgba(34, 36, 40, 0.12); }
.co-flow__type { fill: var(--charcoal); opacity: 0.55; transform-box: fill-box; transform-origin: left; }
.co-flow__btn { fill: var(--copper); }
.co-flow__send { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.co-flow__dot { fill: var(--copper); }
.co-flow__hub { fill: var(--charcoal); }
.co-flow__ring { fill: none; stroke: var(--copper); stroke-width: 1.25; stroke-dasharray: 3 6; transform-box: fill-box; transform-origin: center; }
.co-flow__team g { fill: none; stroke: var(--white); stroke-width: 1.6; stroke-linecap: round; }
.co-flow__team text,
.co-flow__reply text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--charcoal);
}
.co-flow__bubble { fill: var(--white); stroke: var(--copper); stroke-width: 1.5; stroke-linejoin: round; }
.co-flow__line { fill: rgba(34, 36, 40, 0.2); }

@media (prefers-reduced-motion: no-preference) {
  .co-flow__type { animation: sc-loop 5s var(--ease) var(--b, 0s) infinite both; }
  .co-flow__send { animation: p-nudge 1.6s var(--ease) infinite; }
  .co-flow__ring { animation: art-spin 20s linear infinite; }
}

@media (max-width: 1023px) {
  .page-hero .svc-art { max-width: 26rem; }
}