/* ============================================================
   Axitura website_v2 — Visual System
   Brand tokens, typography, layout, components
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ── */
:root {
  --red: #F81117;
  --black: #111111;

  /* Brand — the red is lifted from the logo mark in assets/logo.svg.
     --red is kept as the legacy name; existing rules still reference it. */
  --brand: #F81117;
  --brand-deep: #CB0E13;
  --brand-wash: #FEF3F2;

  /* Ink — carries a little blue, reads richer than flat black */
  --ink: #0B1220;
  --ink-soft: #1C2534;

  /* Data palette — colour comes from charts, never from washed backgrounds */
  --data-1: #F81117;
  --data-2: #1E4E6B;
  --data-3: #4E8FA8;
  --data-4: #C88A2E;

  /* Surfaces — cool slate neutrals. The whole site sits on a light ground;
     there is no dark section. Anything that needs to separate from the page
     steps between these two rather than reaching for a dark fill. */
  --surface-1: #F8FAFC;   /* section ground, one step off white */
  --surface-2: #FFFFFF;   /* cards and raised surfaces */
  --surface-3: #EFF3F7;   /* recessed wells, collapsed accordion panes */
  /* The one dark surface: navy rather than black, so it reads as part of
     the same cool-neutral family as the light surfaces above. */
  --surface-dark: #0F172A;

  /* Industry tints — desaturated blue / green / ochre. These only ever
     appear as a wash over photography, never as flat UI fills, so the
     brand red stays the single saturated colour on the page. */
  --tint-steel:  #7C97AC;  /* industrial manufacturing */
  --tint-sage:   #86A08C;  /* medical devices */
  --tint-ochre:  #BFA46B;  /* consumer products */
  --tint-slate:  #8FA3B3;  /* distribution & wholesale */
  --tint-olive:  #97A17E;  /* field & technical services */

  --gray-900: #1a1a1a;
  --gray-800: #2a2a2a;
  --gray-700: #3d3d3d;
  --gray-600: #555555;
  --gray-500: #767676;
  --gray-400: #999999;
  --gray-300: #cccccc;
  --gray-200: #e5e5e5;
  --gray-100: #f0f0f0;
  --gray-50: #f7f7f7;
  --white: #ffffff;

  --max-w: 1200px;
  --nav-h: 84px;
  --gap: clamp(1.5rem, 3vw, 2.5rem);
  --section-pad: clamp(4rem, 8vw, 7rem);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 6px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Motion — one rhythm for the whole site */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 320ms;
  --stagger: 40ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }

/* Keyboard focus. The reset strips the user-agent ring and nothing put one
   back, so every link and button in the nav, body and footer was invisible
   to anyone tabbing through — only the two card components I added had a
   ring of their own. :focus-visible rather than :focus, so a mouse click
   does not leave an outline sitting behind it. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Brand red on the navy hero and the dark bands is too close in value to
   read as a ring; white is unambiguous on both. */
.hero :focus-visible,
.cta-band :focus-visible,
.footer :focus-visible {
  outline-color: #ffffff;
}

/* ── Typography ── */
h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--black);
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--black);
}
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p { color: var(--gray-700); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; letter-spacing: 0.04em; }
.label-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ── Navigation ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--gray-200);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* .container is a plain block with no height, so `height:100%` on .nav__inner
   resolved to auto and parked the whole bar at the top of the nav. */
.nav > .container { height: 100%; }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 2rem;
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 52px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2rem);
}
.nav__links a {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: color 0.15s;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--black); }
.nav__links a.active { color: var(--black); font-weight: 600; }
.nav__cta { flex-shrink: 0; }
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: all 0.2s;
}

/* ── Buttons ── */
.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--red);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
/* White on the logo red #F81117 measures 4.13:1 — under the 4.5:1 AA floor
   for text this size. --brand-deep is the same hue a step down and clears it
   at 5.81:1. The logo itself still uses the original red; this is only the
   button fill, where white text sits on top of it. */
