@layer reset, base, theme, components, utilities;

/* Top-level registered custom property required for scroll-driven drawer backdrop interpolation */
@property --drawer-backdrop {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* ==========================================================================
   1. RESET LAYER (Targeted element reset — no global '*' reset)
   ========================================================================== */
@layer reset {
  :where(
    html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd,
    figure, figcaption, blockquote, fieldset, legend, pre, code,
    dialog, details, summary, button, input, select, textarea,
    table, caption, thead, tbody, tr, th, td,
    header, nav, main, section, article, aside, footer, search, form, div, span, time, address
  ) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :where(img, svg, video, canvas) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(table) {
    border-collapse: collapse;
    inline-size: 100%;
  }
}

/* ==========================================================================
   2. THEME LAYER (Bold Nordic Paper + Ink + Electric Lime Design System)
   ========================================================================== */
@layer theme {
  :root {
    interpolate-size: allow-keywords;
    color-scheme: light dark;

    &:has(> head > meta[name="color-scheme"][content="dark"]) {
      color-scheme: dark;
    }
    &:has(> head > meta[name="color-scheme"][content="light"]) {
      color-scheme: light;
    }

    /* Core Brand Palette (from reference design) */
    --ink: #11130f;
    --paper: #f5f4ef;
    --paper-alt: #eceee6;
    --art-surface: #e9eade;
    --art-grid-line: #d5d8cb;
    --icon-surface: #f0f1e9;
    --lime: #d5fb49;
    --lime-hover: #c5ee32;
    --lime-subtle: #eef9c3;
    --muted: #77796f;
    --copy-secondary: #55584e;
    --line: #dcded5;
    --line-strong: #aeb1a5;
    --white: #ffffff;
    --dark-line: #3a3d34;
    --dark-muted: #b5b8ad;

    /* Semantic Tokens — Default Signature Theme (Paper / Ink / Lime) */
    --bg-canvas: var(--paper);
    --bg-surface: var(--white);
    --bg-surface-elevated: var(--icon-surface);
    --bg-art: var(--art-surface);
    --bg-code: var(--ink);

    --text-primary: var(--ink);
    --text-secondary: var(--copy-secondary);
    --text-muted: var(--muted);

    --border-subtle: var(--line);
    --border-strong: var(--line-strong);

    --color-brand: var(--lime);
    --color-brand-hover: var(--lime-hover);
    --color-brand-contrast: var(--ink);
    --color-brand-subtle: var(--lime-subtle);

    --color-tech: var(--ink);
    --color-tech-subtle: var(--icon-surface);

    --color-success: #15803d;
    --color-success-bg: #f0fdf4;
    --color-danger: #b91c1c;
    --color-danger-bg: #fef2f2;
    --color-warning: #b45309;
    --color-focus: var(--ink);

    --scrollbar-track: #e9eade;
    --scrollbar-thumb: #77796f;

    /* Typography — Space Grotesk + DM Sans */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Space Grotesk', 'JetBrains Mono', monospace;

    --container-max: 75rem; /* 1200px */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --space-2xl: clamp(4.25rem, 3rem + 4vw, 6.25rem);

    --radius-sm: 5px;
    --radius-md: 7px;
    --radius-lg: 8px;

    accent-color: var(--ink);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  /* Manual Dark Mode Override */
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg-canvas: #11130f;
    --bg-surface: #181b15;
    --bg-surface-elevated: #22261e;
    --bg-art: #1b1e17;
    --bg-code: #0b0c09;
    --text-primary: #f5f4ef;
    --text-secondary: #b5b8ad;
    --text-muted: #8e9285;
    --border-subtle: #2e3228;
    --border-strong: #4a4f42;
    --color-brand: #d5fb49;
    --color-brand-hover: #e1ff6b;
    --color-brand-contrast: #11130f;
    --color-brand-subtle: #252b14;
    --color-tech: #d5fb49;
    --color-tech-subtle: #22261e;
    --color-success: #4ade80;
    --color-success-bg: #0b2919;
    --color-danger: #f87171;
    --color-danger-bg: #2c1215;
    --color-warning: #fbbf24;
    --color-focus: #d5fb49;
    --scrollbar-track: #11130f;
    --scrollbar-thumb: #4a4f42;
  }

  @supports not (scrollbar-color: auto) {
    body::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    body::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
    }
    body::-webkit-scrollbar-track {
      background: var(--scrollbar-track);
    }
  }

  @media (forced-colors: active) {
    :root {
      --border-subtle: CanvasText;
      --border-strong: CanvasText;
      --color-focus: Highlight;
    }
  }
}

/* ==========================================================================
   3. BASE LAYER (Typography, Focus States, Landmarks)
   ========================================================================== */
