/* ==========================================================
   global.css — Site-wide stylesheet for RevOps On-Demand
   ========================================================== */

/* ——— Self-hosted Fonts ——— */
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ——— Fallback Font Metrics ——— */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107.40%; ascent-override: 90.20%; descent-override: 22.48%; line-gap-override: 0%; }
@font-face { font-family: 'Manrope Fallback'; src: local('Arial'); size-adjust: 105%; ascent-override: 93%; descent-override: 25%; line-gap-override: 0%; }

/* ——— Custom Properties ——— */
:root {
    --brand-primary: #E65100;
    --brand-secondary: #FF8F00;
    --background-dark: #0D1F3A;
    --background-panel: #122A4C;
    --background-muted: #0F2540;
    --background-accent: #162D50;
    --text-light: #F5F5F5;
    --text-muted: #BCCFE0;
    --border-color: #2A3F5F;
    --sales-color: #2a9d8f;
    --marketing-color: #B8860B;
    --cs-color: #CD5700;
    --finance-color: #264653;
    --legal-color: #4682B4;
    --product-color: #e76f51;
}

/* ——— Reset & Base ——— */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Manrope', 'Manrope Fallback', sans-serif;
    background-color: var(--background-dark);
    color: var(--text-light);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body.no-scroll {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

/* ——— Typography ——— */
h1, h2, h3, h4 {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    color: var(--text-light);
    line-height: 1.3;
}
h1 { font-size: 3.5rem; font-weight: 700; }
h2 { font-size: 2.5rem; font-weight: 600; text-align: center; margin-bottom: 2rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.1rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.5rem; }
p { color: var(--text-muted); margin-bottom: 1rem; font-size: 1rem; }
a { color: var(--brand-primary); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--brand-secondary); }

/* ——— Utility ——— */
.text-constrained {
    max-width: 75ch;
    margin-inline: auto;
    line-height: 1.7;
}

/* ——— Layout & Helpers ——— */
.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.full-bleed { width: 100%; padding: 2.5rem 1.5rem; }

/* ——— Header & Navigation ——— */
header {
    position: sticky; top: 0; width: 100%;
    background-color: rgba(13, 31, 58, 0.9);
    border-bottom: 1px solid var(--border-color); padding: 1.5rem 2rem; display: flex;
    justify-content: space-between; align-items: center; z-index: 1000;
    transition: padding 0.3s ease, background-color 0.3s ease;
}
.header-scrolled {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: rgba(13, 31, 58, 0.95);
}
.logo img { height: 35px; width: 180px; object-fit: contain; }
#desktop-nav { display: none; }
nav a { font-weight: 500; color: var(--text-muted); font-size: 0.95rem; }
nav a:hover { color: var(--text-light); text-decoration: none; }

/* Header nav variant (insights / article pages) */
.header-nav { display: flex; align-items: center; gap: 1.5rem; }
.header-nav a { font-weight: 500; color: var(--text-muted); font-size: 0.95rem; }
.header-nav a:hover { color: var(--text-light); }
header:has(.header-nav) { padding: 1rem 2rem; background-color: rgba(13, 31, 58, 0.95); }
header:has(.header-nav) .cta-button { padding: 0.6rem 1.25rem; font-size: 0.9rem; }

/* ——— CTA Button (animated gradient) ——— */
.cta-button {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--brand-primary));
    background-size: 200% auto;
    color: #FFFFFF !important;
    padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600;
    transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.95rem; border: none; cursor: pointer;
    display: inline-block;
}
.cta-button:hover {
    background-position: right center;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(230, 81, 0, 0.2);
    color: #FFFFFF !important;
    text-decoration: none;
}

/* RevOps gradient menu item */
.revops-menu-item {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
}
.revops-menu-item:hover { color: var(--brand-secondary) !important; -webkit-text-fill-color: var(--brand-secondary); }

/* Mobile menu */
.mobile-menu-button { background: none; border: none; cursor: pointer; padding: 0; z-index: 1010; }
.mobile-menu-button .icon-menu, .mobile-menu-button.is-open .icon-close { display: block; width: 28px; height: 28px; stroke: var(--text-light); }
.mobile-menu-button .icon-close, .mobile-menu-button.is-open .icon-menu { display: none; }
#mobile-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--background-dark);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem;
    transform: translateX(100%); transition: transform 0.4s ease-in-out; z-index: 1005;
}
#mobile-nav.is-open { transform: translateX(0); }
#mobile-nav a { color: var(--text-light); font-size: 1.5rem; font-weight: 600; }
#mobile-nav .cta-button { font-size: 1.2rem; }

