/* =========================================================
   Octave Consultancy — octaveaiautomation.com
   Brutalist editorial showroom on warm gray.
   Token source of truth: DESIGN.md at the repo root.

   Two rules this file never breaks:
     1. No shadows, no gradients. Depth = surface contrast only.
     2. Display type is condensed, uppercase, 0.9 leading.
   ========================================================= */

:root {
  /* Colors */
  --color-carbon-black: #000000;
  --color-paper-white: #ffffff;
  --color-warm-canvas: #e5e5e5;
  --color-mist-gray: #f3f3f3;
  --color-ash: #c6c6c6;
  --color-smoke: #979797;
  --color-slate: #444444;
  --color-graphite: #2f2f2f;
  --color-mint-chip: #d1ffca;
  --color-voltage-yellow: #fff100;
  --color-ember: #e2874a;

  /* Surfaces */
  --surface-canvas: var(--color-warm-canvas);
  --surface-card: var(--color-paper-white);
  --surface-inverted: var(--color-carbon-black);
  --surface-mist: var(--color-mist-gray);

  /* Type — SuisseIntl family substituted per DESIGN.md */
  --font-cond: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-subheading-lg: 20px;
  --text-heading-sm: 28px;
  --text-heading: 40px;
  --text-heading-lg: 48px;
  --text-display: 80px;
  --text-display-xl: 130px;

  --fw-regular: 400;
  --fw-450: 450;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  /* Radius */
  --radius-btn: 8px;
  --radius-btn-sm: 4px;
  --radius-card: 24px;
  --radius-card-lg: 32px;
  --radius-nav-pill: 48px;
  --radius-large-card: 64px;
  --radius-tag: 64px;

  /* Layout */
  --page-max-width: 1200px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  font-family: var(--font-body);
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 148px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-carbon-black);
  font-size: var(--text-body);
  line-height: 1.25;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- Type primitives ---------------- */

/* Display: condensed, uppercase, 0.9 leading. Never below 48px. */
h1, h2 {
  margin: 0;
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--color-carbon-black);
}

h1 { font-size: clamp(3.25rem, 8.6vw, 8.125rem); }   /* → 130px */
h2 { font-size: clamp(2.75rem, 5.6vw, 5rem); }       /* → 80px  */

/* Secondary heading: the neo-grotesque at 450, still uppercase. */
h3, h4 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-450);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-carbon-black);
}

h3 { font-size: var(--text-subheading-lg); }
h4 { font-size: var(--text-body-sm); }

.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}
.wrap.narrow { max-width: 760px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
  padding: var(--spacing-8) var(--spacing-16);
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--color-carbon-black);
  outline-offset: 3px;
}

/* Mono label — technical micro-copy, slide markers, meta. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* Mint tag — the signature accent. Taxonomy only, never a surface fill. */
.eyebrow {
  display: inline-block;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-tag);
  background: var(--color-mint-chip);
  color: var(--color-carbon-black);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--fw-regular);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.eyebrow.light { background: var(--color-mint-chip); color: var(--color-carbon-black); }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-24);
  border: 0;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-lg { padding: var(--spacing-16) var(--spacing-40); }
.btn-block { width: 100%; }

/* Filled dark — primary CTA */
.btn-primary {
  background: var(--color-carbon-black);
  color: var(--color-paper-white);
}
.btn-primary:hover { background: var(--color-graphite); }

/* Ghost border — secondary */
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-slate);
  border-radius: var(--radius-btn-sm);
  color: var(--color-slate);
}
.btn-outline:hover { border-color: var(--color-carbon-black); color: var(--color-carbon-black); }

/* Text link — tertiary */
.btn-ghost {
  background: transparent;
  padding: var(--spacing-16) var(--spacing-8);
  border-radius: var(--radius-btn-sm);
  color: var(--color-carbon-black);
}
.btn-ghost:hover { text-decoration: underline; }

/* Inverted-section variants */
.btn-light {
  background: var(--color-paper-white);
  color: var(--color-carbon-black);
}
.btn-light:hover { background: var(--color-mint-chip); }

.btn-outline-light {
  background: transparent;
  border: 1.5px solid var(--color-smoke);
  border-radius: var(--radius-btn-sm);
  color: var(--color-paper-white);
}
.btn-outline-light:hover { border-color: var(--color-paper-white); }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- Nav — floating pill in an 8rem bar ---------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 8rem;
  display: flex;
  align-items: center;
  background: transparent;
  transition: height .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { height: 6rem; }