@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
  }

  body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    line-height: 1.65;
    text-align: start;
    min-block-size: 100dvb;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
  }

  main {
    flex: 1 0 auto;
  }

  h1, h2, h3, h4, th {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 600;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(2.85rem, 6.2vw, 5.125rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  h2 {
    font-size: clamp(2.125rem, 4.5vw, 3.4375rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }

  h3 {
    font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.35rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
  }

  h4 {
    font-size: 1.08rem;
    letter-spacing: -0.015em;
  }

  p, li, dd, blockquote {
    text-wrap: pretty;
    color: var(--text-secondary);
  }

  p {
    max-inline-size: 66ch;
  }

  code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  pre {
    color-scheme: dark;
    accent-color: var(--lime);
    background-color: var(--bg-code);
    color: #f5f4ef;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--dark-line);
    overflow-x: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
  }

  :where(a:any-link, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  [inert], [inert] * {
    opacity: 0.5;
    cursor: default;
    user-select: none;
  }

  ::selection {
    background-color: var(--lime);
    color: var(--ink);
  }
}

/* ==========================================================================
   4. COMPONENTS LAYER (Topline, Header, Drawer, Hero, Cards, Dark Sections)
   ========================================================================== */
@layer components {
  .container {
    inline-size: min(100% - 3rem, var(--container-max));
    margin-inline: auto;
  }

  @media (max-width: 32.5rem) {
    .container {
      inline-size: min(100% - 2rem, var(--container-max));
    }
  }

  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 9999;
    background-color: var(--lime);
    color: var(--ink);
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(17, 19, 15, 0.35);
  }

  /* Topline Ownership Bar (Matches .topline in reference design) */
  .ownership-top-bar {
    background-color: var(--ink);
    color: #dfe0d8;
    font-family: var(--font-sans);
    font-size: 12px;
    padding-block: 10px;
  }

  .ownership-top-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }

  .ownership-top-bar p {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    color: #dfe0d8;
    max-inline-size: none;
    font-weight: 400;
  }

  .ownership-top-bar a {
    font-weight: 600;
    color: var(--lime);
    text-decoration: none;
  }

  .ownership-top-bar a:hover {
    text-decoration: underline;
  }

  .ownership-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 3px;
    background-color: var(--lime);
    color: var(--ink);
  }

  .ownership-top-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }

  /* Site Header & Navigation (Matches .nav, .brand, .brand-mark) */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background-color: color-mix(in oklab, var(--bg-canvas) 93%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--border-subtle);
  }

  .header-inner {
    display: flex;
    align-items: safe center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 18px;
  }

  .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.7px;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .brand-mark {
    min-inline-size: 38px;
    block-size: 35px;
    padding-inline: 6px;
    border-radius: 10px;
    background-color: var(--lime);
    color: var(--ink);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.5px;
  }

  .brand-sub {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-start: 1px;
  }

  /* Desktop Horizontal Menu (Matches .navlinks) */
  .primary-nav {
    display: none;
  }

  @media (min-width: 72rem) {
    .primary-nav {
      display: block;
    }
  }

  .primary-nav > ul {
    display: flex;
    align-items: safe center;
    gap: 22px;
    list-style: none;
  }

  .primary-nav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-block: 0.3rem;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
  }

  .primary-nav > ul > li > a:hover {
    opacity: 0.65;
  }

  .primary-nav > ul > li > a[aria-current="page"],
  .nav-has-submenu:has(a[aria-current="page"]) > .nav-submenu-parent {
    position: relative;
    font-weight: 700;
  }

  .primary-nav > ul > li > a[aria-current="page"]::after,
  .nav-has-submenu:has(a[aria-current="page"]) > .nav-submenu-parent::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    block-size: 3px;
    background-color: var(--lime);
    border-radius: 2px;
  }

  /* Desktop Dropdown Submenu (About Unified360 -> How We Work) */
  .nav-has-submenu {
    position: relative;
  }

  .nav-chevron {
    transition: transform 0.2s ease;
    opacity: 0.75;
  }

  .nav-has-submenu:is(:hover, :focus-within) .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .nav-submenu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: -10px;
    min-inline-size: 200px;
    padding: 6px;
    list-style: none;
    display: grid;
    gap: 3px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 14px 32px rgba(17, 19, 15, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 150;
  }

  /* Invisible hover bridge so moving the cursor from parent link to dropdown never loses hover */
  .nav-submenu::before {
    content: '';
    position: absolute;
    inset-block-start: -12px;
    inset-inline: 0;
    block-size: 12px;
  }

  .nav-has-submenu:is(:hover, :focus-within) > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-submenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .nav-submenu a:hover {
    background-color: var(--bg-surface-elevated);
    opacity: 1;
  }

  .nav-submenu a[aria-current="page"] {
    background-color: var(--lime);
    color: var(--ink);
    font-weight: 700;
  }

  .header-actions {
    display: flex;
    align-items: safe center;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  .mobile-menu-trigger {
    display: inline-flex;
  }

  @media (min-width: 72rem) {
    .mobile-menu-trigger {
      display: none;
    }
  }

  .header-cta-desktop {
    display: none;
  }

  @media (min-width: 48rem) {
    .header-cta-desktop {
      display: inline-flex;
    }
  }

  /* ==========================================================================
     MOBILE COMPACT ACCESSIBLE NAVIGATION DRAWER (popover="manual" + scroll-snap)
     ========================================================================== */
  .Drawer {
    --drawer-width: min(22rem, 82dvw);
    --drawer-backdrop: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
    background: transparent;
    border: 0;
    overflow: visible;
    inset: 0;
  }

  .Drawer::backdrop {
    background: #11130f;
    opacity: calc(var(--drawer-backdrop) * 0.68);
  }

  .Drawer-scroller {
    position: relative;
    display: grid;
    grid-template-columns: var(--drawer-width) 100%;
    overflow-x: scroll;
    overscroll-behavior: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .Drawer-scroller::-webkit-scrollbar {
    display: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .Drawer-scroller {
      scroll-behavior: smooth;
    }
  }

  .Drawer-scroller::after {
    content: '';
    scroll-snap-align: end;
    scroll-initial-target: nearest;
  }

  .Drawer-sheet {
    display: grid;
    grid-template-rows: auto 1fr auto;
    block-size: 100svh;
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    border-inline-end: 1px solid var(--border-strong);
    overflow-y: auto;
    scroll-snap-align: start;
    scrollbar-width: none;
    padding: 1.35rem;
    box-shadow: 16px 0 40px rgba(17, 19, 15, 0.35);
  }

  @supports (animation-timeline: scroll()) {
    .Drawer {
      timeline-scope: --drawer-fade;
      animation: fade-drawer-backdrop linear both;
      animation-timeline: --drawer-fade;
    }

    .Drawer-scroller {
      scroll-timeline: --drawer-fade x;
    }

    @keyframes fade-drawer-backdrop {
      0% { --drawer-backdrop: 1; }
      100% { --drawer-backdrop: 0; }
    }
  }

  .drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--border-subtle);
  }

  .drawer-nav-list {
    list-style: none;
    display: grid;
    gap: 0.25rem;
    padding-block: 1rem;
    align-content: start;
  }

  .drawer-nav-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 2.85rem;
    padding-block: 0.55rem;
    padding-inline: 0.85rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
  }

  .drawer-nav-list a:hover {
    background-color: var(--bg-surface-elevated);
  }

  .drawer-nav-list a[aria-current="page"] {
    background-color: var(--lime);
    color: var(--ink);
  }

  .drawer-submenu {
    list-style: none;
    display: grid;
    gap: 0.2rem;
    margin-inline-start: 1rem;
    padding-inline-start: 0.65rem;
    margin-block: 0.2rem 0.35rem;
    border-inline-start: 2px solid var(--border-strong);
  }

  .drawer-submenu a {
    min-block-size: 2.4rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
  }

  .drawer-footer {
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border-subtle);
    display: grid;
    gap: 0.75rem;
  }

  /* Buttons (Matches .btn, .btn.dark, .btn.outline in reference design) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }

  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(17, 19, 15, 0.12);
  }

  .btn-primary {
    background-color: var(--lime);
    color: var(--ink);
    border-color: var(--lime);
  }

  .btn-primary:hover:not(:disabled) {
    background-color: var(--lime-hover);
    border-color: var(--lime-hover);
  }

  /* In the hero section on light paper canvas, the primary CTA uses the bold .btn.dark style */
  html:not([data-theme="dark"]) .hero .btn-primary {
    background-color: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }

  html:not([data-theme="dark"]) .hero .btn-primary:hover:not(:disabled) {
    background-color: #252921;
    border-color: #252921;
  }

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

  .btn-secondary:hover:not(:disabled) {
    border-color: var(--text-primary);
    background-color: var(--bg-surface);
  }

  .btn-icon {
    padding: 10px 13px;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .btn-icon:hover:not(:disabled) {
    border-color: var(--text-primary);
  }

  /* Swipe / Sliding Theme Switch (Sun & Crescent Moon) */
  .theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    min-inline-size: 64px;
    min-block-size: 34px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background-color: var(--bg-surface-elevated);
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.2s ease;
  }

  @media (pointer: coarse) {
    .theme-switch {
      min-block-size: 38px;
      padding-inline: 5px;
    }
  }

  .theme-switch:hover {
    border-color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(17, 19, 15, 0.1);
  }

  .theme-switch-track {
    position: relative;
    display: grid;
    grid-template-columns: 26px 26px;
    justify-content: space-between;
    align-items: center;
    inline-size: 56px;
    block-size: 26px;
    pointer-events: none;
  }

  .theme-switch-thumb {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 999px;
    background-color: var(--ink);
    box-shadow: 0 2px 6px rgba(17, 19, 15, 0.25);
    transform: translateX(var(--switch-drag-x, 0px));
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.22s ease;
    z-index: 1;
  }

  .theme-switch.is-dragging .theme-switch-thumb {
    transition: background-color 0.22s ease;
  }

  .theme-switch[aria-checked="true"] .theme-switch-thumb {
    background-color: var(--lime);
    transform: translateX(var(--switch-drag-x, 30px));
  }

  .theme-switch-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    transition: color 0.22s ease, transform 0.28s ease;
  }

  .theme-switch-sun {
    color: var(--lime);
    transform: rotate(0deg) scale(1);
  }

  .theme-switch-moon {
    color: var(--text-muted);
    transform: rotate(-12deg) scale(0.9);
  }

  .theme-switch[aria-checked="true"] .theme-switch-sun {
    color: var(--text-muted);
    transform: rotate(-45deg) scale(0.9);
  }

  .theme-switch[aria-checked="true"] .theme-switch-moon {
    color: var(--ink);
    transform: rotate(0deg) scale(1);
  }

  @media (prefers-reduced-motion: reduce) {
    .theme-switch-thumb,
    .theme-switch-icon {
      transition: none;
    }
  }

  /* Hero Section (Matches .hero in reference design) */
  .hero {
    padding-block: 62px 86px;
    border-block-end: 1px solid var(--border-subtle);
    background-color: var(--bg-canvas);
  }

  @media (max-width: 53rem) {
    .hero {
      padding-block: 38px 56px;
    }
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 38px;
    align-items: center;
  }

  @media (min-width: 56rem) {
    .hero-grid {
      grid-template-columns: 1.05fr 0.95fr;
    }
  }

  /* Electric Lime Ticker Strip (Matches .ticker in reference design) */
  .ticker {
    background-color: var(--lime);
    color: var(--ink);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 16px;
    border-block-end: 1px solid var(--ink);
  }

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

  .ticker-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: var(--ink);
  }

  .ticker-track span {
    display: inline-flex;
    align-items: center;
    gap: 24px;
  }

  .ticker-track span::after {
    content: '✳';
    font-size: 17px;
  }

  .ticker-track span:last-child::after {
    display: none;
  }

  /* Eyebrow with 24px horizontal line (Matches .eyebrow in reference design) */
  .eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 18px;
  }

  .eyebrow::before {
    content: '';
    inline-size: 24px;
    block-size: 2px;
    background-color: currentColor;
    flex-shrink: 0;
  }

  .hero-tagline {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-block-end: 12px;
  }

  .headline-line {
    display: block;
  }

  /* Rotated Electric Lime Marker Highlight (Matches .highlight in reference design) */
  .headline-accent,
  .highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
    color: inherit;
  }

  .headline-accent::after,
  .highlight::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline-start: 0;
    inset-inline-end: -4px;
    inset-block-end: 0.06em;
    block-size: 0.32em;
    background-color: var(--lime);
    transform: rotate(-1.5deg);
    border-radius: 2px;
  }

  html[data-theme="dark"] .headline-accent,
  html[data-theme="dark"] .highlight {
    color: var(--lime);
  }

  html[data-theme="dark"] .headline-accent::after,
  html[data-theme="dark"] .highlight::after {
    display: none;
  }

  .hero-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-block-start: 22px;
    margin-block-end: 26px;
    max-inline-size: 540px;
  }

  .hero-copy-stack {
    display: grid;
    gap: 14px;
    margin-block-start: 24px;
    margin-block-end: 28px;
    max-inline-size: 540px;
  }

  .hero-copy-stack .hero-lead {
    margin-block: 0;
  }

  .hero-emphasis {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-primary);
  }

  .hero-sublead {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text-secondary);
  }

  /* Proof Line (Matches .proof in reference design) */
  .hero-supporting-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-block-start: 34px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
  }

  .hero-supporting-line::before {
    content: '';
    inline-size: 42px;
    block-size: 1px;
    background-color: var(--border-strong);
    flex-shrink: 0;
  }

  .promise-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin-block-end: 28px;
  }

  .promise-pill {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
  }

  .hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    gap: 12px;
  }

  /* Hero Art & Technical Diagram Panel (Matches .hero-art aesthetic) */
  .hero-panel {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: 0 12px 30px rgba(17, 19, 15, 0.05);
  }

  .hero-diagram-panel {
    background-color: var(--bg-art);
    border: 1px solid var(--art-grid-line);
    border-radius: var(--radius-lg);
    padding: 22px;
    position: relative;
    overflow: hidden;
    background-image:
      linear-gradient(var(--art-grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--art-grid-line) 1px, transparent 1px);
    background-size: 34px 34px;
  }

  .panel-header {
    display: flex;
    align-items: safe center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block-end: 12px;
    margin-block-end: 16px;
    border-block-end: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .tech-diagram-figure {
    display: grid;
    gap: 12px;
  }

  .tech-diagram-svg {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-md);
    background-color: color-mix(in oklab, var(--bg-art) 85%, var(--bg-surface));
    border: 1px solid var(--border-subtle);
  }

  .diagram-bus-tech {
    stroke: var(--ink);
    stroke-dasharray: 4 3;
  }

  .diagram-bus-brand {
    stroke: var(--ink);
  }

  html[data-theme="dark"] .diagram-bus-tech,
  html[data-theme="dark"] .diagram-bus-brand {
    stroke: var(--lime);
  }

  .diagram-node {
    fill: var(--bg-surface);
    stroke: var(--border-subtle);
    stroke-width: 1.25;
  }

  .diagram-core-band {
    fill: var(--ink);
    stroke: var(--ink);
    stroke-width: 1.5;
  }

  .diagram-subnode {
    fill: #1d201a;
    stroke: #3a3d34;
    stroke-width: 1;
  }

  .diagram-outcome-node {
    fill: var(--lime);
    stroke: var(--ink);
    stroke-width: 1.5;
  }

  .diagram-dot-tech {
    fill: var(--lime);
    stroke: var(--ink);
    stroke-width: 2;
  }

  .diagram-tag {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    fill: var(--muted);
  }

  .diagram-tag-brand {
    font-family: var(--font-display);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    fill: var(--ink);
  }

  .diagram-core-header {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    fill: var(--lime);
  }

  .diagram-title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    fill: var(--text-primary);
  }

  .diagram-outcome-node ~ text.diagram-title,
  g:has(> .diagram-outcome-node) .diagram-title {
    fill: var(--ink);
  }

  g:has(> .diagram-outcome-node) .diagram-meta {
    fill: #3d4330;
  }

  .diagram-subtitle {
    font-family: var(--font-display);
    font-size: 11.5px;
    font-weight: 700;
    fill: var(--white);
  }

  .diagram-meta {
    font-family: var(--font-sans);
    font-size: 10px;
    fill: var(--text-muted);
  }

  .diagram-submeta {
    font-family: var(--font-sans);
    font-size: 10px;
    fill: var(--dark-muted);
  }

  .diagram-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-block-start: 4px;
  }

  .architecture-list {
    display: grid;
    gap: 12px;
    list-style: none;
  }

  .architecture-item {
    padding: 15px 16px;
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
  }

  .architecture-item strong {
    display: block;
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-block-end: 4px;
  }

  .architecture-item span {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
  }

  /* ==========================================================================
     SECTIONS & DARK INK CONTRAST SECTIONS (Matches .section & .approach)
     ========================================================================== */
  .section {
    padding-block: 96px;
    border-block-end: 1px solid var(--border-subtle);
  }

  @media (max-width: 53rem) {
    .section {
      padding-block: 68px;
    }
  }

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

  html[data-theme="dark"] .section-alt {
    background-color: var(--bg-surface);
  }

  /* Bold Dark Ink Sections (Matches .approach in reference design) */
  #our-philosophy,
  #automation-spotlight,
  #dw-how-we-deliver,
  #automation-filter {
    background-color: var(--ink);
    color: var(--white);
    border-block-end: 1px solid var(--dark-line);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) :is(h2, h3, h4, .status-quo-lead, .hero-emphasis) {
    color: var(--white);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) :is(p, li) {
    color: var(--dark-muted);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .eyebrow {
    color: var(--lime);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .headline-accent {
    color: var(--lime);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .headline-accent::after {
    display: none;
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .status-quo-callout {
    background-color: #1a1d17;
    border-inline-start-color: var(--lime);
    color: var(--white);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .status-quo-callout strong {
    color: var(--lime);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .hero-panel {
    background-color: #181b15;
    border-color: var(--dark-line);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .panel-header {
    border-block-end-color: var(--dark-line);
    color: var(--dark-muted);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .benefit-card {
    background-color: #1f231b;
    border-color: var(--dark-line);
    border-inline-start: 3px solid var(--lime);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .benefit-index {
    color: var(--lime);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .benefit-card strong {
    color: var(--white);
  }

  :is(#our-philosophy, #automation-spotlight, #dw-how-we-deliver, #automation-filter) .benefit-card span:not(.benefit-index) {
    color: var(--dark-muted);
  }

  /* Section Headers */
  .section-header {
    margin-block-end: 44px;
  }

  .section-header p {
    margin-block-start: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
    max-inline-size: 56ch;
  }

  /* Section 2 — Challenge the status quo */
  .status-quo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px;
    align-items: start;
  }

  @media (min-width: 60rem) {
    .status-quo-grid {
      grid-template-columns: 1.05fr 0.95fr;
      gap: 48px;
    }
  }

  .status-quo-body {
    display: grid;
    gap: 16px;
    font-size: 15px;
    line-height: 1.7;
  }

  .status-quo-lead {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.32rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
  }

  .status-quo-callout {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-inline-start: 4px solid var(--ink);
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
  }

  /* Cards (Matches .role in reference design: white card, 1px border, 7px radius, hover lift) */
  .problem-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    grid-template-rows: auto 1fr;
    gap: 14px;
  }

  .problem-card {
    grid-row: span 2;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-rows: subgrid;
    gap: 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .problem-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-4px);
  }

  .problem-card-index {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background-color: var(--bg-surface-elevated);
    padding: 6px 10px;
    border-radius: 6px;
    margin-block-end: 18px;
  }

  .problem-card p,
  .pillar-card p,
  .service-detail-card p,
  .principle-card p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .status-quo-cta {
    display: flex;
    align-items: center;
  }

  /* Philosophy & Delivery Steps (Matches .steps & .step in reference design) */
  .philosophy-steps-grid,
  .delivery-five-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    grid-template-rows: auto 1fr;
    gap: 14px;
  }

  .philosophy-step-card {
    grid-row: span 2;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-rows: subgrid;
    gap: 14px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  /* Inside Dark Ink Sections, steps match the dark architectural grid from the reference file */
  :is(#our-philosophy, #dw-how-we-deliver, #automation-filter) :is(.philosophy-step-card, .principle-card) {
    background-color: #181b15;
    border: 1px solid var(--dark-line);
  }

  :is(#our-philosophy, #dw-how-we-deliver, #automation-filter) :is(.philosophy-step-card, .principle-card):hover {
    border-color: var(--lime);
    transform: translateY(-4px);
  }

  .philosophy-step-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink);
    background-color: var(--lime);
    padding: 4px 9px;
    border-radius: 4px;
    margin-block-end: 18px;
  }

  :is(#our-philosophy, #dw-how-we-deliver, #automation-filter) .problem-card-index {
    background-color: #24281f;
    color: var(--lime);
  }

  /* Spotlights (Sections 5 & 6) */
  .spotlight-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 38px;
    align-items: start;
  }

  @media (min-width: 62rem) {
    .spotlight-grid {
      grid-template-columns: 1.1fr 0.9fr;
    }
  }

  .spotlight-copy {
    display: grid;
    gap: 16px;
    font-size: 15px;
    line-height: 1.7;
  }

  .platform-support-bar {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-inline-start: 4px solid var(--lime);
    border-radius: var(--radius-md);
    padding: 16px 20px;
  }

  .platform-support-label {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-block-end: 6px;
  }

  .platform-support-line {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    max-inline-size: none;
  }

  .benefit-cards-stack {
    list-style: none;
    display: grid;
    gap: 12px;
  }

  .benefit-card {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background-color: var(--bg-surface-elevated);
    border: 1px solid var(--border-subtle);
    display: grid;
    gap: 4px;
  }

  .benefit-index {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }

  .benefit-card strong {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .benefit-card span:not(.benefit-index) {
    font-size: 13px;
    color: var(--text-secondary);
  }

  /* ==========================================================================
     MANDATORY 3-QUESTION CORE ARCHITECTURE
     ========================================================================== */
  .three-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 14px;
  }

  .question-card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-rows: subgrid;
    gap: 20px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .question-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-4px);
  }

  .question-card[data-question="next"] {
    background-color: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }

  .question-card[data-question="next"] h3 {
    color: var(--white);
  }

  .question-card[data-question="next"] :is(p, li) {
    color: var(--dark-muted);
  }

  .question-card[data-question="next"] .question-footer {
    border-block-start-color: var(--dark-line);
  }

  .question-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-block-end: 12px;
  }

  .question-badge {
    padding: 4px 9px;
    border-radius: 5px;
    font-weight: 700;
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
  }

  .question-card[data-question="next"] .question-badge {
    background-color: var(--lime);
    color: var(--ink);
  }

  .question-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .question-list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin-block-start: 4px;
  }

  .question-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  .question-list li::before {
    content: "↗";
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
  }

  .question-card[data-question="next"] .question-list li::before {
    color: var(--lime);
  }

  .question-footer {
    padding-block-start: 16px;
    border-block-start: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
  }

  /* ==========================================================================
     CAPABILITY PILLAR, SERVICE & PERSPECTIVE CARDS (Matches .roles / .role)
     ========================================================================== */
  .pillar-grid-wrapper {
    container: pillar-grid / inline-size;
  }

  .pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 14px;
  }

  .pillar-card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-rows: subgrid;
    gap: 20px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .pillar-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-4px);
  }

  .pillar-index {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: inline-block;
    background-color: var(--bg-surface-elevated);
    padding: 6px 10px;
    border-radius: 6px;
    margin-block-end: 16px;
  }

  .pillar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin-block-start: 16px;
  }

  .pillar-tags li {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 4px;
    background-color: var(--bg-surface-elevated);
    color: var(--text-secondary);
  }

  .pillar-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    padding-block-start: 14px;
    border-block-start: 1px solid var(--border-subtle);
  }

  .pillar-link:hover {
    opacity: 0.7;
  }

  /* Section 7 — Evidence & Experience (Engineering Perspectives) */
  .perspective-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 16px;
  }

  .perspective-meta .pillar-index {
    margin-block-end: 0;
  }

  .perspective-badge {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    background-color: var(--lime);
    padding: 4px 8px;
    border-radius: 4px;
  }

  /* Section 8 — Why Unified360 (Four Principles) */
  .principles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    grid-template-rows: auto 1fr;
    gap: 14px;
  }

  .principle-card {
    grid-row: span 2;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-rows: subgrid;
    gap: 14px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .principle-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-4px);
  }

  /* 6-Card Services Grid */
  .services-six-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 14px;
  }

  .service-detail-card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-rows: subgrid;
    gap: 18px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .service-detail-card:hover {
    border-color: var(--text-primary);
    transform: translateY(-4px);
  }

  .service-card-copy {
    display: grid;
    gap: 12px;
    align-content: start;
  }

  .service-card-lead {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
  }

  .service-card-footer {
    padding-block-start: 14px;
    border-block-start: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .audience-check-list {
    list-style: none;
    display: grid;
    gap: 12px;
  }

  .audience-check-item {
    display: flex;
    align-items: safe center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .audience-check-item:hover {
    border-color: var(--text-primary);
    transform: translateY(-2px);
  }

  .audience-marker {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    background-color: var(--lime);
    padding: 6px 10px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* ==========================================================================
     FINAL CTA CALLOUT BANNER (Matches .callout in reference design: Bold Lime Box!)
     ========================================================================== */
  .final-cta-section {
    background-color: var(--bg-canvas);
  }

  .final-cta-box {
    background-color: var(--lime);
    color: var(--ink);
    border-radius: var(--radius-lg);
    padding: 48px;
    border: 0;
  }

  @media (max-width: 40rem) {
    .final-cta-box {
      padding: 28px;
    }
  }

  .final-cta-box .eyebrow {
    color: var(--ink);
  }

  .final-cta-box h2 {
    color: var(--ink);
  }

  .final-cta-box .status-quo-lead {
    color: var(--ink);
  }

  .final-cta-box p {
    color: #3d4330;
  }

  .final-cta-copy {
    display: grid;
    gap: 14px;
    max-inline-size: 560px;
  }

  /* Inside the Electric Lime callout box, primary button is Dark Ink */
  .final-cta-box .btn-primary {
    background-color: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }

  .final-cta-box .btn-primary:hover:not(:disabled) {
    background-color: #252921;
    border-color: #252921;
  }

  .final-cta-box .btn-secondary {
    background-color: transparent;
    color: var(--ink);
    border-color: var(--ink);
  }

  .final-cta-box .btn-secondary:hover:not(:disabled) {
    background-color: rgba(17, 19, 15, 0.08);
  }

  /* ==========================================================================
     ARTICLE / INSIGHTS PROSE LAYOUT (/insights/[article-slug]/)
     ========================================================================== */
  .article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }

  @media (min-width: 62rem) {
    .article-layout {
      grid-template-columns: 1fr 22rem;
    }
  }

  .article-prose {
    display: grid;
    gap: 18px;
  }

  .article-prose h2 {
    margin-block-start: 18px;
  }

  .article-prose h3 {
    margin-block-start: 10px;
  }

  .article-prose ul,
  .article-prose ol {
    padding-inline-start: 1.35rem;
    display: grid;
    gap: 8px;
    max-inline-size: 68ch;
  }

  .article-callout {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-inline-start: 4px solid var(--lime);
    padding: 20px 24px;
    border-radius: var(--radius-md);
    max-inline-size: 68ch;
  }

  .breadcrumb-nav {
    font-family: var(--font-display);
    font-size: 12px;
    margin-block-end: 16px;
  }

  .breadcrumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    color: var(--text-muted);
  }

  .breadcrumb-nav li:not(:last-child)::after {
    content: "/";
    margin-inline-start: 8px;
    color: var(--border-strong);
  }

  /* ==========================================================================
     INTERACTIVE DIAGNOSTIC EVALUATOR & AI MATRIX
     ========================================================================== */
  .diagnostic-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 32px;
  }

  @media (min-width: 60rem) {
    .diagnostic-shell {
      grid-template-columns: 1.05fr 1fr;
    }
  }

  .diagnostic-fieldset {
    border: 0;
    margin-block-end: 22px;
  }

  .diagnostic-fieldset:last-child {
    margin-block-end: 0;
  }

  .diagnostic-legend {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin-block-end: 12px;
    display: block;
  }

  .radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 10px;
  }

  .radio-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: var(--radius-sm);
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .radio-card:hover {
    border-color: var(--text-primary);
  }

  .radio-card:has(input:checked) {
    border-color: var(--ink);
    background-color: var(--lime);
    color: var(--ink);
    font-weight: 700;
  }

  .radio-card input[type="radio"] {
    margin-block-start: 2px;
    flex-shrink: 0;
    accent-color: var(--ink);
  }

  .diagnostic-output {
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  }

  .output-block {
    padding-block-end: 16px;
    border-block-end: 1px solid var(--border-subtle);
  }

  .output-block:last-of-type {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .output-label {
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: block;
    margin-block-end: 6px;
    font-weight: 700;
  }

  /* Accordions (<details>) */
  .accordion-stack {
    display: grid;
    gap: 12px;
  }

  details.disclosure {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: clip;
  }

  details.disclosure[open] {
    border-color: var(--text-primary);
  }

  details.disclosure > summary {
    padding: 20px 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  details.disclosure > summary::-webkit-details-marker {
    display: none;
  }

  details.disclosure > summary::after {
    content: "+";
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 8px;
    background-color: var(--bg-surface-elevated);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  details.disclosure[open] > summary::after {
    content: "−";
    background-color: var(--lime);
    color: var(--ink);
  }

  .disclosure-body {
    padding: 0 24px 24px;
    border-block-start: 1px solid var(--border-subtle);
    padding-block-start: 16px;
  }

  /* ==========================================================================
     DATA TABLES
     ========================================================================== */
  .table-scroll {
    overflow-x: auto;
    scrollbar-gutter: stable;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--bg-surface);
  }

  .comparison-table caption {
    text-align: start;
    padding: 16px 20px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background-color: var(--bg-surface-elevated);
    border-block-end: 1px solid var(--border-subtle);
  }

  .comparison-table th,
  .comparison-table td {
    padding: 18px 20px;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--border-subtle);
    font-size: 14px;
    line-height: 1.6;
  }

  .comparison-table thead th {
    background-color: var(--ink);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
  }

  /* ==========================================================================
     FORMS & MODAL DIALOG (Matches .contact-card in reference design)
     ========================================================================== */
  dialog.site-dialog {
    margin: auto;
    inline-size: min(92vw, 40rem);
    max-block-size: 90dvb;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(17, 19, 15, 0.35);
  }

  dialog.site-dialog::backdrop {
    background-color: rgba(17, 19, 15, 0.72);
    backdrop-filter: blur(4px);
  }

  .dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-block-end: 16px;
    margin-block-end: 20px;
    border-block-end: 1px solid var(--border-subtle);
  }

  .form-group {
    margin-block-end: 18px;
  }

  .form-group label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: var(--text-primary);
    margin-block-end: 4px;
  }

  .field-hint {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-block-end: 6px;
  }

  .form-control {
    display: block;
    inline-size: 100%;
    padding: 13px 12px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    background-color: #fbfbf8;
    color: var(--ink);
    border: 1px solid #d8dad1;
    border-radius: 4px;
  }

  html[data-theme="dark"] .form-control {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
    border-color: var(--border-strong);
  }

  textarea.form-control {
    min-block-size: 105px;
    resize: vertical;
  }

  .error-msg {
    display: none;
    color: var(--color-danger);
    background-color: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-block-start: 6px;
  }

  .form-control:where(:user-invalid, .user-invalid-fallback) {
    border-color: var(--color-danger);
    background-color: var(--color-danger-bg);
  }

  .form-control:where(:user-invalid, .user-invalid-fallback) + .error-msg {
    display: block;
  }

  .form-control:where(:user-valid, .user-valid-fallback) {
    border-color: var(--color-success);
  }

  .checkbox-label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.5;
    cursor: pointer;
  }

  .checkbox-label input[type="checkbox"] {
    margin-block-start: 3px;
    inline-size: 18px;
    block-size: 18px;
    flex-shrink: 0;
    accent-color: var(--ink);
    cursor: pointer;
  }

  html[data-theme="dark"] .checkbox-label input[type="checkbox"] {
    accent-color: var(--lime);
  }

  .checkbox-label a {
    text-decoration: underline;
    font-weight: 600;
  }

  .checkbox-group:has(input[type="checkbox"]:where(:user-invalid, .user-invalid-fallback)) .error-msg {
    display: block;
  }

  .form-honeypot {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
  }

  .form-status {
    margin-block-start: 16px;
    padding: 16px;
    border-radius: var(--radius-md);
    background-color: var(--lime);
    color: var(--ink);
    font-weight: 600;
  }

  /* ==========================================================================
     DARK INK FOOTER (Matches .footer in reference design)
     ========================================================================== */
  .site-footer {
    background-color: var(--ink);
    color: var(--white);
    padding-block: 64px 38px;
    font-size: 13px;
  }

  .site-footer .brand-logo {
    color: var(--white);
  }

  .site-footer p {
    color: #aeb1a5;
  }

  .footer-headline {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--white) !important;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 36px;
    margin-block-end: 44px;
  }

  .footer-heading {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--lime);
    margin-block-end: 16px;
  }

  .footer-links {
    list-style: none;
    display: grid;
    gap: 10px;
  }

  .footer-links a {
    text-decoration: none;
    color: #d5d8cc;
    font-size: 13px;
    font-weight: 500;
  }

  .footer-links a:hover {
    color: var(--lime);
  }

  .footer-contact-details {
    font-style: normal;
    display: grid;
    gap: 6px;
    color: #aeb1a5;
    font-size: 13px;
  }

  .footer-contact-details strong {
    font-family: var(--font-display);
    color: var(--white);
    font-size: 15px;
    margin-block-end: 2px;
  }

  .footer-contact-details a {
    color: var(--lime);
    font-weight: 600;
  }

  .footer-contact-details a:hover {
    text-decoration: underline;
  }

  .footer-bottom {
    padding-block-start: 26px;
    border-block-start: 1px solid var(--dark-line);
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    justify-content: space-between;
    gap: 1rem;
    color: #aeb1a5;
    font-size: 11.5px;
  }

  .footer-bottom a {
    color: var(--lime);
    font-weight: 600;
  }

  .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
  }

  .footer-legal-links a {
    text-decoration: none;
    color: #d5d8cc;
    font-size: 12px;
  }

  .footer-legal-links a:hover {
    color: var(--lime);
  }
}

