/*
 * Hub page styles — /en/, /nl/, /fr/ index.
 * Canonical source: NEO-79 ux-spec §2 (content), §3 (visual), §4 (motion), §5 (wireframes).
 * Tokens only — no hard-coded colors outside of computed rgba() shading.
 */

/* ========================================================================
 * BACKGROUND LAYERS — grid overlay + vignette (§3.3)
 * Rendered as fixed-position decoratives behind content.
 * ======================================================================== */
.bg-grid,
.bg-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-grid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M0 0h40v40H0z' fill='none'/><path d='M0 39.5h40M39.5 0v40' stroke='rgba(255,255,255,0.03)' stroke-width='1'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.bg-vignette {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    transparent 30%,
    transparent 70%,
    var(--color-bg) 100%
  );
}

/* ========================================================================
 * CURSOR FOLLOWER (§3.4, §4)
 * Dot + ring, desktop pointer:fine only. Disabled under reduced-motion.
 * Initial transform keeps the elements off-screen until JS boots.
 * ======================================================================== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  will-change: transform, width, height;
}

.cursor-dot {
  z-index: calc(var(--z-cursor) + 1);
  inline-size: 8px;
  block-size: 8px;
  background-color: var(--color-text-muted);
  transition: width var(--motion-fast), height var(--motion-fast),
    background-color var(--motion-fast);
}

.cursor-ring {
  z-index: var(--z-cursor);
  inline-size: 32px;
  block-size: 32px;
  border: 1px solid rgba(161, 161, 170, 0.55);
  transition: width var(--motion-base) var(--ease-out),
    height var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-out);
}

body.is-hovering-interactive .cursor-dot {
  inline-size: 4px;
  block-size: 4px;
  background-color: var(--color-accent);
}

body.is-hovering-interactive .cursor-ring {
  inline-size: 56px;
  block-size: 56px;
  border: 2px solid var(--color-accent);
  background-color: rgba(255, 107, 0, 0.15);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Hide native cursor on desktop when custom cursor is active. */
body.has-custom-cursor {
  cursor: none;
}

body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor select,
body.has-custom-cursor textarea,
body.has-custom-cursor .interactive {
  cursor: none;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: auto;
  }
}

/* ========================================================================
 * REVEAL — utility applied to any element that should fade in on intersection.
 * Stagger modifiers: reveal-delay-1/-2/-3 (100/200/300ms).
 * Under reduced-motion: instantly visible, see base.css media rule.
 * ======================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--motion-xl) var(--ease-reveal),
    transform var(--motion-xl) var(--ease-reveal);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================
 * HUB MAIN — reset page-main padding for full-bleed sections.
 * Header height is added back via section padding-top on the hero.
 * ======================================================================== */
.hub-main {
  padding-block-start: 0;
  position: relative;
  z-index: 1;
}

.section {
  position: relative;
  padding-inline: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-inline: var(--gutter-desktop);
  }
}

.section__inner {
  max-inline-size: var(--container-max);
  margin-inline: auto;
}

.section--bleed {
  padding-inline: 0;
}

.section--elev {
  background-color: var(--color-bg-elev);
}

/* ========================================================================
 * HERO (§5.1, §4)
 * 3-col context + 9-col display. Blinking caret + line-through strike.
 * ======================================================================== */
.hero {
  /* Round 7 (NEO-113 items 1+2): board pixel-measured the headline target at
     200 px from the top of the page on desktop and asked for the dead space
     above .proof to compress further. Mobile keeps a token-derived offset
     so nothing clips on small viewports — the absolute 200 px override is
     applied inside the ≥ 1024 px media query below. */
  padding-block-start: calc(var(--nav-height) + var(--space-5));
  padding-block-end: var(--space-4);
  display: block;
  position: relative;
}

@media (min-width: 1024px) {
  .hero {
    /* Absolute pixel target — board annotated 200 px from page top to the
       headline at 1440×900 (NEO-113 item 1). Site header is position: fixed
       so this padding directly positions the headline against the page top. */
    padding-block-start: 200px;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap-mobile);
  inline-size: 100%;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--grid-gap-desktop);
    row-gap: 0;
    align-items: start;
  }

  /* Round 6: promote .hero__display's children into the outer grid so the
     headline owns row 1 and the sub + context share row 2. Board asked
     STATUS / left-column paragraph to baseline with the sub-paragraph
     instead of sitting flush with the headline top (NEO-112 item 2). */
  .hero__display {
    display: contents;
  }
}

.hero__context {
  border-inline-start: var(--border-hairline);
  padding-inline-start: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  max-inline-size: 44ch;
}

