/* ==========================================================================
   The Trestle Group — styles.css
   Editorial audit-firm aesthetic.
   Fraunces (display serif) + IBM Plex Sans (body) + IBM Plex Mono (data)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink-1);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors --------------------------------------------------------------- */
  --paper:           #F5F1E8;  /* warm off-white, the page background */
  --paper-strong:    #EFE9DC;  /* slightly darker cream for striped sections */
  --paper-soft:      #F9F6EF;  /* very light cream for subtle backgrounds */
  --surface:         #FFFFFF;  /* card surface */
  --ink-1:           #14181F;  /* primary text, near-black with slight blue */
  --ink-2:           #5B6573;  /* secondary text, mid-gray */
  --ink-3:           #A4ADBA;  /* muted text, tertiary */
  --accent:          #6B2126;  /* oxblood — used sparingly, the bold commit */
  --accent-hover:    #8B2C32;  /* slightly brighter oxblood for hover */
  --accent-soft:     #F2E4E5;  /* very pale oxblood tint for backgrounds */
  --border:          #E5E1D6;  /* default border, warm-toned */
  --border-strong:   #C9C2B4;  /* stronger border for emphasis */
  --data-positive:   #2C5F5D;  /* muted forest, used for success indicators */
  --shadow-soft:     0 1px 2px rgba(20, 24, 31, 0.04), 0 2px 8px rgba(20, 24, 31, 0.04);
  --shadow-strong:   0 4px 24px rgba(20, 24, 31, 0.08);

  /* Typography ---------------------------------------------------------- */
  --font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:       'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:         0.75rem;    /* 12 */
  --text-sm:         0.875rem;   /* 14 */
  --text-base:       1rem;       /* 16 */
  --text-md:         1.125rem;   /* 18 */
  --text-lg:         1.25rem;    /* 20 */
  --text-xl:         1.5rem;     /* 24 */
  --text-2xl:        2rem;       /* 32 */
  --text-3xl:        2.75rem;    /* 44 */
  --text-4xl:        3.5rem;     /* 56 */
  --text-5xl:        4.5rem;     /* 72 */

  /* Spacing ------------------------------------------------------------- */
  --space-1:         0.25rem;
  --space-2:         0.5rem;
  --space-3:         0.75rem;
  --space-4:         1rem;
  --space-5:         1.5rem;
  --space-6:         2rem;
  --space-7:         3rem;
  --space-8:         4rem;
  --space-9:         6rem;
  --space-10:        8rem;

  /* Layout -------------------------------------------------------------- */
  --container-max:   1240px;
  --container-pad:   1.5rem;
  --container-pad-lg: 2rem;
  --nav-height:      72px;
  --promo-height:    44px;

  /* Motion -------------------------------------------------------------- */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --transition:      180ms var(--ease);

  /* Radii --------------------------------------------------------------- */
  --radius-sm:       4px;
  --radius:          6px;
  --radius-lg:       10px;
}

/* --------------------------------------------------------------------------
   3. Typography classes
   -------------------------------------------------------------------------- */
.display-serif { font-family: var(--font-display); }
.body-sans     { font-family: var(--font-body); }
.mono          { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink-1);
}

h1 { font-size: var(--text-4xl); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--text-3xl); line-height: 1.12; letter-spacing: -0.02em; }
h3 { font-size: var(--text-2xl); line-height: 1.18; }
h4 { font-size: var(--text-xl); line-height: 1.25; }
h5 { font-size: var(--text-lg); line-height: 1.3; }
h6 { font-size: var(--text-md); line-height: 1.35; }

p { margin: 0; }