/* ==========================================================================
   5. UTILITIES LAYER
   ========================================================================== */
@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  .mono-tag {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
  }

  .mt-xs {
    margin-block-start: var(--space-xs);
  }

  .mt-md {
    margin-block-start: var(--space-md);
  }

  .mt-lg {
    margin-block-start: var(--space-lg);
  }

  /* Defer rendering of strictly below-the-fold heavy sections */
  .final-cta-section,
  .site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto none auto 380px;
  }

  /* Restrained entrance transitions & progressive SVG diagram emphasis */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes u360-subtle-enter {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes u360-bus-flow {
      from {
        stroke-dashoffset: 28;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    .hero-editorial,
    .hero-grid > div:first-child {
      animation: u360-subtle-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .hero-diagram-panel {
      animation: u360-subtle-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
    }

    .diagram-bus-tech {
      animation: u360-bus-flow 3.6s linear infinite;
    }

    .tech-diagram-svg g:hover > .diagram-node,
    .tech-diagram-svg g:hover > .diagram-subnode,
    .tech-diagram-svg g:hover > .diagram-outcome-node {
      filter: brightness(1.04);
      transition: filter 0.2s ease, stroke 0.2s ease;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    html {
      scroll-behavior: auto;
    }
    :where(a, button, .btn, .pillar-card, .problem-card, .service-detail-card, .principle-card, .question-card, .radio-card, .capability-card, .article-outline-card, .philosophy-step-card) {
      transition: none !important;
      transform: none !important;
    }
  }
}