/* Azent homepage — design tokens */
:root {
  /* Monochrome. The accent is black, so on dark surfaces the role that used to
     be carried by colour is carried by --on-dark instead: see .btn--primary,
     .badge, .brand__peak and .hero-tab__bar. --on-accent is what sits on top of
     an --accent surface (currently only the .callout band). */
  --ink: #000000;
  --ink-2: #1C1C1C;
  --ink-deep: #000000;
  --line-dark: #2A2A2A;
  --line-dark-2: #3D3D3D;
  --on-dark: #FFFFFF;
  --on-dark-muted: #E6E6E6;
  --on-dark-subtle: #B3B3B3;
  --paper: #F3F3F3;
  --paper-2: #E7E7E7;
  --surface: #FFFFFF;
  --line: #E0E0E0;
  --line-dashed: #BDBDBD;
  --muted: #4A4A4A;
  --accent: #000000;
  --on-accent: #FFFFFF;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-sans: 'Mulish', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Type scale. Every font-size below is one of these rungs. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-xl: 26px;
  --text-2xl: 32px;

  /* Spacing scale. All padding, margin and gap sit on this 4px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --container: 1240px;
  --gutter: 24px;
  --header-h: 84px;
  /* What the header actually measures; script.js updates it when the nav
     wraps. Kept separate from --header-h, which .site-header__inner is
     sized from — feeding the measurement back into that would loop. */
  --header-now: 84px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --pill: 999px;

  --slide-duration: 8s;
}

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

html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: var(--header-now); }

body {
  margin: 0;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }
a:hover { color: #000000; }
h1, h2, h3, h4,
.brand__word, .callout__title, .story__title, .footer-promo__title, .person__name {
  font-family: var(--font-display);
  font-feature-settings: "ss01";
}

a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Pointer targets. These links are shorter than 24px because their height
   comes from the line box. Extend the hit area instead of the painted box so
   nothing moves. The 3px inset stays under half the smallest surrounding gap
   (8px in the phone nav), so neighbouring areas never overlap. */
.main-nav__link,
.footer-col a:not(.social),
.footer-bottom a { position: relative; }
.main-nav__link::after,
.footer-col a:not(.social)::after { content: ""; position: absolute; inset: -3px 0; }
/* 14px fine print leaves a 17.5px line box, so this one needs the extra pixel. */
.footer-bottom a::after { content: ""; position: absolute; inset: -4px 0; }

h1, h2, h3, p, blockquote { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--dark { color: var(--on-dark-muted); }
.eyebrow--ink { color: var(--on-accent); }

.section-title {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.section-head { display: flex; flex-direction: column; gap: var(--space-4); }

/* Buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--pill);
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Every .btn--primary on this site sits on a dark surface (header, hero slides,
   closing CTA), so with a black accent it inverts to white rather than vanishing. */
.btn--primary { background: var(--on-dark); color: var(--ink); font-weight: 600; }
.btn--primary:hover { color: var(--ink); background: var(--on-dark-muted); }
.btn--ink { background: var(--ink); color: var(--on-dark); font-weight: 600; }
.btn--ink:hover { color: var(--on-dark); background: var(--line-dark); }
.btn--sm { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }

.link-caps {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.link-caps .icon { transition: transform .15s ease; }
.link-caps:hover .icon, a:hover > .link-caps .icon { transform: translateX(4px); }
.link-caps--light { color: var(--on-dark); }

.icon { flex: none; }

/* Header: transparent over the hero video, solid once scrolled */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--on-dark);
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.is-solid { background: var(--ink-deep); box-shadow: 0 1px 0 var(--line-dark); }
.site-header__inner {
  min-height: var(--header-h);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--on-dark); }
/* Ascent mark: an open A shaped like a peak, with an inner stroke for the path up */
.brand__mark { flex: none; display: block; width: 34.5px; height: 34.5px; }
.brand__peak { stroke: var(--on-dark); }
.brand__path { stroke: var(--on-dark-subtle); }
/* Wordmark: "Azent" carries the weight, "Inc" sits quietly on the same baseline */
.brand__word { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.brand__suffix {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-subtle);
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  font-size: var(--text-base);
}
.main-nav__link { color: var(--on-dark); text-decoration: none; font-size: var(--text-md); }
.main-nav__link:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 5px; }

/* Hero carousel — full-bleed video per slide, tabs with progress along the bottom */
.hero {
  position: relative;
  min-height: max(640px, min(100svh, 920px));
  background: var(--ink-deep);
  color: var(--on-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
  /* Placeholder ground shown until a video file is in place */
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
}
.hero-slide:nth-child(2) { background-color: var(--ink-2); }
.hero-slide:nth-child(3) { background-color: var(--ink-2); }
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }

.hero-slide__video {
  /* The clips are shot lime. Black has no hue to tint toward, so the grade is a
     straight desaturation; the contrast lift keeps the lines from going flat. */
  filter: grayscale(1) contrast(1.06) brightness(0.98);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slide.is-missing .hero-slide__video { display: none; }
.hero-slide.is-missing::after {
  content: "[Background video: " attr(data-video-src) "]";
  position: absolute;
  right: var(--gutter);
  top: calc(var(--header-h) + 16px);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-subtle);
  border: 1px dashed var(--line-dark-2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

/* Keeps white type readable over any footage */
.hero-slide__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .2) 100%),
              linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, 0) 40%);
}