/* Italic in Fraunces is visually distinct; we lean on it for emphasis */
em, i { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lede {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.numeral {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container-narrow {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--space-9) 0;
}

.section-tight {
  padding: var(--space-7) 0;
}

.section-bordered {
  border-top: 1px solid var(--border);
}

.section-first {
  padding-top: var(--space-6);
}

.section-paper-strong {
  background-color: var(--paper-strong);
}

/* Vertical divider rule used between blocks where needed */
.rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

/* --------------------------------------------------------------------------
   5. Top promo strip
   -------------------------------------------------------------------------- */
.promo-strip {
  background-color: var(--ink-1);
  color: var(--paper);
  font-size: var(--text-sm);
  height: var(--promo-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
}

.promo-strip a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--container-pad);
  transition: opacity var(--transition);
}

.promo-strip a:hover { opacity: 0.85; }

.promo-strip .arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform var(--transition);
}

.promo-strip a:hover .arrow {
  transform: translateX(3px);
}

.promo-close {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--paper);
  opacity: 0.6;
  font-size: var(--text-base);
  padding: var(--space-2);
  line-height: 1;
}

.promo-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   6. Main navigation
   -------------------------------------------------------------------------- */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background-color var(--transition);
}

.nav-wrap.is-scrolled {
  border-bottom-color: var(--border);
  background-color: var(--paper);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.nav-logo svg { height: 28px; width: auto; }

.nav-logo-mark {
  font-style: italic;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  font-size: var(--text-sm);
  font-weight: 500;
}

.nav-link {
  color: var(--ink-1);
  transition: color var(--transition);
  position: relative;
  padding: var(--space-2) 0;
}

.nav-link:hover { color: var(--accent); }

.nav-link.has-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link.has-dropdown::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 2px;
  transition: transform var(--transition);
}

.nav-link.has-dropdown:hover::after { transform: rotate(-180deg); }

.nav-cta-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mega-menu (Services dropdown)
   Uses fixed positioning relative to viewport for bulletproof width.
   Does NOT depend on parent positioning chain. */
.has-dropdown-wrap {
  position: relative;
}

/* Invisible bridge to keep hover active when moving cursor toward the dropdown */
.has-dropdown-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
}
.has-dropdown-wrap:hover::after {
  pointer-events: auto;
}

.nav-mega {
  position: fixed;
  top: var(--nav-height);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1200px, calc(100vw - 48px));
  background: #FFFFFF;
  border: 1px solid #E5E1D6;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  padding: 40px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1001;
}

.has-dropdown-wrap:hover .nav-mega,
.has-dropdown-wrap:focus-within .nav-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The .container inside .nav-mega is redundant when nav-mega is fixed-width; neutralise it */
.nav-mega > .container {
  max-width: none;
  padding: 0;
  margin: 0;
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.nav-mega-item {
  border-left: 2px solid var(--border);
  padding-left: var(--space-5);
  transition: border-color var(--transition);
}

.nav-mega-item:hover { border-left-color: var(--accent); }

.nav-mega-item h4 {
  font-size: var(--text-md);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.nav-mega-item p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.nav-mega-link {
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-mega-link::after {
  content: '→';
  transition: transform var(--transition);
}

.nav-mega-link:hover::after { transform: translateX(3px); }

.nav-mobile-toggle {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
}

.nav-mobile-toggle span {
  position: absolute;
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--ink-1);
  left: 5px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-mobile-toggle span:nth-child(1) { top: 10px; }
.nav-mobile-toggle span:nth-child(2) { top: 16px; }
.nav-mobile-toggle span:nth-child(3) { top: 22px; }

.nav-mobile-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--ink-1);
  color: var(--paper);
}

.btn-primary:hover {
  background-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--ink-1);
}