/* ——— Hero (homepage) ——— */
.hero { width: 100%; padding: 3rem 1.5rem 2.5rem; position: relative; overflow: hidden; }
.hero::before {
    content: '';
    position: absolute;
    top: -40%; left: 50%; transform: translateX(-50%);
    width: 120%; height: 180%;
    background:
        radial-gradient(ellipse 50% 40% at 50% 20%, rgba(230, 81, 0, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 30% 60%, rgba(18, 42, 76, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 70% 60%, rgba(18, 42, 76, 0.3) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.hero::after {
    content: '';
    position: absolute; top: -5%; left: -5%; width: 110%; height: 110%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat; background-size: 256px 256px;
    opacity: 0.4; pointer-events: none; z-index: 0;
    will-change: transform;
    animation: hero-grain 8s steps(4) infinite;
}
@keyframes hero-grain {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-5%, -5%); }
    50% { transform: translate(5%, 0); }
    75% { transform: translate(0, 5%); }
}
.hero-content { text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.hero h1 { margin-bottom: 1.5rem; }
.hero p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }

/* Section backgrounds (homepage) */
#about, #services, #process, #insights { background-color: var(--background-panel); }
#revops-animation, #impact, #contact, #ai-systems, #faq { background-color: var(--background-dark); }

/* Scroll-reveal animation */
.fade-in-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition-delay: calc(var(--stagger-index, 0) * 0.15s); }
.fade-in-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* Header sentinel */
#header-sentinel { position: absolute; top: 50px; height: 1px; width: 1px; pointer-events: none; }

/* ——— About Grid (homepage) ——— */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.about-image { width: 100%; max-width: 350px; height: 350px; border-radius: 24px; margin: 0 auto; overflow: hidden; }
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.about-text h2 { text-align: center; margin-bottom: 1.5rem; }
.about-text p { text-align: center; }

/* Stat callout row */
.stat-row { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.stat-item { text-align: center; padding: 0.75rem 1.25rem; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--background-dark); flex: 1; min-width: 100px; }
.stat-number { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.5rem; font-weight: 700; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.25rem; }

/* ——— Company Logos ——— */
.company-logos { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.company-logos svg { height: 18px; width: auto; opacity: 0.5; transition: opacity 0.3s ease; flex-shrink: 0; }
.company-logos svg:hover { opacity: 1; }
.company-logos img { height: 18px; width: auto; opacity: 0.5; filter: brightness(0) invert(1); transition: opacity 0.3s ease, filter 0.3s ease; flex-shrink: 0; }
.company-logos img:hover { opacity: 1; filter: none; }
.company-logos img[alt="Datamaran logo"] { height: 26px; }

/* ——— Services Grid ——— */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 340px)); gap: 2rem; justify-content: center; }
.service-item {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 2px solid var(--border-color); background-color: var(--background-dark);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-radius: 8px; padding: 2.5rem;
    position: relative; border-top: 3px solid var(--border-color);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) { .service-item:hover {
    transform: translateY(-5px) scale(1.01);
    border-color: var(--brand-primary);
    box-shadow: 0 10px 30px -10px rgba(230, 81, 0, 0.15);
} }
.service-badge { position: absolute; top: -1px; right: 1.25rem; transform: translateY(-50%); font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 700; font-size: 0.75rem; color: var(--text-muted); background-color: var(--background-dark); border: 1px solid var(--border-color); border-radius: 20px; padding: 0.2rem 0.6rem; letter-spacing: 0.05em; transition: border-color 0.3s ease, color 0.3s ease; }
.service-item[data-service="advisory"] { border-top-color: var(--brand-primary); }
.service-item[data-service="advisory"] .service-badge { border-color: var(--brand-primary); color: var(--brand-primary); }
.service-item[data-service="leadership"] { border-top-color: var(--brand-secondary); }
.service-item[data-service="leadership"] .service-badge { border-color: var(--brand-secondary); color: var(--brand-secondary); }
.service-item[data-service="design"] { border-top-color: var(--sales-color); }
.service-item[data-service="design"] .service-badge { border-color: var(--sales-color); color: var(--sales-color); }
.service-item[data-service="coaching"] { border-top-color: var(--legal-color); }
.service-item[data-service="coaching"] .service-badge { border-color: var(--legal-color); color: var(--legal-color); }
@media (hover: hover) { .service-item:hover .service-badge { border-color: var(--brand-primary); color: var(--brand-primary); } }
.service-item .icon { width: 56px; height: 56px; margin-bottom: 1.5rem; }
.service-bullets { list-style: none; padding: 0; margin: 0; text-align: left; width: 100%; }
.service-bullets li { color: var(--text-muted); font-size: 0.95rem; padding: 0.35rem 0; padding-left: 1.5rem; position: relative; margin-bottom: 0; }
.service-bullets li::before { content: ''; position: absolute; left: 0; top: 0.7rem; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); }
.service-description { color: var(--text-muted); font-size: 0.95rem; text-align: left; width: 100%; margin: 0 0 0.75rem 0; line-height: 1.6; }
.service-detail { color: var(--text-muted); font-size: 0.85rem; text-align: left; width: 100%; margin: 0; opacity: 0.8; font-style: italic; line-height: 1.5; border-top: 1px solid var(--border-color); padding-top: 0.75rem; margin-top: 0.75rem; }
.services-cta-container { text-align: center; margin-top: 2rem; }

