/*
Theme Name: TruNova
Theme URI: https://trunova.ai
Author: TruNova Consulting
Description: The custom TruNova WordPress theme.
Version: 0.18.9
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: trunova
*/

.trunova-ci-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   1. Webfonts
   The website spec's typography direction: Instrument Serif for display only,
   Space Grotesk for everything read or interacted with, JetBrains Mono for small
   labels. Instrument Serif has a single weight and no italic, so it must never be
   asked for bold -- see assets/fonts/README.md.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-var-latin.woff2') format('woff2-variations'),
       url('assets/fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-var-latin.woff2') format('woff2-variations'),
       url('assets/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

:root {
  /* Brand core */
  --tn-sky: #27a9e1;
  --tn-lime: #8dc63f;
  /*
   * Lime is an accent for dark surfaces and for fills: #8dc63f is 8.26:1 on ink
   * but only 1.96:1 on paper, so as text on a light background it fails badly.
   * This is the darkest lime that still reads as the brand accent while clearing
   * 4.5:1 on paper (4.64:1). Use it whenever lime is *text* on a light surface.
   */
  --tn-lime-deep: #547d1f;
  --tn-deep: #0e4f6e;
  --tn-ink: #0a1f2c;
  --tn-sky-deep: #155f80;

  /* Layered dark surfaces */
  --tn-ink-raised: #102f42;
  --tn-ink-line: rgba(148, 189, 209, .22);

  /* Light grounds, each is visibly distinct from the others */
  --tn-white: #ffffff;
  --tn-paper: #fbfaf6;
  --tn-bone: #f2eee2;
  --tn-steel: #e6edf1;
  --tn-sky-wash: #e9f5fb;
  --tn-sky-wash-deep: #d3e9f4;
  --tn-lime-wash: #f0f7e1;

  /* Text and rules */
  --tn-line: #e3ddcf;
  --tn-line-cool: #d3dee4;
  --tn-mute: #5c6670;
  --tn-mute-dark: #b7c6ce;

  /* Type */
  /* Display is a single-weight serif: never set it bold, never set a width. */
  --tn-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --tn-font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tn-font-mono: 'JetBrains Mono', Consolas, ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-display: clamp(3rem, 5.6vw, 5rem);
  --fs-h1: clamp(2.5rem, 4.3vw, 3.8rem);
  --fs-h2: clamp(1.95rem, 3.1vw, 2.9rem);
  --fs-h3: clamp(1.3rem, 1.8vw, 1.6rem);
  --fs-h4: 1.1rem;
  --fs-body: 1.0625rem;
  --fs-small: .94rem;
  --fs-label: .7rem;

  /* Geometry */
  --tn-radius: .85rem;
  --tn-radius-lg: 1.4rem;
  --tn-content-width: 76rem;
  --tn-narrow-width: 46rem;
  --tn-header-height: 7rem;
  --tn-shadow: 0 1rem 2.5rem rgba(10, 31, 44, .08);
  --tn-shadow-lift: 0 1.4rem 3rem rgba(10, 31, 44, .13);
}

/* ==========================================================================
   3. Base
   ========================================================================== */

* { box-sizing: border-box; }
/* An author display rule beats the [hidden] user-agent style, and several card
   components set display: flex. Without this, hiding a card does nothing. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* Ink page ground: the header floats over a dark hero, and the footer is dark, so
   any overscroll or sub-pixel gap reads as ink rather than a flash of paper. */
html { background-color: var(--tn-ink); }

/* Lenis smooth scroll (enhance.js). These only take effect once Lenis adds its
   classes; without JS or under reduced motion the page scrolls natively. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* GSAP hero entrance: armed before paint by gsap-bootstrap.js so the copy never
   flashes in, then lifted by enhance.js (or by the bootstrap failsafe / reduced
   motion). The headline itself is revealed by SplitText's line masks. */
.tn-hero-armed .hero--constellation .hero__copy > *,
.tn-hero-armed .hero--constellation .hero__aside { opacity: 0; }
.hero__copy h1 .tn-line { will-change: transform; }

body {
  margin: 0;
  color: var(--tn-ink);
  background: var(--tn-paper);
  font-family: var(--tn-font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--tn-deep); }
a:hover, a:focus-visible { color: var(--tn-ink); }
:focus-visible { outline: .18rem solid var(--tn-sky); outline-offset: .2rem; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  z-index: 100000; top: 1rem; left: 1rem; width: auto; height: auto; padding: .7rem 1rem; margin: 0;
  overflow: visible; clip: auto; color: var(--tn-ink); background: var(--tn-lime); white-space: normal;
}

.site-header, .site-footer, .site-main > * { padding-right: 1.5rem; padding-left: 1.5rem; }
.site-header__inner, .site-footer__inner, .site-main > * > .section__inner, .site-main > .content-width {
  width: min(100%, var(--tn-content-width)); margin-right: auto; margin-left: auto;
}

/* ==========================================================================
   4. Typography
   ========================================================================== */

/* Display serif for the big statements, sans for anything at UI scale. The spec
   is explicit: Instrument Serif for headlines only, never body text or forms. */
h1, h2, h3, h4 {
  margin: 0 0 1.1rem;
  color: inherit;
  text-wrap: pretty;
}

h1, h2, .display {
  font-family: var(--tn-font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.012em;
}

h3, h4 {
  font-family: var(--tn-font-body);
  font-weight: 600;
  letter-spacing: -.015em;
}

h1 { max-width: none; font-size: var(--fs-h1); }
h2 { max-width: none; font-size: var(--fs-h2); }
h3 { max-width: none; font-size: var(--fs-h3); line-height: 1.18; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

.display {
  max-width: none;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -.016em;
}

/* Card titles are h2 semantically but sit around 1.4rem, which is below the
   display serif's readable floor. They take the body face, matching the spec's
   rule that the serif is for headlines and big statements only. */
.card h2, .link-card h2, .industry-card h2, .archive-card h2, .team-card h3 {
  font-family: var(--tn-font-body);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.2;
}

p { margin-top: 0; }

.lede {
  max-width: 40rem;
  color: var(--tn-mute);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
}
/*
 * Lede colour follows the background, not the template. .page-hero--image was
 * missing here, so every interior page with a dark image hero rendered its lede
 * in --tn-mute (#5c6670, the colour for light backgrounds) over a dark scrim:
 * about 3.2:1, below the 4.5:1 that body text needs. Light page heroes keep the
 * dark ink mute, hence the override on the next line.
 */
.hero--dark .lede, .section--dark .lede, .section--ink .lede, .page-hero--image .lede { color: var(--tn-mute-dark); }
.page-hero--light.page-hero--image .lede { color: var(--tn-mute); }

.eyebrow, .section-label, .card__meta, .proof-card__tag, .choice-card__number {
  margin: 0 0 1rem;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}
/*
 * Same omission as the lede above: .page-hero--image was missing, so the
 * eyebrow on interior dark heroes rendered in --tn-deep (#0e4f6e) at 2.09:1
 * against the hero ink -- and at 11px bold, which needs 4.5:1. Sky is 6.95:1.
 */
.hero--dark .eyebrow, .section--dark .section-label, .section--ink .section-label,
.page-hero--image .section-label, .page-hero--image .eyebrow { color: var(--tn-sky); }
.page-hero--light.page-hero--image .section-label, .page-hero--light.page-hero--image .eyebrow { color: var(--tn-deep); }

/* Small labels never sit on Lime or Sky over a light ground, both fail AA. */
.choice-card__number, .industry-card__number, .archive-card__index,
.archive-card__type, .visual-doorway-card__number { color: var(--tn-deep); }

/*
 * Wayfinding breadcrumb. Same font, size and tracking as the .section-label
 * eyebrow above, so swapping a fake breadcrumb for a real one is a near-zero
 * visual change. Colour comes from the surrounding hero (the light default
 * here, with dark-ground overrides next to each hero's .section-label rule)
 * rather than a value hardcoded on this class, so it reads on both grounds.
 */
.tn-breadcrumb {
  display: block;
  margin: 0 0 1rem;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}
.tn-breadcrumb a { color: inherit; text-decoration: none; }
.tn-breadcrumb a:hover, .tn-breadcrumb a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.tn-breadcrumb span[aria-hidden] { margin: 0 .4em; opacity: .55; }

/* ==========================================================================
   5. Buttons and links
   ========================================================================== */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .72rem 1.3rem;
  border: 1px solid transparent; border-radius: .5rem;
  font-family: var(--tn-font-body); font-size: var(--fs-small); font-weight: 700;
  line-height: 1.2; text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.button:hover, .button:focus-visible { color: var(--tn-ink); box-shadow: 0 .5rem 1rem rgba(10, 31, 44, .16); }
.button--lime { color: var(--tn-ink); background: var(--tn-lime); }
.button--lime:hover, .button--lime:focus-visible { color: var(--tn-ink); box-shadow: 0 .55rem 1.4rem rgba(141, 198, 63, .34); }
.button--ink { color: var(--tn-paper); background: var(--tn-ink); }
.button--ink:hover, .button--ink:focus-visible { color: var(--tn-paper); background: var(--tn-deep); }
.button--outline { color: var(--tn-ink); border-color: var(--tn-ink); background: transparent; }
.button--on-dark { color: var(--tn-paper); border-color: rgba(251, 250, 246, .55); background: transparent; }
.button--on-dark:hover, .button--on-dark:focus-visible { color: var(--tn-ink); border-color: var(--tn-lime); background: var(--tn-lime); }

.text-link {
  display: inline-flex; gap: .4rem; align-items: center; margin-top: auto;
  color: var(--tn-deep); font-weight: 700; text-decoration: none;
}
.text-link:hover, .text-link:focus-visible { color: var(--tn-ink); text-decoration: underline; text-underline-offset: .2em; }
.text-link .arrow { transition: transform 180ms ease; }
.text-link:hover .arrow, a:hover .text-link .arrow { transform: translate(.18rem, -.18rem); }
.arrow { display: inline-block; width: .72em; height: .72em; flex: 0 0 auto; }

/* ==========================================================================
   6. Header and navigation
   ========================================================================== */

/* The header sticks and the hero runs underneath it. The negative margin removes
   the header from flow so a dark hero can start at the very top of the viewport;
   every hero adds the header height back as padding. The header height never
   changes on scroll, so nothing below it shifts when it solidifies. */
.site-header {
  position: sticky; z-index: 40; top: 0;
  margin-bottom: calc(var(--tn-header-height) * -1);
  background: transparent;
  transition: background-color 220ms ease, box-shadow 220ms ease;
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--tn-header-height);
  transition: min-height 300ms cubic-bezier(.4, 0, .2, 1);
}
/* Compact once the header sticks, so the logo is large and legible at the top of
   the page and slides into a tidy bar on scroll. */
.site-header.is-stuck .site-header__inner { min-height: 4.25rem; }

/*
 * Solid state: pinned pages and any scrolled page. The hairline is a box-shadow,
 * not a border, so it adds no layout height -- a 1px border here left a sliver of
 * the light page background showing above the dark hero at the top of the page.
 */
.site-header--solid,
.site-header.is-stuck {
  box-shadow: 0 1px 0 var(--tn-line);
  background: rgba(251, 250, 246, .93);
  backdrop-filter: blur(.9rem);
}

/* Over a dark hero the header floats with light text until it sticks. */
.site-header--over-dark:not(.is-stuck) .site-navigation__link,
.site-header--over-dark:not(.is-stuck) .site-navigation__toggle { color: var(--tn-paper); }
.site-header--over-dark:not(.is-stuck) .site-navigation__link:hover { color: var(--tn-lime); }

.site-brand { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--tn-ink); text-decoration: none; }
.site-brand__logo { width: clamp(13rem, 20vw, 22rem); height: auto; transition: width 300ms cubic-bezier(.4, 0, .2, 1), opacity 320ms ease; }
/* Shrinks in step with the header bar on scroll. */
.site-header.is-stuck .site-brand__logo { width: clamp(9rem, 11vw, 10rem); }
/* The two logos crossfade rather than hard-swap: the colour mark sits in flow
   and the white mark overlays it, so the dark<->light change on scroll is a
   smooth fade instead of an abrupt switch. */
.site-brand__logo--light { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header--over-dark:not(.is-stuck) .site-brand__logo--dark { opacity: 0; }
.site-header--over-dark:not(.is-stuck) .site-brand__logo--light { opacity: 1; }
.site-brand__logo--footer { width: min(100%, 13.5rem); }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo-link img { width: min(100%, 12rem); height: auto; }

.site-navigation { position: relative; display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: .35rem; }
.site-navigation__menu { display: flex; align-items: center; gap: .1rem; padding: 0; margin: 0; list-style: none; }
/* Panels are anchored to the navigation, not to each item, so a wide panel under
   the last item can never push past the right edge of the viewport. */
.site-navigation__item { position: static; }

.site-navigation__link {
  /* Positioned so the current-section underline anchors to the link, not to the
     navigation container that the mega panels are positioned against. */
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .7rem;
  border-radius: .4rem;
  color: var(--tn-ink);
  font-size: .95rem; font-weight: 600;
  text-decoration: none;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  transition: color 150ms ease, background-color 150ms ease;
}
.site-navigation__link:hover, .site-navigation__link:focus-visible { color: var(--tn-deep); }

/* Current-section indicator. */
.site-navigation__item--current > .site-navigation__link::after {
  position: absolute; right: .6rem; bottom: .22rem; left: .6rem;
  height: 2px; border-radius: 2px; background: var(--tn-lime); content: '';
}

.site-navigation__caret { width: .55rem; height: .55rem; transition: transform 180ms ease; opacity: .6; }
.site-navigation__item[data-open="true"] .site-navigation__caret { transform: rotate(180deg); }

/* Mega panels */
.mega {
  position: absolute; z-index: 50; top: 100%; right: 0; margin-top: .95rem;
  width: max-content; max-width: min(58rem, calc(100vw - 3rem));
  padding: 1.6rem;
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-white);
  box-shadow: var(--tn-shadow-lift);
  transform: translateY(-.4rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.site-navigation__item[data-open="true"] .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega--wide { max-width: min(66rem, calc(100vw - 3rem)); }

.mega__grid { display: grid; grid-template-columns: repeat(var(--mega-cols, 3), minmax(11rem, 1fr)); gap: 1.4rem 2rem; }
.mega__group { display: grid; align-content: start; gap: .3rem; }
.mega__group-label {
  margin: 0 0 .45rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--tn-line);
  color: var(--tn-deep);
  font-family: var(--tn-font-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
}
.mega__link {
  display: block; padding: .34rem .5rem; margin-left: -.5rem;
  border-radius: .35rem;
  color: var(--tn-ink); font-size: .93rem; text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.mega__link:hover, .mega__link:focus-visible { color: var(--tn-deep); background: var(--tn-sky-wash); }
.mega__link span { display: block; color: var(--tn-mute); font-size: .8rem; line-height: 1.35; }

.mega__feature {
  display: grid; align-content: start; gap: .6rem;
  padding: 1.15rem; border-radius: var(--tn-radius);
  color: var(--tn-paper); background: var(--tn-ink);
}
.mega__feature .mega__group-label { border-bottom-color: var(--tn-ink-line); color: var(--tn-sky); }
.mega__feature p { margin: 0; color: var(--tn-mute-dark); font-size: .88rem; line-height: 1.45; }
.mega__feature .text-link { color: var(--tn-lime); }
.mega__feature .text-link:hover { color: var(--tn-lime); }

.site-header__cta { flex: 0 0 auto; }
/* The drawer carries its own copy of the CTA; hide it while the desktop bar is shown. */
.site-navigation__panel > .site-header__cta { display: none; }

/* Drawer toggle */
.site-navigation__toggle {
  display: none; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--tn-line); border-radius: .45rem;
  color: var(--tn-ink); background: transparent;
  font-family: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.site-navigation__toggle-bars { display: grid; gap: .22rem; width: 1rem; }
.site-navigation__toggle-bars span { height: 2px; border-radius: 2px; background: currentColor; }

/* ==========================================================================
   7. Sections and grounds
   ========================================================================== */

.section { padding-top: clamp(3.6rem, 6vw, 6rem); padding-bottom: clamp(3.6rem, 6vw, 6rem); }
.section--paper { background: var(--tn-paper); }
.section--light { background: var(--tn-steel); }
.section--bone { background: var(--tn-bone); }
.section--sky { background: var(--tn-sky-wash); }
.section--dark, .section--ink { color: var(--tn-paper); background: var(--tn-ink); }
.narrow-section { max-width: var(--tn-narrow-width) !important; }

/* A hairline wave marks a change of subject without another full colour band. */
.wave-rule { display: block; width: 100%; height: clamp(2.5rem, 5vw, 4.5rem); opacity: .85; }
.wave-rule--flip { transform: scaleY(-1); }

/* ==========================================================================
   8. Hero
   ========================================================================== */

.hero { position: relative; overflow: hidden; }
.hero--dark { color: var(--tn-paper); }
.hero--light { color: var(--tn-ink); }
.hero > .section__inner { position: relative; z-index: 1; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(12rem, .5fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  min-height: inherit;
  padding-top: calc(var(--tn-header-height) + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__copy { max-width: 46rem; }
.hero__copy h1, .hero__copy .display { max-width: none; }
.hero__aside {
  align-self: end; max-width: 15rem; padding: 1.15rem 0 0 1.4rem;
  border-left: 2px solid var(--tn-lime);
  font-size: 1.05rem; line-height: 1.25;
}
.hero--light .hero__aside { border-color: var(--tn-deep); }
.hero__aside p { margin: 0; }
.hero__aside strong { color: var(--tn-lime); }
.hero--light .hero__aside strong { color: var(--tn-deep); }
.hero__aside-mark { display: block; margin-bottom: .9rem; color: var(--tn-lime); font-size: 1.7rem; line-height: 1; }
.hero--light .hero__aside-mark { color: var(--tn-deep); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
/* One line of reassurance under the hero buttons: the barrier to a conversation
   is the worry about what it costs and how hard the pitch will be. */
.hero__reassure {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--tn-mute-dark);
  font-size: .9rem; line-height: 1.5;
}
.hero--light .hero__reassure { color: var(--tn-mute); }

/* --------------------------------------------------------- constellation hero */
/* A CSS nebula gradient behind a live star-net <canvas> (constellation.js). The
   gradient is the standalone fallback whenever the canvas does not run. */
.hero--constellation {
  min-height: clamp(34rem, 52vw, 46rem);
  background-color: var(--tn-ink);
  background-image: radial-gradient(130% 100% at 84% 32%, #10456a 0%, #0b2c3f 34%, var(--tn-ink) 66%);
  background-size: cover; background-position: center;
}
.hero__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
/* The same field, run faint and sparse behind a mid-page dark band: a texture,
   not a feature. The band itself supplies position: relative and stacks its
   .section__inner above the canvas (see 16b below). */
.hero__field--ambient { opacity: .85; }
/* Scrim sits above the field; copy sits above the scrim, so legibility never
   depends on the canvas. */
.hero--constellation.hero--dark::before {
  position: absolute; inset: 0; z-index: 1; content: ''; pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 20, 29, .92) 0%, rgba(6, 20, 29, .82) 34%, rgba(6, 20, 29, .4) 60%, rgba(6, 20, 29, 0) 88%);
}
.hero--constellation > .section__inner { position: relative; z-index: 2; }

/* "Who this is for" -- the 5-second recognition line under the headline. */
.hero__who { max-width: 44ch; margin: 1.25rem 0 0; color: var(--tn-paper); font-size: 1.08rem; font-weight: 500; line-height: 1.4; }
.hero__who b { color: var(--tn-lime); font-weight: 700; }

/* Credibility strip: proof at the fold instead of on screen eight. */
.hero__cred {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: 1.9rem 0 0; padding-top: 1.35rem;
  border-top: 1px solid var(--tn-ink-line);
  padding-left: 0; list-style: none;
  font-family: var(--tn-font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tn-mute-dark);
}
.hero__cred li { display: inline-flex; align-items: baseline; gap: .35rem; }
.hero__cred b { color: var(--tn-paper); font-weight: 700; letter-spacing: 0; }

@media (max-width: 900px) {
  /* Vertical scrim so full-width copy stays legible over the field, matching the
     image-hero treatment. */
  .hero--constellation.hero--dark::before,
  .page-hero--constellation.page-hero--dark::before {
    background: linear-gradient(180deg, rgba(6, 20, 29, .95) 0%, rgba(6, 20, 29, .9) 55%, rgba(6, 20, 29, .74) 100%);
  }
  .page-hero--constellation.page-hero--light::before {
    background: linear-gradient(180deg, rgba(242, 238, 226, .95) 0%, rgba(242, 238, 226, .9) 55%, rgba(242, 238, 226, .74) 100%);
  }
}

/* Interior constellation hero: the dark page-hero variant. Same field + gradient
   + scrim as the homepage, shorter, and with no background image. */
.page-hero--constellation {
  color: var(--tn-paper);
  background-color: var(--tn-ink);
  background-image: radial-gradient(125% 140% at 80% 24%, #1a5f88 0%, #103a52 42%, var(--tn-ink) 80%);
  background-size: cover; background-position: center;
}
/* Dark-hero text treatment (the image hero gets this via .page-hero--image). */
.page-hero--constellation .lede { color: var(--tn-mute-dark); }
.page-hero--constellation .section-label, .page-hero--constellation .eyebrow { color: var(--tn-sky); }
.page-hero--constellation.page-hero--dark::before {
  position: absolute; inset: 0; z-index: 1; content: ''; pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 20, 29, .9) 0%, rgba(6, 20, 29, .78) 36%, rgba(6, 20, 29, .42) 62%, rgba(6, 20, 29, 0) 90%);
}

/*
 * Light constellation hero: same live field (constellation.js reads
 * [data-field="light"] and draws deep brand marks instead of bright ones), a
 * light nebula ground, and a bone scrim so the copy sits on paper rather than
 * ink. The compound selector is needed to outrank the dark rules above, which
 * otherwise apply to every .page-hero--constellation regardless of tone.
 */
.page-hero--constellation.page-hero--light {
  color: var(--tn-ink);
  background-color: var(--tn-bone);
  background-image: radial-gradient(125% 140% at 80% 24%, var(--tn-sky-wash-deep) 0%, var(--tn-sky-wash) 42%, var(--tn-bone) 80%);
  background-size: cover; background-position: center;
}
.page-hero--constellation.page-hero--light .lede { color: var(--tn-mute); }
.page-hero--constellation.page-hero--light .section-label,
.page-hero--constellation.page-hero--light .eyebrow { color: var(--tn-deep); }
.page-hero--constellation.page-hero--light::before {
  position: absolute; inset: 0; z-index: 1; content: ''; pointer-events: none;
  background: linear-gradient(100deg, rgba(242, 238, 226, .92) 0%, rgba(242, 238, 226, .8) 36%, rgba(242, 238, 226, .4) 62%, rgba(242, 238, 226, 0) 90%);
}

/* Paired actions where one leads and the other is the alternative route. */
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* The external mark sits a little high next to cap height. */
.arrow--external { margin-top: -.15em; opacity: .75; }


/* Interior hero: short, with room for eyebrow, title and lede. */
.page-hero { position: relative; overflow: hidden; }
.page-hero--image {
  color: var(--tn-paper);
  background-color: var(--tn-ink);
  background-image: var(--tn-hero-image);
  background-size: cover;
  background-position: center;
}
.page-hero--light { color: var(--tn-ink); background-color: var(--tn-bone); }

/*
 * Narrow viewports get the 2048px artwork. The fallback inside var() is
 * deliberate: if a template sets only --tn-hero-image, the hero still paints
 * the full file rather than nothing. Keep this breakpoint in sync with
 * TRUNOVA_HERO_BREAKPOINT in functions.php.
 */
@media (max-width: 900px) {
  .page-hero--image {
    background-image: var(--tn-hero-image-sm, var(--tn-hero-image));
  }
}
.page-hero--image::before {
  position: absolute; inset: 0; content: ''; pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 20, 29, .95) 0%, rgba(6, 20, 29, .88) 34%, rgba(6, 20, 29, .5) 58%, rgba(6, 20, 29, 0) 88%);
}
.page-hero--light.page-hero--image::before {
  background: linear-gradient(100deg, rgba(251, 250, 246, .95) 0%, rgba(251, 250, 246, .78) 42%, rgba(251, 250, 246, .08) 78%, rgba(251, 250, 246, 0) 100%);
}

/*
 * Narrow-viewport scrim. The desktop gradient runs at 100deg and has faded to
 * fully transparent by 88% of the width, which is correct when hero copy is
 * confined to the left 45rem. At narrow widths the copy spans the viewport, so
 * the right-hand end of every line landed on bare artwork and dropped below a
 * readable contrast ratio -- visible on /industries/ where the lede crosses the
 * bright part of the wave. Going vertical keeps the scrim uniform across the
 * line whatever the artwork does underneath.
 */
@media (max-width: 900px) {
  .page-hero--image::before {
    background: linear-gradient(180deg, rgba(6, 20, 29, .95) 0%, rgba(6, 20, 29, .9) 55%, rgba(6, 20, 29, .74) 100%);
  }
  .page-hero--light.page-hero--image::before {
    background: linear-gradient(180deg, rgba(251, 250, 246, .95) 0%, rgba(251, 250, 246, .9) 55%, rgba(251, 250, 246, .74) 100%);
  }
}

.page-hero > .section__inner { position: relative; z-index: 1; }
/* Safety net. The header is removed from flow so it can float over a dark hero,
   which means any hero whose inner wrapper forgets the clearance class ends up
   with its title under the navigation. Several templates did. This guarantees the
   clearance from the hero itself, so a template cannot get it wrong. */
.page-hero > .section__inner:not(.page-hero__inner):not(.archive-hero__inner) {
  padding-top: calc(var(--tn-header-height) + clamp(1.2rem, 2.5vw, 2rem));
}

.page-hero__inner, .archive-hero__inner {
  min-height: clamp(11rem, 15vw, 15rem);
  padding-top: calc(var(--tn-header-height) + clamp(1rem, 2.2vw, 1.9rem));
  padding-bottom: clamp(1.6rem, 2.8vw, 2.4rem);
  display: grid; align-content: center;
}
.page-hero__copy { max-width: 45rem; }
.page-hero h1, .page-hero__copy h1 { max-width: none; font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
/* Keep hero copy inside the scrim so it never sits on busy artwork. */
.page-hero__copy .lede, .archive-hero__inner .lede { max-width: 34rem; margin-bottom: 0; }
/* The archive hero shares the narrow reading container; heroes are full width so
   the title lines up with the grid beneath it rather than floating inset. */
.archive-hero__inner.content-area { max-width: none; }

/*
 * The Nova Effect orbit signature: the editorial identity for the blog landing,
 * article singles, and the plain post/archive fallbacks (page-blog.php,
 * single-tn_article.php, single.php, archive.php). It sits beside the header on
 * the bone ground wherever .page-hero__visual is present, so those templates
 * carry the same still-life orbit instead of the constellation field.
 */
.page-hero__inner:has(.page-hero__visual) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.page-hero__visual {
  position: relative;
  justify-self: end;
  display: grid;
  place-items: center;
  width: clamp(6rem, 11vw, 8.5rem);
  height: clamp(6rem, 11vw, 8.5rem);
}
.page-hero__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--tn-line-cool);
  border-top-color: var(--tn-sky);
}
.page-hero__ring--two {
  inset: 20%;
  border-top-color: transparent;
  border-right-color: var(--tn-lime);
  opacity: .8;
}
.page-hero__dot {
  position: absolute; top: 50%; left: 50%;
  width: .5rem; height: .5rem;
  margin: -.25rem 0 0 -.25rem;
  border-radius: 50%;
  background: var(--tn-lime);
  box-shadow: 0 0 .5rem rgba(141, 198, 63, .55);
  /* Orbit trick: rotating the element's own centre (which already sits on the
     visual's centre) then translating out to the radius traces a circle. */
  transform: rotate(0deg) translateX(2.3rem);
}
.page-hero__visual-label {
  position: relative; z-index: 1;
  max-width: 6rem;
  font-family: var(--tn-font-mono);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  line-height: 1.4;
  color: var(--tn-mute);
}

/* Slow and continuous: this is a reading page, so the orbit only ever drifts,
   never draws attention to itself. */
@media (prefers-reduced-motion: no-preference) {
  .page-hero__ring--one { animation: tn-orbit-spin 70s linear infinite; }
  .page-hero__ring--two { animation: tn-orbit-spin 46s linear infinite reverse; }
  .page-hero__dot { animation: tn-orbit-dot 46s linear infinite; }
}

@keyframes tn-orbit-spin { to { transform: rotate(360deg); } }
@keyframes tn-orbit-dot { to { transform: rotate(360deg) translateX(2.3rem); } }

/* ==========================================================================
   9. Editorial rhythms
   ========================================================================== */

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .68fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: 2.4rem;
}
.section-heading__aside { max-width: 30rem; margin-bottom: .25rem; color: var(--tn-mute); }
.section-heading--dark .section-heading__aside { color: var(--tn-mute-dark); }

/* Centred single-column passage, a deliberate change of pace. */
.editorial {
  max-width: none; margin-inline: auto; text-align: center;
}
.editorial h2 { max-width: none; margin-inline: auto; }
.editorial .lede { max-width: 38rem; margin-inline: auto; }
.editorial .section-label { margin-bottom: 1.2rem; }
.editorial__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }

/* About: the timeline. A continuous rule down the left with a node per year, so
   twenty-seven years reads as one line rather than six disconnected cards. The
   year is the only place on the site where the mono face goes large, which makes
   the dates the thing you scan. */
.timeline {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: 0 0 0 clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  list-style: none;
  max-width: 62rem;
}
.timeline::before {
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--tn-sky), var(--tn-lime));
  opacity: .45;
  content: '';
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
}
.timeline__item::before {
  position: absolute;
  top: .5rem;
  left: calc(clamp(1.5rem, 4vw, 3rem) * -1 - 5px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--tn-paper);
  border-radius: 50%;
  background: var(--tn-sky);
  content: '';
}
.timeline__item--now::before { background: var(--tn-lime); }
.timeline__year {
  margin: 0;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.timeline__item--now .timeline__year { color: var(--tn-lime-deep); }
.timeline__body { display: grid; gap: .4rem; }
.timeline__body h3 { margin: 0; max-width: none; font-size: 1.14rem; }
.timeline__body p { margin: 0; max-width: 44rem; color: var(--tn-mute); font-size: .97rem; line-height: 1.55; }

/* About: convictions. Two columns of substantial statements, each with the option
   of a quote. The quote is set in the display serif because it is someone
   speaking, which is different from the page explaining. */
.beliefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.belief {
  display: grid;
  align-content: start;
  gap: .6rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--tn-lime);
}
.belief:nth-child(2) { border-top-color: var(--tn-sky); }
.belief:nth-child(3) { border-top-color: var(--tn-deep); }
.belief:nth-child(4) { border-top-color: var(--tn-lime); }
.belief__label {
  margin: 0;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.belief h3 { margin: 0; max-width: none; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.belief__body { margin: 0; max-width: 40rem; color: var(--tn-mute); font-size: .97rem; line-height: 1.55; }
.belief__quote {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--tn-line);
}
.belief__quote p {
  margin: 0;
  max-width: 34rem;
  color: var(--tn-ink);
  font-family: var(--tn-font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -.008em;
}
.belief__quote cite {
  display: block;
  margin-top: .55rem;
  color: var(--tn-mute);
  font-family: var(--tn-font-mono);
  font-size: .66rem;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Success Plans. The price leads and the hour count sits under it in mono at
   label size, because the hours are how the plan is sized rather than what is
   being bought. Each tier takes a different ground so the four read as a range
   rather than as an upsell ladder. */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  background: var(--tn-white);
}
.plan--sky { background: var(--tn-sky-wash); border-color: var(--tn-line-cool); }
.plan--lime { background: var(--tn-lime-wash); border-color: var(--tn-line-cool); }
.plan--bone { background: var(--tn-bone); }
.plan--ink { color: var(--tn-paper); background: var(--tn-ink); border-color: transparent; }
.plan--ink .plan__for, .plan--ink .plan__list li, .plan--ink .plan__note { color: var(--tn-mute-dark); }
.plan--ink .plan__capacity { color: var(--tn-sky); }
.plan--ink .plan__list li::before { background: var(--tn-lime); }

.plan__head { display: grid; gap: .3rem; }
.plan__name {
  margin: 0;
  max-width: none;
  font-family: var(--tn-font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tn-deep);
}
.plan--ink .plan__name { color: var(--tn-sky); }
.plan__price {
  margin: 0;
  font-family: var(--tn-font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.015em;
}
.plan__per {
  display: inline-block;
  margin-left: .2rem;
  font-family: var(--tn-font-body);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tn-mute);
}
.plan--ink .plan__per { color: var(--tn-mute-dark); }
/* Deliberately quiet. The hours are a sizing note, not the offer. */
.plan__capacity {
  margin: .15rem 0 0;
  color: var(--tn-mute);
  font-family: var(--tn-font-mono);
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan__for {
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--tn-line-cool);
  color: var(--tn-mute);
  font-size: .95rem;
  line-height: 1.5;
}
.plan--ink .plan__for { border-top-color: var(--tn-ink-line); }
.plan__list { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.plan__list li {
  display: grid;
  grid-template-columns: .8rem minmax(0, 1fr);
  gap: .6rem;
  color: var(--tn-mute);
  font-size: .92rem;
  line-height: 1.45;
}
.plan__list li::before {
  width: .4rem; height: .4rem; margin-top: .5rem;
  border-radius: 50%;
  background: var(--tn-deep);
  content: '';
}
.plan__note {
  margin: auto 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--tn-line-cool);
  color: var(--tn-mute);
  font-size: .84rem;
  line-height: 1.45;
}
.plan--ink .plan__note { border-top-color: var(--tn-ink-line); }

.plan-universal { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* System diagrams. The one visual class TruNova can make without photography, a
   demo tenant, or anybody's permission, because what is being sold is a system and
   a system has a shape. Before is drawn in muted line and dashes so it reads as
   provisional; after is drawn in Sky and Lime so it reads as resolved. */
.diagram { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.diagram__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.diagram__panel {
  display: grid;
  align-content: start;
  gap: .9rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--tn-line-cool);
  border-radius: var(--tn-radius);
  background: var(--tn-white);
}
.diagram__panel--before { color: var(--tn-mute); background: var(--tn-steel); }
.diagram__panel--after { color: var(--tn-deep); }
.diagram__label {
  margin: 0;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.diagram__panel--before .diagram__label { color: var(--tn-mute); }
.diagram__svg { display: block; width: 100%; height: auto; }
.diagram__note {
  margin: 0;
  max-width: 34rem;
  color: var(--tn-mute);
  font-size: .92rem;
  line-height: 1.5;
}
.diagram__caption {
  max-width: 46rem;
  margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--tn-line);
  color: var(--tn-mute);
  font-size: .94rem;
  line-height: 1.55;
  text-align: center;
}

/* Fit. The four statements use the display serif at a size it is used nowhere
   else, which makes this block feel like the page pausing to be straight with
   you. The not-a-fit lines are quieter on purpose: honest, not defensive. */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: none;
}
.fit-item {
  display: grid;
  align-content: start;
  gap: .55rem;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--tn-lime);
}
.fit-item:nth-child(2) { border-left-color: var(--tn-sky); }
.fit-item:nth-child(3) { border-left-color: var(--tn-deep); }
.fit-item:nth-child(4) { border-left-color: var(--tn-lime); }
.fit-item h3 {
  margin: 0;
  max-width: none;
  font-family: var(--tn-font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -.008em;
}
.fit-item p { margin: 0; max-width: 34rem; color: var(--tn-mute); font-size: .97rem; line-height: 1.55; }

.fit-out {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--tn-line-cool);
}
.fit-out__label {
  margin: 0 0 1rem;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fit-out__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: none;
}
.fit-out__list li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .7rem;
  margin: 0;
  color: var(--tn-mute);
  font-size: .94rem;
  line-height: 1.5;
}
/* A short rule rather than a cross: this is a mismatch, not a failing. */
.fit-out__list li::before {
  width: .8rem;
  height: 2px;
  margin-top: .68rem;
  border-radius: 2px;
  background: var(--tn-mute);
  content: '';
}