.btn--primary { background: var(--brand-deep); }
.btn--primary:hover { background: #B80C11; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--black);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-300);
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn--ghost:hover { border-color: var(--black); color: var(--black); transform: translateY(-1px); }

/* 14px red on white is 4.13:1, under the AA floor — same fix as the button. */
.btn--link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-deep);
  transition: gap 0.15s;
}
.btn--link:hover { gap: 0.5rem; }

/* ── Sections ── */
.section {
  padding: var(--section-pad) 0;
}
/* Was --gray-50 (#F7F7F7), a neutral grey that sat oddly beside the cool
   slate surfaces. Now the same family as everything else. Used on 12 pages.

   The ground is a wide, very soft slate glow over the flat tint rather than
   the flat tint alone — a single flat fill across a full-width band is what
   made these sections read as dead space. The glow is deliberately weak
   (max ~9% slate) and enormous (140% of the box): at that scale it reads as
   depth, not as a visible blob. Origin alternates by section so two
   consecutive tinted bands do not look like the same rectangle repeated. */
.section--alt {
  background:
    radial-gradient(140% 110% at 100% 0%,
      rgba(100, 116, 139, 0.09) 0%,
      rgba(100, 116, 139, 0.035) 42%,
      rgba(100, 116, 139, 0) 72%),
    var(--surface-1);
}
/* The second tinted band, flipped to the opposite corner. This was written
   as :nth-of-type(even) first, which silently did nothing useful: nth-of-type
   counts every <section> sibling, and both tinted bands land on even indexes
   (2 and 4, with the hero at 1), so they got identical gradients. An explicit
   class is duller to read and actually works. */
.section--alt-b {
  background:
    radial-gradient(140% 110% at 0% 100%,
      rgba(100, 116, 139, 0.09) 0%,
      rgba(100, 116, 139, 0.035) 42%,
      rgba(100, 116, 139, 0) 72%),
    var(--surface-1);
}

/* The white sections get the same treatment a step fainter, so the page
   never presents two identical flat rectangles in a row. */
.section:not(.section--alt):not(.section--navy) {
  background:
    radial-gradient(130% 100% at 12% 0%,
      rgba(100, 116, 139, 0.055) 0%,
      rgba(100, 116, 139, 0.02) 45%,
      rgba(100, 116, 139, 0) 75%),
    var(--white);
}

/* The one dark band in the body of a page. Section rhythm on the homepage
   is bookends plus a single mid-page accent — dark hero, dark CTA and
   footer, and exactly one navy section in between. Strict dark/light
   alternation was considered and rejected: on a seven-block page it reads
   as stripes and every dark block stops meaning anything. */
.section--navy {
  background: var(--surface-dark);
  color: #ffffff;
}
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: #ffffff; }
.section--navy p { color: rgba(255, 255, 255, 0.78); }
.section--navy .label-tag { color: rgba(255, 255, 255, 0.55); }
.section--navy .section__header .lead { color: rgba(255, 255, 255, 0.78); }

.section__header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section__header--center { text-align: center; }
.section__header .label-tag { margin-bottom: 0.75rem; }
.section__header h2 { margin-top: 0; }
.section__header .lead {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--gray-600);
  max-width: 60ch;
}
.section__header--center .lead { margin: 1rem auto 0; }

/* ── Hero ── */
.hero {
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--gray-200);
}
.hero__inner { max-width: 820px; }
.hero__label { margin-bottom: 1.25rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--gray-600);
  max-width: 58ch;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Problem section ── */
/* ── Operating problem: causal chain ─────────────────────────────
   Not a card grid. These three are one sequence — scattered data causes
   late decisions causes lost value — and three identical boxes flattened
   that into three unrelated points. Nodes on a rule read as a chain, and
   pick up the same node-and-link language as the hero canvas.
   ------------------------------------------------------------------ */
.chain {
  --chain-gap: clamp(1.5rem, 4vw, 3.5rem);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--chain-gap);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.chain__step { position: relative; min-width: 0; }

.chain__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
  margin-bottom: 1.15rem;
}

/* The rule carries past the grid gap so the line is continuous across the
   three columns; the last step stops at its own edge. */