/* ——— Impact ——— */
.impact-stat { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.5rem; font-weight: 700; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 0.25rem; }
.list-section .icon { width: 48px; height: 48px; flex-shrink: 0; }
.why-card { background-color: var(--background-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-left: 3px solid var(--brand-primary); border-radius: 0 8px 8px 0; padding: 1.5rem 2rem; display: flex; align-items: flex-start; gap: 1.25rem; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
@media (hover: hover) { .why-card:hover { transform: translateY(-5px) scale(1.01); border-color: var(--brand-primary); box-shadow: 0 10px 30px -10px rgba(230, 81, 0, 0.15); } }
.why-card:nth-child(2) { border-left-color: var(--brand-secondary); }
.why-card:nth-child(3) { border-left-color: var(--sales-color); }
.why-card:nth-child(4) { border-left-color: var(--legal-color); }
.why-card .icon { width: 48px; height: 48px; flex-shrink: 0; }
.why-card-content h4 { margin-bottom: 0.4rem; }
.why-card-content p { margin-bottom: 0; font-size: 0.95rem; }
.testimonial-card { background-color: var(--background-panel); border-left: 3px solid var(--brand-primary); border-radius: 0 8px 8px 0; padding: 2rem; margin-top: 1.5rem; width: 100%; }
.testimonial-card p { font-size: 1.05rem; font-style: italic; color: var(--text-light); margin-bottom: 1rem; }
.testimonial-card span { display: block; margin-top: 1rem; font-weight: 600; color: var(--text-muted); font-style: normal; }
.results-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 900px; margin: 0 auto 2.5rem; }
.results-stat-item { text-align: center; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px; background-color: var(--background-panel); }
.results-stat-item p { font-size: 0.9rem; margin-bottom: 0; }
.results-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto 2.5rem; }
.results-testimonials .testimonial-card { margin-top: 0; margin-left: 0; width: auto; }
.results-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }

/* ——— RevOps Animation ——— */
@keyframes pulse-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.05); }
}
.intro-text { color: var(--text-muted); max-width: 650px; margin: 0 auto 2rem auto; line-height: 1.7; font-size: 1.1rem; text-align: center; }
.animation-canvas { width: 100%; max-width: 600px; height: 450px; margin: 0 auto; position: relative; contain: layout style paint; }
.faq-list { contain: layout style paint; }
.services-grid, .systems-grid, .content-panel { contain: layout style; }
.department-circle {
    width: 100px; height: 100px; border-radius: 50%; position: absolute;
    display: flex; justify-content: center; align-items: center;
    font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    font-size: 0.9rem; z-index: 5; padding: 5px; text-align: center;
    background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.15);
    transition: transform 1.2s cubic-bezier(0.64, 0.04, 0.35, 1), box-shadow 0.3s ease;
    transition-delay: 0s; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