@media (min-width: 1024px) {
  .hero__context {
    grid-column: 1 / span 3;
    grid-row: 2;
    /* Round 7 (NEO-113 item 2): zero the context's contribution to the
       row-2 auto-track size so the right-column rhythm is governed by
       .hero__sub alone. Without this, .hero__context (3 short paragraphs,
       ~138 px outer) inflated row 2 and shoved .hero__scroll-indicator
       30–60 px below .hero__sub at 1024–1440 widths. block-size: 0 +
       overflow: visible lets the paragraphs render normally below the
       collapsed box, so the visual layout is unchanged. */
    block-size: 0;
    overflow: visible;
    align-self: start;
    /* Matches .hero__sub margin-block-start so both items share a top
       edge (NEO-113 item 3 acceptance: ±4 px). */
    margin-block-start: var(--space-7);
  }
}

.hero__status {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono-wide);
  color: var(--color-accent);
  text-transform: uppercase;
}

.hero__display {
  padding-block-start: var(--space-6);
}

@media (min-width: 1024px) {
  /* On desktop .hero__display is display: contents (see .hero__grid rule).
     The headline + sub participate in the outer grid directly and stack
     via row 1 / row 2. */
  .hero__display {
    padding-block-start: 0;
  }

  .hero__headline {
    grid-column: 4 / -1;
    grid-row: 1;
  }

  .hero__sub {
    grid-column: 4 / -1;
    grid-row: 2;
  }
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display-tight);
  color: var(--color-text);
  max-inline-size: none;
}

.hero__sub {
  margin-block-start: var(--space-7);
  max-inline-size: 60ch;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: var(--leading-normal);
}

@media (min-width: 768px) {
  .hero__sub {
    font-size: 22px;
  }
}

.hero__strike {
  /* Round 5: ~40% brighter than --color-text-muted (#a1a1aa) toward
     --color-text (#f4f4f5) so the struck word reads clearly. The
     red strikethrough line itself stays var(--color-accent). */
  color: #c2c2c8;
  text-decoration-line: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 4px;
  text-underline-offset: 0.1em;
}

.hero__caret {
  position: relative;
  color: var(--color-text);
  padding-inline-end: 0.15em;
}

.hero__caret::after {
  content: "_";
  color: var(--color-accent);
  animation: hero-caret-blink 1s step-start infinite;
  margin-inline-start: 0.05em;
}

@keyframes hero-caret-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__caret::after {
    animation: none;
    opacity: 1;
  }
}

.hero__scroll-indicator {
  /* Round 7 (NEO-113 item 2): tightened margin from space-5 → space-4 so the
     gap from .hero__sub bottom to the indicator is the controlled 16 px the
     board asked for. Desktop override below stays at space-4 (unchanged). */
  margin-block-start: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .hero__scroll-indicator {
    grid-column: 4 / -1;
    grid-row: 3;
    margin-block-start: var(--space-4);
  }
}

.hero__scroll-indicator::before {
  content: "";
  inline-size: 48px;
  block-size: 1px;
  background-color: var(--color-text-muted);
}

/* ========================================================================
 * PROOF STRIP (§5.3, §4)
 * 4 tiles, counters, 4th tile orange wash.
 * ======================================================================== */
.proof {
  border-block: var(--border-hairline);
  /* Round 8 (NEO-115 item 4): the metrics banner read too tight against the
     hero context row that NEO-113 compressed; the board asked for +120px of
     breathing room on desktop. Mobile and tablet keep the tighter rhythm so
     proportions don't blow out on narrow viewports. `--hero-proof-gap` is
     declared in tokens.css so the value is named and discoverable. */
  margin-block-start: 48px;
}

@media (min-width: 768px) {
  .proof {
    margin-block-start: 64px;
  }
}

@media (min-width: 1024px) {
  .proof {
    margin-block-start: var(--hero-proof-gap);
  }
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .proof__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.proof__tile {
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
  min-block-size: 220px;
  border-block-end: var(--border-hairline);
  border-inline-end: var(--border-hairline);
}

@media (min-width: 768px) {
  .proof__tile {
    padding: var(--space-7) var(--space-7);
    min-block-size: 280px;
    border-block-end: 0;
  }
  .proof__tile:last-child { border-inline-end: 0; }
}

@media (min-width: 1024px) {
  .proof__tile {
    padding: var(--space-8) var(--space-8);
  }
}

/* Remove stray trailing borders in 2-col mobile layout. */
.proof__tile:nth-child(2n) { border-inline-end: 0; }
.proof__tile:nth-last-child(-n + 2) { border-block-end: 0; }

@media (min-width: 768px) {
  .proof__tile:nth-child(2n) { border-inline-end: var(--border-hairline); }
  .proof__tile:nth-last-child(-n + 2) { border-block-end: 0; }
  .proof__tile:last-child { border-inline-end: 0; }
}

.proof__tile--accent {
  background-color: rgba(255, 107, 0, 0.05);
}

.proof__caption {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.proof__tile--accent .proof__caption {
  color: var(--color-accent);
}

.proof__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.9;
  color: var(--color-text);
  letter-spacing: var(--tracking-display-tight);
  display: block;
  margin-block-end: var(--space-3);
}

.proof__value--text {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 0.95;
}

.proof__label {
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ========================================================================
 * SECTION HEADER — eyebrow + title + lead copy (reused across sections).
 * ======================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--space-8);
}

