/* ============================================
   INQUBIT — Main Stylesheet
   Enterprise assurance palette
   Typography: Source Serif 4 / Inter Tight / JetBrains Mono
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Colors */
    --color-bg: #F5F7FA;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #EDF2F7;
    --color-text: #102033;
    --color-text-secondary: #526173;
    --color-text-tertiary: #7A8796;
    --color-accent: #16745F;
    --color-accent-hover: #0E5E4C;
    --color-accent-deep: #0B4A3B;
    --color-cobalt: #315C9E;
    --color-warm: #A46A16;
    --color-border: rgba(16, 32, 51, 0.12);
    --color-border-hover: rgba(16, 32, 51, 0.22);
    --color-success: #16745F;
    --color-error: #EF4444;

    /* Typography — Source Serif 4 + Inter Tight + JetBrains Mono */
    --font-display: 'Source Serif 4', 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter Tight', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Layout */
    --max-width: 1200px;
    --nav-height: 72px;

    /* Borders */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}


/* ============================================
   1. RESET
   ============================================ */

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

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

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--nav-height);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

ul,
ol {
    list-style: none;
}

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

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}


/* ============================================
   2. UTILITIES
   ============================================ */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

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

.section--alt {
    background-color: #EAF0F6;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--color-text-secondary);
}


/* ============================================
   3. TYPOGRAPHY
   ============================================ */

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--color-text);
}

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

h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text);
}

h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    margin-bottom: var(--space-lg);
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-lg);
}

h3 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    margin-bottom: var(--space-md);
}

h4 {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin-bottom: var(--space-sm);
}

h5 {
    font-size: 1.125rem;
    margin-bottom: var(--space-sm);
}

h6 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

p {
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: clamp(1.05rem, 1.5vw, 1.15rem);
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.7;
}

/* Section number — editorial overline label */
.section-number {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}


/* ============================================
   4. BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.75rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background-color: var(--color-accent);
    color: #FFFFFF;
    border-color: var(--color-accent);
}

.btn--primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #FFFFFF;
}

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

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

.btn--large {
    padding: 1rem 2.25rem;
    font-size: 1.05rem;
}


/* ============================================
   5. NAVBAR
   ============================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    transition: border-color var(--transition-base);
}

.navbar.scrolled {
    border-bottom-color: var(--color-border-hover);
}

.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    height: 100%;
}

.navbar__logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0;
}

.navbar__logo:hover {
    color: var(--color-text);
}

.navbar__logo span {
    color: var(--color-accent);
}

.navbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.navbar__link {
    position: relative;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
    border-radius: var(--radius-sm);
}

.navbar__link:hover {
    color: var(--color-text);
}

.navbar__link.active {
    color: var(--color-accent);
}

.navbar__link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
}

.navbar__cta {
    margin-left: var(--space-sm);
}

/* Ensure btn--primary color wins over .navbar__link color */
.navbar__cta.btn--primary {
    color: #FFFFFF;
}

.navbar__cta.btn--primary:hover {
    color: #FFFFFF;
}

.navbar__cta.active::after {
    display: none;
}

.navbar__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 1001;
}

.navbar__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.navbar__toggle.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar__toggle.open span:nth-child(2) {
    opacity: 0;
}

.navbar__toggle.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* ============================================
   6. HERO
   ============================================ */

.hero {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
    padding: var(--space-4xl) 0;
    overflow: hidden;
    min-height: 520px;
    display: flex;
    align-items: center;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-xl);
    text-align: left;
}

.hero h1 {
    color: var(--color-text);
    max-width: 720px;
    margin: 0 0 var(--space-lg);
    font-size: clamp(2.75rem, 6.5vw, 5rem);
}

.hero__subtitle {
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 0 var(--space-2xl);
    line-height: 1.75;
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}


/* ============================================
   7. CARDS
   ============================================ */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    transition: border-color var(--transition-base);
}

.card:hover {
    border-color: rgba(22, 116, 95, 0.35);
}

.card__icon {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    border-left: 2px solid var(--color-accent);
    padding-left: 0.75rem;
    margin-bottom: var(--space-lg);
    line-height: 1;
}