.btn-secondary:hover {
  border-color: var(--ink-1);
  background-color: var(--paper-soft);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  padding: var(--space-2) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.btn-text:hover { border-bottom-color: var(--accent); }

.btn-text .arrow {
  transition: transform var(--transition);
}

.btn-text:hover .arrow { transform: translateX(3px); }

.btn-large {
  padding: 18px 32px;
  font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding: var(--space-9) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 920px;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-split .hero-inner {
  max-width: none;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

@media (max-width: 960px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .hero-visual svg {
    max-width: 320px;
  }
}

.hero-eyebrow {
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  display: inline-block;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.04;
  margin-bottom: var(--space-6);
  max-width: 18ch;
  letter-spacing: -0.025em;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

.hero .lede {
  margin-bottom: var(--space-7);
  max-width: 56ch;
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
  margin-bottom: var(--space-6);
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* Decorative background pattern for hero */
.hero-pattern {
  position: absolute;
  top: 0;
  right: -10%;
  width: 50%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   9. Social proof strip
   -------------------------------------------------------------------------- */
.social-proof {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.social-proof-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.social-proof-line {
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 50ch;
  line-height: 1.5;
}

.social-proof-credentials {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-1);
}

.social-proof-credentials span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-5);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   10. Section headers (used across pages)
   -------------------------------------------------------------------------- */
.section-header {
  margin-bottom: var(--space-7);
  max-width: 720px;
}

.section-header .kicker {
  margin-bottom: var(--space-3);
  display: block;
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--text-md);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
}

/* --------------------------------------------------------------------------
   11. Tabbed service navigator
   -------------------------------------------------------------------------- */
.tabs {
  position: relative;
}

.tab-strip {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-strip::-webkit-scrollbar { display: none; }

.tab-button {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  margin-bottom: -1px;
  position: relative;
}

.tab-button:hover { color: var(--ink-1); }

.tab-button.is-active {
  color: var(--ink-1);
  border-bottom-color: var(--accent);
}

.tab-button .tab-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-right: var(--space-3);
  letter-spacing: 0.04em;
}

.tab-panel {
  display: none;
  animation: tabFade 280ms var(--ease-out);
}

.tab-panel.is-active {
  display: block;
}

@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.tab-content-left h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
  line-height: 1.15;
}

.tab-content-left p {
  font-size: var(--text-md);
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  max-width: 50ch;
}

.tab-content-right {
  display: grid;
  gap: var(--space-4);
}

.tab-feature {
  padding: var(--space-5);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}

.tab-feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.tab-feature h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--ink-1);
}

.tab-feature p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Platform pitch (audit-grade by default)
   -------------------------------------------------------------------------- */
.platform-pitch {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}

.platform-pitch-left h2 {
  margin-bottom: var(--space-4);
}

.platform-pitch-left .lede {
  margin-bottom: var(--space-6);
}

.platform-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-7);
}

.platform-bullet {
  padding-left: var(--space-5);
  position: relative;
}

.platform-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--accent);
  border-bottom: none;
  border-right: none;
  transform: rotate(-45deg) translateY(-2px);
}

.platform-bullet h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.platform-bullet p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   13. Stat strip
   -------------------------------------------------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat {
  padding-right: var(--space-5);
  border-right: 1px solid var(--border);
}

.stat:last-child { border-right: none; }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
  color: var(--ink-1);
}

.stat-number-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.4;
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   14. Why-us pillars
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.pillar {
  padding: var(--space-7) var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
  position: relative;
}

.pillar:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.pillar-mark {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  display: block;
}

.pillar h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.pillar-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: var(--space-5);
}

.pillar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.pillar-list li {
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.pillar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 1px;
  background-color: var(--accent);
}

.pillar-list li strong {
  color: var(--ink-1);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   15. Case study cards
   -------------------------------------------------------------------------- */
.cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.case-card {
  padding: var(--space-7) var(--space-6);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.case-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.case-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.case-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  line-height: 1.2;
  flex-grow: 0;
}

.case-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   16. Methodology preview (Diligence Gate flow)
   -------------------------------------------------------------------------- */
.gate-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gate-step {
  background-color: var(--surface);
  padding: var(--space-6) var(--space-5);
  position: relative;
  transition: background-color var(--transition);
}

.gate-step:hover {
  background-color: var(--paper-soft);
}

.gate-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  display: block;
}

.gate-step h4 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.gate-step p {
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   17. Resources / insights cards
   -------------------------------------------------------------------------- */
.resources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.resource-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.resource-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.resource-cover {
  height: 200px;
  background-color: var(--paper-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.resource-cover svg {
  width: 70%;
  height: 70%;
}

.resource-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.resource-type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-3);
}

.resource-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}