@media (hover: hover) { .department-circle:hover { transform: translateY(-5px) scale(1.05); } }
#revops-hub { width: 130px; height: 130px; position: absolute; top: 50%; left: 50%; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 10; transform: translate(-50%, -50%); }
.animation-canvas:not(.is-connected) #revops-hub { animation: pulse-glow 2.5s infinite ease-in-out; }
.animation-canvas.is-connected #revops-hub { transform: translate(-50%, -50%) scale(0.8); }
.hub-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: 600; font-size: 1rem; transition: opacity 0.5s ease; text-align: center; pointer-events: none; }
.animation-canvas:not(.is-connected) #hub-text-revops { opacity: 0; }
.animation-canvas:not(.is-connected) #hub-text-action { opacity: 1; }
.animation-canvas.is-connected #hub-text-action { opacity: 0; }
.animation-canvas.is-connected #hub-text-revops { opacity: 1; }
.connection-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.connection-lines path { fill: none; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1s ease-out, stroke 0.3s ease; }
.hub-line { stroke: var(--text-muted); stroke-width: 2.5; }
.inter-line { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.7; }
.hub-line.activated, .inter-line.activated { stroke: var(--brand-primary); }
.animation-canvas.is-drawing .connection-lines path { stroke-dashoffset: 0; }
.animation-canvas.is-drawing .hub-line { transition-delay: 0s; }
.animation-canvas.is-drawing .inter-line { transition-delay: 0.4s; }
#sales-circle { background: linear-gradient(145deg, #4ccaa3, var(--sales-color)); box-shadow: 0 5px 20px -5px var(--sales-color); transform: translate(120px, 20px); transition-delay: 0s, 0s; }
#marketing-circle { background: linear-gradient(145deg, #eab64a, var(--marketing-color)); box-shadow: 0 5px 20px -5px var(--marketing-color); transform: translate(450px, 80px); transition-delay: 0.1s, 0s; }
#product-circle { background: linear-gradient(145deg, #ed8f75, var(--product-color)); box-shadow: 0 5px 20px -5px var(--product-color); transform: translate(350px, 10px); transition-delay: 0.2s, 0s; }
#cs-circle { background: linear-gradient(145deg, #e07b39, var(--cs-color)); box-shadow: 0 5px 20px -5px var(--cs-color); transform: translate(380px, 320px); transition-delay: 0.3s, 0s; }
#finance-circle { background: linear-gradient(145deg, #386477, var(--finance-color)); box-shadow: 0 5px 20px -5px var(--finance-color); transform: translate(100px, 350px); transition-delay: 0.4s, 0s; }
#legal-circle { background: linear-gradient(145deg, #6497b5, var(--legal-color)); box-shadow: 0 5px 20px -5px var(--legal-color); transform: translate(20px, 180px); transition-delay: 0.5s, 0s; }
@media (hover: hover) {
    #sales-circle:hover { box-shadow: 0 8px 30px -5px var(--sales-color); }
    #marketing-circle:hover { box-shadow: 0 8px 30px -5px var(--marketing-color); }
    #product-circle:hover { box-shadow: 0 8px 30px -5px var(--product-color); }
    #cs-circle:hover { box-shadow: 0 8px 30px -5px var(--cs-color); }
    #finance-circle:hover { box-shadow: 0 8px 30px -5px var(--finance-color); }
    #legal-circle:hover { box-shadow: 0 8px 30px -5px var(--legal-color); }
}

/* ——— Contact ——— */
#contact .container { text-align: center; }
#contact p { max-width: 550px; margin: 0 auto 2.5rem auto; color: var(--text-muted); font-size: 1.1rem; text-align: center; }
.trust-signals { display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.trust-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); padding: 0.4rem 1rem; border: 1px solid var(--border-color); border-radius: 20px; }
.trust-badge svg { width: 14px; height: 14px; stroke: var(--brand-primary); flex-shrink: 0; }
.contact-details { margin-top: 3rem; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }

/* ——— Content Hub & Insights (homepage tabs) ——— */
.content-tabs { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; border-bottom: 2px solid var(--border-color); }
.tab-link { background: none; border: none; color: var(--text-muted); font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.1rem; font-weight: 600; padding: 1rem 1.5rem; cursor: pointer; transition: color 0.3s ease; border-bottom: 3px solid transparent; transform: translateY(2px); }
.tab-link:hover { color: var(--text-light); }
.tab-link.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.content-panel { display: none; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.content-panel.active { display: grid; }
.content-card { background-color: var(--background-dark); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 8px; border: 1px solid var(--border-color); display: flex; flex-direction: column; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
@media (hover: hover) { .content-card:hover { transform: translateY(-5px) scale(1.01); border-color: var(--brand-primary); box-shadow: 0 10px 30px -10px rgba(230, 81, 0, 0.15); } }
.card-body { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
.card-category { display: inline-block; color: var(--brand-secondary); font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; }
.content-card h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.content-card p { font-size: 0.95rem; flex-grow: 1; margin-bottom: 2rem; }
.card-link { font-weight: 600; color: var(--text-light); }
.card-link:hover { color: var(--brand-primary); }

/* ——— Process Section ——— */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; position: relative; }
.process-step { text-align: center; position: relative; }
.process-number { width: 60px; height: 60px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 auto 1.25rem; position: relative; z-index: 2; }
.process-step h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.process-step p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.process-connector { position: absolute; top: 30px; left: calc(50% + 35px); width: calc(100% - 70px); height: 2px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); opacity: 0.5; }
.process-step:last-child .process-connector { display: none; }

/* ——— FAQ (homepage button-based) ——— */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-question { width: 100%; background: none; border: none; padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; }
.faq-question h3, .faq-question .faq-question-text { font-size: 1.1rem; color: var(--text-light); margin: 0; padding-right: 1rem; font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 600; }
.faq-question:hover h3, .faq-question:hover .faq-question-text { color: var(--brand-primary); }
.faq-icon { width: 24px; height: 24px; flex-shrink: 0; stroke: var(--text-muted); transition: transform 0.3s ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.faq-answer > div { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > div { padding-bottom: 1.5rem; }
.faq-answer p { margin: 0; color: var(--text-muted); line-height: 1.7; }
.faq-answer strong { color: var(--text-light); font-weight: 600; }
.faq-cta { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.faq-cta p { font-size: 1rem; color: var(--text-muted); margin: 0; }
.faq-cta a { color: var(--brand-primary); font-weight: 600; }

/* ——— FAQ (pillar/supporting page details-based) ——— */
details.faq-item { border-bottom: 1px solid var(--border-color); padding: 1.75rem 0; }
details.faq-item:first-child { border-top: 1px solid var(--border-color); }
details.faq-item summary { cursor: pointer; list-style: none; font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--text-light); display: flex; align-items: center; justify-content: space-between; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--text-muted); flex-shrink: 0; margin-left: 1rem; }
details.faq-item[open] summary::after { content: '\2212'; }
details.faq-item[open] summary { margin-bottom: 0.75rem; }
details.faq-item p { font-size: 0.95rem; margin-bottom: 0; color: var(--text-muted); }

/* ——— AI-Built Systems ——— */
.systems-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto; }
.systems-card { background-color: var(--background-panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
@media (hover: hover) { .systems-card:hover { transform: translateY(-5px) scale(1.01); border-color: var(--brand-primary); box-shadow: 0 10px 30px -10px rgba(230, 81, 0, 0.15); } }
.systems-card h3 { font-size: 1.15rem; margin-bottom: 0; }
.systems-card .card-description { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0; }
.replaces-list { font-size: 0.85rem; color: var(--text-muted); opacity: 0.7; margin-bottom: 0; }
.savings-amount { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.75rem; font-weight: 700; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0; }
.systems-more { margin-top: 2rem; background-color: var(--background-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 2.5rem; max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; transition: border-color 0.3s ease; }
.systems-more:hover { border-color: var(--brand-primary); }
.systems-more .savings-amount { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
.systems-more h3 { margin-bottom: 1rem; font-size: 1.15rem; }
.systems-more .tools-list { color: var(--text-muted); font-size: 0.9rem; line-height: 2; margin-bottom: 0; }
.systems-more .tools-list span { display: inline-block; padding: 0.25rem 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; margin: 0.25rem; font-size: 0.85rem; }
.total-savings { text-align: center; margin-top: 2rem; }
.total-savings .savings-amount { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.total-savings p { color: var(--text-muted); font-size: 1.1rem; }

/* AI flow visual */
.ai-flow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; max-width: 800px; margin-left: auto; margin-right: auto; }
.ai-flow-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--background-panel); flex: 1; min-width: 0; transition: border-color 0.3s ease; }
.ai-flow-step:hover { border-color: var(--brand-primary); }
.ai-flow-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.ai-flow-before .ai-flow-icon { background-color: rgba(42, 63, 95, 0.6); color: var(--text-muted); }
.ai-flow-build .ai-flow-icon { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); color: #fff; }
.ai-flow-result .ai-flow-icon { background-color: rgba(230, 81, 0, 0.15); color: var(--brand-secondary); }
.ai-flow-label { font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text-light); margin-bottom: 0.25rem; }
.ai-flow-detail { font-size: 0.8rem; color: var(--text-muted); }
.ai-flow-arrow { color: var(--brand-primary); flex-shrink: 0; opacity: 0.6; }

/* Scroll cue */
.scroll-cue { display: block; margin-top: 2rem; color: var(--text-muted); opacity: 0.5; transition: opacity 0.3s ease; animation: scroll-bounce 2s ease-in-out infinite; }
.scroll-cue:hover { opacity: 1; color: var(--brand-primary); }
@keyframes scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ——— Cookie Consent Banner ——— */
#cookie-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--background-panel); padding: 1.5rem; border-top: 1px solid var(--border-color); z-index: 2000; display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; }
#cookie-consent-banner.show { display: flex; }
.cookie-text { color: var(--text-muted); font-size: 0.9rem; text-align: center; flex-grow: 1; margin-right: 1rem; }
.cookie-text a { color: var(--brand-secondary); text-decoration: underline; }
.cookie-buttons { display: flex; gap: 1rem; align-items: center; }
.cookie-button { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-light); padding: 0.6rem 1.2rem; border-radius: 6px; cursor: pointer; font-weight: 500; transition: background-color 0.3s ease, border-color 0.3s ease; }
.cookie-button#accept-cookies { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); border: none; }
.cookie-button#accept-cookies:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 81, 0, 0.2); }
.cookie-button#decline-cookies:hover { background-color: var(--border-color); }

/* ——— Page-Section Layout (about, pillar, supporting, 404) ——— */
.page-section { width: 100%; }
.page-section .section-inner { max-width: 800px; margin: 0 auto; padding: 6rem 1.5rem; }
.section-hero { background-color: var(--background-dark); border-bottom: 1px solid var(--border-color); }
.section-hero .section-inner { padding-top: 3rem; padding-bottom: 4rem; }
.section-default { background-color: var(--background-dark); }
.section-muted { background-color: var(--background-muted); }
.section-accent { background-color: var(--background-accent); }
.section-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; display: block; margin-bottom: 0.75rem; color: var(--text-muted); font-weight: 600; }
.section-label + h2 { margin-top: 0; }
.section-inner > h2:first-child { margin-top: 0; }
.section-inner h2 + p { font-size: 1.1rem; color: var(--text-light); }