/* Delivery cadence. One long bar against a run of short ones: the shape carries
   the argument, so the bars stay aria-hidden and the claims are stated in text. */
.cadence {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--tn-line);
}
.cadence__row {
  display: grid;
  grid-template-columns: minmax(8rem, .18fr) minmax(0, .42fr) minmax(0, .4fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.cadence__label {
  margin: 0;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cadence__track { position: relative; display: flex; align-items: center; gap: .3rem; }
.cadence__bar {
  height: .85rem;
  flex: 1 1 auto;
  border-radius: .45rem;
  background: linear-gradient(90deg, var(--tn-sky) 0%, var(--tn-lime) 100%);
}
.cadence__row--big .cadence__bar--long {
  background: repeating-linear-gradient(
    -45deg,
    rgba(92, 102, 112, .28) 0 6px,
    rgba(92, 102, 112, .14) 6px 12px
  );
}
.cadence__flag {
  flex: 0 0 auto;
  padding: .22rem .5rem;
  border-radius: .3rem;
  background: var(--tn-mute);
  color: var(--tn-paper);
  font-family: var(--tn-font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
/* Each increment ships something, so each bar gets a tick. */
.cadence__row--small .cadence__bar {
  position: relative;
  background-image: linear-gradient(90deg, var(--tn-sky) 0%, var(--tn-lime) 100%);
}
.cadence__row--small .cadence__bar::after {
  position: absolute; top: 50%; left: 50%;
  width: .5rem; height: .5rem;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230a1f2c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4'/%3E%3C/svg%3E");
  content: '';
}
.cadence__note { margin: 0; color: var(--tn-mute); font-size: .95rem; line-height: 1.5; }

.cadence__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  list-style: none;
  max-width: none;
}
.cadence__points li {
  display: grid; align-content: start; gap: .5rem; margin: 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--tn-lime);
}
.cadence__points li:nth-child(2) { border-top-color: var(--tn-sky); }
.cadence__points li:nth-child(3) { border-top-color: var(--tn-deep); }
.cadence__points h3 { margin: 0; max-width: none; font-size: 1.12rem; }
.cadence__points p { margin: 0; color: var(--tn-mute); font-size: .95rem; line-height: 1.5; }

/* Product screenshots. Microsoft's permission allows resizing but not cropping,
   so the shot is shown whole and the visual interest comes from the chrome around
   it rather than from a detail crop. */
.shot { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.shot__frame {
  overflow: hidden;
  border: 1px solid var(--tn-line-cool);
  border-radius: .75rem;
  background: var(--tn-white);
  box-shadow: var(--tn-shadow);
}
.shot__chrome {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--tn-line-cool);
  background: var(--tn-steel);
}
.shot__chrome > span {
  width: .55rem; height: .55rem; flex: 0 0 auto;
  border-radius: 50%; background: rgba(14, 79, 110, .22);
}
.shot__chrome-label {
  margin: 0 0 0 .6rem;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.shot__image { display: block; width: 100%; height: auto; }
.shot__pending {
  display: grid; place-content: center; gap: .5rem;
  min-height: 16rem; padding: 2rem;
  background:
    repeating-linear-gradient(-45deg, rgba(14, 79, 110, .05) 0 10px, transparent 10px 20px),
    var(--tn-sky-wash);
  text-align: center;
}
.shot__pending p { max-width: 34rem; margin: 0 auto; color: var(--tn-mute); font-size: .92rem; }
.shot__pending-label {
  color: var(--tn-deep) !important;
  font-family: var(--tn-font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.shot__caption {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin-top: .75rem;
  color: var(--tn-mute); font-size: .88rem;
}
.shot__credit {
  color: var(--tn-mute);
  font-family: var(--tn-font-mono); font-size: .66rem;
  letter-spacing: .06em;
}

/* Breadth, stated quietly. A researcher needs to see the whole stack and the
   whole industry list; the page needs it subordinate to the point above it. So it
   is a dense link field, not a card grid. */
.breadth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--tn-line);
}
.breadth__group { display: grid; align-content: start; gap: .8rem; }
.breadth__label {
  margin: 0;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.breadth__list { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }
.breadth__list a {
  display: inline-block;
  padding: .34rem .7rem;
  border: 1px solid var(--tn-line-cool); border-radius: 2rem;
  color: var(--tn-ink); font-size: .84rem; text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.breadth__list a:hover, .breadth__list a:focus-visible {
  color: var(--tn-deep); border-color: var(--tn-sky); background: var(--tn-sky-wash);
}
.breadth__note {
  grid-column: 1 / -1;
  max-width: 46rem;
  margin: .5rem auto 0;
  color: var(--tn-mute); font-size: .95rem; text-align: center; text-wrap: pretty;
}

/* The two-way deal. A centre rule and two mirrored columns make the give-and-take
   legible at a glance, which is the whole point of stating it at all. */
.deal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--tn-line-cool);
}
.deal__side { position: relative; display: grid; align-content: start; gap: 1rem; }
.deal > .deal__side + .deal__side::before {
  position: absolute; top: -.5rem; bottom: 0;
  left: calc(clamp(1.75rem, 5vw, 4.5rem) / -2);
  width: 1px; background: var(--tn-line-cool); content: '';
}
.deal__label {
  margin: 0;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.deal__list { display: grid; gap: .9rem; padding: 0; margin: 0; list-style: none; }
.deal__list li {
  display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: .75rem;
  color: var(--tn-ink); font-size: 1rem; line-height: 1.5;
}
.deal__list li::before {
  width: 1.35rem; height: 1.35rem; margin-top: .1rem;
  border-radius: 50%;
  background-repeat: no-repeat; background-position: center; background-size: .72rem;
  content: '';
}
/* A tick for what we owe, an arrow for what we ask. Different marks because they
   are different kinds of commitment, not decoration. */
.deal__list--ours li::before {
  background-color: rgba(141, 198, 63, .28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230e4f6e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4'/%3E%3C/svg%3E");
}
.deal__list--yours li::before {
  background-color: rgba(39, 169, 225, .22);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230e4f6e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h7M6.6 3l3 3-3 3'/%3E%3C/svg%3E");
}
.deal__close {
  max-width: 44rem;
  margin: clamp(1.75rem, 4vw, 3rem) auto 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--tn-line-cool);
  color: var(--tn-deep);
  font-family: var(--tn-font-display); font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; letter-spacing: -.008em;
  text-align: center; text-wrap: pretty;
}

/* Asymmetric feature: copy against artwork rather than against empty space. */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature-split__media {
  position: relative; overflow: hidden;
  min-height: 22rem; border-radius: var(--tn-radius-lg);
  background-color: var(--tn-ink);
  background-image: var(--tn-feature-image);
  background-size: cover; background-position: center;
}
.feature-split__media::after {
  position: absolute; inset: 0; content: '';
  background: linear-gradient(160deg, rgba(10, 31, 44, 0) 40%, rgba(10, 31, 44, .55) 100%);
}
.feature-split__badge {
  position: absolute; z-index: 1; right: 1.1rem; bottom: 1.1rem;
  padding: .5rem .8rem; border-radius: .45rem;
  color: var(--tn-ink); background: var(--tn-lime);
  font-family: var(--tn-font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.feature-split__copy h2 { max-width: none; }
.feature-split__list { display: grid; gap: .8rem; padding: 0; margin: 1.4rem 0 0; list-style: none; }
.feature-split__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; color: var(--tn-mute); }
.feature-split__list li::before {
  content: ''; width: .55rem; height: .55rem; margin-top: .55rem;
  border-radius: 50%; background: var(--tn-sky);
}
.section--dark .feature-split__list li, .section--ink .feature-split__list li { color: var(--tn-mute-dark); }

.split-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .72fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.split-callout h2 { margin-bottom: 0; }
.split-callout--dark p { color: var(--tn-mute-dark); }
.home-final-cta h2 { max-width: none; }

/* ==========================================================================
   10. Cards
   ========================================================================== */

.choice-grid, .proof-grid, .quote-grid, .card-grid, .link-grid, .team-grid { display: grid; gap: 1.25rem; }
.choice-grid, .proof-grid, .card-grid, .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.choice-card, .proof-card, .card, .link-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.35rem, 2.6vw, 2rem);
  border: 1px solid var(--tn-line); border-radius: var(--tn-radius);
  background: var(--tn-white); text-decoration: none;
}

.choice-card {
  position: relative; overflow: hidden;
  min-height: 18rem; color: var(--tn-ink);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.choice-card:hover, .choice-card:focus-visible {
  color: var(--tn-ink); border-color: var(--tn-sky);
  box-shadow: var(--tn-shadow); transform: translateY(-.2rem);
}
.choice-card__number { color: var(--tn-deep); }
.choice-card__icon {
  width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem;
  object-fit: contain; object-position: left center;
}
.choice-card h3, .proof-card h3 { max-width: none; }
.choice-card p, .proof-card p, .card p:last-child { color: var(--tn-mute); }

.proof-card {
  min-height: 20rem; background: var(--tn-paper);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.proof-card:hover, .proof-card:focus-within {
  border-color: var(--tn-sky); box-shadow: var(--tn-shadow); transform: translateY(-.2rem);
}
.proof-card__tag { margin-bottom: 1.2rem; color: var(--tn-deep); }
.proof-card h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
.proof-card p { margin-bottom: 1.4rem; }

/* ==========================================================================
   11. Stats
   ========================================================================== */

.stat-band { border-top: 1px solid var(--tn-ink-line); border-bottom: 1px solid var(--tn-ink-line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.stats-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.stat { padding: 1.3rem 0; border-top: 1px solid var(--tn-ink-line); }
.stat__value {
  display: block; margin-bottom: .4rem;
  color: var(--tn-lime);
  font-family: var(--tn-font-display); font-weight: 400;
  font-size: clamp(3.2rem, 6vw, 5.6rem); line-height: .95; letter-spacing: -.02em;
}
.stat__label {
  color: var(--tn-mute-dark);
  font-family: var(--tn-font-mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* The About page's numbers get a dark anchor panel, which also keeps the stat
   colours legible: Lime and the muted label tone are built for a dark ground. */
.numbers-panel {
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--tn-radius-lg);
  color: var(--tn-paper); background: var(--tn-ink);
}
.numbers-panel .section-label { color: var(--tn-sky); margin-bottom: .4rem; }
.numbers-panel .stat-pair { border-top: 0; padding-top: .6rem; }

/* Two stats read as a pair, not as a half-empty four-up. */
.stat-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.6rem; border-top: 1px solid var(--tn-ink-line);
}
.stat-pair .stat { padding: 0; border: 0; }
.stat-pair .stat__value { font-size: clamp(3.5rem, 7vw, 6rem); }
.stat-pair .stat__label { display: block; max-width: 18rem; line-height: 1.4; }

/* ==========================================================================
   12. Quotes
   ========================================================================== */

.quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.quote-grid blockquote {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.5rem; margin: 0;
  border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius);
  background: var(--tn-white);
  color: var(--tn-ink);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.4;
}
.quote-grid blockquote::before {
  display: block; margin-bottom: .7rem;
  color: var(--tn-sky); font-family: var(--tn-font-display);
  font-size: 2.8rem; font-weight: 400; line-height: .5; content: '\201C';
}
.quote-grid cite {
  display: block; margin-top: auto; padding-top: 1.1rem;
  color: var(--tn-mute); font-size: .84rem; font-style: normal;
  font-family: var(--tn-font-mono); letter-spacing: .04em;
}

/* ==========================================================================
   13. Interior page compositions
   ========================================================================== */

.content-area { max-width: var(--tn-narrow-width); margin: 0 auto; }
.content-area--wide { max-width: var(--tn-content-width); }
.content-area > * + * { margin-top: 1.5rem; }

.page-content-section { position: relative; overflow: hidden; background: var(--tn-paper); }
.page-content-area { position: relative; z-index: 1; max-width: var(--tn-content-width); }
.page-content-area > p:not(.lede), .page-content-area > ul, .page-content-area > ol,
.page-content-area > h2, .page-content-area > h3, .page-content-area > table,
.page-content-area > .empty-state { max-width: var(--tn-narrow-width); }
.page-content-area > .lede {
  max-width: 44rem; padding-left: 1.25rem;
  border-left: .25rem solid var(--tn-lime);
  color: var(--tn-deep); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600;
}
.page-content-area > h2 { padding-top: 1.2rem; border-top: 1px solid var(--tn-line); }
.page-content-area > .card-grid, .page-content-area > .team-grid, .page-content-area > .about-cta { position: relative; z-index: 1; }

.visual-page { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.visual-page > * { position: relative; z-index: 1; }
.visual-page__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(12rem, .5fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  padding: 0 0 clamp(1.8rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--tn-line);
}
.visual-page__intro > div:first-child { max-width: 46rem; }
.visual-page__intro .lede {
  margin-bottom: 0; color: var(--tn-ink);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.22;
}
/* Keep the implementation introduction readable without a narrow display column. */
.visual-page--start-my-implementation .visual-page__intro > div:first-child > p:first-child {
  max-width: none;
  padding-left: 1.35rem;
  border-left: .3rem solid var(--tn-lime);
  color: var(--tn-deep);
  font-family: var(--tn-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.visual-page--start-my-implementation .visual-page__intro > div:first-child > p:first-child + p {
  max-width: 42rem;
  color: var(--tn-mute);
}
.visual-page__intro-mark {
  display: grid; gap: .3rem; justify-items: end;
  color: var(--tn-deep); font-family: var(--tn-font-mono);
  font-size: .68rem; letter-spacing: .1em; line-height: 1.3;
  text-align: right; text-transform: uppercase;
}
.visual-page__intro-mark strong {
  color: var(--tn-deep);
  font-family: var(--tn-font-display);
  font-size: clamp(3.2rem, 5.8vw, 5.4rem); letter-spacing: -.02em; line-height: .9;
}
.visual-page__intro-mark small { max-width: 13rem; color: var(--tn-mute); font-size: .7rem; letter-spacing: .04em; text-transform: none; }
.visual-page__intro--dark {
  position: relative; overflow: hidden;
  padding: clamp(1.8rem, 4vw, 3.5rem); border: 0; border-radius: var(--tn-radius-lg);
  color: var(--tn-paper); background: var(--tn-ink);
}
.visual-page__intro--dark > * { position: relative; z-index: 1; }
.visual-page__intro--dark .lede { color: var(--tn-mute-dark); }
.visual-page__intro--dark .section-label, .visual-page__intro--dark .visual-page__intro-mark { color: var(--tn-sky); }
.visual-page__intro--dark .visual-page__intro-mark strong { color: var(--tn-lime); }

.visual-panel {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(12rem, .5fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  padding: clamp(1.8rem, 4vw, 4rem);
  border-radius: var(--tn-radius-lg);
}
.visual-panel > * { position: relative; z-index: 1; }
.visual-panel--dark { color: var(--tn-paper); background: var(--tn-ink); }
.visual-panel__copy h2 { max-width: none; margin-bottom: 1.2rem; font-size: clamp(1.9rem, 3.4vw, 3rem); }
.visual-panel__copy p:not(.section-label) { max-width: 46rem; color: var(--tn-mute-dark); }
.visual-panel__copy p:last-child { margin-bottom: 0; }
.visual-panel__signal {
  display: grid; gap: .6rem; justify-items: end; max-width: 16rem;
  padding-left: 1.3rem; border-left: 2px solid var(--tn-lime);
  color: var(--tn-sky); font-family: var(--tn-font-mono);
  font-size: .7rem; letter-spacing: .1em; line-height: 1.35;
  text-align: right; text-transform: uppercase;
}
.visual-panel__signal strong {
  color: var(--tn-paper); font-family: var(--tn-font-display);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem); letter-spacing: -.01em; line-height: 1.05; text-transform: none;
}
.visual-panel__signal small { color: var(--tn-lime); font-size: .76rem; }

.visual-placeholder {
  position: relative; overflow: hidden;
  min-height: 16rem; padding: clamp(1.6rem, 3.5vw, 3rem);
  border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius-lg);
  background: var(--tn-sky-wash);
}
.visual-placeholder > * { position: relative; z-index: 1; }
.visual-placeholder__top, .visual-track-card__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 2rem;
  color: var(--tn-deep); font-family: var(--tn-font-mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.visual-placeholder h2 { max-width: none; margin-bottom: .9rem; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.visual-placeholder p { max-width: 38rem; margin-bottom: 0; color: var(--tn-mute); }
.visual-placeholder__orbit {
  position: absolute; right: clamp(1rem, 7vw, 6rem); bottom: -1.5rem;
  display: grid; width: 12rem; height: 12rem; place-items: center;
  border: 1px solid rgba(14, 79, 110, .3); border-radius: 50%;
  color: var(--tn-deep); font-family: var(--tn-font-mono);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
}
.visual-placeholder__orbit::before, .visual-placeholder__orbit::after {
  position: absolute; border: 1px solid rgba(14, 79, 110, .35); border-radius: 50%; content: '';
}
.visual-placeholder__orbit::before { width: 7.5rem; height: 7.5rem; }
.visual-placeholder__orbit::after { width: 2.8rem; height: 2.8rem; background: rgba(141, 198, 63, .3); }
.visual-placeholder__orbit span { position: absolute; z-index: 1; padding: .2rem .35rem; background: var(--tn-sky-wash); }
.visual-placeholder__orbit span:nth-child(1) { top: 1.2rem; left: 1.4rem; }
.visual-placeholder__orbit span:nth-child(2) { right: 1rem; bottom: 2rem; }

.visual-track-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.visual-track-card {
  position: relative; display: flex; min-height: 18rem; flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: var(--tn-radius-lg); overflow: hidden;
}
.visual-track-card > *, .visual-doorway-card > * { position: relative; z-index: 1; }
.visual-track-card__top { margin-bottom: 1.6rem; }
.visual-track-card__top span:last-child { font-size: 1.3rem; letter-spacing: 0; }
.visual-track-card h2 { max-width: none; margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.visual-track-card p { max-width: 30rem; margin-bottom: 1rem; }
.visual-track-card .text-link { margin-top: auto; font-weight: 700; text-decoration: none; }
.visual-track-card--sky { color: var(--tn-ink); background: var(--tn-sky-wash-deep); }
.visual-track-card--lime { color: var(--tn-ink); background: var(--tn-lime); }
.visual-track-card--sky .visual-track-card__top, .visual-track-card--lime .visual-track-card__top { color: var(--tn-deep); }

.visual-doorway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.visual-doorway-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visual-doorway-card {
  position: relative; display: flex; min-height: 17rem; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid transparent; border-radius: var(--tn-radius-lg);
  color: var(--tn-ink); text-decoration: none; overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.visual-doorway-card:hover, .visual-doorway-card:focus-within { box-shadow: var(--tn-shadow); transform: translateY(-.25rem); }
.visual-doorway-card__number {
  margin-bottom: 1.4rem;
  font-family: var(--tn-font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em;
}
.visual-doorway-card h2 { max-width: none; margin-bottom: 1rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.visual-doorway-card h2 a { color: inherit; text-decoration: none; }
.visual-doorway-card h2 a:hover, .visual-doorway-card h2 a:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: .12em; }
.visual-doorway-card p { max-width: 27rem; margin-bottom: 1rem; color: inherit; opacity: .82; }
.visual-doorway-card .text-link { margin-top: auto; color: inherit; font-weight: 700; }
.visual-doorway-card--sky { background: var(--tn-sky-wash); }
.visual-doorway-card--lime { background: var(--tn-lime); }
.visual-doorway-card--ink { color: var(--tn-paper); background: var(--tn-ink); }
.visual-doorway-card--ink:hover, .visual-doorway-card--ink:focus-within { color: var(--tn-paper); }
.visual-doorway-card--ink .visual-doorway-card__number { color: var(--tn-sky); }
.visual-doorway-card--bone { background: var(--tn-bone); border-color: var(--tn-line); }

.visual-rich-section {
  display: grid; grid-template-columns: minmax(6rem, .22fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(1.6rem, 3.5vw, 3.2rem);
  border: 1px solid var(--tn-line); border-radius: var(--tn-radius-lg); overflow: hidden;
}
.visual-rich-section__index {
  display: grid; align-content: start; gap: .45rem;
  color: var(--tn-deep); font-family: var(--tn-font-mono);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.visual-rich-section__index span {
  color: var(--tn-deep); font-family: var(--tn-font-display);
  font-size: clamp(2.8rem, 4.4vw, 4.4rem); letter-spacing: -.02em; line-height: .9;
}
.visual-rich-section__index small { font-size: .64rem; line-height: 1.3; }
.visual-rich-section__content h2 { max-width: none; margin-top: 0; margin-bottom: 1.1rem; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.visual-rich-section__content > p, .visual-rich-section__content > ul, .visual-rich-section__content > ol { max-width: 46rem; }
.visual-rich-section__content > * + * { margin-top: 1.3rem; }
.visual-rich-section__content ul, .visual-rich-section__content ol { padding-left: 1.2rem; }
.visual-rich-section--ink { color: var(--tn-paper); border-color: transparent; background: var(--tn-ink); }
.visual-rich-section--ink .visual-rich-section__index, .visual-rich-section--ink .visual-rich-section__content p { color: var(--tn-mute-dark); }
.visual-rich-section--ink .visual-rich-section__index span { color: var(--tn-sky); }
.visual-rich-section--sky { background: var(--tn-sky-wash); }
.visual-rich-section--lime { border-color: transparent; background: var(--tn-lime); }
.visual-rich-section--bone { background: var(--tn-bone); }

/* The implementation journey is one sequence, so its five panels can share
   the viewport as the visitor moves through it. The document order stays
   intact for reading and keyboard navigation; only the visual presentation
   settles each panel into a shallow stack. */
.visual-page--start-my-implementation {
  gap: clamp(1rem, 2vw, 1.25rem);
  isolation: isolate;
}
/* The shared page section clips decorative overflow. Let this page's sticky
   panels use the viewport as their scroll boundary instead. */
.page-content-section:has(.visual-page--start-my-implementation) {
  overflow: visible;
}
.visual-page--start-my-implementation > .visual-rich-section {
  position: sticky;
  align-self: start;
  top: var(--visual-stack-top);
  z-index: var(--visual-stack-index);
  min-height: min(27rem, calc(100vh - 9rem));
  box-shadow: 0 1.2rem 2.4rem rgba(10, 31, 44, .1);
  scroll-margin-top: calc(var(--tn-header-height) + 1rem);
}
.visual-page--start-my-implementation > .visual-rich-section:nth-of-type(2) {
  --visual-stack-top: calc(var(--tn-header-height) + 1rem);
  --visual-stack-index: 1;
}
.visual-page--start-my-implementation > .visual-rich-section:nth-of-type(3) {
  --visual-stack-top: calc(var(--tn-header-height) + 2.35rem);
  --visual-stack-index: 2;
}
.visual-page--start-my-implementation > .visual-rich-section:nth-of-type(4) {
  --visual-stack-top: calc(var(--tn-header-height) + 3.7rem);
  --visual-stack-index: 3;
}
.visual-page--start-my-implementation > .visual-rich-section:nth-of-type(5) {
  --visual-stack-top: calc(var(--tn-header-height) + 5.05rem);
  --visual-stack-index: 4;
}
.visual-page--start-my-implementation > .visual-rich-section:nth-of-type(6) {
  --visual-stack-top: calc(var(--tn-header-height) + 6.4rem);
  --visual-stack-index: 5;
}

.content-area h2 { max-width: none; margin-top: 2.6rem; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.content-area h3 { max-width: none; margin-top: 2rem; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.content-area table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.content-area th, .content-area td { padding: .85rem .8rem; border-bottom: 1px solid var(--tn-line); text-align: left; vertical-align: top; }
.content-area th { color: var(--tn-deep); font-weight: 700; }
.content-area .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; }
.content-area .table-scroll table { width: max-content; min-width: 100%; }

.structured-entry { width: 100%; }
.structured-entry h1 { max-width: none; }
.entry-content { max-width: var(--tn-narrow-width); }
.entry-content > * + * { margin-top: 1.5rem; }
.event-meta { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; color: var(--tn-mute); font-family: var(--tn-font-mono); font-size: .8rem; }
.structured-entry__registration {
  padding: 1.5rem; margin-top: 3rem;
  border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius); background: var(--tn-sky-wash);
}

.card h2, .card h3, .link-card h2, .link-card h3 { max-width: none; margin-top: 0; }
.card h2, .link-card h2 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
.card h3, .link-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
.card h2 a, .card h3 a, .link-card h2 a, .link-card h3 a { color: var(--tn-deep); text-decoration: none; }

.empty-state {
  max-width: 46rem; padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius); background: var(--tn-sky-wash);
}
.empty-state h2 { max-width: none; }

/* ==========================================================================
   14. Team, an expanding portrait rail

   Five people fit a card grid badly. On a pointer device the row behaves like an
   accordion: the portrait under the cursor widens and gives up its bio, the rest
   compress. On touch the same markup becomes a snap carousel, which is the
   interaction that actually works with a finger.
   ========================================================================== */

.team-grid--wall {
  display: flex;
  gap: .75rem;
  align-items: stretch;
  grid-template-columns: none;
}

.team-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(20rem, 30vw, 26rem);
  overflow: hidden;
  border: 0; border-radius: .9rem;
  background: var(--tn-ink);
  transition: flex-grow 420ms cubic-bezier(.22, .61, .36, 1), box-shadow 320ms ease;
}

.team-card__portrait {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--tn-ink);
}
.team-card__portrait > * { grid-area: 1 / 1; }
/* A real portrait, when one exists, sits above the designed fallback. */
.team-card__portrait img {
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 16%;
}
.team-card__portrait::before {
  position: absolute; inset: 0; content: '';
  background:
    radial-gradient(circle at 22% 18%, rgba(39, 169, 225, .55) 0%, transparent 55%),
    radial-gradient(circle at 82% 88%, rgba(141, 198, 63, .5) 0%, transparent 55%);
}
.team-card__portrait::after {
  position: absolute; inset: 0; content: ''; opacity: .5;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, .35) 1px, transparent 1px);
  background-size: 1.1rem 1.1rem;
  -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(120deg, #000 0%, transparent 70%);
}
.team-card__monogram {
  position: relative; z-index: 1;
  color: var(--tn-paper);
  font-family: var(--tn-font-display); font-weight: 400;
  font-size: 2.7rem; letter-spacing: -.01em; line-height: 1;
}

.team-card__body {
  position: absolute; z-index: 3; inset: auto 0 0 0;
  display: grid; gap: .18rem;
  padding: 4rem 1rem 1.1rem;
  background: linear-gradient(to top, rgba(5, 17, 25, .96) 30%, rgba(5, 17, 25, .78) 56%, rgba(5, 17, 25, 0) 100%);
}
.team-card__body .card__meta {
  margin: 0; color: var(--tn-sky);
  font-size: .58rem; letter-spacing: .1em;
}
.team-card h3 {
  margin: 0; max-width: none;
  color: var(--tn-white);
  font-size: 1.05rem; font-weight: 600; line-height: 1.15;
}
.team-card__bio {
  margin: 0;
  color: #cfdbe2; font-size: .84rem; line-height: 1.4;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 380ms ease, opacity 280ms ease, margin-top 380ms ease;
}
.team-card__link {
  margin-top: .5rem;
  color: var(--tn-lime); font-size: .76rem; font-weight: 700;
  opacity: 0; transition: opacity 280ms ease;
}
.team-card__link:hover, .team-card__link:focus-visible { color: var(--tn-lime); }
.team-card > p:empty { display: none; }

/* Pointer devices get the accordion. */
@media (hover: hover) and (min-width: 68.0625rem) {
  .team-card { flex-grow: 1; }
  .team-grid--wall:hover .team-card,
  .team-grid--wall:focus-within .team-card { flex-grow: .82; }
  .team-card:hover, .team-card:focus-within { flex-grow: 2.1 !important; box-shadow: var(--tn-shadow-lift); }
  .team-card:hover .team-card__bio, .team-card:focus-within .team-card__bio {
    max-height: 9rem; opacity: 1; margin-top: .4rem;
  }
  .team-card:hover .team-card__link, .team-card:focus-within .team-card__link { opacity: 1; }
}

/* Everything else gets a real carousel: swipe, snap, all copy always visible. */
@media (hover: none), (max-width: 68rem) {
  .team-grid--wall {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .team-card {
    flex: 0 0 min(72vw, 17rem);
    scroll-snap-align: center;
  }
  .team-card__bio { max-height: none; opacity: 1; margin-top: .4rem; }
  .team-card__link { opacity: 1; }
}

.about-cta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(11rem, .5fr);
  gap: 2rem; align-items: end;
  padding: clamp(1.75rem, 4vw, 3.2rem); margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--tn-radius-lg);
  color: var(--tn-paper); background: var(--tn-ink);
}
.about-cta__copy, .about-cta__aside { position: relative; z-index: 1; }
.about-cta .section-label { color: var(--tn-lime); }
.about-cta h2 { max-width: none; margin-bottom: 1rem; font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.about-cta p:not(.section-label) { max-width: 36rem; color: var(--tn-mute-dark); }
.about-cta__aside {
  display: grid; gap: .35rem; justify-items: end;
  color: var(--tn-sky); font-family: var(--tn-font-mono);
  font-size: .7rem; letter-spacing: .11em; text-transform: uppercase;
}
.about-cta__aside strong { color: var(--tn-lime); font-size: 1.25rem; letter-spacing: -.02em; text-transform: none; }
/* Used as a section-level closing CTA, where the section already supplies the
   dark ground and its own vertical rhythm. */
.about-cta--flush { margin-top: 0; padding: 0; border-radius: 0; background: none; }
.about-cta--flush .about-cta__copy p:last-child { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 0; }
.about-cta__aside a { color: inherit; text-decoration: none; }
.about-cta__aside a:hover, .about-cta__aside a:focus-visible { text-decoration: underline; text-underline-offset: .25rem; }

/* ==========================================================================
   15. Archive and directory cards
   ========================================================================== */

.industry-grid { align-items: stretch; }
.industry-card {
  position: relative; min-height: 20rem; overflow: hidden;
  background: linear-gradient(155deg, var(--tn-white) 0%, var(--tn-industry-wash, var(--tn-steel)) 100%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.industry-card::before {
  position: absolute; top: 0; right: 0; left: 0; height: .3rem;
  background: var(--tn-industry-accent, var(--tn-sky)); content: '';
}
.industry-card:nth-child(3n + 1) { --tn-industry-accent: var(--tn-sky); --tn-industry-wash: #eaf6fb; }
.industry-card:nth-child(3n + 2) { --tn-industry-accent: var(--tn-lime); --tn-industry-wash: #f3f8e8; }
.industry-card:nth-child(3n + 3) { --tn-industry-accent: var(--tn-deep); --tn-industry-wash: #e9f0f4; }
.industry-card:hover { border-color: var(--tn-industry-accent); box-shadow: var(--tn-shadow); transform: translateY(-.25rem); }
.industry-card__top { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; gap: .85rem; margin-bottom: 1.4rem; }
.industry-card__mark { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; color: var(--tn-deep); }
.industry-card__number { color: var(--tn-deep); font-family: var(--tn-font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.industry-card h2 { position: relative; z-index: 1; max-width: none; margin-top: 0; margin-bottom: 1rem; font-size: clamp(1.45rem, 2.2vw, 1.95rem); }
.industry-card h2 a { color: var(--tn-deep); text-decoration: none; }
.industry-card__summary { position: relative; z-index: 1; color: var(--tn-mute); line-height: 1.5; }
.industry-card .text-link { position: relative; z-index: 1; margin-top: auto; }

.archive-card {
  position: relative; min-height: 19rem; overflow: hidden;
  background: linear-gradient(155deg, var(--tn-white) 0%, var(--tn-archive-wash, var(--tn-steel)) 100%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.archive-card::before {
  position: absolute; top: 0; right: 0; left: 0; height: .3rem;
  background: var(--tn-archive-accent, var(--tn-sky)); content: '';
}
.archive-card:nth-child(3n + 1) { --tn-archive-accent: var(--tn-sky); --tn-archive-wash: #eaf6fb; }
.archive-card:nth-child(3n + 2) { --tn-archive-accent: var(--tn-lime); --tn-archive-wash: #f3f8e8; }
.archive-card:nth-child(3n + 3) { --tn-archive-accent: var(--tn-deep); --tn-archive-wash: #e9f0f4; }
.archive-card:hover { border-color: var(--tn-archive-accent); box-shadow: var(--tn-shadow); transform: translateY(-.25rem); }
/* The card sets align-items: flex-start, so these rows need an explicit width
   or they collapse to their content and the two labels collide. */
.archive-card__top { position: relative; z-index: 1; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.7rem; }
.archive-card__index, .archive-card__type { color: var(--tn-deep); font-family: var(--tn-font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.archive-card__index { font-size: .84rem; }
.archive-card h2, .archive-card p, .archive-card .text-link { position: relative; z-index: 1; }
.archive-card h2 { max-width: none; margin-top: 0; margin-bottom: 1rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.archive-card h2 a { color: var(--tn-deep); text-decoration: none; }
.archive-card > p:not(.archive-card__type) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
  color: var(--tn-mute);
}
.archive-card .text-link { margin-top: auto; }

.legacy-story-grid, .legacy-stats { margin: 2rem 0 3rem; }
.legacy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legacy-stats .stat { padding: 1.25rem; border: 1px solid var(--tn-line); background: var(--tn-paper); }
.legacy-stats .stat__value { color: var(--tn-deep); font-size: clamp(2.2rem, 4vw, 3.5rem); }
.legacy-stats .stat__label { color: var(--tn-mute); }

.trunova-ci-form { width: min(100%, 62rem); min-height: 16rem; margin-right: auto; margin-left: auto; overflow: hidden; }
.trunova-ci-form iframe, .trunova-ci-form > div { display: block; width: 100% !important; max-width: 100% !important; }
.trunova-ci-form--pending { padding: 1.25rem; border: 1px dashed var(--tn-line); border-radius: var(--tn-radius); background: var(--tn-steel); }
.trunova-ci-form--pending p { margin: 0; color: var(--tn-mute); }

/* CI supplies the form markup. Keep its message field usable without changing
   field names, validation, submission routing, or the hosted form definition. */
#contact-form { scroll-margin-top: 7rem; }
.trunova-ci-form .trunova-form-fields > [data-editorblocktype="TextAreaFormField"] { grid-column: 1 / -1; min-width: 0; width: 100%; box-sizing: border-box; }
.trunova-ci-form .trunova-form-fields textarea { width: 100%; min-height: 10rem; }
@media (max-width: 768px) {
  .trunova-ci-form .trunova-form-fields > .textFormFieldBlock { width: 100%; min-width: 0; box-sizing: border-box; }
}

/* ==========================================================================
   16. Footer
   ========================================================================== */

.site-footer { color: var(--tn-paper); background: var(--tn-ink); }
.site-footer__top {
  padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: 2.25rem;
}
.site-footer__brand { max-width: 42rem; display: grid; gap: 1rem; justify-items: start; }
.site-footer__brand .site-brand { display: inline-flex; }
.site-footer__tagline { margin: 0; color: var(--tn-paper); font-family: var(--tn-font-display); font-size: clamp(1.55rem, 2.4vw, 2.05rem); font-weight: 400; letter-spacing: -.008em; line-height: 1.2; }

/* The Nova Effect: its own quiet utility strip, framed by hairline rules and set
   apart from the page's primary CTA. Outline button, not the loud lime primary. */
.site-footer__discover {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding-top: 1.9rem; padding-bottom: 1.9rem;
  border-top: 1px solid var(--tn-ink-line);
  border-bottom: 1px solid var(--tn-ink-line);
}
.footer-signup { display: grid; gap: .35rem; max-width: 46ch; }
.footer-signup p { margin: 0; color: var(--tn-mute-dark); font-size: .93rem; }
.footer-signup__form { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.footer-signup__archive { display: inline-flex; align-items: center; gap: .3rem; color: var(--tn-paper); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.footer-signup__archive span { transition: transform 180ms ease; }
.footer-signup__archive:hover span, .footer-signup__archive:focus-visible span { transform: translateX(.2rem); }
.footer-signup__input {
  flex: 1 1 12rem; min-height: 3rem; padding: .7rem .9rem;
  border: 1px solid var(--tn-ink-line); border-radius: .5rem;
  color: var(--tn-paper); background: rgba(255, 255, 255, .06);
  font-family: inherit; font-size: .95rem;
}
.footer-signup__input::placeholder { color: #8ea6b3; }
.footer-signup__input:focus-visible { border-color: var(--tn-sky); outline-offset: 1px; }

.site-footer__links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  padding-top: 2.5rem; padding-bottom: 2.5rem;
}
.site-footer__label {
  margin: 0 0 .9rem; color: var(--tn-lime);
  font-family: var(--tn-font-mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
}
.footer-column ul { display: grid; gap: .55rem; padding: 0; margin: 0; list-style: none; }
/*
 * Buttons are excluded: a button carries its own palette and is not a link for
 * colour purposes. Without the :not(), .site-footer a beat .button--lime on
 * specificity and painted the newsletter CTA paper-on-lime at 1.96:1 - and the
 * hover rule made it lime-on-lime, which is invisible.
 */
.site-footer a:not(.button) { color: var(--tn-paper); text-decoration: none; }
.site-footer a:not(.button):hover, .site-footer a:not(.button):focus-visible { color: var(--tn-lime); text-decoration: underline; text-underline-offset: .25rem; }
.footer-column a { font-size: .93rem; }
.site-footer p { color: var(--tn-mute-dark); }

.site-footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.75rem; padding-bottom: 1.75rem;
  border-top: 1px solid var(--tn-ink-line);
}
.site-footer__contact { display: grid; gap: .3rem; font-size: .93rem; }
.site-footer__social { display: flex; align-items: center; gap: 1rem; }
.site-footer__social a { display: inline-grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid var(--tn-ink-line); border-radius: 50%; }
.site-footer__social a:hover { border-color: var(--tn-lime); }
.site-footer__social svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.site-footer__partner {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem; border: 1px solid var(--tn-ink-line); border-radius: .5rem;
  color: var(--tn-mute-dark); font-family: var(--tn-font-mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.site-footer__partner strong { display: block; color: var(--tn-paper); font-size: .72rem; }

.site-footer__legal {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.25rem; padding-bottom: 1.5rem;
  border-top: 1px solid var(--tn-ink-line);
  color: var(--tn-mute-dark); font-size: .84rem;
}
.site-footer__legal-links { display: inline-flex; flex-wrap: wrap; gap: 1.1rem; }
.site-footer__privacy-choice {
  padding: 0; border: 0; color: inherit; background: transparent; font: inherit;
  text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.site-footer__privacy-choice:hover { color: var(--tn-paper); }
.site-footer__privacy-choice:focus-visible { outline: 2px solid var(--tn-lime); outline-offset: 3px; }

/* Legacy footer nav fallback, retained for the seeded WordPress menu. */
.footer-navigation__menu { display: grid; gap: .55rem; padding: 0; margin: 0; list-style: none; }

/* ==========================================================================
   16b. Ambient motion and filtering
   ========================================================================== */

/* The constellation field behind the dark bands (.hero__field, injected by
   constellation.js for [data-constellation="ambient"] hosts) needs the same
   positioned-ancestor / stacking setup the old .ambient-canvas used. */
.section--dark, .section--ink { position: relative; }
.section--dark > .section__inner, .section--ink > .section__inner { position: relative; z-index: 1; }

.stat__value { font-variant-numeric: tabular-nums; }

/* Archive filter chips. */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  width: min(100%, var(--tn-content-width));
  margin: 0 auto 1.75rem;
}
.filter-chip {
  padding: .5rem .9rem;
  border: 1px solid var(--tn-line-cool); border-radius: 2rem;
  background: var(--tn-white);
  color: var(--tn-deep);
  font-family: var(--tn-font-body); font-size: .86rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.filter-chip:hover { border-color: var(--tn-sky); background: var(--tn-sky-wash); }
.filter-chip[aria-pressed="true"] {
  color: var(--tn-white); border-color: var(--tn-deep); background: var(--tn-deep);
}
.filter-bar__status {
  margin: 0 0 0 auto;
  color: var(--tn-mute);
  font-family: var(--tn-font-mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Cross-document page transitions where the browser supports them. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: tn-fade-out 180ms ease both; }
  ::view-transition-new(root) { animation: tn-fade-in 260ms ease both; }
}

@keyframes tn-fade-out { to { opacity: 0; } }
@keyframes tn-fade-in { from { opacity: 0; transform: translateY(.6rem); } }

/* ==========================================================================
   16c. Booking dialog

   The scheduler runs inside our own frame rather than a third-party tab, so the
   booking step still feels like part of the site. Height is generous because the
   scheduler needs room for a month grid, a time list and a form; the aim is that
   nothing inside it has to scroll on a laptop.
   ========================================================================== */

.booking {
  width: min(94vw, 62rem);
  max-width: none;
  max-height: min(94vh, 58rem);
  padding: 0;
  border: 0;
  border-radius: var(--tn-radius-lg);
  background: var(--tn-paper);
  box-shadow: 0 2rem 5rem rgba(6, 20, 29, .38);
  overflow: hidden;
}
.booking::backdrop {
  background: rgba(6, 20, 29, .72);
  backdrop-filter: blur(.3rem);
}
/* Flex, not grid. With explicit grid rows, hiding the status line left the frame
   auto-placed into an auto-sized row, where it collapsed to the iframe's default
   150px. A flex column does not care how many children are present. */
.booking__panel {
  display: flex;
  flex-direction: column;
  height: min(94vh, 58rem);
}
.booking__head, .booking__status { flex: 0 0 auto; }
.booking__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem clamp(1.25rem, 3vw, 2rem) 1.1rem;
  border-bottom: 1px solid var(--tn-line);
}
.booking__label {
  margin: 0 0 .3rem;
  color: var(--tn-deep);
  font-family: var(--tn-font-mono); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.booking__title { margin: 0; max-width: none; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.booking__close {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--tn-line); border-radius: 50%;
  color: var(--tn-ink); background: var(--tn-white);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.booking__close:hover, .booking__close:focus-visible { border-color: var(--tn-deep); background: var(--tn-steel); }
.booking__close svg { width: 1rem; height: 1rem; }

.booking__status {
  margin: 0;
  padding: .8rem clamp(1.25rem, 3vw, 2rem);
  color: var(--tn-mute);
  font-family: var(--tn-font-mono); font-size: .7rem;
  letter-spacing: .08em; text-transform: uppercase;
}

/* The iframe fills this row exactly. The row is the only flexible one in the
   panel, and the panel has a definite height, so the frame gets a definite height
   too and the scheduler scrolls internally only when it genuinely needs to. */
.booking__host { position: relative; flex: 1 1 auto; min-height: 0; }
.booking__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}
.booking__host[data-ready="true"] .booking__frame { opacity: 1; }

/* Stop the page behind the dialog scrolling on browsers that allow it. */
.has-booking-open body, html.has-booking-open { overflow: hidden; }

@media (max-width: 48rem) {
  .booking { width: 100vw; max-height: 100vh; border-radius: 0; }
  .booking__panel { height: 100vh; }
  .booking__head { padding: 1rem 1rem .85rem; }
}

/* ==========================================================================
   16d. Personal Booking preview

   This route is a deliberately quiet experiment: TruNova owns the invitation,
   pacing and frame around the calendar while Microsoft owns the booking flow
   inside it. The frame is a card, not a full-bleed vendor takeover.
   ========================================================================== */

.personal-booking-page { background: var(--tn-paper); }
.personal-booking-hero {
  position: relative;
  overflow: hidden;
  color: var(--tn-paper);
  background:
    radial-gradient(70% 120% at 88% 12%, rgba(39, 169, 225, .28), transparent 62%),
    radial-gradient(45% 85% at 16% 100%, rgba(141, 198, 63, .11), transparent 68%),
    var(--tn-ink);
}
.personal-booking-hero::after {
  position: absolute;
  right: -12rem;
  bottom: -17rem;
  width: 42rem;
  height: 42rem;
  content: '';
  border: 1px solid rgba(39, 169, 225, .23);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem rgba(39, 169, 225, .035), 0 0 0 7rem rgba(141, 198, 63, .025);
  transform: rotate(-18deg);
}
.personal-booking-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 8vw, 8rem);
  min-height: clamp(27rem, 42vw, 36rem);
  padding-top: calc(var(--tn-header-height) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.personal-booking-hero__copy { max-width: 50rem; }
.personal-booking-hero .section-label { color: var(--tn-sky); }
.personal-booking-hero h1 {
  max-width: none;
  margin-bottom: 1.35rem;
  font-size: clamp(3.2rem, 6.2vw, 6rem);
  line-height: .95;
}
.personal-booking-hero .lede { max-width: 37rem; margin-bottom: 0; }
.personal-booking-hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tn-ink-line);
  color: var(--tn-mute-dark);
  font-family: var(--tn-font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.personal-booking-hero__notes span { display: inline-flex; align-items: baseline; gap: .35rem; }
.personal-booking-hero__notes strong { color: var(--tn-paper); font-weight: 700; letter-spacing: 0; }
.personal-booking-hero__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(10rem, 18vw, 15rem);
  height: clamp(10rem, 18vw, 15rem);
  color: var(--tn-paper);
}
.personal-booking-hero__orbit {
  position: absolute;
  border: 1px solid rgba(183, 198, 206, .38);
  border-radius: 50%;
}
.personal-booking-hero__orbit--outer { inset: 0; border-top-color: var(--tn-sky); transform: rotate(25deg); }
.personal-booking-hero__orbit--inner { inset: 19%; border-right-color: var(--tn-lime); transform: rotate(-35deg); }
.personal-booking-hero__star {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--tn-lime);
  box-shadow: 0 0 1.1rem rgba(141, 198, 63, .75);
  transform: translateX(3.1rem);
}
.personal-booking-hero__mark-label {
  position: absolute;
  color: var(--tn-mute-dark);
  font-family: var(--tn-font-mono);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}

.personal-booking-stage { padding-top: clamp(3.5rem, 7vw, 6rem); }
.personal-booking-stage__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, .6fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-bottom: 2rem;
}
.personal-booking-stage__intro .section-label { margin-bottom: .7rem; }
.personal-booking-stage__intro h2 { margin-bottom: 0; }
.personal-booking-stage__intro > p { max-width: 31rem; margin: 0 0 .25rem; color: var(--tn-mute); }
.personal-booking-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.personal-booking-option {
  position: relative;
  display: flex;
  min-height: 21rem;
  flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius-lg);
  color: var(--tn-paper);
  background: var(--tn-ink);
  box-shadow: 0 1.5rem 4rem rgba(10, 31, 44, .12);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.personal-booking-option::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 14rem;
  height: 14rem;
  border: 1px solid rgba(183, 198, 206, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 1.2rem rgba(183, 198, 206, .05), 0 0 0 2.4rem rgba(183, 198, 206, .04);
  content: "";
}
.personal-booking-option:hover,
.personal-booking-option:focus-visible {
  border-color: var(--tn-sky);
  color: var(--tn-paper);
  box-shadow: 0 1.2rem 2.5rem rgba(10, 31, 44, .2);
  transform: translateY(-.25rem);
}
.personal-booking-option--long { background: var(--tn-deep); }
.personal-booking-option__duration {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2rem;
  padding: .3rem .7rem;
  border: 1px solid rgba(141, 198, 63, .55);
  border-radius: 999px;
  color: var(--tn-lime);
  font-family: var(--tn-font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.personal-booking-option h3 {
  position: relative;
  z-index: 1;
  max-width: none;
  margin-top: 2.7rem;
  color: var(--tn-paper);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}
.personal-booking-option p {
  position: relative;
  z-index: 1;
  max-width: 31ch;
  margin-bottom: 2rem;
  color: var(--tn-mute-dark);
  line-height: 1.5;
}
.personal-booking-option__action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  margin-top: auto;
  color: var(--tn-paper);
  font-weight: 700;
}
.personal-booking-option__action span { color: var(--tn-lime); font-size: 1.1rem; }
.personal-booking-handoff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-top: 1.35rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--tn-line);
  border-bottom: 1px solid var(--tn-line);
}
.personal-booking-handoff__mark {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border-radius: 50%;
  color: var(--tn-ink);
  background: var(--tn-lime);
  font-size: 1.25rem;
  font-weight: 700;
}
.personal-booking-handoff p { margin: 0; color: var(--tn-mute); font-size: .9rem; line-height: 1.45; }
.personal-booking-handoff__label {
  margin-bottom: .2rem !important;
  color: var(--tn-ink) !important;
  font-family: var(--tn-font-mono);
  font-size: .67rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.personal-booking-handoff .text-link { margin-top: 0; white-space: nowrap; }
.personal-booking-stage__footnote {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  color: var(--tn-mute);
  font-family: var(--tn-font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.personal-booking-stage__footnote p { margin: 0; }
.personal-booking-stage__rule { width: 2.5rem; height: 1px; background: var(--tn-lime-deep); }

@media (prefers-reduced-motion: no-preference) {
  .personal-booking-hero__orbit--outer { animation: tn-orbit-spin 72s linear infinite; }
  .personal-booking-hero__orbit--inner { animation: tn-orbit-spin 48s linear infinite reverse; }
  .personal-booking-hero__star { animation: tn-orbit-dot 48s linear infinite; }
}

@media (max-width: 48rem) {
  .personal-booking-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .personal-booking-hero__mark { justify-self: start; width: 8.5rem; height: 8.5rem; }
  .personal-booking-hero__star { transform: translateX(2.5rem); }
  .personal-booking-stage__intro { grid-template-columns: 1fr; gap: 1rem; }
  .personal-booking-options { grid-template-columns: 1fr; }
  .personal-booking-option { min-height: 18rem; }
  .personal-booking-handoff { grid-template-columns: auto minmax(0, 1fr); }
  .personal-booking-handoff .text-link { grid-column: 2; }
}

/* ==========================================================================
   Events
   ========================================================================== */

.events-page { background: var(--tn-paper); }
.events-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--tn-header-height) + clamp(2.2rem, 5vw, 4rem)) 1.5rem clamp(2.2rem, 5vw, 4rem);
  background: var(--tn-bone);
  border-bottom: 1px solid var(--tn-line);
}
.events-hero::after {
  position: absolute; inset: 0; content: '';
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 56%);
  pointer-events: none;
}
.events-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem); gap: 2rem 3rem; align-items: end; }
.events-hero h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 4.7rem); }
.events-hero h1 span { color: var(--tn-lime-deep); }
.events-hero .lede { max-width: 35rem; margin-top: .9rem; }
.events-search { display: flex; gap: .5rem; align-items: stretch; }
.events-search input[type='search'] { min-width: 0; flex: 1; padding: .72rem .9rem; border: 1px solid var(--tn-line-cool); border-radius: .5rem; color: var(--tn-ink); background: var(--tn-white); font: inherit; }
.events-search .button { white-space: nowrap; }
.events-controls { background: var(--tn-white); border-bottom: 1px solid var(--tn-line); }
.events-controls > .section__inner { display: grid; gap: .8rem; padding-top: 1rem; padding-bottom: 1rem; }
.events-controls__top { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.events-switch { display: inline-flex; padding: .2rem; border: 1px solid var(--tn-line-cool); border-radius: .5rem; background: var(--tn-paper); }
.events-switch a { padding: .4rem .8rem; border-radius: .32rem; color: var(--tn-mute); font-size: .88rem; font-weight: 600; text-decoration: none; }
.events-switch a.is-current { color: var(--tn-paper); background: var(--tn-ink); }
.events-controls__subscribe { margin-left: auto; font-size: .88rem; }
.events-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.events-filters__label { margin-right: .2rem; color: var(--tn-mute); font: 700 .66rem/1.2 var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.filter-chip { display: inline-flex; align-items: center; min-height: 2.45rem; padding: .45rem .85rem; border: 1px solid var(--tn-line-cool); border-radius: 2rem; color: var(--tn-deep); background: var(--tn-white); font-size: .86rem; font-weight: 600; text-decoration: none; }
.filter-chip.is-current, .filter-chip:hover, .filter-chip:focus-visible { color: var(--tn-white); border-color: var(--tn-deep); background: var(--tn-deep); }
.events-filters select, .events-results select { min-height: 2.45rem; padding: .45rem .75rem; border: 1px solid var(--tn-line-cool); border-radius: .5rem; color: var(--tn-ink); background: var(--tn-white); font: 600 .86rem var(--tn-font-body); }
.events-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--tn-mute); font-size: .86rem; }
.events-active-filters a, .events-active-filters > span { padding: .25rem .55rem; border: 1px solid var(--tn-line-cool); border-radius: .3rem; background: var(--tn-paper); }
.events-active-filters > span:first-child { padding-left: 0; border: 0; background: transparent; font: 700 .66rem var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.events-active-filters a:last-child { border: 0; color: var(--tn-deep); background: transparent; font-weight: 700; }
.events-results { padding-top: clamp(2rem, 4vw, 3.2rem); padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.events-results__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.events-results__heading > label { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; color: var(--tn-mute); font: 700 .66rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.events-results__heading select { margin-left: .2rem; font-family: var(--tn-font-body); letter-spacing: normal; text-transform: none; }
.event-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 13rem; gap: 1.6rem; padding: 1.7rem 0; border-top: 1px solid var(--tn-line); }
.event-row__date, .event-single__date { display: grid; align-content: start; justify-items: center; gap: .08rem; padding: .72rem .35rem; border-top: 3px solid var(--event-format-color, var(--tn-sky)); color: var(--tn-ink); background: var(--tn-white); }
.event-row__month, .event-row__year, .event-row__weekday, .event-single__date span { color: var(--tn-mute); font: 700 .64rem/1.15 var(--tn-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.event-row__day, .event-single__date strong { font: 400 2.15rem/1 var(--tn-font-display); }
.event-row__content { min-width: 0; padding-left: 1.1rem; border-left: 4px solid var(--event-format-color, var(--tn-sky)); }
.event-row--cancelled, .event-row--postponed { opacity: .72; }
.event-row--cancelled .event-row__content, .event-row--postponed .event-row__content { border-left-color: var(--tn-mute); }
.event-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .55rem; }
.event-tag { padding: .22rem .52rem; border: 1px solid var(--tn-line-cool); border-radius: .3rem; color: var(--tn-mute); font: 700 .62rem/1.25 var(--tn-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.event-tag--format { color: var(--event-format-color, var(--tn-deep)); border-color: var(--event-format-color, var(--tn-deep)); }
.event-badge { padding: .22rem .58rem; border-radius: .3rem; color: var(--tn-ink); background: var(--tn-lime); font: 700 .62rem/1.25 var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-row__status, .event-single__status { margin: 0 0 .35rem; color: var(--tn-mute); font: 700 .7rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-single__past-notice { display: inline-flex; width: fit-content; margin-top: .85rem; padding: .38rem .68rem; border: 1px solid var(--tn-sky); border-radius: 999px; color: var(--tn-deep); background: var(--tn-sky-wash-deep); }
.event-row__title { margin: 0 0 .45rem; font: 600 clamp(1.15rem, 1.8vw, 1.4rem)/1.2 var(--tn-font-body); letter-spacing: -.015em; }
.event-row__title a, .event-next-up h2 a { color: var(--tn-ink); text-decoration: none; }
.event-row__title a:hover, .event-row__title a:focus-visible, .event-next-up h2 a:hover, .event-next-up h2 a:focus-visible { color: var(--tn-deep); text-decoration: underline; text-underline-offset: .12em; }
.event-row__summary { max-width: 44rem; margin: 0 0 .65rem; color: var(--tn-mute); font-size: .95rem; }
.event-row__meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; color: var(--tn-mute); font: .7rem/1.4 var(--tn-font-mono); letter-spacing: .04em; }
.event-row__actions { display: grid; align-content: start; gap: .6rem; }
.event-row__actions .button { min-height: 2.6rem; }
.event-row__details { justify-content: center; font-size: .88rem; }
.event-next-up { position: relative; display: grid; grid-template-columns: 7rem minmax(0, 1fr) 13rem; gap: 2rem; padding: 1.8rem; margin: 0 0 2.4rem; overflow: hidden; border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius); background: linear-gradient(155deg, var(--tn-white), var(--tn-sky-wash)); }
.event-next-up::before { position: absolute; inset: 0 0 auto; height: .3rem; content: ''; background: var(--event-format-color, var(--tn-sky)); }
.event-next-up__date { display: grid; align-content: start; justify-items: center; gap: .08rem; padding: .72rem .35rem; border-top: 3px solid var(--event-format-color, var(--tn-sky)); background: var(--tn-white); }
.event-next-up__date span { color: var(--tn-mute); font: 700 .64rem var(--tn-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.event-next-up__date strong { font: 400 2.15rem/1 var(--tn-font-display); }
.event-next-up__content h2 { margin: 0 0 .5rem; font: 600 clamp(1.35rem, 2.2vw, 1.7rem)/1.15 var(--tn-font-body); }
.event-next-up__content > p { max-width: 44rem; margin: 0 0 .65rem; color: var(--tn-mute); font-size: .95rem; }
.event-next-up__actions { display: flex; align-items: center; }
.event-next-up__actions .button { width: 100%; }
.events-load-more { display: flex; width: fit-content; margin: 2rem auto 0; }
.events-pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 1.8rem; }
.events-pagination a { display: inline-grid; place-items: center; min-width: 2.4rem; min-height: 2.4rem; padding: .4rem; border: 1px solid var(--tn-line-cool); border-radius: .4rem; color: var(--tn-deep); font-weight: 700; text-decoration: none; }
.events-pagination a[aria-current='page'] { color: var(--tn-white); background: var(--tn-deep); }
.events-calendar__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin: 1.5rem 0; }
.events-calendar__nav strong { font: 400 1.8rem var(--tn-font-display); }
.events-calendar__nav .events-calendar__month-link { min-height: 2.8rem; padding: .62rem .9rem; }
.events-calendar__nav .events-calendar__month-link:first-child { justify-self: start; }
.events-calendar__nav .events-calendar__month-link:last-child { justify-self: end; }
.events-calendar-scroll { max-width: 100%; }
.events-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.events-calendar caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.events-calendar th { padding: .65rem .55rem; color: var(--tn-mute); border-bottom: 1px solid var(--tn-line); font: 700 .65rem var(--tn-font-mono); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.events-calendar__day { height: 8.8rem; padding: .55rem; border-right: 1px solid var(--tn-line); border-bottom: 1px solid var(--tn-line); vertical-align: top; }
.events-calendar__day--muted { color: var(--tn-mute-dark); background: var(--tn-steel); }
.events-calendar__number { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-bottom: .35rem; font-weight: 700; }
.events-calendar__events { display: grid; gap: .3rem; }
.events-calendar__event { display: grid; gap: .12rem; padding: .35rem .4rem; border-left: 3px solid var(--event-format-color, var(--tn-sky)); border-radius: .2rem; color: var(--tn-ink); background: var(--tn-white); font-size: .72rem; line-height: 1.2; text-decoration: none; }
.events-calendar__event > span:first-child { color: var(--event-format-color, var(--tn-deep)); font: 700 .58rem var(--tn-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.events-calendar__event > strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.events-calendar__event--range { border-top: 3px solid var(--event-format-color, var(--tn-sky)); border-left: 0; border-radius: 0; }
.events-calendar__event--range:not(.events-calendar__event--segment-start) { margin-left: -.6rem; padding-left: .75rem; }
.events-calendar__event--range:not(.events-calendar__event--segment-end) { margin-right: -.6rem; padding-right: .75rem; }
.events-calendar__event--segment-start { border-left: 3px solid var(--event-format-color, var(--tn-sky)); border-radius: .25rem 0 0 .25rem; }
.events-calendar__event--segment-end { border-radius: 0 .25rem .25rem 0; }
.events-calendar__event--segment-start.events-calendar__event--segment-end { border-radius: .25rem; }
.events-calendar__event:hover,
.events-calendar__event:focus-visible { outline: 2px solid var(--event-format-color, var(--tn-sky)); outline-offset: 2px; }
.events-calendar__preview { position: fixed; z-index: 1000; display: grid; visibility: hidden; width: min(22rem, calc(100vw - 1.5rem)); gap: .6rem; padding: 1rem 1.05rem; color: var(--tn-ink); background: var(--tn-white); border: 1px solid var(--tn-line-cool); border-top: 4px solid var(--event-format-color, var(--tn-sky)); border-radius: .55rem; box-shadow: 0 1rem 2.4rem rgba(8, 36, 54, .2); opacity: 0; pointer-events: none; transform: translateY(.3rem); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.events-calendar__event.is-preview-open .events-calendar__preview { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.events-calendar__preview-kicker { color: var(--event-format-color, var(--tn-deep)); font: 700 .67rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.events-calendar__preview-title { font: 600 1.05rem/1.25 var(--tn-font-body); white-space: normal; }
.events-calendar__preview-meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; color: var(--tn-mute); font: 600 .72rem/1.35 var(--tn-font-mono); }
.events-calendar__preview-meta > span { position: relative; }
.events-calendar__preview-meta > span + span::before { position: absolute; left: -.5rem; content: '·'; }
.events-calendar__preview-summary { color: var(--tn-mute); font: 400 .82rem/1.5 var(--tn-font-body); }
.events-calendar__preview-action { display: inline-flex; align-items: center; gap: .35rem; color: var(--tn-deep); font: 700 .76rem var(--tn-font-body); }
.events-calendar__preview-action svg { width: .85rem; height: .85rem; }
.events-calendar__legend { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin-top: 1.1rem; color: var(--tn-mute); font-size: .8rem; }
.events-calendar__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.events-calendar__legend i { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--event-format-color); }
@media (prefers-reduced-motion: reduce) {
  .events-calendar__preview { transition: none; }
}
.event-single__hero { border-bottom: 1px solid var(--tn-line-cool); background: var(--tn-sky-wash); }
.event-single__hero--in-person { background: var(--tn-lime-wash); }
/* The site header is sticky but removed from flow with a negative margin. Keep
   the first event link/title below it in both its full and compact states. */
.event-single__hero > .section__inner { padding-top: calc(var(--tn-header-height) + 1.6rem); padding-bottom: 2.6rem; }
.event-single__heading { display: grid; grid-template-columns: 7rem minmax(0, 46rem); gap: 2rem; align-items: start; }
.event-single__date { border-top-width: 4px; border-radius: .4rem; }
.event-single__copy h1 { margin: .15rem 0 .7rem; font-size: clamp(2.3rem, 5vw, 3.5rem); }
.event-single__copy .lede { font-size: 1.2rem; }
.event-single__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--tn-line-cool); }
.event-single__facts div { display: grid; gap: .15rem; }
.event-single__facts span, .event-register .section-label, .event-venue .section-label, .event-booking .section-label { color: var(--tn-mute); font: 700 .66rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-single__facts strong { font-size: .94rem; }
.event-single__body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3.4rem; align-items: start; padding-top: 3rem; padding-bottom: 3.5rem; }
.event-single__body--full { display: block; }
.event-single__content { min-width: 0; }
.event-single__aside { display: grid; gap: 1.2rem; position: sticky; top: 1.5rem; }
.event-section { margin-bottom: 2.6rem; }
.event-section__rule { height: 2px; margin-bottom: 1.2rem; background: var(--event-format-color, var(--tn-sky)); }
.event-section__rule--sky { background: var(--tn-sky); }
.event-section__rule--lime { background: var(--tn-lime); }
.event-section h2, .event-audience h2 { margin: 0 0 1.15rem; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.event-intro { max-width: var(--tn-narrow-width); font-size: 1.05rem; }
.event-intro > *:first-child { margin-top: 0; }
.event-how-it-runs--compact { padding: 1.2rem; margin-bottom: 0; border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius); background: var(--tn-sky-wash); }
.event-how-it-runs--compact .event-section__rule { margin-bottom: .8rem; }
.event-how-it-runs--compact h2 { margin-bottom: .55rem; font-size: 1.45rem; }
.event-how-it-runs--compact p { margin: 0; color: var(--tn-mute); font-size: .86rem; line-height: 1.5; }
.event-agenda, .event-travel { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.event-agenda > li, .event-travel > li { display: grid; grid-template-columns: minmax(5rem, 7rem) 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tn-line); }
.event-agenda > li > strong, .event-agenda > li > span, .event-travel > li > strong, .event-travel > li > span { min-width: 0; }
.event-agenda > li > strong { color: var(--tn-deep); font: 700 .68rem var(--tn-font-mono); }
.event-agenda > li > span, .event-travel > li > span { color: var(--tn-mute); }
.event-audience { padding: 1.8rem; margin-bottom: 2.6rem; border-radius: var(--tn-radius); background: var(--tn-lime-wash); }
.event-audience ul { display: grid; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.event-audience li { position: relative; padding-left: 1.25rem; }
.event-audience li::before { position: absolute; top: .7em; left: 0; width: .45rem; height: .45rem; border-radius: 50%; content: ''; background: var(--tn-lime-deep); }
.event-people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.event-person { padding: 1.35rem; border: 1px solid var(--tn-line); border-radius: var(--tn-radius); background: var(--tn-white); }
.event-person h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.event-person__role { margin: 0 0 .7rem; color: var(--tn-deep); font: 700 .68rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.event-person__bio { color: var(--tn-mute); font-size: .93rem; }
.event-person__bio summary { display: list-item; cursor: pointer; list-style: none; }
.event-person__bio summary::-webkit-details-marker { display: none; }
.event-person__bio summary:focus-visible { border-radius: .25rem; outline: 3px solid color-mix(in srgb, var(--tn-sky) 45%, transparent); outline-offset: .3rem; }
.event-person__bio-preview { display: block; margin-bottom: .65rem; }
.event-person__bio-control { width: fit-content; color: var(--tn-deep); font-weight: 700; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.event-person__bio-less { display: none; }
.event-person__bio[open] .event-person__bio-preview, .event-person__bio[open] .event-person__bio-more { display: none; }
.event-person__bio[open] .event-person__bio-less { display: inline; }
.event-person__bio-full { margin-top: .8rem; }
.event-person__bio-full > *:first-child { margin-top: 0; }
.event-person__bio-full > *:last-child { margin-bottom: 0; }
.event-register { padding: 1.5rem; border-radius: var(--tn-radius); color: var(--tn-mute-dark); background: var(--tn-ink); }
.event-register .section-label { color: var(--tn-sky); }
.event-register h2 { margin: .2rem 0 .7rem; color: var(--tn-paper); font: 400 1.6rem/1.15 var(--tn-font-display); }
.event-register p { font-size: .9rem; }
.event-register .button { width: 100%; margin-top: .6rem; }
.event-register--muted { background: var(--tn-deep); }
.event-venue, .event-booking { padding: 1.4rem; border: 1px solid var(--tn-line); border-radius: var(--tn-radius); background: var(--tn-white); }
.event-venue h2 { margin: .25rem 0 .6rem; font-size: 1.3rem; }
.event-venue p { color: var(--tn-mute); font-size: .9rem; }
.event-venue__links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.event-venue img { width: 100%; margin-top: 1rem; border-radius: .4rem; }
.event-booking .button { width: 100%; margin-top: .55rem; }
.events-related { padding: 2.5rem 1.5rem 3.2rem; border-top: 1px solid var(--tn-line); background: var(--tn-bone); }
.events-related__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.events-related__heading h2 { margin: 0; font-size: 1.8rem; }
.events-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.event-related-card { display: grid; gap: .6rem; padding: 1.35rem; border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius); color: var(--tn-ink); background: var(--tn-white); text-decoration: none; }
.event-related-card span { color: var(--tn-deep); font: 700 .66rem var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.event-related-card strong { font-size: 1.05rem; line-height: 1.25; }
.event-related-card small { color: var(--tn-mute); font: 700 .62rem/1.25 var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.event-related-card:hover strong, .event-related-card:focus-visible strong { text-decoration: underline; text-underline-offset: .12em; }
.events-live-region { min-height: 1.4em; margin-top: 1rem; color: var(--tn-mute); font: .72rem var(--tn-font-mono); }

@media (max-width: 64rem) {
  .event-row, .event-next-up { grid-template-columns: 5rem minmax(0, 1fr); }
  .event-row__actions, .event-next-up__actions { grid-column: 2; display: flex; flex-wrap: wrap; }
  .event-row__actions .button, .event-next-up__actions .button { width: auto; }
  .event-single__body { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; }
}
@media (max-width: 48rem) {
  .events-hero { padding-right: 1rem; padding-left: 1rem; }
  .events-hero__inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .events-controls__subscribe { margin-left: 0; }
  .events-results__heading { align-items: flex-start; flex-direction: column; }
  .events-results__heading > label { align-self: flex-end; margin-left: 0; }
  .event-row { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .9rem; padding: 1.25rem 0; }
  .event-row__content { padding-left: .8rem; }
  .event-row__actions, .event-next-up__actions { grid-column: 2; }
  .event-row__actions .button, .event-row__actions .text-link { width: 100%; }
  .event-next-up { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .9rem; padding: 1.2rem; }
  .event-next-up__actions .button { width: 100%; }
  .events-calendar-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
  .events-calendar__nav { grid-template-columns: 1fr 1fr; }
  .events-calendar__nav strong { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .events-calendar__nav .events-calendar__month-link { grid-row: 2; }
  .events-calendar { min-width: 42rem; }
  .events-calendar__day { height: 7.5rem; }
  .event-single__heading { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; }
  .event-single__hero > .section__inner { padding-top: calc(var(--tn-header-height) + 1.2rem); padding-bottom: 2rem; }
  .event-single__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-single__body { display: block; padding-top: 2rem; }
  .event-single__aside { position: static; margin-top: 2rem; }
  .event-people__grid, .events-related__grid { grid-template-columns: 1fr; }
  .events-related { padding-right: 1rem; padding-left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .events-page *, .event-single * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   The Nova Effect blog
   ========================================================================== */

.blog-page { color: var(--tn-ink); background: var(--tn-paper); }
.blog-hero { position: relative; overflow: hidden; color: var(--tn-paper); background: var(--tn-ink); }
.blog-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem); gap: 2rem; align-items: center; min-height: 24rem; padding-top: calc(var(--tn-header-height) + clamp(2.2rem, 5vw, 4rem)); padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.blog-hero .section-label, .blog-hero .tn-breadcrumb { color: var(--tn-sky); }
.blog-hero h1 { max-width: none; margin: 0; color: var(--tn-paper); font: 400 clamp(3rem, 7vw, 6rem)/.94 var(--tn-font-display); }
.blog-hero .lede { max-width: 34rem; margin: 1.1rem 0 0; color: var(--tn-mute-dark); }
.blog-hero__wave { position: absolute; right: -8rem; bottom: -1rem; width: min(56rem, 58vw); opacity: .7; }
.blog-filters { color: var(--tn-ink); border-bottom: 1px solid var(--tn-line); background: var(--tn-bone); }
.blog-filters > .section__inner { display: grid; gap: 1rem; padding-top: 1.15rem; padding-bottom: 1.15rem; }
.blog-filters__form { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; gap: .8rem 1.4rem; align-items: end; }
.blog-filters__search, .blog-filters__selects { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.blog-filters__search label, .blog-filters__selects > label { color: var(--tn-mute); font: 700 .66rem/1.2 var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blog-filters__search input, .blog-filters__selects select { min-height: 2.6rem; padding: .5rem .7rem; border: 1px solid var(--tn-line-cool); border-radius: .35rem; color: var(--tn-ink); background: var(--tn-white); font: .9rem var(--tn-font-body); }
.blog-filters__search input { min-width: 12rem; flex: 1; }
.blog-filters__selects select { min-width: 8rem; }
.blog-filters__group { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.blog-filters__label, .blog-filters__parent { color: var(--tn-mute); font: 700 .66rem/1.2 var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blog-filters__parent { padding-left: .7rem; color: var(--tn-deep); }
.blog-filter-chip { display: inline-flex; min-height: 2.3rem; align-items: center; padding: .4rem .72rem; border: 1px solid var(--tn-line-cool); border-radius: 2rem; color: var(--tn-deep); background: var(--tn-white); font-size: .82rem; font-weight: 600; text-decoration: none; }
.blog-filter-chip:hover, .blog-filter-chip:focus-visible, .blog-filter-chip.is-current { color: var(--tn-paper); border-color: var(--tn-deep); background: var(--tn-deep); }
.blog-active-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; color: var(--tn-mute); font-size: .82rem; }
.blog-active-filters > span:first-child { color: var(--tn-mute); font: 700 .66rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blog-active-filters a { padding: .28rem .5rem; border: 1px solid var(--tn-line-cool); border-radius: .25rem; color: var(--tn-ink); background: var(--tn-white); text-decoration: none; }
.blog-active-filters .blog-active-filters__clear { border-color: transparent; color: var(--tn-deep); background: transparent; font-weight: 700; }
.blog-results { padding: clamp(2rem, 4vw, 3.8rem) 1.5rem clamp(2.8rem, 6vw, 5rem); }
.blog-results > .section__inner { max-width: var(--tn-content-width); margin: 0 auto; }
.blog-results__heading, .blog-related__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.blog-results__heading p, .blog-related__heading p { margin: 0; }
.blog-results__sort { color: var(--tn-mute); font: .7rem var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.blog-results__featured { margin-bottom: 2rem; }
.blog-featured { display: grid; grid-template-columns: minmax(13rem, 32%) minmax(0, 1fr); overflow: hidden; border-radius: var(--tn-radius); color: var(--tn-paper); background: var(--tn-deep); }
.blog-featured__image { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.blog-featured__body { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2.8rem); }
.blog-featured__body .section-label { margin: 0 0 .5rem; color: var(--tn-lime); }
.blog-featured__type { margin: 0 0 .35rem; color: var(--tn-mute-dark); font: 700 .68rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blog-featured h2 { margin: 0 0 .75rem; color: var(--tn-paper); font: 400 clamp(1.8rem, 3vw, 3rem)/1.05 var(--tn-font-display); }
.blog-featured h2 a { color: inherit; text-decoration: none; }
.blog-featured h2 a:hover, .blog-featured h2 a:focus-visible { text-decoration: underline; text-underline-offset: .12em; }
.blog-featured__body > p:not(.section-label):not(.blog-featured__type) { max-width: 42rem; margin: 0 0 1.2rem; color: var(--tn-mute-dark); }
.text-link--on-dark { color: var(--tn-paper); }
.blog-list { border-top: 1px solid var(--tn-line); }
.blog-row { position: relative; display: grid; grid-template-columns: .38rem 2.8rem minmax(0, 1fr); gap: 1rem; padding: 1.65rem 0; border-bottom: 1px solid var(--tn-line); }
.blog-row__rail { width: .38rem; min-height: 100%; background: var(--tn-sky); }
.blog-row__rail--thought-leadership { background: var(--tn-deep); }
.blog-row__rail--field-notes { background: var(--tn-lime); }
.blog-row__rail--product-update { background: var(--tn-lime-deep); }
.blog-row__index { padding-top: .05rem; color: var(--tn-mute); font: 700 .72rem var(--tn-font-mono); letter-spacing: .06em; }
.blog-row__body { min-width: 0; }
.blog-row__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 .45rem; color: var(--tn-mute); font: .68rem/1.4 var(--tn-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.blog-row__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.blog-tag { color: var(--tn-deep); font: 700 .63rem/1.25 var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.blog-tag + .blog-tag::before { margin-right: .35rem; color: var(--tn-line-cool); content: '/'; }
.blog-row__title { margin: 0 0 .35rem; font: 600 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--tn-font-body); }
.blog-row__title a { color: var(--tn-ink); text-decoration: none; }
.blog-row__title a:hover, .blog-row__title a:focus-visible { color: var(--tn-deep); text-decoration: underline; text-underline-offset: .12em; }
.blog-row__excerpt { max-width: 48rem; margin: 0 0 .45rem; color: var(--tn-mute); font-size: .94rem; }
.blog-row__author { margin: 0; color: var(--tn-mute); font-size: .8rem; }
.blog-empty { padding: 3rem 0; text-align: center; }
.blog-empty h2 { margin-top: 0; }
.blog-load-more { display: block; min-width: 10rem; margin: 1.8rem auto 0; }
.blog-live-region { min-height: 1.3em; margin: .65rem 0 0; color: var(--tn-mute); font: .7rem var(--tn-font-mono); text-align: center; }
.blog-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 1.5rem; }
.blog-pagination a { display: inline-grid; min-width: 2.4rem; min-height: 2.4rem; place-items: center; padding: .35rem; border: 1px solid var(--tn-line-cool); border-radius: .3rem; color: var(--tn-deep); font-weight: 700; text-decoration: none; }
.blog-pagination a:hover, .blog-pagination a:focus-visible, .blog-pagination a[aria-current='page'] { color: var(--tn-paper); border-color: var(--tn-deep); background: var(--tn-deep); }
.blog-newsletter { color: var(--tn-paper); background: var(--tn-ink); }
.blog-newsletter--paper { color: var(--tn-ink); background: var(--tn-bone); }
.blog-newsletter > .section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 2rem; align-items: end; padding-top: clamp(2.4rem, 5vw, 4rem); padding-bottom: clamp(2.4rem, 5vw, 4rem); }
.blog-newsletter .section-label { color: var(--tn-sky); }
.blog-newsletter h2 { margin: 0 0 .5rem; color: inherit; font: 400 clamp(1.9rem, 4vw, 3.4rem)/1 var(--tn-font-display); }
.blog-newsletter p:not(.section-label) { max-width: 34rem; margin: 0; color: var(--tn-mute-dark); }
.blog-newsletter--paper p:not(.section-label) { color: var(--tn-mute); }
.blog-newsletter__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.blog-newsletter__form label { grid-column: 1 / -1; color: var(--tn-mute-dark); font: 700 .66rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blog-newsletter--paper .blog-newsletter__form label { color: var(--tn-mute); }
.blog-newsletter__form input { min-width: 0; min-height: 2.7rem; padding: .5rem .7rem; border: 1px solid var(--tn-line-cool); border-radius: .3rem; color: var(--tn-ink); background: var(--tn-white); font: .9rem var(--tn-font-body); }
.blog-newsletter__note { grid-column: 1 / -1; font-size: .78rem; }
.button.is-disabled { color: var(--tn-mute); border-color: var(--tn-line-cool); background: var(--tn-line-cool); box-shadow: none; cursor: not-allowed; }
.button.is-disabled:hover, .button.is-disabled:focus-visible { color: var(--tn-mute); background: var(--tn-line-cool); box-shadow: none; }

.blog-single { color: var(--tn-ink); background: var(--tn-paper); }
.blog-single__hero { color: var(--tn-paper); background: var(--tn-deep); }
.blog-single__hero > .section__inner { max-width: 60rem; padding-top: calc(var(--tn-header-height) + 1.8rem); padding-bottom: 3.3rem; }
.blog-single__hero .section-label, .blog-single__hero .tn-breadcrumb { color: var(--tn-sky); }
.blog-single__hero h1 { max-width: none; margin: .25rem 0 .9rem; color: var(--tn-paper); font: 400 clamp(2.7rem, 6vw, 5.4rem)/.96 var(--tn-font-display); }
.blog-single__standfirst { max-width: 44rem; margin: 0 0 1.2rem; color: var(--tn-mute-dark); font-size: 1.15rem; }
.blog-single__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0; color: var(--tn-mute-dark); font: .68rem var(--tn-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.blog-single__image-wrap { background: var(--tn-deep); }
.blog-single__image-wrap > .section__inner { max-width: 76rem; }
.blog-single__image { display: block; width: 100%; max-height: 38rem; object-fit: cover; }
.blog-single__body { padding: clamp(2.4rem, 5vw, 5rem) 1.5rem; }
.blog-single__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: clamp(2rem, 7vw, 6rem); align-items: start; max-width: 76rem; margin: 0 auto; }
.blog-single__content { position: relative; min-width: 0; }
.blog-article-content { max-width: 48rem; margin-left: 6rem; }
.blog-article-content h2 { padding-top: 1rem; border-top: 2px solid var(--tn-sky); }
/*
 * Images and layout arranged in the layout editor. Floated images wrap text
 * at desktop widths and stack at phone widths; wide and full alignments fill
 * the article column because the sidebar sits beside it.
 */
.blog-article-content::after { display: table; clear: both; content: ''; }
.blog-article-content img { max-width: 100%; height: auto; }
.blog-article-content figure { margin-right: 0; margin-left: 0; }
.blog-article-content .wp-block-image img, .blog-article-content .wp-block-gallery img, .blog-article-content .wp-block-media-text__media img { border-radius: var(--tn-radius); }
.blog-article-content figcaption, .blog-article-content .wp-element-caption { margin-top: .6rem; color: var(--tn-mute); font-size: .88rem; line-height: 1.45; }
.blog-article-content h2, .blog-article-content h3 { clear: both; }
.blog-article-content .alignleft { float: left; max-width: 50%; margin: .35rem 1.75rem 1rem 0; }
.blog-article-content .alignright { float: right; max-width: 50%; margin: .35rem 0 1rem 1.75rem; }
.blog-article-content .alignleft + *, .blog-article-content .alignright + * { margin-top: 0; }
.blog-article-content .aligncenter { margin-right: auto; margin-left: auto; text-align: center; }
.blog-article-content .aligncenter img { margin-inline: auto; }
.blog-article-content .alignwide, .blog-article-content .alignfull { width: 100%; max-width: none; }
.blog-article-content .wp-block-columns { gap: 1.75rem; margin-bottom: 0; }
.blog-article-content .wp-block-column > * + * { margin-top: 1rem; }
.blog-article-content .wp-block-media-text { gap: 1.5rem; }
.blog-article-content .wp-block-media-text__content { padding: 0; }
.blog-article-content .wp-block-gallery { gap: .75rem; }
.blog-share { position: absolute; top: 0; left: 0; display: grid; gap: .45rem; transform: none; padding-right: 1.4rem; color: var(--tn-mute); font: 700 .63rem var(--tn-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.blog-share a, .blog-share button { color: var(--tn-deep); border: 0; background: transparent; font: inherit; text-align: left; text-decoration: none; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.blog-share a:hover, .blog-share a:focus-visible, .blog-share button:hover, .blog-share button:focus-visible { text-decoration: underline; text-underline-offset: .12em; }
.blog-single__aside { display: grid; gap: 1.4rem; position: sticky; top: 1.5rem; }
.blog-single__cta { padding: 1.5rem; color: var(--tn-paper); background: var(--tn-ink); }
.blog-single__cta .section-label { color: var(--tn-sky); }
.blog-single__cta h2 { margin: .3rem 0 1rem; color: var(--tn-paper); font: 400 1.65rem/1.08 var(--tn-font-display); }
.blog-single__cta .button { color: var(--tn-ink); background: var(--tn-paper); }
.blog-toc, .blog-author { padding-top: 1.1rem; border-top: 1px solid var(--tn-line); }
.blog-toc .section-label, .blog-author .section-label { margin: 0 0 .65rem; color: var(--tn-mute); }
.blog-toc ol { display: grid; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.blog-toc a { color: var(--tn-deep); font-size: .86rem; text-decoration: none; }
.blog-toc a:hover, .blog-toc a:focus-visible { text-decoration: underline; text-underline-offset: .12em; }
.blog-author h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.blog-author p:not(.section-label) { margin: 0 0 .45rem; color: var(--tn-mute); font-size: .85rem; }
.blog-author a { color: var(--tn-deep); font-size: .85rem; }
.blog-related { padding: 2.7rem 1.5rem 3.5rem; background: var(--tn-bone); }
.blog-related > .section__inner { max-width: 76rem; margin: 0 auto; }
.blog-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.blog-related__card { display: grid; gap: .45rem; padding: 1.3rem; border: 1px solid var(--tn-line-cool); border-radius: var(--tn-radius); color: var(--tn-ink); background: var(--tn-white); text-decoration: none; }
.blog-related__card span, .blog-related__card small { color: var(--tn-mute); font: .66rem var(--tn-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.blog-related__card strong { font-size: 1.1rem; line-height: 1.25; }
.blog-related__card:hover strong, .blog-related__card:focus-visible strong { color: var(--tn-deep); text-decoration: underline; text-underline-offset: .12em; }
.is-style-ink-pull-quote { padding: 1.3rem 1.5rem; border-left: .45rem solid var(--tn-lime); color: var(--tn-paper); background: var(--tn-ink); }
.is-style-lime-checklist { padding: 1.2rem 1.4rem 1.2rem 2.5rem; background: var(--tn-lime-wash); }
.blog-page a:focus-visible, .blog-single a:focus-visible, .blog-page button:focus-visible, .blog-single button:focus-visible { outline: 3px solid var(--tn-sky); outline-offset: .2rem; }

/*
 * Author profile (single-tn_person.php). A human-editorial subject (see
 * docs/interior-visual-language.md) gets a short, light interior hero -- the
 * same header-clearance pattern as .event-single__hero -- followed by the
 * person's articles in the shared .blog-results / .blog-list treatment.
 */
.person-page { background: var(--tn-paper); }
.person-hero { border-bottom: 1px solid var(--tn-line); background: var(--tn-bone); }
.person-hero > .section__inner { padding-top: calc(var(--tn-header-height) + 2.2rem); padding-bottom: 2.6rem; }
.person-hero h1 { margin: .2rem 0 .6rem; }
.person-hero__job { margin: 0 0 1rem; color: var(--tn-deep); font: 700 .82rem var(--tn-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.person-hero__bio { max-width: 38rem; margin: 0 0 1.1rem; color: var(--tn-mute); font-size: 1.05rem; line-height: 1.55; }
.person-hero .text-link { margin-top: .3rem; }

@media (max-width: 64rem) {
  .blog-filters__form { grid-template-columns: 1fr; }
  .blog-filters__selects { justify-content: flex-start; }
  .blog-article-content { margin-left: 1rem; }
  .blog-share { position: static; display: flex; flex-wrap: wrap; align-items: center; transform: none; padding: 0; margin-bottom: 1.25rem; }
  .blog-share > span:first-child { padding-right: .6rem; border-right: 1px solid var(--tn-line-cool); }
  .blog-share a + a, .blog-share a + button, .blog-share button + a { margin-left: .35rem; }
  .blog-share a + a::before, .blog-share a + button::before, .blog-share button + a::before { margin-right: .35rem; color: var(--tn-line-cool); content: '/'; }
}
@media (max-width: 48rem) {
  .blog-hero__inner { display: block; min-height: 0; padding-top: calc(var(--tn-header-height) + 1.2rem); padding-bottom: 3.2rem; }
  .blog-hero__wave { position: static; display: block; width: 100%; margin-top: 2rem; }
  .blog-filters, .blog-results, .blog-single__body, .blog-related { padding-right: 1rem; padding-left: 1rem; }
  .blog-filters__search input { min-width: 0; }
  .blog-filters__selects > label { margin-left: .25rem; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__image { min-height: 12rem; max-height: 16rem; }
  .blog-row { grid-template-columns: .32rem 2.2rem minmax(0, 1fr); gap: .7rem; padding: 1.25rem 0; }
  .blog-row__index { font-size: .64rem; }
  .blog-single__hero > .section__inner { padding-top: calc(var(--tn-header-height) + 1.2rem); padding-bottom: 2.5rem; }
  .blog-single__hero h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
  .blog-single__layout { display: block; }
  .blog-article-content { margin-left: 0; }
  .blog-article-content .alignleft, .blog-article-content .alignright { float: none; max-width: 100%; margin: 1.5rem 0; }
  .blog-single__aside { position: static; margin-top: 2.4rem; }
  .blog-newsletter > .section__inner { display: block; }
  .blog-newsletter__form { max-width: 32rem; margin-top: 1.5rem; }
  .blog-related__grid { grid-template-columns: 1fr; }
  .person-hero > .section__inner { padding-top: calc(var(--tn-header-height) + 1.4rem); padding-bottom: 2rem; }
}

/* ==========================================================================
   17. Motion
   ========================================================================== */

/* Content is visible by default. It is only hidden once the root class confirms
   the observer is running, so a JavaScript failure can never blank the page. */
.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1), transform 620ms cubic-bezier(.22, .61, .36, 1);
}
.js-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* ==========================================================================
   18. Responsive
   ========================================================================== */

@media (max-width: 72rem) {
  .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 68rem) {
  .site-navigation__menu { display: none; }
  .site-navigation__toggle { display: inline-flex; }
  /* A backdrop filter would contain the fixed drawer inside the header. */
  .site-header,
  .site-header.is-stuck { box-shadow: 0 1px 0 var(--tn-line); background: var(--tn-paper); backdrop-filter: none; }
  .site-header--over-dark:not(.is-stuck) .site-navigation__link,
  .site-header--over-dark:not(.is-stuck) .site-navigation__toggle { color: var(--tn-ink); }
  .site-header--over-dark:not(.is-stuck) .site-brand__logo--dark { opacity: 1; }
  .site-header--over-dark:not(.is-stuck) .site-brand__logo--light { opacity: 0; }

  /* Mobile drawer */
  .site-navigation__panel {
    position: fixed; z-index: 60; inset: var(--tn-header-height) 0 0;
    display: none; overflow-y: auto;
    padding: 1.25rem 1.5rem 3rem;
    background: var(--tn-paper);
    border-top: 1px solid var(--tn-line);
  }
  .site-navigation.is-open .site-navigation__panel { display: block; }
  .site-header.is-stuck .site-navigation__panel { top: 4.25rem; }
  .site-navigation__panel .site-navigation__menu { display: grid; gap: .25rem; }
  .site-navigation__panel .site-navigation__item { border-bottom: 1px solid var(--tn-line); }
  .site-navigation__panel .site-navigation__link { width: 100%; justify-content: space-between; padding: .95rem .25rem; font-size: 1.1rem; }
  .site-navigation__panel .mega {
    position: static; display: none; width: auto; max-width: none;
    padding: 0 0 1rem .25rem; margin: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .site-navigation__panel .site-navigation__item[data-open="true"] .mega { display: block; }
  .site-navigation__panel .mega__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .site-navigation__panel .mega__feature { display: none; }
  .site-navigation__panel > .site-header__cta { display: flex; margin-top: 1.5rem; }
  .site-navigation__panel .button { width: 100%; }
  .site-header__cta--desktop { display: none; }
}

@media (max-width: 64rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(10rem, .42fr); }
  .about-cta { grid-template-columns: 1fr; }
  .about-cta__aside { justify-items: start; }
  .visual-page__intro, .visual-panel { grid-template-columns: minmax(0, 1fr) minmax(9rem, .42fr); gap: 2rem; }
  .visual-doorway-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split__media { min-height: 16rem; }
  .quote-grid, .choice-grid, .proof-grid, .card-grid, .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadence__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beliefs { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-universal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-out__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cadence__row { grid-template-columns: minmax(7rem, .22fr) minmax(0, 1fr); }
  .cadence__note { grid-column: 2; }
}

@media (max-width: 48rem) {
  .site-header, .site-footer, .site-main > * { padding-right: 1rem; padding-left: 1rem; }
  :root { --tn-header-height: 5.5rem; }
  .site-brand__logo { width: 12rem; }
  .site-header.is-stuck .site-brand__logo { width: 9rem; }
  .industry-card { min-height: 0; }
  .site-footer__top, .site-footer__links { grid-template-columns: 1fr; }
  .site-footer__meta, .site-footer__legal { align-items: flex-start; flex-direction: column; }
  .hero__inner, .page-hero__inner, .section-heading, .split-callout, .choice-grid, .proof-grid,
  .breadth, .deal, .fit-grid, .fit-out__list, .plans, .plan-universal, .beliefs, .diagram__panels, .cadence__points, .quote-grid, .card-grid, .link-grid, .visual-page__intro, .visual-panel,
  .visual-track-grid, .visual-doorway-grid, .visual-doorway-grid--three, .visual-rich-section,
  .stat-pair { grid-template-columns: 1fr; }
  .hero__inner { gap: 2.2rem; padding-bottom: 3.5rem; }
  .hero__copy h1, .hero__copy .display, .page-hero__copy h1 { max-width: none; font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .hero__aside { align-self: start; max-width: none; }
  h2 { max-width: none; }
  .section-heading { align-items: start; gap: 1rem; margin-bottom: 2rem; }
  .section-heading__aside { margin-bottom: 0; }
  .choice-card, .proof-card { min-height: auto; }
  .stats-grid, .stats-grid--two, .legacy-stats { grid-template-columns: 1fr; }
  .content-area table { display: block; max-width: 100%; overflow-x: auto; }
  .content-area table thead, .content-area table tbody { display: table; width: max-content; min-width: 100%; }
  .content-area .table-scroll table { display: table; min-width: 42rem; }
  .structured-entry__registration { padding: .75rem; margin-right: -.5rem; margin-left: -.5rem; }
  .visual-page__intro-mark { justify-items: start; text-align: left; }
  .visual-page__intro--dark, .visual-panel { padding: 1.5rem; }
  .visual-panel__signal { justify-items: start; max-width: none; text-align: left; }
  .visual-placeholder__orbit { position: relative; right: auto; bottom: auto; width: 10rem; height: 10rem; margin: 2rem auto -3rem; }
  .visual-track-card, .visual-doorway-card { min-height: 15rem; }
  .visual-rich-section { gap: 1.25rem; }
  .visual-rich-section__index { grid-template-columns: auto 1fr; align-items: center; }
  .visual-rich-section__index span { font-size: 3rem; }
  .visual-page--start-my-implementation { gap: .8rem; }
  .visual-page--start-my-implementation > .visual-rich-section {
    min-height: min(30rem, calc(100vh - 7rem));
    padding: 1.35rem;
  }
  .visual-page--start-my-implementation > .visual-rich-section:nth-of-type(2) {
    --visual-stack-top: calc(var(--tn-header-height) + .8rem);
  }
  .visual-page--start-my-implementation > .visual-rich-section:nth-of-type(3) {
    --visual-stack-top: calc(var(--tn-header-height) + 1.85rem);
  }
  .visual-page--start-my-implementation > .visual-rich-section:nth-of-type(4) {
    --visual-stack-top: calc(var(--tn-header-height) + 2.9rem);
  }
  .visual-page--start-my-implementation > .visual-rich-section:nth-of-type(5) {
    --visual-stack-top: calc(var(--tn-header-height) + 3.95rem);
  }
  .visual-page--start-my-implementation > .visual-rich-section:nth-of-type(6) {
    --visual-stack-top: calc(var(--tn-header-height) + 5rem);
  }
  .timeline__item { grid-template-columns: 1fr; gap: .35rem; }
  .cadence__row { grid-template-columns: 1fr; gap: .75rem; }
  .deal > .deal__side + .deal__side::before { display: none; }
  .deal > .deal__side + .deal__side { padding-top: 1.5rem; border-top: 1px solid var(--tn-line-cool); }
}

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

/* Analytics notice */

.trunova-analytics-notice {
  position: fixed;
  z-index: 80;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .35rem 1rem;
  width: min(27rem, calc(100vw - 2rem));
  padding: .65rem .8rem;
  border: 1px solid var(--tn-line);
  border-radius: .35rem;
  color: var(--tn-ink);
  background: var(--tn-white);
  box-shadow: 0 .7rem 1.75rem rgba(14, 24, 34, .16);
}
.trunova-analytics-notice__content { min-width: 0; }
.trunova-analytics-notice__title,
.trunova-analytics-notice__copy { margin: 0; }
.trunova-analytics-notice__title {
  color: var(--tn-deep);
  font-family: var(--tn-font-mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trunova-analytics-notice__copy { margin-top: .15rem; font-size: .74rem; line-height: 1.35; }
.trunova-analytics-notice__link { color: var(--tn-deep); text-decoration: underline; text-underline-offset: .15em; }
.trunova-analytics-notice__actions { display: flex; align-items: center; gap: .45rem; }
.trunova-analytics-notice__button {
  min-height: 2.15rem;
  padding: .4rem .7rem;
  color: var(--tn-paper);
  background: var(--tn-ink);
  white-space: nowrap;
  font-size: .78rem;
}
.trunova-analytics-notice__button:hover, .trunova-analytics-notice__button:focus-visible { color: var(--tn-paper); background: var(--tn-deep); }
.trunova-analytics-notice__decline {
  padding: .35rem .1rem;
  border: 0;
  color: var(--tn-deep);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  text-decoration: underline;
  text-underline-offset: .15em;
  cursor: pointer;
}
.trunova-analytics-notice__button:focus-visible,
.trunova-analytics-notice__decline:focus-visible,
.trunova-analytics-notice__link:focus-visible { outline: 2px solid var(--tn-lime); outline-offset: 3px; }

@media (max-width: 36rem) {
  .trunova-analytics-notice { right: .75rem; bottom: .75rem; grid-template-columns: 1fr; gap: .6rem; width: calc(100% - 1.5rem); }
  .trunova-analytics-notice__actions { justify-content: flex-end; }
}