.chain__track {
  position: relative;
  display: block;
  height: 1px;
  background: var(--gray-300);
  margin-bottom: 1.5rem;
}
.chain__step:not(:last-child) .chain__track {
  width: calc(100% + var(--chain-gap));
}
.chain__track::before {           /* the node */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px var(--surface-1);
}
/* Sits clear of the next node rather than under it — at right:0 the track
   ends exactly where the following dot begins and the arrow disappeared. */
.chain__step:not(:last-child) .chain__track::after {   /* the arrowhead */
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--gray-400);
  border-right: 1.5px solid var(--gray-400);
  transform: translateY(-50%) rotate(45deg);
}

.chain__title {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}
.chain__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gray-700);
  max-width: 38ch;
}

@media (max-width: 780px) {
  /* Stacked: the rule turns vertical and runs down the left, so the
     sequence still reads as a sequence. */
  .chain { grid-template-columns: 1fr; gap: 0; }
  .chain__step { padding: 0 0 2rem 2.25rem; }
  .chain__num { margin-bottom: 0.5rem; }
  .chain__track {
    position: absolute;
    left: 5px; top: 0.35rem; bottom: 0;
    width: 1px; height: auto;
    margin: 0;
  }
  .chain__step:not(:last-child) .chain__track { width: 1px; }
  .chain__track::before { top: 0; }
  .chain__step:not(:last-child) .chain__track::after { display: none; }
  .chain__step:last-child { padding-bottom: 0; }
  .chain__step:last-child .chain__track { bottom: auto; height: 11px; }
}
/* Capping the measure makes the same copy read lighter without cutting it. */

/* ── Outcome row ── */
.outcome-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  border-top: 1px solid var(--gray-200);
}
.outcome-item {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  transition: background 0.15s;
}
.outcome-item:hover { background: var(--gray-50); }
.outcome-item__num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.outcome-item h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  margin-bottom: 0.6rem;
  color: var(--black);
}
.outcome-item p { font-size: 0.9rem; line-height: 1.6; color: var(--gray-600); }

/* ── Scroll reveal ────────────────────────────────────────────────
   Generic: anything with data-reveal starts 14px low and transparent,
   and settles when it scrolls into view. The delay ladder is driven by
   --reveal-i, which reveal-on-scroll.js writes onto each child of a
   data-reveal-group, so all timing lives here rather than in JS.

   Only opacity and transform are animated — both composite off the main
   thread, so a long list of rows costs nothing to run.
   ------------------------------------------------------------------ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal, 560ms) var(--ease-out),
              transform var(--dur-reveal, 560ms) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* No entrance at all under reduced motion. reveal-on-scroll.js also adds
   .is-revealed up front in that case, so content never depends on JS
   animation having run. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Technology rows: the rule draws in from the left as the row arrives.
   The static border-top is replaced by a scaled pseudo-element, because
   border-width cannot be animated smoothly. */
.tech-row { position: relative; }
.js-reveal .tech-row { border-top: none; }
.js-reveal .tech-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gray-200);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
}
.js-reveal .tech-row.is-revealed::before { transform: scaleX(1); }

.js-reveal .tech-row:last-child { border-bottom: none; }
.js-reveal .tech-row:last-child::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gray-200);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease-out);
  transition-delay: calc((var(--reveal-i, 0) + 1) * var(--stagger));
}
.js-reveal .tech-row.is-revealed:last-child::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .tech-row::before,
  .js-reveal .tech-row:last-child::after { transform: scaleX(1); transition: none; }
}

/* ── Industry groups ── */
.industry-group { margin-bottom: 3rem; }
.industry-group__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* ── Industry card ── */
.industry-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 280px;
}
.industry-card:hover {
  border-color: var(--gray-400);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.industry-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.75rem;
}
.industry-card__reality {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

/* ── Pain list ── */
.pain-list {
  list-style: none;
  margin-bottom: 1.25rem;
}
.pain-list li {
  font-size: 0.85rem;
  color: var(--gray-700);
  padding: 0.35rem 0;
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
  border-top: 1px solid var(--gray-100);
}
.pain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}
.pain-list li:first-child { border-top: none; }