.resource-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: var(--space-5);
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   18. Final CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background-color: var(--ink-1);
  color: var(--paper);
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}

.cta-band-inner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  color: var(--paper);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-5);
  line-height: 1.1;
}

.cta-band h2 em {
  font-style: italic;
  color: var(--accent);
}

.cta-band p {
  font-size: var(--text-md);
  color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: var(--space-7);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.cta-band .btn-primary {
  background-color: var(--paper);
  color: var(--ink-1);
}

.cta-band .btn-primary:hover {
  background-color: var(--accent);
  color: var(--paper);
}

.cta-band .btn-text {
  color: var(--paper);
  opacity: 0.85;
}

.cta-band .btn-text:hover {
  opacity: 1;
  border-bottom-color: var(--paper);
}

.cta-band-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Background decorative pattern for CTA band */
.cta-band-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--paper-strong);
  padding: var(--space-9) 0 var(--space-6);
  border-top: 1px solid var(--border);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

.footer-brand .nav-logo {
  margin-bottom: var(--space-4);
}

.footer-brand p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 32ch;
}

.footer-column h5,
.footer-column .footer-col-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

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

.footer-column a {
  font-size: var(--text-sm);
  color: var(--ink-1);
  transition: color var(--transition);
}

.footer-column a:hover { color: var(--accent); }

.footer-bottom {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.footer-credibility {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   20. Page-specific hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding: var(--space-9) 0 var(--space-8);
  border-bottom: 1px solid var(--border);
}

.page-hero-inner {
  max-width: 880px;
}

.page-hero .eyebrow {
  margin-bottom: var(--space-5);
  display: block;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: var(--space-6);
  line-height: 1.05;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.page-hero .lede {
  margin-bottom: var(--space-7);
  max-width: 56ch;
}

.page-hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   21. Generic content blocks for interior pages
   -------------------------------------------------------------------------- */
.content-block {
  margin-bottom: var(--space-9);
}

.content-block:last-child { margin-bottom: 0; }

.content-block h2 {
  margin-bottom: var(--space-5);
}

.content-block p {
  font-size: var(--text-md);
  color: var(--ink-1);
  line-height: 1.65;
  margin-bottom: var(--space-5);
  max-width: 68ch;
}

.content-block ul.standard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  max-width: 68ch;
}

.content-block ul.standard li {
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--text-md);
  color: var(--ink-1);
  line-height: 1.6;
}

.content-block ul.standard li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 1px;
  background-color: var(--accent);
}

/* Two-column content layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.two-col-aside {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-8);
}

.two-col-aside aside h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-3);
}

/* Process steps (numbered) */
.process-steps {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
}

.process-step:last-child {
  border-bottom: 1px solid var(--border);
}

.process-step-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  font-style: italic;
}

.process-step h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.process-step h3 .sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: block;
  margin-top: var(--space-2);
  font-weight: normal;
}

.process-step p {
  font-size: var(--text-md);
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.process-step p strong { color: var(--ink-1); font-weight: 600; }

/* Pull quote / honest-caveat block (Actions House borrow) */
.honest-note {
  background-color: var(--paper-strong);
  border-left: 3px solid var(--accent);
  padding: var(--space-6) var(--space-6);
  margin: var(--space-7) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 68ch;
}

.honest-note .label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
  display: block;
}

.honest-note p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--ink-1);
  line-height: 1.55;
  margin: 0;
}

/* Inline data box */
.data-box {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 4px 8px;
  background-color: var(--paper-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  color: var(--ink-1);
}

/* --------------------------------------------------------------------------
   22. Trust page principles
   -------------------------------------------------------------------------- */
.principles {
  display: grid;
  gap: var(--space-5);
}

.principle {
  padding: var(--space-7);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
}

.principle-number {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  font-style: italic;
}

.principle h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.principle p {
  font-size: var(--text-md);
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.principle p:last-child { margin-bottom: 0; }

.principle p strong { color: var(--ink-1); font-weight: 600; }

/* --------------------------------------------------------------------------
   23. Long-form article (insights essays)
   -------------------------------------------------------------------------- */
.article {
  padding: var(--space-9) 0;
}

.article-header {
  text-align: left;
  max-width: 760px;
  margin: 0 auto var(--space-9);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-5);
}

.article-meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-3);
  color: var(--ink-3);
}