/* Bar fill waits until the nav actually leaves the hero — dropping canvas gray
   onto the footage would look like a bug. */
.nav.past-hero { background: var(--surface-canvas); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

/* The logo artwork is white on transparency, so it needs darkening to survive
   the canvas — the opposite of the usual case. */
.nav-brand img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: brightness(0);
  transition: filter .3s var(--ease);
}

/* Over the hero video it goes back to its native white, along with the
   text-link button, for as long as the nav sits on footage. */
body[data-hero-video] .nav:not(.past-hero) .nav-brand img { filter: none; }
body[data-hero-video] .nav:not(.past-hero) .btn-ghost { color: var(--color-paper-white); }

/* At rest over the video the pill is invisible and the links read white
   directly on the footage. The white pill fills in as soon as scrolling starts. */
body[data-hero-video] .nav:not(.scrolled) .nav-links { background: transparent; }
body[data-hero-video] .nav:not(.scrolled) .nav-links a { color: var(--color-paper-white); }
body[data-hero-video] .nav:not(.scrolled) .nav-links a:hover { color: var(--color-mint-chip); }

/* Passing an inverted section. Everything drops to transparent so the black
   runs edge to edge, and the chrome flips white to survive it. Declared after
   .past-hero so it wins the background. */
.nav.on-dark { background: transparent; }
.nav.on-dark .nav-brand img { filter: none; }
.nav.on-dark .nav-links { background: transparent; }
.nav.on-dark .nav-links a { color: var(--color-smoke); }
.nav.on-dark .nav-links a:hover,
.nav.on-dark .nav-links a.active { color: var(--color-paper-white); }
.nav.on-dark .btn-ghost { color: var(--color-paper-white); }
/* A black button on a black band is just floating text — invert it. */
.nav.on-dark .btn-primary { background: var(--color-paper-white); color: var(--color-carbon-black); }
.nav.on-dark .btn-primary:hover { background: var(--color-mint-chip); }
.nav.on-dark .nav-toggle { background: transparent; border: 1.5px solid var(--color-graphite); }
.nav.on-dark .nav-toggle span { background: var(--color-paper-white); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--radius-nav-pill);
  background: var(--surface-card);
  transition: background .3s var(--ease);
}
.nav-links a {
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  letter-spacing: -.01em;
  color: var(--color-slate);
  transition: color .3s var(--ease);
}
.nav-links a:hover { color: var(--color-carbon-black); }
.nav-links a.active { color: var(--color-carbon-black); text-decoration: underline; text-underline-offset: 5px; }

.nav-actions { display: flex; align-items: center; gap: var(--spacing-8); }

.nav-toggle {
  display: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-nav-pill);
  background: var(--surface-card);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-carbon-black);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Hero — full-bleed video ---------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(8rem + var(--spacing-40)) 0 var(--spacing-64);
  background: var(--surface-inverted);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the top edge: when the viewport is narrower than the footage,
     cover crops the overflow off the bottom rather than the top. */
  object-position: top center;
  filter: brightness(1.45) saturate(1.05);
  z-index: 0;
}

/* Flat tint, not a gradient — the type needs a legible floor and the system
   forbids gradients. Kept light so the footage stays bright; the headline is
   130px white bold, which carries on its own weight. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .22);
}

.hero-inner { position: relative; z-index: 2; }

.hero h1 { margin: 0 0 var(--spacing-24); color: var(--color-paper-white); }

/* Morphing third line: "Scale." cycles to "With Octave AI Automation" and back.
   The word fades + scales + blurs out, swaps, then unblurs in from slightly-
   too-big — the blur is what reads as a morph rather than a crossfade.
   Full display size, matching the two command lines above. The long phrase
   wraps to two lines, so min-height reserves that height up front — the "Scale."
   state keeps the same box and the CTA below never jumps.
   Stays white per the monochrome system (motion is the accent, not colour). */
.morph-text {
  display: inline-block;
  min-height: 1.8em;   /* two lines at the 0.9 line-height — holds the phrase */
  color: inherit;
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
  transition:
    opacity   .6s cubic-bezier(.4, 0, .2, 1),
    transform .6s cubic-bezier(.4, 0, .2, 1),
    filter    .6s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform, filter;
}
/* leaving — shrink + blur away */
.morph-text.is-out { opacity: 0; transform: scale(.85); filter: blur(12px); }
/* entering start-state — oversized + blurred, no transition (it's the seed) */
.morph-text.is-in  { opacity: 0; transform: scale(1.15); filter: blur(12px); }