.card__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.01em;
}

.card__text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}


/* ============================================
   8. GRID
   ============================================ */

.grid {
    display: grid;
    gap: var(--space-xl);
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

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

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


/* ============================================
   9. CTA SECTION
   ============================================ */

.cta {
    background: #102033;
    border-top: 1px solid var(--color-border);
    padding: var(--space-4xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta h2 {
    color: #FFFFFF;
    margin-bottom: var(--space-md);
}

.cta p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.7;
}


/* ============================================
   10. PRINCIPLES (replaces stats)
   ============================================ */

.principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
}

.principle-item {
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-base);
}

.principle-item:hover {
    border-color: rgba(22, 116, 95, 0.28);
}

.principle-item__number {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-md);
    display: block;
}

.principle-item h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.principle-item p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}


/* ============================================
   11. TEAM
   ============================================ */

.team-founder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xl);
    align-items: center;
    padding: var(--space-2xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2xl);
}

.team-founder__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-text);
    background: var(--color-surface-elevated);
}

.team-founder__info h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-xs);
}

.team-founder__role {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
    display: block;
}

.team-founder__info p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
    max-width: 540px;
}

.team-hiring-card {
    border: 1.5px dashed var(--color-border-hover);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    transition: border-color var(--transition-base);
}

.team-hiring-card:hover {
    border-color: var(--color-accent);
}

.team-hiring-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.team-hiring-card p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin-bottom: var(--space-lg);
}

/* Legacy team-member styles (kept for compatibility) */
.team-member {
    text-align: center;
    padding: var(--space-xl);
}

.team-member__photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto var(--space-lg);
    border: 3px solid var(--color-border);
    transition: border-color var(--transition-base);
}

.team-member:hover .team-member__photo {
    border-color: var(--color-accent);
}

.team-member__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.team-member__role {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}


/* ============================================
   12. FORMS
   ============================================ */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(22, 116, 95, 0.12);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238A8FA8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-group .error {
    display: block;
    font-size: 0.8rem;
    color: var(--color-error);
    margin-top: var(--space-xs);
    font-weight: 500;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
    border-color: var(--color-error);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    tab-index: -1;
}

.form-note {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
}


/* ============================================
   13. JOB CARDS
   ============================================ */

.job-card {
    display: block;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    transition: border-color var(--transition-base);
    text-decoration: none;
    color: inherit;
}

.job-card:hover {
    border-color: rgba(22, 116, 95, 0.35);
    color: inherit;
}

.job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    letter-spacing: 0.04em;
}

.tag--department {
    background-color: rgba(22, 116, 95, 0.1);
    color: var(--color-accent);
}

.tag--type {
    background-color: rgba(164, 106, 22, 0.1);
    color: var(--color-warm);
}

.tag--location {
    background-color: rgba(16, 32, 51, 0.06);
    color: var(--color-text-secondary);
}

.job-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.job-card__title a {
    color: var(--color-text);
    text-decoration: none;
}

.job-card__title a:hover {
    color: var(--color-accent);
}

.job-card__excerpt {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}


/* ============================================
   14. CONTACT LAYOUT
   ============================================ */

.contact-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

.contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.contact-info__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.05em;
}

.contact-info__item h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.contact-info__item p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}


/* ============================================
   15. FILTER BAR
   ============================================ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    margin-bottom: var(--space-xl);
}

.filter-bar select {
    padding: 0.6rem 2.5rem 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238A8FA8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    outline: none;
}

.filter-bar select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(22, 116, 95, 0.12);
}


/* ============================================
   16. FOOTER
   ============================================ */

.footer {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.footer__brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0;
    margin-bottom: var(--space-md);
}

.footer__brand span {
    color: var(--color-accent);
}

.footer__desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 300px;
}

.footer h4 {
    font-family: var(--font-mono);
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-lg);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer__links a {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
    text-decoration: none;
}

.footer__links a:hover {
    color: var(--color-text);
}

.footer__bottom {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xl);
    text-align: center;
}

.footer__bottom p {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}