.article-header h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: var(--space-5);
  letter-spacing: -0.025em;
}

.article-header .lede {
  font-size: var(--text-lg);
  line-height: 1.5;
}

.article-body {
  max-width: 680px;
  margin: 0 auto;
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--ink-1);
}

.article-body p {
  margin-bottom: var(--space-5);
  max-width: 65ch;
}

.article-body h2 {
  font-size: var(--text-2xl);
  margin: var(--space-8) 0 var(--space-5);
  letter-spacing: -0.015em;
}

.article-body h3 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  margin: var(--space-7) 0 var(--space-4);
  color: var(--ink-1);
}

.article-body ul, .article-body ol {
  margin: var(--space-5) 0;
  padding-left: var(--space-6);
}

.article-body ul li, .article-body ol li {
  margin-bottom: var(--space-3);
  line-height: 1.65;
}

.article-body ul li::marker { color: var(--accent); }
.article-body ol li::marker { color: var(--accent); font-family: var(--font-mono); }

.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0 var(--space-6);
  margin: var(--space-7) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink-1);
  line-height: 1.45;
}

.article-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--paper-strong);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.article-footer {
  max-width: 680px;
  margin: var(--space-9) auto 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   24. Forms (contact, assessment)
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--space-5);
  max-width: 560px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 12px 14px;
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-1);
  transition: border-color var(--transition);
  width: 100%;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

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

/* --------------------------------------------------------------------------
   25. Utility helpers
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-mono   { font-family: var(--font-mono); }
.text-display { font-family: var(--font-display); }
.text-sm     { font-size: var(--text-sm); }
.text-md     { font-size: var(--text-md); }
.text-ink-2  { color: var(--ink-2); }
.italic      { font-style: italic; }
.accent      { color: var(--accent); }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

.mb-3 { margin-bottom: var(--space-3); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-7 { margin-bottom: var(--space-7); }

.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }

/* --------------------------------------------------------------------------
   26. Responsive breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --space-9: 5rem;
    --space-10: 6rem;
  }

  .platform-pitch { grid-template-columns: 1fr; }
  .platform-bullets { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav-mobile-toggle + .btn-primary { display: none; }

  .nav-links.is-mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--space-6) var(--container-pad);
    gap: var(--space-5);
    align-items: flex-start;
    box-shadow: var(--shadow-soft);
  }

  .tab-content { grid-template-columns: 1fr; gap: var(--space-6); }
  .pillars { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
  .resources { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .gate-flow { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col, .two-col-aside { grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 1fr; gap: var(--space-3); }
  .principle { grid-template-columns: 1fr; gap: var(--space-4); }
  .form-row { grid-template-columns: 1fr; }
  .social-proof-grid { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

@media (max-width: 560px) {
  /* Visual fix V1: prevent logo text from wrapping; tighten CTA padding;
     ensure flex-shrink behavior so the three header items can coexist. */
  .nav-logo span { display: none; }  /* Triangle mark alone on smallest screens */
  .nav-cta-wrap .btn-primary { padding: 8px 14px; font-size: var(--text-sm); white-space: nowrap; }
  .nav { gap: var(--space-3); }
  .nav-cta-wrap { gap: var(--space-3); }
}