.lead {
  max-width: 46ch;
  font-size: var(--text-subheading);
  line-height: 1.33;
  letter-spacing: -.011em;
  color: var(--color-slate);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}
.hero .hero-cta { margin-top: 0; }

/* ---------------- Text Morph ----------------
   Scroll-pinned: the section is tall, the panel inside sticks, and scroll
   position picks the word. Not scroll-hijacking — the wheel keeps its normal
   speed, the panel simply holds still while the page moves behind it.

   Section height = 100vh (the pinned panel) + one screen of travel per word.
   The blur/scale states are the component's; scroll replaces its clock. */

.morph {
  position: relative;
  height: 340vh;
  background: var(--surface-inverted);
}

.morph-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}

.morph-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

.morph-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  filter: url(#morph-goo);
}

.morph-anchor,
.morph-word {
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: clamp(2.25rem, 7vw, 5rem);
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.morph-anchor { visibility: hidden; display: inline-block; }

/* Resting state = "not yet arrived": blurred, small, invisible. */
.morph-word {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  filter: blur(20px);
  transform: translate(-50%, -50%) scale(.8);
  color: var(--color-paper-white);
  transition: opacity .7s var(--ease), filter .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, filter, transform;
}
.morph-word.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}
/* Already had its turn — leaves upward in scale, so the exit reads as a
   different direction from the entrance. */
.morph-word.is-out {
  opacity: 0;
  filter: blur(20px);
  transform: translate(-50%, -50%) scale(1.2);
}


/* ---------------- Sections ---------------- */

.section { padding: var(--spacing-80) 0; }
.section-soft { background: var(--surface-mist); }

.sec-head { max-width: 900px; margin-bottom: var(--spacing-64); }
.sec-head h2 { margin: var(--spacing-24) 0 var(--spacing-16); }
.sec-sub {
  max-width: 60ch;
  font-size: var(--text-subheading);
  line-height: 1.33;
  color: var(--color-slate);
}
.sec-head h2.on-dark { color: var(--color-paper-white); }

/* ---------------- Cards: pillars ---------------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}
.pillar {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-24);
  min-height: 260px;
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pillar:hover { background: var(--color-carbon-black); color: var(--color-paper-white); }
.pillar:hover h3 { color: var(--color-paper-white); }
.pillar:hover p { color: var(--color-smoke); }

.pill-ico {
  width: 28px;
  height: 28px;
  margin-bottom: auto;
  color: currentColor;
}
.pillar h3 { margin-bottom: var(--spacing-8); }
.pillar p {
  font-size: var(--text-body-sm);
  line-height: 1.3;
  letter-spacing: -.011em;
  color: var(--color-slate);
}

/* ---------------- Capability cards ----------------
   Reference layout: title, description, meta rule, image at the foot.
   Kept on this site's tokens — condensed uppercase title, mono meta — rather
   than the reference's own type. */

.caps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}

.cap {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-24);
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.cap:hover { background: var(--color-carbon-black); }
.cap:hover h3 { color: var(--color-paper-white); }
.cap:hover p { color: var(--color-smoke); }
.cap:hover .cap-meta b { color: var(--color-mint-chip); }
.cap:hover .cap-meta i { color: var(--color-graphite); }

.cap h3 {
  margin-bottom: var(--spacing-16);
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-sm);
  line-height: .9;
  letter-spacing: -.03em;
}
.cap > p {
  font-size: var(--text-body-sm);
  line-height: 1.3;
  letter-spacing: -.011em;
  color: var(--color-slate);
}

/* Meta rule — the reference's "Analysis | 5 minute read" line. */
.cap-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 var(--spacing-16);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.cap-meta b { font-weight: var(--fw-regular); color: var(--color-carbon-black); }
.cap-meta i { font-style: normal; color: var(--color-ash); }
.cap-meta span { color: var(--color-smoke); }

/* margin-top: auto pins the image to the foot so cards of unequal text length
   still line their images up across the row. */
.cap-img {
  margin-top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--surface-mist);
}

/* ---------------- Cards: services ---------------- */

.services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-16);
}
.svc {
  padding: var(--spacing-24);
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
}