/* ============================================
   17. SUCCESS PAGES
   ============================================ */

.success-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 50vh;
    padding: var(--space-4xl) var(--space-xl);
}

.success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #FFFFFF;
    margin-bottom: var(--space-xl);
}

.success-page h1 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: var(--space-md);
}

.success-page p {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    max-width: 480px;
    margin-bottom: var(--space-xl);
}


/* ============================================
   18. SCROLL ANIMATIONS
   ============================================ */

/* Fade-in only applies when JS has loaded (js-ready class on html) */
.js-ready .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-ready .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.js-ready .fade-in[data-delay="1"] { transition-delay: 80ms; }
.js-ready .fade-in[data-delay="2"] { transition-delay: 160ms; }
.js-ready .fade-in[data-delay="3"] { transition-delay: 240ms; }
.js-ready .fade-in[data-delay="4"] { transition-delay: 320ms; }
.js-ready .fade-in[data-delay="5"] { transition-delay: 400ms; }
.js-ready .fade-in[data-delay="6"] { transition-delay: 480ms; }


/* ============================================
   19. PAGE CONTENT
   ============================================ */

.page-header {
    background-color: var(--color-surface);
    padding: var(--space-3xl) 0;
    border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
    margin-bottom: var(--space-sm);
}

.page-header p {
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    max-width: 560px;
}

.content-section {
    padding: var(--space-3xl) 0;
}

.content-section + .content-section {
    border-top: 1px solid var(--color-border);
}

.content-section p {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-2xl) 0;
}

.pagination__info {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
}

.empty-state p {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
}


/* ============================================
   20. SERVICE PAGE UTILITIES
   ============================================ */

.service-features {
    margin-top: var(--space-md);
    padding-left: var(--space-lg);
    list-style: disc;
}

.service-features li {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
    list-style: disc;
}

.service-detail-card {
    max-width: 900px;
    margin: 0 auto;
}

.service-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.service-sub-grid h4 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.service-sub-grid p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}


/* ============================================
   21. ABOUT PAGE — STORY LAYOUT
   ============================================ */

.story-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
}

.story-pullquote {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--color-text);
    line-height: 1.4;
    border-left: 2px solid var(--color-accent);
    padding-left: var(--space-xl);
}

.story-body p {
    color: var(--color-text-secondary);
    line-height: 1.8;
}



/* ============================================
   22. TELECOM COMPONENTS
   ============================================ */

/* Hero two-column layout — left copy, right pipeline */
.hero--split .hero__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero--split .hero__copy {
    max-width: 560px;
}

/* Pipeline grid — 2x3 monetization stages */
.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    background: rgba(49, 92, 158, 0.06);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.pipeline-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.pipeline-stage--placeholder {
    background: transparent;
    border-style: dashed;
    border-color: var(--color-border-hover);
}

.pipeline-stage__num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.12em;
    margin-bottom: var(--space-xs);
}

.pipeline-stage--placeholder .pipeline-stage__num {
    color: var(--color-text-secondary);
}

.pipeline-stage__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.pipeline-stage--placeholder .pipeline-stage__title {
    color: var(--color-text-secondary);
}

.pipeline-stage__desc {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Proof bar — 3 stat columns */
.proof-bar {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2xl) 0;
}

.proof-bar__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

.proof-stat__value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    display: block;
}

.proof-stat__label {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Engagement cards — 4-column grid */
.engagement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.engagement-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: border-color var(--transition-base);
}

.engagement-card:hover {
    border-color: rgba(22, 116, 95, 0.35);
}

.engagement-card__label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
    display: block;
}

.engagement-card__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    line-height: 1.3;
}