@media (max-width: 560px) {
  :root {
    --container-pad: 1rem;
    --space-9: 4rem;
    --space-7: 2rem;
    --promo-height: 36px;
  }

  .promo-strip { font-size: var(--text-xs); }

  .nav-logo svg { height: 24px; }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  .gate-flow { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; gap: var(--space-5); }
  .stat { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: var(--space-5); }
  .stat:last-child { border-bottom: none; padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   27. Accessibility utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background-color: var(--ink-1);
  color: var(--paper);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 100;
  transition: top 150ms var(--ease-out);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Better focus states across the board */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   28. Page load animation (subtle stagger on hero)
   -------------------------------------------------------------------------- */
.fade-in-up {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 700ms var(--ease-out) forwards;
}

.fade-in-up-1 { animation-delay: 100ms; }
.fade-in-up-2 { animation-delay: 220ms; }
.fade-in-up-3 { animation-delay: 340ms; }
.fade-in-up-4 { animation-delay: 460ms; }

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   29. Accordion tiles (click-to-expand, used on Our Approach)
   -------------------------------------------------------------------------- */
.tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tile {
  background-color: var(--surface);
  padding: var(--space-6);
  cursor: pointer;
  transition: background-color var(--transition);
  position: relative;
}

.tile:hover {
  background-color: var(--paper-soft);
}

.tile.is-active {
  background-color: var(--accent-soft);
}

.tile-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  display: block;
  margin-bottom: var(--space-3);
}

.tile.is-active .tile-num {
  color: var(--accent);
}

.tile-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.tile-subtitle {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.tile-expand-icon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 20px;
  height: 20px;
  color: var(--ink-3);
  transition: transform var(--transition), color var(--transition);
}

.tile.is-active .tile-expand-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.tile-panel {
  display: none;
  grid-column: 1 / -1;
  background-color: var(--surface);
  padding: var(--space-7) var(--space-6);
  border-top: 1px solid var(--border);
  animation: panelSlide 300ms var(--ease-out);
}

.tile-panel.is-open {
  display: block;
}

@keyframes panelSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tile-panel-inner {
  max-width: 760px;
}

.tile-panel-inner p {
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.tile-panel-inner p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .tile-row {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   30. Case study cards with hover overlay
   -------------------------------------------------------------------------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
}

.case-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface);
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.case-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.case-card-header {
  padding: var(--space-6);
  flex-grow: 1;
}

.case-card-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background-color: var(--paper-strong);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.case-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: var(--ink-1);
}

.case-card-result {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.case-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 24, 31, 0.92), rgba(20, 24, 31, 0.7));
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
  color: var(--paper);
}

.case-card:hover .case-card-overlay {
  opacity: 1;
}

.case-card-overlay p {
  font-size: var(--text-md);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.case-card-overlay .case-card-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.case-card-overlay .case-card-link .arrow {
  transition: transform var(--transition);
}

.case-card:hover .case-card-overlay .case-card-link .arrow {
  transform: translateX(4px);
}

/* Touch devices: always show a read-more link in the card footer */
.case-card-footer {
  padding: 0 var(--space-6) var(--space-6);
}

@media (hover: none) {
  .case-card-overlay {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   30b. Image-backed case study hero cards (editorial style)
   -------------------------------------------------------------------------- */
.case-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-5);
}

.case-card-hero {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  transition: transform var(--transition);
}

.case-card-hero:hover {
  transform: translateY(-3px);
}

.case-card-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: auto;  /* pin to top regardless of title length; title+subtitle stay anchored at bottom via parent's justify-content:flex-end */
}

.case-card-hero-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);  /* preserve the original visual gap to the title below */
}

.case-card-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: var(--space-2);
}

.case-card-hero-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}

.case-card-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  z-index: 1;
  transition: opacity 250ms var(--ease-out);
}

.case-card-hero:hover .case-card-hero-content {
  opacity: 0;
}

.case-card-hero-hover {
  position: absolute;
  inset: 0;
  background: #14181F;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 250ms var(--ease-out);
  z-index: 2;
}

.case-card-hero:hover .case-card-hero-hover {
  opacity: 1;
}

.case-card-hero-hover p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-4);
}

.case-card-hero-hover .case-card-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

@media (hover: none) {
  .case-card-hero-hover { display: none; }
}

@media (max-width: 760px) {
  .case-hero-grid {
    grid-template-columns: 1fr;
  }
  .case-card-hero {
    aspect-ratio: 16 / 10;
  }
}

/* --------------------------------------------------------------------------
   31. Engagement timeline (horizontal)
   -------------------------------------------------------------------------- */
