/* ============================================================
   marketing-inner.css: inner marketing pages (services, about).
   Loaded after marketing.css, only by templates for inner pages.
   ============================================================ */

/* ============================================================
       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"],
  .syllabus-gate select {
    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 select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23495867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 7 7 13 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    cursor: pointer;
  }

  .syllabus-gate input[type="text"]:focus,
  .syllabus-gate input[type="email"]:focus,
  .syllabus-gate select: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; }

  .lab-banner {
    font-family: 'Inter', sans-serif;
    font-size: 0.975rem;
    line-height: 1.5;
    color: #1f5c36;
    background: #eaf5ee;
    border: 1px solid #9fcdb0;
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0 0 1.25rem;
    max-width: 28rem;
  }
  .lab-banner:focus { outline: 2px solid var(--coral); outline-offset: 2px; }
  .lab-banner[hidden] { display: none; }

  .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.
     Scoped to inner pages: the homepage has its own hero rules above. */
  .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; }
    }