.engagement-card__lead {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.engagement-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.engagement-card__list li {
    font-size: 0.85rem;
    color: var(--color-text);
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    border-left: 1px solid var(--color-border);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

/* Workstream cards — compact 3-column grid */
.workstream-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.workstream-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    transition: border-color var(--transition-base);
}

.workstream-card:hover {
    border-color: rgba(22, 116, 95, 0.35);
}

.workstream-card__title {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.workstream-card__scope {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Process strip — Assess -> Design -> Deliver -> Assure -> Operate */
.process-strip {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.process-step {
    flex: 1 1 0;
    min-width: 140px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.process-step__num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.12em;
}

.process-step__name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.process-arrow {
    align-self: center;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 1.1rem;
    opacity: 0.6;
}

/* Navbar — muted careers link */
.navbar__link--muted {
    color: rgba(82, 97, 115, 0.68);
}

.navbar__link--muted:hover {
    color: var(--color-text-secondary);
}

/* Service pillar buyer-language pullquote */
.pillar-quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-text);
    border-left: 2px solid var(--color-accent);
    padding-left: var(--space-md);
    margin-top: var(--space-lg);
    line-height: 1.5;
}

/* Engagement-package cards (services page) */
.package-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.package-card__duration {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    display: block;
}

.package-card__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.package-card__desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}


/* ============================================
   23. MONETIZATION FLOW PANEL + HERO EYEBROW + HERO META
   ============================================ */

/* Hero eyebrow (replaces .hero__badge) */
.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
}
.hero__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--color-accent);
}

/* Hero credentials meta strip (replaces standalone proof bar in hero) */
.hero__meta {
    display: flex;
    gap: var(--space-xl);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: var(--space-lg) 0 var(--space-xl);
}
.hero__meta-num {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1;
}
.hero__meta-lbl {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-top: 6px;
}

/* Ghost button (secondary CTA in hero) */
.btn--ghost {
    background: transparent;
    color: var(--color-text);
    padding: 0.85rem 0;
    border: none;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.btn--ghost:hover {
    color: var(--color-accent);
}

/* Monetization flow panel (hero right column) */
.flow-panel {
    border: 1px solid var(--color-border);
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(16, 32, 51, 0.08);
    padding: var(--space-lg);
}
.flow-panel__head {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.flow__row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}
.flow__row:last-child {
    border-bottom: none;
}
.flow__row--active {
    background: linear-gradient(90deg, rgba(22, 116, 95, 0.10), transparent 70%);
    margin: 0 calc(-1 * var(--space-lg));
    padding: var(--space-sm) var(--space-lg);
}
.flow__num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    letter-spacing: 0.08em;
}
.flow__row--active .flow__num {
    color: var(--color-accent);
}
.flow__name {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--color-text);
}
.flow__sub {
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.flow__pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(22, 116, 95, 0.18);
    animation: flow-pulse 2.4s ease-in-out infinite;
}
@keyframes flow-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(22, 116, 95, 0.18); }
    50% { box-shadow: 0 0 0 7px rgba(22, 116, 95, 0.05); }
}

/* Disable pulse animation under reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .flow__pulse {
        animation: none;
    }
}


/* ============================================
   24. COMPANY POSITIONING SECTIONS
   ============================================ */

.risk-grid,
.case-grid,
.operating-model,
.company-model,
.service-intro__grid {
    display: grid;
    gap: var(--space-xl);
}

.risk-grid {
    grid-template-columns: repeat(4, 1fr);
}

.risk-card,
.case-card,
.model-step,
.company-model article {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
}

.risk-card {
    border-top: 3px solid var(--color-cobalt);
}

.risk-card__label,
.case-card__type,
.model-step span,
.company-model span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-md);
}

.risk-card h3,
.case-card h3,
.model-step h3,
.company-model h3 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.risk-card p,
.case-card p,
.model-step p,
.company-model p,
.service-intro__grid p {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.case-grid {
    grid-template-columns: repeat(3, 1fr);
}

.case-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.case-card p {
    margin-bottom: var(--space-lg);
}

.case-card strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-cobalt);
    margin-top: auto;
    margin-bottom: var(--space-xs);
}

.case-card strong + span {
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.55;
}

.operating-model {
    grid-template-columns: repeat(4, 1fr);
    counter-reset: model;
}

.model-step {
    position: relative;
}

.model-step::after {
    content: "";
    position: absolute;
    top: var(--space-xl);
    right: calc(-1 * var(--space-xl));
    width: var(--space-xl);
    height: 1px;
    background: var(--color-border-hover);
}