.timeline {
  display: flex;
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: var(--space-6) 0;
}

.timeline-step {
  flex: 1;
  background-color: var(--surface);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

.timeline-step-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--space-2);
}

.timeline-step-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  display: block;
  margin-bottom: var(--space-1);
}

.timeline-step-timing {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .timeline {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   32. Credibility strip
   -------------------------------------------------------------------------- */
.cred-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cred-strip span[aria-hidden] {
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   33. Service tiles (homepage)
   -------------------------------------------------------------------------- */
.svc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-7) 0;
}

.svc-tile {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  transition: border-color var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.svc-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.svc-tile h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.svc-tile p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.5;
  flex-grow: 1;
}

.svc-tile .btn-text {
  margin-top: auto;
}

@media (max-width: 760px) {
  .svc-tiles {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   34. Principle cards (Our Approach - How we build)
   -------------------------------------------------------------------------- */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.principle-card {
  padding: var(--space-6);
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
  box-shadow: 0 2px 12px rgba(20, 24, 31, 0.04);
}

.principle-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--space-3);
}

.principle-card p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.55;
}

.principle-card .standard-ref {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   34b. Ethics callout tile (homepage)
   -------------------------------------------------------------------------- */
.ethics-callout {
  display: block;
  margin-top: var(--space-5);
  padding: var(--space-6) var(--space-7);
  background: var(--ink-1);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--transition);
}

.ethics-callout:hover {
  background: #1E2228;
}

.ethics-callout h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.ethics-callout p {
  font-size: var(--text-sm);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 72ch;
  margin-bottom: var(--space-4);
}

.ethics-callout .btn-text {
  color: #FFFFFF;
}

.ethics-callout .btn-text .arrow {
  color: #FFFFFF;
}

.ethics-callout:hover .btn-text {
  color: var(--accent-soft);
}

@media (max-width: 760px) {
  .ethics-callout {
    padding: var(--space-5) var(--space-5);
  }
}

/* --------------------------------------------------------------------------
   35. Comparison table
   -------------------------------------------------------------------------- */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  margin: var(--space-6) 0;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 16px rgba(20,24,31,0.05);
  overflow: hidden;
}

.compare-table th,
.compare-table td {
  padding: 20px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.compare-table thead th {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink-2);
  padding: 24px 24px 16px;
  border-bottom: 2px solid var(--border);
  background: var(--surface);
}

.compare-table thead th:first-child {
  color: transparent;
  font-size: 0;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr:hover {
  background-color: var(--paper-soft, #F9F6EF);
}

.compare-table .row-label {
  font-weight: 600;
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  white-space: nowrap;
  min-width: 140px;
  background: var(--surface);
}

.compare-table .highlight-col {
  background-color: rgba(107, 33, 38, 0.04);
  font-weight: 500;
  color: var(--ink-1);
  border-left: 2px solid var(--accent);
}

.compare-table thead .highlight-col {
  color: var(--accent);
  font-weight: 600;
  background-color: rgba(107, 33, 38, 0.06);
  border-left: 2px solid var(--accent);
}

.compare-table .table-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .compare-table {
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
  }
  .compare-table th,
  .compare-table td {
    padding: 14px 12px;
  }
  .compare-table .row-label {
    white-space: normal;
    min-width: 100px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visual fix V3: scroll affordance on the comparison table at mobile widths.
   The table is already wrapped in overflow-x:auto; we add a gradient fade
   on the right edge so users know there is more content to scroll. */
.compare-table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, rgba(245, 241, 232, 0), rgba(245, 241, 232, 0.95));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (max-width: 760px) {
  .compare-table-scroll::after { opacity: 1; }
}

/* V3 extension: prevent column headers from wrapping awkwardly on mobile;
   each data column gets a sensible min-width so users scroll horizontally
   to see well-laid-out columns rather than crushed text. */
@media (max-width: 760px) {
  .compare-table th,
  .compare-table td { min-width: 130px; }
  .compare-table thead th { white-space: nowrap; }
  .compare-table .row-label { min-width: 110px; }
}