.hero-slide__content {
  position: relative;
  width: 100%;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: 168px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.hero-slide__content > * { max-width: 760px; }
.hero-slide.is-active .hero-slide__content > * { animation: rise .8s ease both; }
.hero-slide.is-active .hero-slide__content > :nth-child(2) { animation-delay: .08s; }
.hero-slide.is-active .hero-slide__content > :nth-child(3) { animation-delay: .16s; }
.hero-slide.is-active .hero-slide__content > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero-slide__title {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.125;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.hero-slide__title em { font-style: normal; color: inherit; }
.hero-slide__text { font-size: var(--text-md); line-height: 1.78; color: var(--on-dark-muted); max-width: 580px; }

.hero__nav {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  padding-bottom: var(--space-6);
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
}
.hero-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.hero-tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 4px;
  min-height: 44px;
  color: var(--on-dark-subtle);
  font: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hero-tab:hover, .hero-tab.is-active { color: var(--on-dark); }
.hero-tab__bar {
  position: relative;
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}
.hero-tab__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--on-dark);
  transform-origin: left;
  transform: scaleX(0);
}
/* Its animationend (fired on the bar) is what advances the slideshow */
.hero-tab.is-active .hero-tab__bar::after { animation: fill var(--slide-duration) linear forwards; }
.hero.is-paused .hero-tab.is-active .hero-tab__bar::after,
.hero.is-holding .hero-tab.is-active .hero-tab__bar::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }

.hero-pause {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--pill);
  border: 1px solid var(--line-dark-2);
  background: rgba(0, 0, 0, .45);
  color: var(--on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.hero-pause:hover { border-color: var(--on-dark-subtle); }
.hero-pause__icon--play { display: none; }
.hero.is-paused .hero-pause__icon--play { display: block; }
.hero.is-paused .hero-pause__icon--pause { display: none; }

/* Trust strip */
.trust { background: var(--surface); border-bottom: 1px solid var(--line); padding: 36px 0; }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.trust__label { font-size: var(--text-base); color: var(--muted); font-weight: 500; }
.logo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.logo-slot {
  width: 132px; height: 48px;
  border: 1px dashed var(--line-dashed);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); color: var(--muted);
}

/* Section shells */
.section { padding: 104px 0; }
.section--surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__inner { display: flex; flex-direction: column; gap: var(--space-7); }