.model-step:last-child::after {
    display: none;
}

.company-model {
    grid-template-columns: repeat(3, 1fr);
}

.service-intro {
    padding-bottom: var(--space-2xl);
}

.service-intro__grid {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: start;
    padding: var(--space-2xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.service-intro__grid p + p {
    margin-top: var(--space-md);
}


/* ============================================
   25. RESPONSIVE
   ============================================ */

/* --- Tablet & below (1024px) --- */
@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .principles {
        grid-template-columns: 1fr;
    }

    .story-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .team-founder {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .service-sub-grid {
        grid-template-columns: 1fr;
    }

    .hero--split .hero__content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .engagement-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workstream-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pipeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .risk-grid,
    .case-grid,
    .operating-model,
    .company-model {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-intro__grid {
        grid-template-columns: 1fr;
    }

    .model-step::after {
        display: none;
    }
}

/* --- Mobile landscape & below (768px) --- */
@media (max-width: 768px) {
    :root {
        --nav-height: 64px;
    }

    .container {
        padding: 0 var(--space-lg);
    }

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

    /* Mobile navigation */
    .navbar__toggle {
        display: flex;
    }

    .navbar__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: calc(var(--nav-height) + var(--space-xl)) var(--space-xl) var(--space-xl);
        background: var(--color-surface);
        border-left: 1px solid var(--color-border);
        transition: right var(--transition-base);
        overflow-y: auto;
    }

    .navbar__nav.open {
        right: 0;
    }

    .navbar__link {
        padding: 0.75rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--color-border);
    }

    .navbar__link.active::after {
        display: none;
    }

    .navbar__link.active {
        color: var(--color-accent);
        font-weight: 600;
    }

    .navbar__cta {
        margin-left: 0;
        margin-top: var(--space-md);
        text-align: center;
    }

    /* Grid collapse */
    .grid--2,
    .grid--3 {
        grid-template-columns: 1fr;
    }

    .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Hero adjustments */
    .hero {
        padding: var(--space-3xl) 0;
        min-height: auto;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__actions .btn {
        width: 100%;
    }

    /* Footer adjustments */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    /* Filter bar */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar select {
        width: 100%;
    }

    /* Job cards */
    .job-card {
        padding: var(--space-lg);
    }

    /* Principles */
    .principles {
        grid-template-columns: 1fr;
    }

    .pipeline-grid,
    .engagement-grid,
    .workstream-grid,
    .risk-grid,
    .case-grid,
    .operating-model,
    .company-model {
        grid-template-columns: 1fr;
    }

    .proof-bar__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .process-strip {
        flex-direction: column;
    }

    .process-arrow {
        transform: rotate(90deg);
        align-self: center;
    }
}

/* --- Small mobile (480px) --- */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }

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

    .hero {
        padding: var(--space-2xl) 0;
    }

    .card {
        padding: var(--space-lg);
    }

    .btn--large {
        padding: 0.85rem 1.75rem;
        font-size: 1rem;
    }

    .team-founder__photo {
        width: 96px;
        height: 96px;
        font-size: 2rem;
    }

    .contact-info__icon {
        width: 40px;
        height: 40px;
        font-size: 0.6rem;
    }
}


/* ============================================
   26. HERO SCHEMATIC + RAIL + SPECTRUM + RAG
   Added: page-graphics pass 2
   ============================================ */