/* The 7th card spans the full row so an odd count leaves no half-empty gap. */
.svc-wide { grid-column: 1 / -1; }

.svc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}
.svc-num {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.svc-ico { width: 28px; height: 28px; flex: none; }

.svc h3 {
  margin-bottom: var(--spacing-16);
  font-size: var(--text-heading-sm);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.svc > p {
  max-width: 48ch;
  font-size: var(--text-body);
  line-height: 1.25;
  color: var(--color-slate);
}

/* Mint tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}
.tags li {
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-tag);
  background: var(--color-mint-chip);
  color: var(--color-carbon-black);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* ---------------- Stats — inverted block ---------------- */

.stats-sec { background: var(--surface-inverted); }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-graphite);
  border-radius: var(--radius-card-lg);
  overflow: hidden;
}
.stat {
  padding: var(--spacing-40) var(--spacing-24);
  background: var(--surface-inverted);
}
.stat-val {
  display: block;
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: var(--text-display);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--color-paper-white);
  font-variant-numeric: tabular-nums;
}
.stat-lab {
  display: block;
  margin-top: var(--spacing-16);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}

/* ---------------- Platform ---------------- */

.platform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-64);
  align-items: start;
}
.plat-visual { position: sticky; top: calc(8rem + var(--spacing-16)); }

.mock {
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16);
  background: var(--surface-mist);
}
.mock-bar > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ash);
}
.mock-url {
  margin-left: var(--spacing-8);
  padding: 4px 12px;
  border-radius: var(--radius-tag);
  background: var(--surface-card);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -.03em;
  color: var(--color-smoke);
}

.mock-body { display: grid; grid-template-columns: 150px 1fr; min-height: 360px; }
.mock-side { padding: var(--spacing-16); background: var(--surface-card); }
.mock-logo {
  padding-bottom: var(--spacing-16);
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: 18px;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.mock-nav { display: flex; flex-direction: column; gap: 2px; }
.mock-nav span {
  padding: 6px 8px;
  border-radius: var(--radius-btn-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -.03em;
  color: var(--color-smoke);
  white-space: nowrap;
}
.mock-nav span.on { background: var(--color-carbon-black); color: var(--color-paper-white); }

.mock-main {
  padding: var(--spacing-16);
  background: var(--surface-mist);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-8); }
.mk {
  padding: var(--spacing-16) var(--spacing-8);
  border-radius: var(--radius-btn);
  background: var(--surface-card);
  text-align: center;
}
.mk b {
  display: block;
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-sm);
  line-height: .9;
  letter-spacing: -.03em;
}
.mk small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: -.03em;
  color: var(--color-smoke);
}

.mock-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-16) var(--spacing-16);
  border-radius: var(--radius-btn);
  background: var(--surface-card);
}
.mock-row em {
  font-style: normal;
  font-size: var(--text-body-sm);
  letter-spacing: -.011em;
}

.pill {
  padding: 4px 10px;
  border-radius: var(--radius-tag);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: -.03em;
  text-transform: uppercase;
  flex: none;
  background: var(--surface-mist);
  color: var(--color-slate);
}
.pill.ok { background: var(--color-mint-chip); color: var(--color-carbon-black); }
.pill.warn { background: var(--color-voltage-yellow); color: var(--color-carbon-black); }
.pill.blue { background: var(--color-carbon-black); color: var(--color-paper-white); }

.feat-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-ash);
  margin-bottom: var(--spacing-40);
}
.feat-list li {
  display: flex;
  gap: var(--spacing-24);
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--color-ash);
}
.feat-ico { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.feat-list h3 { margin-bottom: var(--spacing-8); font-size: var(--text-subheading); }
.feat-list p {
  font-size: var(--text-body-sm);
  line-height: 1.3;
  color: var(--color-slate);
}

/* ---------------- Industries ---------------- */

.inds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}
.ind {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-24);
  min-height: 200px;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  transition: background .25s var(--ease), color .25s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* .ind also carries .reveal, which redeclares the transition shorthand for
   its entrance fade — same specificity would let whichever rule comes last
   win outright and drop the other's properties, so this merges both lists
   under a selector specific enough to always apply regardless of order. */
