:root {
      --ink: #495867;
      --steel: #577399;
      --mist: #bdd5ea;
      --ghost: #f7f7ff;
      --coral: #fe5f55;
      --white: #ffffff;
      --gray-100: #f5f5f7;
      --gray-200: #e5e5ea;
      --gray-400: #8e8e93;
      --gray-500: #636366;
      --void: #1a2330;
      --radius: 12px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    ::selection {
      background: rgba(254, 95, 85, 0.2);
      color: inherit;
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--white);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* Logo */
    .logotype {
      display: inline-flex;
      align-items: baseline;
      gap: 0.04em;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      text-decoration: none;
    }
    .logotype svg {
      height: 0.72em;
      width: 2.2em;
      display: block;
    }

    /* Nav */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--gray-200);
    }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }
    .nav-links {
      display: flex;
      gap: 2.5rem;
      align-items: center;
    }
    .nav-links a {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-500);
      text-decoration: none;
      transition: color 150ms ease;
    }
    .nav-links a:hover { color: var(--ink); }
    .nav-cta {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--coral);
      text-decoration: none;
      border: 1.5px solid var(--coral);
      padding: 0.5rem 1.25rem;
      border-radius: var(--radius);
      transition: all 150ms ease;
    }
    .nav-cta:hover {
      background: var(--coral);
      color: var(--white);
    }
    .menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
    }
    .nav-links.mobile-open {
      display: flex;
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--gray-200);
      padding: 0.75rem 1.5rem 1.25rem;
      z-index: 99;
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    }
    .nav-links.mobile-open a {
      padding: 0.875rem 0;
      font-size: 1rem;
      font-weight: 500;
      color: var(--ink);
      border-bottom: none;
    }
    .nav-links.mobile-open a:last-child {
      border-bottom: none;
    }
    .nav-links.mobile-open .nav-cta {
      margin-top: 0.5rem;
      padding: 0.75rem 1.25rem;
      text-align: center;
      background: var(--coral);
      color: var(--white);
      border: none;
      border-radius: var(--radius);
    }

    /* Hero */
    .hero {
      position: relative;
      min-height: 80vh;
      display: flex;
      align-items: center;
      background: var(--void);
      overflow: hidden;
    }
    .hero-ascii {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.06;
      pointer-events: none;
      width: 60vw;
      max-width: 560px;
    }
    .hero-ascii img {
      display: block;
      width: 100%;
      height: auto;
    }
    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: 0.12;
    }
    .hero-grid svg {
      width: 100%;
      height: 100%;
    }
    .hero-noise {
      position: absolute;
      inset: 0;
      opacity: 0.03;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 128px 128px;
    }
    .hero-glow {
      position: absolute;
      left: 10%;
      top: 35%;
      width: 500px;
      height: 300px;
      background: radial-gradient(ellipse, rgba(254,95,85,0.1) 0%, transparent 70%);
      pointer-events: none;
      filter: blur(40px);
    }
    .scroll-indicator {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      animation: bounce 2s infinite;
    }
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
      40% { transform: translateX(-50%) translateY(8px); }
      60% { transform: translateX(-50%) translateY(4px); }
    }
    .hero-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 25% 50%, transparent 0%, rgba(21,27,36,0.5) 100%);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: 9rem 2rem 6rem;
      width: 100%;
    }
    .hero-eyebrow {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #e0ecf5;
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .cursor {
      display: inline-block;
      width: 7px;
      height: 1.1em;
      background: var(--coral);
      animation: blink 1s step-end infinite;
      vertical-align: text-bottom;
    }
    @keyframes blink {
      50% { opacity: 0; }
    }
    .hero h1 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(2.75rem, 6.5vw, 5.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.0;
      color: var(--white);
      max-width: 800px;
      text-wrap: pretty;
      text-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 80px rgba(26,35,48,0.4);
    }
    .hero h1 em {
      font-style: normal;
      color: var(--coral);
    }
    .hero-sub {
      font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
      color: #d4e4f0;
      max-width: 520px;
      margin-top: 2rem;
      line-height: 1.65;
      text-wrap: pretty;
      text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .hero-actions {
      display: flex;
      gap: 1rem;
      margin-top: 3rem;
      flex-wrap: wrap;
    }
    .btn-primary {
      font-family: 'Inter', sans-serif;
      font-size: 0.9375rem;
      font-weight: 600;
      background: var(--coral);
      color: var(--white);
      border: none;
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: all 150ms ease;
    }
    .btn-primary:hover {
      background: #e8544b;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(254,95,85,0.25);
    }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary:focus-visible {
      outline: 2px solid var(--coral);
      outline-offset: 3px;
    }
    .contact-alt {
      text-align: center;
      margin-top: 1rem;
      font-size: 0.9375rem;
    }
    .contact-alt a {
      color: var(--coral);
      text-decoration: none;
      font-weight: 600;
    }
    .contact-alt a:hover { text-decoration: underline; }
    .contact-alt a:focus-visible {
      outline: 2px solid var(--coral);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .btn-secondary {
      font-family: 'Inter', sans-serif;
      font-size: 0.9375rem;
      font-weight: 600;
      background: transparent;
      color: var(--white);
      border: 1.5px solid rgba(189,213,234,0.3);
      padding: 0.875rem 1.75rem;
      border-radius: var(--radius);
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: all 150ms ease;
    }
    .btn-secondary:hover {
      border-color: var(--mist);
      background: rgba(189,213,234,0.06);
    }
    .btn-secondary:focus-visible {
      outline: 2px solid var(--mist);
      outline-offset: 3px;
    }
    /* Light sections: the dark-hero white-on-transparent treatment reads as
       washed out, so the light variant is ink on white with a gray border. */
    .section-light .btn-secondary,
    .section-ghost .btn-secondary,
    .contact-section .btn-secondary {
      color: var(--ink);
      background: var(--white);
      border-color: var(--gray-300);
    }
    .section-light .btn-secondary:hover,
    .section-ghost .btn-secondary:hover,
    .contact-section .btn-secondary:hover {
      border-color: var(--coral);
      background: var(--ghost);
    }
    .section-light .btn-secondary:focus-visible,
    .section-ghost .btn-secondary:focus-visible,
    .contact-section .btn-secondary:focus-visible {
      outline-color: var(--coral);
    }

    /* Sections */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .section {
      padding: 7rem 0;
    }
    .section-light {
      background: var(--white);
    }
    .section-ghost {
      background: var(--ghost);
      border-top: 1px solid var(--gray-200);
      border-bottom: 1px solid var(--gray-200);
    }

    h2 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(1.875rem, 3.2vw, 2.75rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 1rem;
      text-wrap: pretty;
    }
    .section-lead {
      font-size: 1.0625rem;
      color: var(--gray-500);
      max-width: 520px;
      margin-bottom: 3.5rem;
      line-height: 1.6;
      text-wrap: pretty;
    }

    /* Process */
    .process-flow {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 0.75rem;
      max-width: 1080px;
      margin: 0 auto;
    }
    .process-step {
      flex: 1 1 0;
      border-radius: var(--radius);
      padding: 1.5rem 1.25rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 12px 24px rgba(73, 88, 103, 0.12);
    }
    .process-step h3 {
      margin: 0 0 0.5rem;
      font-size: 1.0625rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .process-step p {
      margin: 0;
      font-size: 0.9375rem;
      line-height: 1.5;
    }
    .step-discover { background: var(--coral); color: var(--white); }
    .step-customize { background: var(--steel); color: var(--white); }
    .step-train { background: var(--mist); color: var(--ink); }
    .step-support { background: var(--ink); color: var(--white); }
    .process-arrow {
      align-self: center;
      flex-shrink: 0;
      color: var(--ink);
      display: flex;
      align-items: center;
    }
    @media (max-width: 700px) {
      .process-flow {
        flex-direction: column;
        max-width: 420px;
        gap: 0.25rem;
      }
      .process-arrow svg {
        transform: rotate(90deg);
      }
    }

    /* Philosophy */
    .beliefs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
    }
    .belief {
      position: relative;
      padding-top: 0.5rem;
    }
    .belief-num {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 4.5rem;
      font-weight: 700;
      color: #f0f0f4;
      line-height: 1;
      position: absolute;
      top: -0.75rem;
      left: -0.25rem;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }
    .belief h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--ink);
      margin: 0 0 0.625rem;
      letter-spacing: -0.01em;
      line-height: 1.3;
      min-height: 2.6em;
      position: relative;
      z-index: 1;
    }
    .belief p {
      font-size: 0.9375rem;
      color: var(--gray-500);
      line-height: 1.65;
      margin: 0;
      position: relative;
      z-index: 1;
    }
    /* Services */
    .services {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--gray-200);
      border: 1px solid var(--gray-200);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .service-card {
      background: var(--white);
      padding: 2.5rem;
      transition: all 200ms ease;
      position: relative;
    }
    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--coral);
      transform: scaleX(0);
      transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .service-card:hover::before {
      transform: scaleX(1);
    }
    .service-card:hover {
      background: var(--ghost);
    }
    .service-tag {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--coral);
      margin-bottom: 0.875rem;
    }
    .service-card h3 {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 1.375rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 0.625rem;
      letter-spacing: -0.01em;
    }
    .service-card p {
      font-size: 0.9375rem;
      color: var(--gray-500);
      line-height: 1.65;
    }

    /* Contact */
    .contact-section {
      text-align: center;
    }
    .contact-section h2 {
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .contact-section .section-lead {
      margin-left: auto;
      margin-right: auto;
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--gray-200);
      padding: 2.5rem 0;
    }
    .footer-logo {
      display: block;
      width: 140px;
      height: auto;
      opacity: 0.85;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-inner .copyright {
      font-size: 0.8125rem;
      color: var(--gray-400);
    }
    .footer-inner a {
      font-size: 0.8125rem;
      color: var(--gray-500);
      text-decoration: none;
      font-weight: 500;
      transition: color 150ms ease;
    }
    .footer-inner a:hover { color: var(--ink); }
    .footer-nav {
      max-width: 1200px;
      margin: 0 auto 1.75rem;
      padding: 0 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem 4rem;
    }
    .footer-col {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }
    .footer-heading {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: 0.25rem;
    }
    .footer-col a {
      font-size: 0.8125rem;
      color: var(--gray-500);
      text-decoration: none;
      transition: color 150ms ease;
    }
    .footer-col a:hover { color: var(--ink); }
    .nav-links a[aria-current="page"] {
      color: var(--ink);
      font-weight: 600;
    }

    /* Entrance animations */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-in {
      animation: fadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      opacity: 0;
    }
    .delay-1 { animation-delay: 100ms; }
    .delay-2 { animation-delay: 200ms; }
    .delay-3 { animation-delay: 300ms; }
    .delay-4 { animation-delay: 400ms; }

    @media (prefers-reduced-motion: reduce) {
      .animate-in { animation: none; opacity: 1; }
      .cursor { animation: none; }
      html { scroll-behavior: auto; }
    }

    /* Responsive */
    /* Tablets: the four track labels plus the CTA no longer fit on one
       line, so the hamburger menu takes over below 1024px. */
    @media (max-width: 1023px) {
      .nav-links { display: none; }
      .menu-toggle { display: block; }
    }

    @media (max-width: 767px) {
      .hero-inner { padding: 6rem 1.5rem 4rem; }
      .hero-ascii { display: none; }
      .hero-glow { display: none; }
      .section { padding: 4.5rem 0; }
      .container { padding: 0 1.5rem; }
      .beliefs { grid-template-columns: 1fr; gap: 2.5rem; }
      .belief-num { font-size: 3.5rem; top: -0.5rem; }
      .services { grid-template-columns: 1fr; }
      .footer-inner { flex-direction: column; text-align: center; }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      .beliefs { grid-template-columns: 1fr; gap: 2.5rem; }
      .belief-num { font-size: 3rem; top: -0.5rem; }
      .hero-ascii { width: 50vw; opacity: 0.03; }
    }

    /* ============================================================
       Marketing page components (services, about)
       Extracted from the services template so every marketing page
       shares one stylesheet: lead and note text, section copy, tables,
       cards, the syllabus gate form, the compact hero, and the tabs.
       ============================================================ */
  /* Palette aliases used by document-page components ported below */
  :root {
    --gray-300: #d1d1d6;
    --gray-600: #48484a;
    --blue: #bdd5ea;
    --bg: #f7f7ff;
    --track-hero-bg: #577399;
  }

  /* Lead paragraph */
  .lead {
    font-size: 1.0625rem;
    color: var(--gray-500);
    line-height: 1.65;
  }

  .note {
    font-size: 0.875rem;
    color: var(--gray-400);
    font-style: italic;
  }

  /* Section body copy */
  .section p {
    color: var(--gray-500);
    line-height: 1.7;
    max-width: 46rem;
  }

  .section ul,
  .section ol {
    color: var(--gray-500);
    line-height: 1.7;
    padding-left: 1.25rem;
    margin: 0.75rem 0 1.25rem;
  }

  .section li { margin-bottom: 0.375rem; }
  .section li::marker { color: var(--coral); }
  .section strong { color: var(--ink); }
  .section h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--ink);
    font-size: 1.0625rem;
    margin: 1.5rem 0 0.5rem;
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.9375rem;
    background: var(--white);
  }

  thead { background: var(--gray-100); }

  th {
    font-family: 'Space Grotesk', sans-serif;
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-weight: 600;
    color: var(--gray-500);
    border-bottom: 2px solid var(--gray-200);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: top;
    color: var(--gray-600);
  }

  tr:last-child td { border-bottom: 2px solid var(--gray-200); }

  .packages-table td:first-child {
    white-space: nowrap;
    font-weight: 600;
    color: var(--ink);
  }

  /* Comparison table */
  .comparison-table th:first-child,
  .comparison-table td:first-child { width: 45%; }
  .comparison-table td { font-size: 0.875rem; line-height: 1.5; }

  /* Engagement cards */
  .track-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
  }

  .track-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 1.25rem;
    background: var(--white);
  }

  .track-card h3 {
    font-size: 1.0625rem;
    margin: 0 0 0.25rem;
  }

  .track-card .track-meta {
    font-size: 0.8125rem;
    color: var(--gray-400);
    margin-bottom: 0.75rem;
  }

  .track-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .track-card li {
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gray-600);
  }

  .track-card li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--coral);
  }

  /* Platform requirements box */
  .platform-requirements {
    background: var(--gray-100);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-top: 1.5rem;
  }

  .platform-requirements h3 {
    margin-top: 0;
    font-size: 1rem;
  }

  @media (max-width: 767px) {
    .track-grid { grid-template-columns: 1fr; }
  }

  /* Audience grid */
  .audience-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
  }

  .audience-list li {
    font-size: 0.9375rem;
    padding-left: 1.25rem;
    position: relative;
    color: var(--gray-600);
  }

  .audience-list li::before {
    content: "\2013";
    position: absolute;
    left: 0;
    color: var(--coral);
  }

  .audience-list strong {
    display: inline;
    font-size: 0.9375rem;
    color: var(--ink);
  }

  .audience-list li { margin-bottom: 0.5rem; }

  @media (max-width: 640px) {
    .audience-list { grid-template-columns: 1fr; }
  }

  /* CTA box */
  .cta-box {
    background: var(--bg);
    border: 1px solid var(--blue);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    text-align: center;
  }

  .cta-box p {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    color: var(--gray-600);
  }

  /* Syllabus gate form */
  .syllabus-gate {
    max-width: 28rem;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .syllabus-gate label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    margin-top: 0.5rem;
  }

  .syllabus-gate input[type="text"],
  .syllabus-gate input[type="email"] {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--white);
  }

  .syllabus-gate input[type="text"]:focus,
  .syllabus-gate input[type="email"]:focus {
    outline: 2px solid var(--coral);
    outline-offset: 1px;
    border-color: var(--coral);
  }

  .syllabus-gate .consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-top: 0.75rem;
  }

  .syllabus-gate .consent input { margin-top: 0.2rem; }

  /* Honeypot: off-screen, never display:none (bots detect it) */
  .syllabus-gate .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .cta-button {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--white);
    background: var(--coral);
    border: none;
    border-radius: var(--radius);
    padding: 0.8rem 1.5rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .cta-button:hover:not(:disabled) { background: #e54a40; }
  .cta-button:disabled { opacity: 0.6; cursor: default; }

  .form-status {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    min-height: 1.2em;
  }

  .form-status.success { color: #2e7d32; }
  .form-status.error { color: #c62828; }

  /* Compact hero: track pages are content pages, not landing pages.
     Shorter than the homepage hero (80vh), tighter type, no scroll cue.
     Slate mid-tone background distinguishes it from the homepage void. */
  .hero { min-height: 56vh; background: var(--track-hero-bg); }
  /* Nav is fixed (65px); top padding clears it so the visual gap
     above the eyebrow equals the 4rem/3rem below the CTAs. */
  .hero-inner { padding: calc(65px + 4rem) 2rem 4rem; }
  .hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    text-shadow: 0 2px 12px rgba(21,27,36,0.25);
  }
  .hero-eyebrow, .hero-sub { text-shadow: 0 1px 8px rgba(21,27,36,0.2); }
  .hero-vignette { background: radial-gradient(ellipse at 25% 50%, transparent 0%, rgba(21,27,36,0.25) 100%); }
  .scroll-indicator { display: none; }

  @media (max-width: 767px) {
    .hero { min-height: 0; }
    .hero-inner { padding: calc(65px + 3rem) 1.5rem 3rem; }
    .hero h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  }

  /* Per-track hero accents (development keeps coral) */
  .hero { border-bottom: 3px solid rgba(254,95,85,0.55); }
  body[data-track="development"] .hero-glow {
    background: radial-gradient(ellipse, rgba(254,95,85,0.16) 0%, transparent 70%);
  }

  body[data-track="knowledge-work"] .hero { border-bottom-color: rgba(189,213,234,0.55); }
  body[data-track="knowledge-work"] .hero-glow {
    background: radial-gradient(ellipse, rgba(189,213,234,0.22) 0%, transparent 70%);
  }
  body[data-track="knowledge-work"] .hero-eyebrow { color: #cfe3f2; }

  body[data-track="databricks"] .hero { border-bottom-color: rgba(242,166,90,0.6); }
  body[data-track="databricks"] .hero-glow {
    background: radial-gradient(ellipse, rgba(242,166,90,0.2) 0%, transparent 70%);
  }
  body[data-track="databricks"] .hero-eyebrow { color: #f5d9c8; }

  body[data-track="executive-coaching"] .hero { border-bottom-color: rgba(26,35,48,0.75); }
  body[data-track="executive-coaching"] .hero-glow {
    background: radial-gradient(ellipse, rgba(26,35,48,0.35) 0%, transparent 70%);
  }
  body[data-track="executive-coaching"] .hero-eyebrow { color: #cfe0f2; }

  /* Tab bar: one panel per track on the services page. Sticky under the
     fixed nav (65px) so switching stays reachable while reading. */
  .tabs-bar {
    position: sticky;
    top: 65px;
    z-index: 40;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
  }

  .tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }

  .tab {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--gray-500);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.55rem 1.05rem;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius);
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  }

  .tab:hover { color: var(--ink); background: var(--ghost); }
  .tab:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }

  .tab[aria-selected="true"] {
    color: var(--ink);
    background: var(--white);
    border-color: var(--gray-200);
    border-bottom-color: var(--coral);
    box-shadow: 0 1px 2px rgba(21,27,36,0.06);
  }

  /* Deeper mist for the knowledge-work underline: the hero tint is too pale
     to read against the white tab bar. */
  body[data-track="knowledge-work"] .tab[aria-selected="true"] { border-bottom-color: #8ab4d9; }
  body[data-track="databricks"] .tab[aria-selected="true"] { border-bottom-color: #f2a65a; }
  body[data-track="executive-coaching"] .tab[aria-selected="true"] { border-bottom-color: rgba(26,35,48,0.85); }

  /* Panels hide only when JS is present, so the page works without it. */
  html.js .panel:not(.is-active) { display: none; }

  /* Fixed nav (65px) plus sticky bar: anchor jumps must clear both. The
     browser's own fragment scroll lands on panels and section ids, so the
     margin belongs on the elements that can be targeted. */
  .panel,
  .panel [id],
  .tabs-bar { scroll-margin-top: 136px; }

  @media (max-width: 767px) {
    .tabs { gap: 0.4rem; padding: 0.6rem 0; }
    .tab { font-size: 0.875rem; padding: 0.5rem 0.85rem; }
  }

  @media print {
    .tabs-bar { display: none; }
    html.js .panel:not(.is-active) { display: block !important; }
  }

    /* About page: the hero becomes two columns once a portrait is present, so
       the page reads well with or without a photo. */
    .about-hero { display: grid; gap: 2.5rem; align-items: center; }
    .about-hero__portrait {
      width: 100%;
      /* height:auto lets the width/height attributes keep the intrinsic ratio
         for layout stability while aspect-ratio drives the displayed shape */
      height: auto;
      max-width: 300px;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: 50% 45%;
      border-radius: var(--radius);
      border: 1px solid rgba(189, 213, 234, 0.35);
      box-shadow: 0 18px 40px rgba(21, 27, 36, 0.28);
    }

    @media (min-width: 900px) {
      .about-hero:has(.about-hero__portrait) {
        gap: 4rem;
        grid-template-columns: minmax(0, 1fr) auto;
      }
      .about-hero:has(.about-hero__portrait) .about-hero__portrait {
        width: 300px;
        justify-self: end;
      }
    }

    @media (max-width: 899px) {
      .about-hero__portrait { max-width: 240px; }
    }