/* Services bento */
.services-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); }
.services-head .section-head { max-width: 640px; }
.services-head__note { font-size: var(--text-md); line-height: 1.78; color: var(--muted); max-width: 440px; }
.bento { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.card {
  flex: 1 1 320px;
  min-width: 0;
  min-height: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--ink);
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover { color: var(--ink); border-color: var(--line-dashed); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); }
.card__body { display: flex; flex-direction: column; gap: var(--space-3); }
.card__title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
.card__text { font-size: var(--text-md); line-height: 1.78; color: var(--muted); }
.card--tall { min-height: 300px; }

.card--feature {
  flex: 2 1 560px;
  min-height: 300px;
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--on-dark);
  padding: 36px;
  gap: var(--space-6);
}
.card--feature:hover { color: var(--on-dark); border-color: var(--ink); }
.card--feature .card__body { gap: var(--space-3); }
.card--feature .card__title { font-size: var(--text-2xl); }
.card--feature .card__text { font-size: var(--text-md); line-height: 1.78; color: var(--on-dark-muted); max-width: 560px; }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.badge {
  font-family: var(--font-mono);
  font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); background: var(--on-dark);
  padding: var(--space-2) var(--space-3); border-radius: var(--pill);
}

/* Full-width accent call-out */
.callout {
  display: block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}
.callout:hover { color: var(--on-accent); }
.callout__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}
.callout__copy { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; flex: 1 1 480px; }
.callout__title { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
.callout__link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-base); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.callout__link svg { transition: transform .2s ease; }
.callout:hover .callout__link svg { transform: translate(3px, -3px); }

/* Industries */
.industries .section-head { max-width: 720px; }
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--line);
}
.industry {
  padding: 28px 24px 32px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.industry:hover { color: var(--ink); }
.industry:hover .industry__title { text-decoration: underline; text-underline-offset: 4px; }
.industry__num { font-family: var(--font-mono); font-size: var(--text-base); color: var(--muted); }
.industry__title { font-size: var(--text-xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.industry__text { font-size: var(--text-base); line-height: 1.6; color: var(--muted); }

/* Featured client stories */
.stories__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 24px; }
.story {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}
.story:hover { color: var(--ink); }
.story__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  border: 1px dashed var(--line-dashed);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); color: var(--muted);
  margin-bottom: var(--space-2);
  transition: transform .3s ease;
}
.story:hover .story__media { transform: scale(1.015); }
.story__title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
.story:hover .story__title { text-decoration: underline; text-underline-offset: 4px; }
.story__metric { font-family: var(--font-mono); font-size: var(--text-base); color: var(--muted); }

/* Testimonial */
.testimonial { background: var(--surface); border-top: 1px solid var(--line); }
.testimonial__inner { max-width: 920px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--space-6); }
.testimonial blockquote { font-size: clamp(26px, 3vw, 44px); line-height: 1.25; letter-spacing: -0.01em; font-weight: 500; }
.person { display: flex; align-items: center; gap: var(--space-4); }
.person__photo {
  width: 56px; height: 56px;
  border-radius: var(--pill);
  border: 1px dashed var(--line-dashed);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); color: var(--muted);
}
.person__info { display: flex; flex-direction: column; gap: var(--space-1); }
.person__name { font-size: var(--text-md); font-weight: 700; }
.person__role { font-size: var(--text-base); color: var(--muted); }

/* "Talk to an expert" strip */
.expert { background: var(--paper-2); border-top: 1px solid var(--line); }
.expert__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.expert__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.expert__title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
.expert__text { font-size: var(--text-md); line-height: 1.78; color: var(--muted); max-width: 560px; }
.expert__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Velaris animated background. The canvas sits behind the section's own
   content; --velaris hosts flip to light type because the gradient is dark. */
.velaris-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.expert--velaris {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-deep);
  border-top-color: var(--line-dark);
  color: var(--on-dark);
}
.expert--velaris .expert__inner { position: relative; z-index: 1; }
.expert--velaris .expert__text { color: var(--on-dark-muted); }