.ind.reveal {
  transition: opacity .6s var(--ease), transform .3s var(--ease),
              background .25s var(--ease), color .25s var(--ease),
              box-shadow .3s var(--ease);
}
.ind:hover {
  background: var(--color-mint-chip);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
}
.ind-ico {
  width: 24px;
  height: 24px;
  margin-bottom: auto;
  transition: transform .3s var(--ease);
}
.ind:hover .ind-ico { transform: scale(1.12) rotate(-4deg); }
.ind h3 { margin-bottom: 4px; font-size: var(--text-body); }
.ind p {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.ind:hover p { color: var(--color-slate); }

/* Stagger the entrance so cards settle in one after another instead of
   all at once — index-based delay, reset on wrap for the second row. */
.inds .ind:nth-child(4n+1) { transition-delay: 0s; }
.inds .ind:nth-child(4n+2) { transition-delay: .06s; }
.inds .ind:nth-child(4n+3) { transition-delay: .12s; }
.inds .ind:nth-child(4n+4) { transition-delay: .18s; }

/* ---------------- Why ---------------- */

.whys {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-16);
}
.why {
  padding: var(--spacing-40);
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
}
.why-ico { width: 28px; height: 28px; margin-bottom: var(--spacing-64); }
.why h3 {
  margin-bottom: var(--spacing-16);
  font-size: var(--text-heading-sm);
  letter-spacing: -.03em;
}
.why p {
  max-width: 52ch;
  font-size: var(--text-body);
  line-height: 1.25;
  color: var(--color-slate);
}

/* ---------------- Benefits ---------------- */

.bens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--spacing-64);
  border-top: 1px solid var(--color-ash);
}
.bens li {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--color-ash);
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-sm);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.chk { width: 20px; height: 20px; flex: none; color: var(--color-carbon-black); }
.chk svg { stroke-width: 2.4; }

/* ---------------- CTA — inverted ---------------- */

.cta {
  padding: var(--spacing-96) 0;
  background: var(--surface-inverted);
}
.cta h2 { margin: var(--spacing-40) 0 var(--spacing-24); color: var(--color-paper-white); }
.cta > .wrap > p {
  max-width: 52ch;
  margin-bottom: var(--spacing-40);
  font-size: var(--text-subheading);
  line-height: 1.33;
  color: var(--color-smoke);
}

.cta-tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-16);
  margin: var(--spacing-64) 0 var(--spacing-40);
}
.cta-tri > div {
  padding: var(--spacing-24);
  border-radius: var(--radius-card);
  background: var(--color-graphite);
}
.cta-tri strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: var(--text-heading-sm);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-paper-white);
}
.cta-tri small {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.cta .hero-cta { margin-top: 0; }

/* ---------------- Page heads ---------------- */

.page-head { padding: calc(8rem + var(--spacing-64)) 0 var(--spacing-40); }
.page-head h1 { margin: var(--spacing-24) 0; }
.page-head.tall { padding-bottom: var(--spacing-96); }

/* ---------------- Contact ---------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--spacing-16);
  align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: var(--spacing-8); }
.ci {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  transition: background .25s var(--ease);
}
a.ci:hover { background: var(--color-mint-chip); }
.ci-ico { width: 24px; height: 24px; flex: none; }
.ci small {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.ci strong {
  font-weight: var(--fw-450);
  font-size: var(--text-body);
  letter-spacing: -.01em;
  word-break: break-word;
}
/* Voltage yellow: reserved for the email address, per DESIGN.md. */
.ci-mail strong { background: var(--color-voltage-yellow); padding: 0 4px; }

.form {
  padding: var(--spacing-40);
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
}
.form h3 {
  margin-bottom: var(--spacing-24);
  font-size: var(--text-heading-sm);
  letter-spacing: -.03em;
}

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
.field { display: block; margin-bottom: var(--spacing-16); }
fieldset.field { padding: 0; border: 0; }

.checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-8) var(--spacing-16);
}
.checks label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body-sm);
  letter-spacing: -.01em;
  color: var(--color-slate);
  cursor: pointer;
}
.checks input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--color-carbon-black);
  cursor: pointer;
}
.field > span {
  display: block;
  margin-bottom: var(--spacing-8);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--spacing-16);
  border: 1.5px solid var(--color-ash);
  border-radius: var(--radius-btn-sm);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  letter-spacing: -.01em;
  color: var(--color-carbon-black);
  transition: border-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.25; }
.field input::placeholder,
.field textarea::placeholder { color: var(--color-smoke); }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--color-carbon-black); }
.field .invalid,
.field input.invalid,
.field select.invalid,
.field textarea.invalid { border-color: var(--color-carbon-black); background: var(--color-voltage-yellow); }