/* ── Tech grid ── */
/* ── Technology: editorial rows ──────────────────────────────────
   Also not cards. Four hairline-separated rows, the way a report sets out
   numbered points — index, claim, explanation. Keeps the section quiet so
   the two interactive card sets above it stay the visual events.
   ------------------------------------------------------------------ */
.tech-rows { margin-top: clamp(2rem, 4vw, 3rem); }

.tech-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-top: 1px solid var(--gray-200);
  transition: background var(--dur-fast) var(--ease-out);
}
.tech-row:last-child { border-bottom: 1px solid var(--gray-200); }
.tech-row:hover { background: var(--surface-1); }

.tech-row__num {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand);
  letter-spacing: 0.02em;
}
.tech-row__title {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.tech-row__desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--gray-700);
}

@media (max-width: 780px) {
  .tech-row {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
  }
  .tech-row__desc { grid-column: 2; }
}

/* ── CTA band ── */
.cta-band {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--black);
  text-align: center;
}
.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  max-width: 48ch;
  margin: 0 auto 2rem;
}

/* ── What we do — outcome sections ── */
/* ── What We Do: alternating image / copy ─────────────────────────
   Four identical left-aligned blocks read as a numbered list of the same
   thing four times. Mirroring every second one gives the page a rhythm to
   scroll through, and the image is the one Axitura already uses for that
   outcome on the homepage — same picture, same idea, so the two pages
   visibly belong together.

   The mirror is an explicit class, not :nth-of-type. nth-of-type counts
   every <section> sibling including the intro and the CTA band, which has
   already produced one silent off-by-one on this site.
   ------------------------------------------------------------------ */
.outcome-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  border-bottom: 1px solid var(--gray-200);
}
.outcome-section:last-of-type { border-bottom: none; }

.outcome-section__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.outcome-section--flip .outcome-section__inner {
  grid-template-columns: 6fr 5fr;
}
/* Source order stays image-then-copy for screen readers and for the stacked
   layout; only the painted order flips. */
.outcome-section--flip .outcome-section__media { order: 2; }

.outcome-section__media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-3);
}
.outcome-section__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.outcome-section:hover .outcome-section__media img { transform: scale(1.03); }

.outcome-section__label { margin-bottom: 0.5rem; }
.outcome-section__num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.outcome-section h2 { margin-bottom: 1rem; }
.outcome-section p {
  font-size: 1.025rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 1rem;
}

/* Deep links land here from the homepage cards; clear the sticky nav. */
.outcome-section[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

@media (max-width: 820px) {
  .outcome-section__inner,
  .outcome-section--flip .outcome-section__inner { grid-template-columns: 1fr; }
  .outcome-section--flip .outcome-section__media { order: 0; }
  .outcome-section__media img { aspect-ratio: 16 / 9; }
}

/* ── Breadcrumb ── */
.breadcrumb {
  font-size: 0.8rem;
  color: var(--gray-500);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gray-500); transition: color 0.15s; }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb__sep { color: var(--gray-300); }

/* ── Industry detail ── */
.industry-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem); }
.industry-hero .label-tag { margin-bottom: 0.75rem; }
.industry-hero h1 { margin-bottom: 1.25rem; }
.industry-hero__reality {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--gray-600);
  max-width: 65ch;
  line-height: 1.75;
}

.detail-pain-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.detail-pain-item {
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--red);
  background: var(--gray-50);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.detail-pain-item h4 { color: var(--black); margin-bottom: 0.4rem; }
.detail-pain-item p { font-size: 0.9rem; color: var(--gray-600); }