/* Split-grid layout (h2 left, content right) */
.section-inner.split-grid { max-width: 1000px; }
.split-grid .split-heading { margin-bottom: 2rem; }
.split-grid .split-heading .section-label { margin-bottom: 0.75rem; }
.split-grid .split-heading h2 { margin-top: 0; }
@media (min-width: 768px) {
    .section-inner.split-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
    .split-grid .split-heading { position: sticky; top: 6rem; align-self: start; margin-bottom: 0; }
}

/* Page-section typography overrides */
.page-section h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: 2rem; }
.page-section h2 { font-size: 2rem; font-weight: 600; margin-bottom: 1.5rem; margin-top: 2rem; text-align: left; }
.page-section h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; }
.page-section p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 1.5rem; line-height: 1.7; }
.page-section ul { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 1.5rem; padding-left: 0; list-style: none; }
.page-section ul li { padding: 0.65rem 0; display: flex; align-items: flex-start; gap: 0.75rem; }
.page-section ul li::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)); margin-top: calc(1.05rem * 0.85 - 4px); }
.page-section .cta-button { background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--brand-primary)); background-size: 200% auto; padding: 1rem 2rem; border-radius: 8px; transition: background-position 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.page-section .cta-button:hover { background-position: right center; box-shadow: 0 10px 20px rgba(230, 81, 0, 0.2); }

/* Section icons (pillar pages) */
.section-icon { display: block; margin-bottom: 1.25rem; opacity: 0.7; }
.section-icon svg { width: 24px; height: 24px; stroke: var(--brand-primary); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Scroll anchor nav (pillar pages) */
.page-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color); opacity: 0.85; }
.page-nav a { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); transition: color 0.3s ease; }
.page-nav a:hover { color: var(--brand-primary); }

/* Sticky variant (guide page) */
.page-nav--sticky { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 1.25rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); opacity: 0.85; position: sticky; top: 67px; z-index: 999; background-color: var(--background-dark); max-width: 800px; margin: 0 auto; }
.page-nav--sticky a { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); transition: color 0.3s ease; }
.page-nav--sticky a:hover { color: var(--brand-primary); }

/* Callout */
.callout { border-left: 4px solid var(--brand-primary); padding: 1.5rem 2rem; margin: 3rem 0; background-color: var(--background-panel); border-radius: 0 8px 8px 0; }
.callout p { font-size: 1.15rem; font-weight: 500; color: var(--text-light); margin-bottom: 0; line-height: 1.6; }
.internal-link { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: 0.95rem; }

/* CTA section */
.cta-section { text-align: center; padding: 5rem 2rem; background-color: var(--background-panel); border-radius: 8px; border: 1px solid var(--border-color); }
.cta-section h2 { margin-bottom: 1rem; font-weight: 600; text-align: center; }
.cta-section p { max-width: 550px; margin: 0 auto 2rem; text-align: center; }

/* Back link */
.back-link { display: inline-block; margin-bottom: 2rem; font-size: 0.9rem; color: var(--text-muted); }
.back-link:hover { color: var(--brand-primary); }

/* Comparison grid (pillar & supporting pages) */
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.comparison-card { padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: rgba(255,255,255,0.02); }
.comparison-card.operator,
.comparison-card.highlight,
.comparison-card.fractional { border-color: var(--brand-primary); border-top: 3px solid var(--brand-primary); }
.comparison-card h3 { margin-bottom: 1rem; }
.comparison-card p { font-size: 0.95rem; margin-bottom: 0.75rem; }
.comparison-intro { font-size: 1rem; color: var(--text-light); margin-bottom: 1rem; }

/* Engagement steps (fractional-revops pillar) */
.engagement-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; }
.step-card { padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--background-panel); text-align: center; }
.step-number { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.5rem; font-weight: 700; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 0.75rem; }
.step-card h3 { margin-bottom: 0.5rem; }
.step-card p { font-size: 0.9rem; margin-bottom: 0; }