.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}

.form-note {
  margin-top: var(--spacing-16);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  min-height: 20px;
  color: var(--color-slate);
}
.form-note.ok { background: var(--color-mint-chip); padding: var(--spacing-8); }
.form-note.err { background: var(--color-voltage-yellow); padding: var(--spacing-8); }

/* ---------------- Insights ---------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-40);
}
.filter {
  padding: var(--spacing-8) var(--spacing-16);
  border: 0;
  border-radius: var(--radius-tag);
  background: var(--surface-card);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-slate);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.filter:hover { background: var(--color-mint-chip); color: var(--color-carbon-black); }
.filter.on { background: var(--color-carbon-black); color: var(--color-paper-white); }

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-16);
}
.post {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-24);
  min-height: 300px;
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.post:hover { background: var(--color-carbon-black); }
.post:hover h3 { color: var(--color-paper-white); }
.post:hover p, .post:hover .post-meta { color: var(--color-smoke); }
.post:hover .post-author { color: var(--color-paper-white); }

.post-lead { grid-column: 1 / -1; min-height: 0; padding: var(--spacing-40); }
.post-lead h3 { font-size: var(--text-heading); letter-spacing: -.02em; }
.post-lead p { max-width: 70ch; font-size: var(--text-subheading); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-smoke);
}
.post-cat {
  padding: 4px 10px;
  border-radius: var(--radius-tag);
  background: var(--color-mint-chip);
  color: var(--color-carbon-black);
}
.post h3 { font-size: var(--text-subheading-lg); }
.post p {
  font-size: var(--text-body-sm);
  line-height: 1.3;
  color: var(--color-slate);
}
.post-author {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.state {
  grid-column: 1 / -1;
  padding: var(--spacing-64) 0;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  color: var(--color-smoke);
}

/* ---------------- Footer — compact dark band ---------------- */

.footer {
  padding: var(--spacing-64) 0 0;
  background: var(--surface-inverted);
  color: var(--color-smoke);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.6fr;
  gap: var(--spacing-40);
  padding-bottom: var(--spacing-24);
}
/* Footer band is black and the artwork is already white — no filter needed. */
.foot-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--spacing-24);
}
.foot-headline {
  margin: 0 0 var(--spacing-16);
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.03em;
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  color: var(--color-paper-white);
}
.foot-brand p {
  max-width: 42ch;
  font-size: var(--text-body-sm);
  line-height: 1.3;
}
.foot-estd {
  display: inline-block;
  margin-top: var(--spacing-24);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.foot-col { display: flex; flex-direction: column; gap: var(--spacing-8); }
.foot-col h4 {
  margin-bottom: var(--spacing-8);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  color: var(--color-paper-white);
}
.foot-col a,
.foot-col span {
  font-size: var(--text-body-sm);
  letter-spacing: -.011em;
  color: var(--color-smoke);
  word-break: break-word;
}
.foot-col a { width: fit-content; transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--color-paper-white); }
.foot-col a.mail:hover { background: var(--color-voltage-yellow); color: var(--color-carbon-black); }

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  padding: var(--spacing-24) 0;
  border-top: 1px solid var(--color-graphite);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* ---------------- Footer: locations ---------------- */

.foot-locations { gap: var(--spacing-16); }
.loc-block b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-paper-white);
}
.loc-block span {
  display: block;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-smoke);
}
.loc-block em { font-style: normal; color: var(--color-ember); }
.loc-block a {
  display: block;
  width: fit-content;
  font-size: var(--text-body-sm);
  color: var(--color-ember);
  transition: color .2s var(--ease);
}
.loc-block a:hover { color: var(--color-paper-white); }

/* ---------------- Footer: video-text watermark ----------------
   A giant "OCTAVE" mask lets the hero footage read through as a brand
   strip. The SVG text lives in a userSpaceOnUse clipPath sized to the
   strip's own pixel box in JS (site.js), since percentage units can't
   drive text glyph geometry. */