/* Footer */
.site-footer { background: var(--ink-deep); color: var(--on-dark); padding: 0 0 40px; }
.site-footer__inner { display: flex; flex-direction: column; gap: 56px; }
.footer-promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-bottom: 1px solid var(--line-dark);
}
.footer-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 56px 32px 48px 0;
  color: var(--on-dark);
  text-decoration: none;
}
.footer-promo:hover { color: var(--on-dark); }
.footer-promo__title { font-size: var(--text-xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.footer-promo__text { font-size: var(--text-md); line-height: 1.78; color: var(--on-dark-muted); max-width: 460px; }

.footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer-brand { flex: 1 1 260px; display: flex; flex-direction: column; gap: var(--space-4); }
.footer-brand__name { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.02em; }
.footer-brand__text { font-size: var(--text-base); line-height: 1.6; color: var(--on-dark-subtle); max-width: 320px; }
.footer-col { flex: 0 1 200px; display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-base); }
.footer-col--wide { flex-basis: 240px; }
.footer-col__head { font-weight: 700; }
.footer-col a, .footer-col span:not(.footer-col__head) { color: var(--on-dark-subtle); text-decoration: none; }
.footer-col a:hover { color: var(--on-dark); }
.social {
  margin-top: var(--space-2);
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-dark-2);
  display: flex; align-items: center; justify-content: center;
}
.footer-col a.social { color: var(--on-dark); }
.footer-col a.social:hover { border-color: var(--on-dark-subtle); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-dark);
  font-size: var(--text-sm); color: var(--on-dark-subtle);
}
.footer-bottom a { color: var(--on-dark-subtle); }
.footer-bottom a:hover { color: var(--on-dark); }

/* Phones */
/* ===========================================================================
   Industry pages (/industries/<name>/)
   These reuse the homepage's tokens and components. What follows is only the
   parts the homepage has no equivalent for: a compact hero, the sticky section
   nav, and the feature grid.
   =========================================================================== */

/* The homepage hero fills the viewport. This one is sized by its content, so
   the first capability section is already in view when the page lands. */
.ind-hero { background: var(--ink-deep); color: var(--on-dark); }
.ind-hero__inner {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-top: calc(var(--header-now) + var(--space-7));
  padding-bottom: var(--space-8);
}
.ind-hero__back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-1) 0;   /* carries the hit area past 24px on its own */
  font-family: var(--font-mono);
  font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-subtle); text-decoration: none;
}
.ind-hero__back:hover { color: var(--on-dark); }
.ind-hero__title {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05; letter-spacing: -0.02em; font-weight: 800;
  max-width: 760px;
}
.ind-hero__text { font-size: var(--text-md); line-height: 1.78; color: var(--on-dark-muted); max-width: 620px; }

/* Sticky section nav. Sits directly under the fixed header and tracks the
   section in view. It scrolls sideways rather than wrapping, so its height
   stays fixed and the sections below can rely on one scroll-margin value. */