/* Pros/cons & decision grid (managed-revops pillar) */
.pros-cons { margin: 1.5rem 0; }
.pros-cons h4 { font-family: 'Inter', 'Inter Fallback', sans-serif; color: var(--text-light); }
.pros-cons ul { margin-bottom: 1rem; }
.pros-cons li { font-size: 0.95rem; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.decision-card { padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--background-panel); }
.decision-card.managed { border-top: 3px solid var(--border-color); }
.decision-card.fractional { border-top: 3px solid var(--brand-primary); }
.decision-card h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.decision-card p { font-size: 0.95rem; }

/* Key takeaways (guide page) */
.key-takeaways { padding: 2.5rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--background-panel); margin: 2rem 0; }
.key-takeaways h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; color: var(--brand-secondary); }
.key-takeaways ul { margin-bottom: 0; }
.key-takeaways li { font-size: 0.95rem; padding: 0.5rem 0; }

/* Operator experience subtitle */
.operator-experience { font-size: 0.8rem; color: var(--text-muted); opacity: 0.6; letter-spacing: 0.02em; margin-top: 1rem; margin-bottom: 0; }

/* Who-this-is-for grid */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 2rem 0; }
.fit-column h3 { margin-bottom: 0.75rem; }
.fit-column ul { margin-bottom: 0; }
.fit-column li { font-size: 0.95rem; }
.fit-column li::before { margin-top: calc(0.95rem * 0.85 - 4px); }

/* Related reading */
.related-reading { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
.related-reading h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); opacity: 0.7; margin-bottom: 1rem; }
.related-reading ul { margin-bottom: 0; }
.related-reading li { font-size: 0.95rem; padding: 0.4rem 0; }
.related-reading li::before { margin-top: calc(0.95rem * 0.85 - 4px); }
.related-reading a { display: block; padding: 0.5rem 0; font-weight: 500; font-size: 0.95rem; }

/* Author block */
.author-block { border-top: 1px solid var(--border-color); padding-top: 2rem; }
.author-block .author-label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; color: var(--text-muted); font-weight: 600; margin-bottom: 0.75rem; }
.author-block p { font-size: 0.95rem; }
.author-block strong { color: var(--text-light); }

/* ——— Insights Hub Page ——— */
.page-container { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.page-header { margin-bottom: 3rem; }
.page-header .back-link { display: inline-block; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.page-header .back-link:hover { color: var(--text-light); }
.page-header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; }
.page-header p { color: var(--text-muted); font-size: 1.05rem; max-width: 600px; }

/* Insights section label */
.insights-section .section-label,
.articles-section .section-label,
.external-section .section-label {
    font-family: 'Inter', 'Inter Fallback', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    opacity: 1;
}

/* Article cards (insights hub) */
.articles-section { margin-bottom: 4rem; }
.article-card { display: block; background-color: var(--background-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; margin-bottom: 1.5rem; transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; }
@media (hover: hover) { .article-card:hover { border-color: var(--brand-primary); transform: translateY(-5px) scale(1.01); box-shadow: 0 10px 30px -10px rgba(230, 81, 0, 0.15); } }
.article-card h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.article-card:hover h3 { color: var(--text-light); }
.article-card p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0.75rem; }
.article-card .card-meta { font-size: 0.85rem; color: var(--text-muted); opacity: 0.7; }

/* External content grid (insights hub) */
.external-section { margin-bottom: 3rem; }
.content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.content-grid .content-card { background-color: var(--background-panel); padding: 1.5rem; }
@media (hover: hover) { .content-grid .content-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 10px 30px -10px rgba(230, 81, 0, 0.15); } }
.content-grid .card-category { font-size: 0.8rem; margin-bottom: 0.75rem; }
.content-grid .content-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.content-grid .content-card p { font-size: 0.9rem; margin-bottom: 1rem; }
.content-grid .card-link { font-size: 0.9rem; }

/* ——— Insight Article Pages ——— */
.article-container { max-width: 740px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.article-meta { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border-color); }
.article-meta .back-link { display: inline-block; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 2rem; }
.article-meta .back-link:hover { color: var(--text-light); }
.article-meta h1 { font-size: 2.4rem; font-weight: 700; line-height: 1.25; margin-bottom: 1.25rem; }
.article-byline { font-size: 0.9rem; color: var(--text-muted); }
.article-byline span { margin-right: 1.5rem; }
.article-body p { font-size: 1.125rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 1.5rem; }
.article-footer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }
.article-footer p { font-size: 0.95rem; color: var(--text-muted); }
.article-footer a { color: var(--brand-primary); }

/* Related reading (article pages) */
.article-footer .related-reading { margin-top: 2rem; font-size: 0.9rem; color: var(--text-muted); border-top: none; padding-top: 0; }
.article-footer .related-reading a { color: var(--brand-primary); display: inline; padding: 0; }