.what-better-list {
  list-style: none;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.what-better-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.975rem;
  color: var(--gray-700);
  line-height: 1.6;
}
.what-better-list li::before {
  content: '✓';
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* ── Perspectives ── */
.perspectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: 2.5rem;
}
.perspective-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--white);
}
.perspective-card__topic {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.perspective-card__note {
  font-size: 0.8rem;
  color: var(--gray-400);
  font-style: italic;
  margin-top: auto;
}

/* ── Company page ── */
.company-content { max-width: 680px; }
.company-content h3 { margin-bottom: 0.6rem; }
.company-content p { font-size: 1.025rem; line-height: 1.75; margin-bottom: 1.5rem; }
.company-section { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--gray-200); }
.company-section:last-of-type { border-bottom: none; }

/* ── Contact page layout ── */
.section--contact { padding: var(--section-pad) 0; }

.contact-layout {
  display: grid;
  grid-template-columns: 42% 1fr;
  grid-template-areas:
    "heading form"
    "points  form";
  /* The form spans both rows and is far taller than either left-hand block.
     Without an explicit sizing the browser splits its height across the two
     rows, which pushed the supporting points down to roughly the middle of the
     form — a gap of a couple of hundred pixels that looked like a mistake.
     Row 1 takes only the height the heading needs; row 2 absorbs the rest. */
  grid-template-rows: auto 1fr;
  column-gap: clamp(3.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-heading  { grid-area: heading; }
.contact-form-col { grid-area: form; }
.contact-points   { grid-area: points; padding-top: 2rem; }

.contact-h1 { margin-top: 0.6rem; }
.contact-intro {
  margin-top: 0.75rem;
  font-size: 1.05rem;
  color: var(--gray-600);
  line-height: 1.7;
}

.contact-points {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-point {
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--gray-100);
}
.contact-point:first-child { border-top: none; padding-top: 0; }
.contact-point h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 0.25rem;
}
.contact-point p {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin: 0;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.form-group:last-child { margin-bottom: 0; }
.form-group--full { grid-column: 1 / -1; }
label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
}
.required-mark { color: var(--red); margin-left: 2px; }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--black);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.07);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }
.form-optional-label {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 400;
}

.form-submit { margin-top: 1.5rem; }
.form-submit .btn--primary { width: 100%; justify-content: center; padding: 0.85rem; font-size: 1rem; }

.form-success {
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
}
.form-success.visible { display: block; }
.form-success__icon {
  width: 48px;
  height: 48px;
  background: #f0faf0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.4rem;
}
.form-success h3 { color: var(--black); margin-bottom: 0.5rem; }
.form-success p { color: var(--gray-600); }

.form-error-msg {
  display: none;
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #b91c1c;
  margin-top: 1rem;
}
.form-error-msg.visible { display: block; }

/* ── Footer ── */
.footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: 3rem;
}
.footer__tagline {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 1rem;
  line-height: 1.55;
}
.footer__col-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 1rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col ul li a {
  font-size: 0.875rem;
  color: var(--gray-400);
  transition: color 0.15s;
}
.footer__col ul li a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid var(--gray-800);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer__legal { font-size: 0.8rem; color: var(--gray-600); }
.footer__legal a { color: var(--gray-600); transition: color 0.15s; }
.footer__legal a:hover { color: var(--gray-400); }

/* ── Mobile nav ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 1.5rem;
  z-index: 99;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.mobile-menu.open { display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-700);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-100);
}
.mobile-menu a:last-child { border-bottom: none; }

/* The CTA is one of those links, so the rule above was overriding the button:
   grey ink instead of white, and `padding: .5rem 0` wiped out the side padding
   so the label sat against the left edge of the red block. The inline
   `text-align:center` on the anchor could not save it either — .btn--primary is
   inline-flex, where the main axis is set by justify-content, not text-align. */
.mobile-menu a.btn--primary {
  color: var(--white);
  font-weight: 700;
  justify-content: center;
  padding: 0.85rem 1.4rem;
  border-bottom: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .outcome-section__inner { grid-template-columns: 1fr; }
  /* Contact: single column, form before supporting points */
  .contact-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "form"
      "points";
    row-gap: 2rem;
  }
  .contact-points { padding-top: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .outcome-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .outcome-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
}

/* ── Utilities ── */
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-8 { margin-bottom: 2rem; }
.text-red { color: var(--red); }
.text-muted { color: var(--gray-500); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}