.section-nav {
  position: sticky; top: var(--header-now); z-index: 40;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.section-nav__inner {
  display: flex; align-items: center; gap: var(--space-5);
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.section-nav__label {
  flex: none;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.section-nav__links {
  display: flex; align-items: center; gap: var(--space-5);
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.section-nav__links::-webkit-scrollbar { display: none; }
/* Only when the links genuinely overflow: a fade at the right edge, so the
   sideways scroll is visible rather than something you have to guess at.
   script.js sets the class and clears it once you reach the end. */
.section-nav__links.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.section-nav__link {
  white-space: nowrap; text-decoration: none;
  font-size: var(--text-sm); color: var(--muted);
  padding: var(--space-2) 0;   /* 14px type + 16px padding clears 24px */
  border-bottom: 2px solid transparent;
}
.section-nav__link:hover { color: var(--ink); }
.section-nav__link.is-active { color: var(--ink); border-bottom-color: var(--ink); }
.section-nav .btn { flex: none; }

/* Anchored sections clear both the header and the sticky nav. */
.ind-section { padding: 88px 0; scroll-margin-top: var(--section-nav-h, 56px); }

/* Capability features. There is no industry photography yet, so these are
   text-forward and numbered, matching the homepage's .industry cards rather
   than leaving empty image boxes. */
.cluster { display: flex; flex-direction: column; gap: var(--space-7); }
.cluster__intro { font-size: var(--text-md); line-height: 1.78; color: var(--muted); max-width: 720px; }
.feature-grid {
  display: grid; gap: var(--space-6) var(--space-7);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .feature-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
/* Matches .industry__num on the homepage. --line-dashed reads as a hairline
   colour here and only reaches 1.7:1 on --paper, which is not enough for text. */
.feature__num {
  font-family: var(--font-mono); font-size: var(--text-base);
  letter-spacing: 0.08em; color: var(--muted);
}
.feature__title { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; }
.feature__text { font-size: var(--text-base); line-height: 1.7; color: var(--muted); }

/* Where this industry's work maps onto the six practices. */
/* Six practices, so three across reads as two even rows. auto-fit would fit
   five at 1240px and strand the sixth on a line of its own. */
.practice-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.practice {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.practice:hover { color: var(--ink); border-color: var(--line-dashed); transform: translateY(-2px); }
.practice__title { font-size: var(--text-md); font-weight: 700; line-height: 1.3; }
.practice__text { font-size: var(--text-sm); line-height: 1.6; color: var(--muted); }

/* One claim on the accent surface, between the detail and the call to action. */
.statement { background: var(--ink-deep); color: var(--on-dark); }
.statement__inner {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-top: var(--space-8); padding-bottom: var(--space-8);
}
.statement__text {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.25; letter-spacing: -0.01em; font-weight: 700;
  font-family: var(--font-display); font-feature-settings: "ss01";
  max-width: 900px;
}
.statement__note { font-size: var(--text-md); line-height: 1.78; color: var(--on-dark-muted); max-width: 620px; }

@media (max-width: 720px) {
  :root { --gutter: 16px; --header-h: 120px; }
  .main-nav { gap: var(--space-2) var(--space-5); }
  .hero-slide__content { padding-bottom: 140px; }
  .hero-slide__text { font-size: var(--text-base); }
  .hero-tabs { gap: var(--space-3); }
  .hero-tab { font-size: var(--text-sm); }
  .hero-slide.is-missing::after { display: none; }
  .section { padding: 72px 0; }
  .footer-promo { padding-right: 0; }
  .ind-section { padding: 64px 0; }
  .ind-hero__inner { padding-top: calc(var(--header-now) + var(--space-5)); padding-bottom: var(--space-7); }
  /* The header's own CTA is fixed and always on screen, so the nav drops its
     duplicate and gives the width back to the links — all three then fit
     without a sideways swipe nobody would discover. */
  .section-nav__label { display: none; }
  .section-nav .btn { display: none; }
  .section-nav__links { gap: var(--space-4); }
  .feature-grid { gap: var(--space-5); }
  .feature-grid--2, .feature-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .practice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Fallback values for --header-now, for the window where a visitor has this
   stylesheet but a cached older script.js (it is served with a four-hour
   max-age) and nothing is measuring the header. Taken from the header's actual
   height as the nav wraps: 84px above 800, 127px to 610, 157px to 330. Too
   large only costs whitespace; too small puts the hero behind the header. */
@media (max-width: 799.98px) { :root { --header-now: 127px; } }
@media (max-width: 609.98px) { :root { --header-now: 157px; } }
@media (max-width: 329.98px) { :root { --header-now: 188px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .story__media, .hero-slide { transition: none; }
  .btn:hover, .card:hover, .story:hover .story__media { transform: none; }
  .hero-slide.is-active .hero-slide__content > * { animation: none; }
}