/* ——— 404 Page ——— */
.nav-links { list-style: none; padding: 0; margin: 2.5rem 0 0; }
.nav-links li { padding: 0; margin-bottom: 0.75rem; display: block; }
.nav-links li::before { display: none; }
.nav-links a { font-size: 1.05rem; font-weight: 500; }
.cta-actions { margin-top: 3rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.home-link { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-color); }

/* ——— Footer ——— */
footer { padding: 2rem 1.5rem; text-align: center; border-top: 1px solid var(--border-color); }
footer p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }
.legal-links { margin-top: 0.5rem; }
.legal-links a { color: var(--text-muted); font-size: 0.8rem; margin: 0 0.5rem; }
.footer-seo-links { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.footer-seo-links p { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-seo-links a { margin: 0 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
.footer-seo-links a:hover { color: var(--brand-primary); }

/* ——— Accessibility ——— */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.skip-to-content { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-to-content:focus { position: static; width: auto; height: auto; padding: 8px; background: #000; color: #fff; z-index: 9999; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ——— Custom Scrollbar ——— */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--background-dark); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

/* ——— Responsive ——— */
@media (min-width: 1024px) {
    h1 { font-size: 3rem; }
}
@media (min-width: 992px) {
    #desktop-nav { display: flex; align-items: center; gap: 2rem; }
    .mobile-menu-button { display: none; }
    #mobile-nav { display: none; }
    .about-grid { grid-template-columns: 350px 1fr; }
    .about-text h2 { text-align: left; }
    .about-text p { text-align: left; }
    .about-text .stat-row { justify-content: flex-start; max-width: 100%; }
    .about-text .company-logos { justify-content: flex-start; }
    .testimonial-card { margin-top: 0; width: auto; }
}
@media (min-width: 768px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .systems-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .process-grid { grid-template-columns: 1fr; gap: 2rem; }
    .process-connector { display: none; }
    .process-step { position: relative; padding-bottom: 1rem; }
    .process-step::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 1rem; background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary)); opacity: 0.5; }
    .process-step:last-child::after { display: none; }
}
@media (max-width: 767px) {
    .hero::after { display: none; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; margin-bottom: 1.5rem; }
    .full-bleed, .container { padding: 2.5rem 1.5rem; }
    .results-stats, .results-testimonials, .results-cards { grid-template-columns: 1fr; }
    .stat-row { gap: 0.75rem; }
    .stat-item { padding: 0.6rem 0.75rem; }
    .stat-number { font-size: 1.25rem; }
    .stat-label { font-size: 0.7rem; }
    header { padding: 1rem 1rem; }
    header .cta-button { padding: 0.5rem 1rem; font-size: 0.8rem; }
    .logo img { width: 140px; height: auto; }
    p { margin-bottom: 1.25rem; line-height: 1.75; }
    .page-section .section-inner { max-width: 92%; padding: 5rem 1.5rem; }
    .section-hero .section-inner { padding-top: 2rem; }
    .comparison-grid { grid-template-columns: 1fr; }
    .engagement-steps { grid-template-columns: 1fr; }
    .decision-grid { grid-template-columns: 1fr; }
    .fit-grid { grid-template-columns: 1fr; }
    .callout { padding: 1.25rem 1.5rem; }
    .page-nav { gap: 1rem; }
    .page-nav--sticky { gap: 1rem; position: static; }
    #cookie-consent-banner { flex-direction: column; padding: 1.5rem; }
    .cookie-text { margin-right: 0; margin-bottom: 1rem; }
    .header-nav .cta-button { display: none; }
}
@media (max-width: 600px) {
    .animation-canvas { height: 400px; }
    .department-circle { width: 80px; height: 80px; font-size: 0.75rem; }
    #revops-hub { width: 100px; height: 100px; }
    #sales-circle { transform: translate(80px, 10px); }
    #marketing-circle { transform: translate(200px, 50px); }
    #cs-circle { transform: translate(180px, 280px); }
    #finance-circle { transform: translate(50px, 300px); }
    #legal-circle { transform: translate(10px, 150px); }
    #product-circle { transform: translate(150px, 20px); }
    .ai-flow { flex-direction: column; gap: 0.5rem; }
    .ai-flow-arrow { transform: rotate(90deg); }
    .ai-flow-step { width: 100%; flex-direction: row; gap: 1rem; text-align: left; padding: 1rem 1.25rem; }
    .ai-flow-icon { margin-bottom: 0; flex-shrink: 0; }
    .page-header h1 { font-size: 2rem; }
    .article-meta h1 { font-size: 1.8rem; }
    .article-body p { font-size: 1.05rem; }
}