.foot-watermark {
  position: relative;
  width: 100%;
  height: clamp(140px, 24vw, 340px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.wm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wm-clip-text {
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.wm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.3) saturate(1.05);
  clip-path: url(#wm-clip);
  -webkit-clip-path: url(#wm-clip);
}

/* ---------------- About: timeline ---------------- */

.timeline { position: relative; display: flex; flex-direction: column; gap: var(--spacing-40); }
.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 1px;
  background: var(--color-ash);
}
.tl-item { position: relative; padding-left: var(--spacing-40); }
.tl-dot {
  position: absolute;
  top: 6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-carbon-black);
}
.tl-date {
  display: inline-block;
  margin-bottom: var(--spacing-8);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-ember);
}
.tl-item h3 { margin-bottom: var(--spacing-8); font-size: var(--text-heading-sm); letter-spacing: -.03em; }
.tl-item p { max-width: 62ch; font-size: var(--text-body); line-height: 1.4; color: var(--color-slate); }
.tl-item .tags { margin-top: var(--spacing-16); }

/* ---------------- About: vision ---------------- */

.vision {
  padding: var(--spacing-80) 0;
  background: var(--surface-inverted);
}
.vision .wrap { max-width: 900px; }
.vision blockquote {
  margin: var(--spacing-24) 0 0;
  font-family: var(--font-cond);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--color-paper-white);
}

/* ---------------- About: mission ---------------- */

.mission {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-16);
}
.mission-card {
  padding: var(--spacing-24);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.mission-card h3 { margin-bottom: var(--spacing-8); font-size: var(--text-body); }
.mission-card p { font-size: var(--text-body-sm); line-height: 1.4; color: var(--color-slate); }

/* ---------------- About: executive team ---------------- */

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-16);
}
.team-card {
  display: flex;
  gap: var(--spacing-24);
  padding: var(--spacing-24);
  border-radius: var(--radius-card-lg);
  background: var(--surface-card);
}
.team-photo {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: top center;
  background: var(--surface-mist);
}
.team-copy h3 { margin-bottom: 2px; font-size: var(--text-heading-sm); letter-spacing: -.03em; }
.team-role {
  display: block;
  margin-bottom: var(--spacing-8);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--color-ember);
}
.team-copy p { font-size: var(--text-body-sm); line-height: 1.4; color: var(--color-slate); }

/* ---------------- Reveal ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------------- Responsive ---------------- */

@media (max-width: 1080px) {
  .platform { grid-template-columns: 1fr; gap: var(--spacing-40); }
  .plat-visual { position: static; }
  .pillars, .inds, .posts, .caps { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .mission { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: 7rem var(--spacing-24) auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--spacing-16);
    border-radius: var(--radius-card-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: var(--spacing-16); border-bottom: 1px solid var(--color-mist-gray); }
  .nav-links a:last-child { border-bottom: 0; }

  /* The pill is a dropdown panel at this width, not a bar over the video —
     it must stay opaque and dark-on-white however the page is scrolled. */
  body[data-hero-video] .nav .nav-links { background: var(--surface-card); }
  body[data-hero-video] .nav .nav-links a { color: var(--color-slate); }
  body[data-hero-video] .nav .nav-links a:hover { color: var(--color-carbon-black); }
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn-ghost { display: none; }

  .services, .whys, .stats, .cta-tri, .bens { grid-template-columns: 1fr; }
  .bens { gap: 0; }
  .mission { grid-template-columns: 1fr; }
  .team-card { flex-direction: column; }
  .team-photo { width: 88px; height: 88px; }


  .section { padding: var(--spacing-64) 0; }
  .hero, .page-head { padding-top: calc(8rem + var(--spacing-24)); }
}

@media (max-width: 620px) {
  .wrap { padding: 0 var(--spacing-16); }
  .pillars, .inds, .posts, .caps { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; }
  .svc, .why, .form, .post-lead { padding: var(--spacing-24); }
  .checks { grid-template-columns: 1fr; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .mock-kpis { grid-template-columns: repeat(2, 1fr); }
  .hero-cta .btn { flex: 1 1 100%; }
  .foot-grid { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .svc-top { margin-bottom: var(--spacing-40); }
  .why-ico { margin-bottom: var(--spacing-40); }
}

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

  /* No pin, no cycling — the section collapses to a normal band and every
     phrase is simply listed, so none of the content depends on motion. */
  .morph { height: auto; }
  .morph-sticky { height: auto; min-height: 0; padding: var(--spacing-80) var(--spacing-24); }
  .morph-stage { flex-direction: column; gap: var(--spacing-16); filter: none; }
  .morph-anchor { display: none; }
  .morph-word {
    position: static;
    opacity: 1;
    filter: none;
    transform: none;
  }
}