@media (min-width: 768px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-7);
  }
}

.section-head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-block-end: var(--space-3);
}

.section-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-l);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text);
}

.section-head__lead {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  max-inline-size: 44ch;
}

/* ========================================================================
 * WHAT I DO — service cards (§5.4, §4)
 * ======================================================================== */
.verticals {
  padding-block: var(--space-10) var(--space-10);
}

.verticals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .verticals__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border: var(--border-hairline);
  background-color: var(--surface-card);
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--motion-slow) var(--ease-out),
    border-color var(--motion-slow) var(--ease-out);
  min-block-size: 480px;
}

@media (min-width: 768px) {
  .service-card {
    padding: var(--space-7);
  }
}

.service-card__corner {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 128px;
  block-size: 128px;
  background-color: rgba(244, 244, 245, 0.04);
  border-end-start-radius: 100px;
  z-index: -1;
  transition: background-color var(--motion-slow) var(--ease-out);
}

.service-card__icon {
  inline-size: 40px;
  block-size: 40px;
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
  transition: color var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
}

.service-card__vertical {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
  transition: color var(--motion-base) var(--ease-out);
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 3.2vw, 2.375rem);
  line-height: 1.1;
  color: var(--color-text);
  margin-block-end: var(--space-4);
}

.service-card__desc {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-block-end: var(--space-7);
}

.service-card__list {
  margin-block-start: auto;
  border-block-start: var(--border-hairline-soft);
  padding-block-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--color-text);
  line-height: 1.4;
}

.service-card__check {
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  margin-block-start: 2px;
}

.service-card__cta {
  margin-block-start: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.service-card__cta-arrow {
  transition: transform var(--motion-fast) var(--ease-out);
}

.service-card:hover {
  border-color: var(--color-accent);
  background: linear-gradient(
    180deg,
    rgba(23, 23, 26, 1) 0%,
    rgba(20, 20, 22, 1) 100%
  );
}

.service-card:hover .service-card__corner {
  background-color: rgba(255, 107, 0, 0.1);
}

.service-card:hover .service-card__icon {
  color: var(--color-accent);
  transform: scale(1.1);
}

.service-card:hover .service-card__vertical {
  color: var(--color-accent);
}

.service-card:hover .service-card__cta-arrow {
  transform: translateX(4px);
}

/* ========================================================================
 * HOW I INTERVENE (§5.5)
 * Timeline with 3 numbered steps; step-3 is the emphasis.
 * ======================================================================== */
.intervene {
  padding-block: var(--space-10);
  border-block: var(--border-hairline);
}

.intervene__head {
  margin-block-end: var(--space-8);
}

.intervene__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
}

.intervene__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.intervene__spine {
  display: none;
}

@media (min-width: 1024px) {
  .intervene__spine {
    display: block;
    position: absolute;
    inset-inline-start: 28px;
    inset-block-start: 16px;
    inset-block-end: 16px;
    inline-size: 1px;
    background-color: var(--color-border);
  }
}

.intervene__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

@media (min-width: 1024px) {
  .intervene__step {
    flex-direction: row;
    gap: var(--space-6);
  }
}

.intervene__badge-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .intervene__badge-wrap {
    inline-size: 56px;
    justify-content: center;
  }
}

.intervene__badge {
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-accent);
  position: relative;
  z-index: 1;
}

.intervene__step--emphasis .intervene__badge {
  border-color: var(--color-accent);
  background-color: var(--color-accent-soft);
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.2);
}

.intervene__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  flex: 1;
  padding: var(--space-6);
  border: var(--border-hairline);
  background-color: rgba(23, 23, 26, 0.3);
}

@media (min-width: 768px) {
  .intervene__body {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

.intervene__step--emphasis .intervene__body {
  border-color: rgba(255, 107, 0, 0.3);
}

.intervene__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.intervene__summary {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
}

.intervene__bullets {
  border-inline-start: var(--border-hairline-soft);
  padding-inline-start: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  line-height: var(--leading-normal);
}

.intervene__step--emphasis .intervene__bullets {
  border-inline-start-color: var(--color-accent-line);
  color: var(--color-text);
}

/* ========================================================================
 * ENGAGEMENT PROFILE + CLIENT MARQUEE (§5.6, §4)
 * ======================================================================== */
.engagement {
  padding-block: var(--space-9);
  overflow: hidden;
}

.engagement__head {
  text-align: center;
  max-inline-size: 52rem;
  margin-inline: auto;
  margin-block-end: var(--space-8);
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.engagement__head .section-head__eyebrow {
  margin-block-end: 0;
}

.engagement__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-l);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-muted);
}