:root { --color-amber: #C8941A; }

/* ---- Hero schematic backdrop ---- */
.hero__schematic { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__schematic-grid {
    position: absolute; top: 0; left: 0; width: 56%; height: 100%;
    background-image:
        linear-gradient(to right, rgba(16, 32, 51, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 32, 51, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 45%, transparent 75%);
            mask-image: linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 45%, transparent 75%);
}
.hero__schematic-trace {
    position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 65%, rgba(0,0,0,0.35) 82%, transparent 92%);
            mask-image: linear-gradient(90deg, #000 0%, #000 65%, rgba(0,0,0,0.35) 82%, transparent 92%);
}
.hero__schematic-trace svg { width: 100%; height: 100%; display: block; }
.hero__schematic-mark {
    position: absolute; top: var(--space-xl); right: var(--space-xl);
    display: flex; align-items: flex-start; gap: 10px;
    font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--color-text-tertiary); opacity: 0.7;
}
.hero__schematic-mark::before {
    content: ""; width: 18px; height: 18px;
    border-top: 1px solid var(--color-text-tertiary);
    border-right: 1px solid var(--color-text-tertiary); opacity: 0.5;
}
.hero--split .hero__viz { position: relative; z-index: 1; }
.flow-panel { position: relative; z-index: 2; }

/* trace animations */
.trace-pulse { animation: trace-walk 5s linear infinite; }
@keyframes trace-walk {
    0%   { stroke-dashoffset: 60; }
    100% { stroke-dashoffset: -1760; }
}
.trace-node {
    transform-origin: center; transform-box: fill-box;
    animation: trace-node-flash 5s ease-in-out infinite;
}
@keyframes trace-node-flash {
    0%, 8%, 100% { opacity: 0.4; r: 3; }
    10%          { opacity: 1;   r: 4.5; }
    18%          { opacity: 0.4; r: 3; }
}
.trace-node--terminal { animation: trace-node-flash-terminal 5s ease-in-out infinite; }
@keyframes trace-node-flash-terminal {
    0%, 8%, 100% { opacity: 0.6; r: 3.5; }
    10%          { opacity: 1;   r: 5.5; }
    18%          { opacity: 0.8; r: 3.5; }
}
.trace-ring {
    transform-origin: 800px 32px;
    animation: trace-ring 5s ease-out infinite; animation-delay: 2.85s; opacity: 0;
}
@keyframes trace-ring {
    0%   { transform: scale(1); opacity: 0.7; }
    60%  { transform: scale(4); opacity: 0; }
    100% { transform: scale(4); opacity: 0; }
}

/* ---- #02 Operating Model rail ---- */
.operating-model { position: relative; counter-reset: model; }
.operating-model::before {
    content: ""; position: absolute;
    top: calc(var(--space-xl) + 12px + 24px);
    left: 12.5%; right: 12.5%; height: 1px;
    background: repeating-linear-gradient(90deg, var(--color-border-hover) 0 6px, transparent 6px 12px);
    z-index: 0;
}
.operating-model::after {
    content: ""; position: absolute;
    top: calc(var(--space-xl) + 12px + 21px);
    left: 12.5%; width: 7px; height: 7px; border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(22, 116, 95, 0.18);
    z-index: 1; animation: rail-walk 6s cubic-bezier(.65, .05, .35, 1) infinite;
}
@keyframes rail-walk {
    0%   { left: 12.5%; opacity: 0; }
    8%   { opacity: 1; }
    25%  { left: 37.5%; opacity: 1; }
    50%  { left: 62.5%; opacity: 1; }
    75%  { left: 87.5%; opacity: 1; }
    92%  { opacity: 1; }
    100% { left: 87.5%; opacity: 0; }
}
.model-step { position: relative; z-index: 2; }
.model-step span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--color-surface); border: 1px solid var(--color-border-hover);
    font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.04em; color: var(--color-accent);
    margin-bottom: var(--space-lg); margin-top: -2px; text-transform: none;
}
.model-step:nth-child(1) span { animation: badge-flash 6s ease-in-out infinite; animation-delay: 0s; }
.model-step:nth-child(2) span { animation: badge-flash 6s ease-in-out infinite; animation-delay: 1.5s; }
.model-step:nth-child(3) span { animation: badge-flash 6s ease-in-out infinite; animation-delay: 3.0s; }
.model-step:nth-child(4) span { animation: badge-flash 6s ease-in-out infinite; animation-delay: 4.5s; }
@keyframes badge-flash {
    0%, 92%, 100% { background: var(--color-surface); border-color: var(--color-border-hover); color: var(--color-accent); }
    4%            { background: var(--color-accent); border-color: var(--color-accent); color: #fff; box-shadow: 0 0 0 4px rgba(22,116,95,0.16); }
    14%           { background: var(--color-surface); border-color: var(--color-border-hover); color: var(--color-accent); box-shadow: none; }
}
/* override the legacy connector tail since we now have a real rail */
.model-step::after { display: none !important; }

/* ---- #03 Engagement spectrum ---- */
.engagement-spectrum { position: relative; margin-top: var(--space-2xl); }
.engagement-spectrum__ends {
    display: flex; justify-content: space-between; margin-bottom: var(--space-md);
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-tertiary);
}
.engagement-spectrum__ends em { font-style: normal; color: var(--color-accent); }
.engagement-spectrum__axis {
    position: relative; height: 1px;
    background: linear-gradient(90deg, var(--color-cobalt) 0%, var(--color-accent) 100%);
    margin-bottom: var(--space-lg); opacity: 0.5;
}
.engagement-spectrum__axis::before,
.engagement-spectrum__axis::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 999px; }
.engagement-spectrum__axis::before { left: 0; background: var(--color-cobalt); }
.engagement-spectrum__axis::after  { right: 0; background: var(--color-accent); }
.engagement-spectrum__cards {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg); position: relative;
}
.spectrum-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-lg);
    transition: border-color 250ms ease, transform 250ms ease;
    display: flex; flex-direction: column;
}
.spectrum-card:hover { border-color: var(--color-border-hover); transform: translateY(-2px); }
.spectrum-card--strong {
    border-color: var(--color-accent); border-width: 1.5px;
    box-shadow: 0 0 0 4px rgba(22, 116, 95, 0.07);
    background: linear-gradient(180deg, #fff 0%, #F5FBF8 100%);
}
.spectrum-card__num {
    font-family: var(--font-mono); font-size: 0.7rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--color-text-tertiary); margin-bottom: var(--space-md);
}
.spectrum-card--strong .spectrum-card__num { color: var(--color-accent); }
.spectrum-card__title {
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
    line-height: 1.25; margin-bottom: var(--space-sm); color: var(--color-text);
}
.spectrum-card__lead { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: var(--space-md); }
.spectrum-card__commit {
    margin-top: auto; padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.06em; color: var(--color-text-tertiary); line-height: 1.4;
}
.spectrum-card--strong .spectrum-card__commit { color: var(--color-accent-deep); }

/* ---- #04 Proof Patterns RAG strip ---- */
.case-card { display: flex; flex-direction: column; }
.case-card__rag {
    display: flex; align-items: center; gap: var(--space-md);
    padding-bottom: var(--space-md); margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.case-card__rag-dots { display: flex; gap: 6px; }
.case-card__rag-dot {
    width: 10px; height: 10px; border-radius: 999px;
    border: 1px solid rgba(16, 32, 51, 0.15); position: relative;
}
.case-card__rag-dot[data-state="green"] { background: var(--color-accent); border-color: var(--color-accent); }
.case-card__rag-dot[data-state="amber"] { background: var(--color-amber);  border-color: var(--color-amber); }
.case-card__rag-dot[data-state="grey"]  { background: transparent; }
.case-card__rag-dot[data-state="amber"]::after {
    content: ""; position: absolute; inset: -4px;
    border-radius: 999px; border: 1px solid var(--color-amber);
    opacity: 0; animation: rag-tick 3s ease-out infinite;
}
@keyframes rag-tick {
    0%, 100% { opacity: 0; transform: scale(1); }
    20%      { opacity: 0.55; transform: scale(1); }
    80%      { opacity: 0; transform: scale(1.7); }
}
.case-card__rag-labels {
    display: flex; gap: var(--space-md);
    font-family: var(--font-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-tertiary);
}

/* ---- responsive ---- */
@media (max-width: 1024px) {
    .operating-model::before, .operating-model::after { display: none; }
    .engagement-spectrum__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .engagement-spectrum__cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .trace-pulse, .trace-node, .trace-node--terminal, .trace-ring,
    .operating-model::after, .model-step span,
    .case-card__rag-dot[data-state="amber"]::after { animation: none !important; }
    .trace-ring, .operating-model::after { display: none; }
}