.engagement__lead {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  max-inline-size: 44rem;
  margin-inline: auto;
}

.marquee {
  position: relative;
  inline-size: 100%;
  padding-block: var(--space-5);
  border-block: var(--border-hairline);
  background-color: var(--color-bg-elev);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 96px;
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, var(--color-bg-elev), transparent);
}

.marquee::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, var(--color-bg-elev), transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-8);
  align-items: center;
  padding-inline: var(--space-6);
  animation: marquee-scroll var(--motion-marquee) linear infinite;
  /* NEO-102 item 12 — board flagged 5 brands rendering as gray shapes.
     The per-logo brightness-invert filter below handles mono rendering;
     we no longer double-mask the track with grayscale + low opacity. */
  opacity: 0.92;
  transition: opacity var(--motion-slow) var(--ease-out),
    filter var(--motion-slow) var(--ease-out);
  inline-size: max-content;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
  opacity: 1;
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none !important;
    opacity: 1;
    filter: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    inline-size: 100%;
  }
}

.client-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  block-size: 48px;
  inline-size: 160px;
  color: var(--color-text);
}

.client-cell__logo {
  display: block;
  max-block-size: 40px;
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  /* NEO-116: restore solid-white mono rendering on the dark marquee band.
     Board rejected the round-6/round-7 grayscale pass (muted mid-grey,
     per-logo contrast drift). brightness(0) invert(1) flattens every
     source SVG to #fff on the dark surface. */
  filter: brightness(0) invert(1);
  transition: filter var(--motion-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .client-cell {
    inline-size: auto;
    padding-inline: var(--space-3);
  }
}

/* ========================================================================
 * WHAT I DON'T DO (§5.7)
 * 4 items, 2-col grid desktop, display type + orange em-dash.
 * ======================================================================== */
.dontdo {
  padding-block: var(--space-10);
}

.dontdo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  border-block-start: var(--border-hairline);
  padding-block-start: var(--space-8);
}

@media (min-width: 1024px) {
  .dontdo__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-9);
  }
}

.dontdo__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dontdo__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  color: var(--color-text);
}

.dontdo__dash {
  color: var(--color-accent);
  margin-inline-end: var(--space-3);
}

.dontdo__body {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  max-inline-size: 44ch;
  line-height: var(--leading-normal);
}

/* ========================================================================
 * CLOSING CTA BAND → /contact
 * ======================================================================== */
.closing-cta {
  padding-block: var(--space-10) var(--space-9);
  border-block-start: var(--border-hairline);
  background-color: var(--color-bg);
  position: relative;
}

.closing-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 1024px) {
  .closing-cta__inner {
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-9);
  }
}

.closing-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-block-end: var(--space-4);
}

.closing-cta__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-l);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display-tight);
  color: var(--color-text);
  margin-block-end: var(--space-5);
}

.closing-cta__body {
  color: var(--color-text-muted);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  max-inline-size: 56ch;
}

.closing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-7);
}

.closing-cta__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--color-accent-line);
}

.closing-cta__meta strong {
  color: var(--color-text);
  font-weight: 500;
}

/* NEO-102 item 13 — LinkedIn card on the hub CTA band.
   Upgraded from a mono micro-label ("LinkedIn: /in/keyser-soze") to a
   proper contact card: icon + full URL, clickable, accent border. */
.closing-cta__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  background-color: rgba(23, 23, 26, 0.45);
  text-transform: none;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  letter-spacing: 0;
  color: var(--color-text);
  transition:
    border-color var(--motion-base) var(--ease-out),
    background-color var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out);
  inline-size: fit-content;
  max-inline-size: 100%;
}

.closing-cta__linkedin:hover,
.closing-cta__linkedin:focus-visible {
  border-color: var(--color-accent);
  background-color: rgba(255, 107, 0, 0.05);
  transform: translateY(-2px);
}

.closing-cta__linkedin-icon {
  inline-size: 28px;
  block-size: 28px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.closing-cta__linkedin-label {
  font-weight: 500;
  word-break: break-word;
}

/* ========================================================================
 * NAV — hide on scroll-down (progressive enhancement, JS adds data-hidden).
 * The transform is already defined in components.css (data-hidden="true").
 * ======================================================================== */