/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* ============================================
   Neovation Custom Learning – Shared Styles
   Fonts: Host Grotesk (headings, buttons, nav)
          Lato (body copy) — loaded via Google Fonts

   Design tokens defined in css/variables.css.
   All values reference CSS custom properties from
   the design system — no legacy aliases remain.
   ============================================ */

/* ============================================
   HEADER / NAVIGATION
   ============================================ */

.header {
    position: fixed;
    top: 12px;
    left: 24px;
    right: 24px;
    z-index: 100;
    max-width: var(--max-width-nav);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: top 0.35s var(--easing-in-out),
                border-radius 0.35s var(--easing-in-out),
                background 0.35s var(--easing-in-out),
                box-shadow 0.35s var(--easing-in-out),
                border-color 0.35s var(--easing-in-out);
}

.header-inner {
    display: flex;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    height: 84px;
    transition: height 0.35s var(--easing-in-out);
}

.header.header-scrolled {
    top: 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header.header-scrolled .header-inner {
    height: 64px;
}

.header.header-scrolled .logo img {
    height: 40px;
}

.header.header-scrolled .nav-item {
    transform: translateY(0);
}

.logo img {
    height: 71.5px;
    width: auto;
    display: block;
    transition: height 0.35s var(--easing-in-out);
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-left: 2.5rem;
    flex: 1;
    align-self: stretch;     /* Fill header height so .nav-dropdown stretch works */
    transition: gap 0.35s var(--easing-in-out);
}

.nav-item {
    font-family: var(--font-heading);
    color: #2d2d3a;
    text-decoration: none;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    cursor: pointer;
    position: relative;
    padding: 0.5rem 0;
    transition: color var(--transition-fast), transform 0.35s var(--easing-in-out);
    white-space: nowrap;
    transform: translateY(7px);
}

.nav-item:hover,
.nav-dropdown.is-hover > .nav-item,
.nav-dropdown.is-open > .nav-item,
.nav-dropdown:focus-within > .nav-item {
    color: var(--color-accent-primary);
}

.nav-item.active {
    color: #2d2d3a;
    font-weight: var(--weight-medium);
}

.nav-item::before {
    content: none;
}

.nav-item.has-dropdown::after {
    content: '\2198';
    margin-left: 0.25rem;
    font-size: 0.75rem;
    transition: transform var(--transition-base);
    vertical-align: middle;
}


/* === CTA Button (Primary) === */
.cta-button {
    color: #ffffff;
    background-color: var(--color-accent-primary);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), filter var(--transition-base);
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.cta-button.secondary {
    background-color: transparent;
    border: 1px solid var(--color-grey-200);
    color: var(--color-text-primary);
}

.cta-button.secondary:hover {
    border-color: var(--color-grey-300);
}

/* === Nav CTA — purple gradient button (scoped to header only) === */
.header .cta-button {
    background: linear-gradient(45deg, var(--color-accent-primary-light), var(--color-accent-primary));
    color: #ffffff;
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    padding: 0.625rem 1.25rem;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    isolation: isolate;
    transition: transform 0.35s var(--easing-in-out),
                box-shadow 0.35s var(--easing-in-out);
}

.header .cta-button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent-primary-dark);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.35s var(--easing-in-out);
}

.header .cta-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.header .cta-button:hover::after {
    opacity: 1;
}


/* === Dropdowns & Mega Menu === */
.nav-dropdown {
    display: flex;
    align-items: center;
    position: static;        /* Dropdowns position relative to .header (position: fixed) */
    align-self: stretch;     /* Fill full header height — continuous hover target */
}

/* --- Full-width dropdown panels (seamless extension of header) --- */
.mega-menu,
.dropdown-panel {
    position: absolute;
    top: calc(100% - 1px);   /* Overlap header bottom by 1px — eliminates seam */
    left: -1px;              /* Overlap header's left border — flush appearance */
    right: -1px;             /* Overlap header's right border — flush appearance */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 0 124px;
    font-family: var(--font-heading);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 200;
}

/* Bump header opacity to match dropdown when open (pre-scroll) */
.header.dropdown-open {
    background: rgba(255, 255, 255, 0.98);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    box-shadow: none;
}

/* Scrolled state — solid white background to match header */
.header.header-scrolled .mega-menu,
.header.header-scrolled .dropdown-panel {
    background: rgba(255, 255, 255, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.06);
    border-top: none;
}

.header.header-scrolled.dropdown-open {
    background: rgba(255, 255, 255, 1);
    border-radius: 0;
    border-bottom: none;
    box-shadow: none;
}

/* Desktop dropdown open state — controlled by JS with hover delay */
.nav-dropdown.is-hover .mega-menu,
.nav-dropdown.is-hover .dropdown-panel,
.nav-dropdown:focus-within .mega-menu,
.nav-dropdown:focus-within .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- Content wrapper inside full-width panel --- */
.dropdown-content {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Services dropdown spacing */
.nav-dropdown:first-child .dropdown-content {
    padding: 54px 0 56px;
}

/* Solutions dropdown spacing */
.nav-dropdown:nth-child(2) .dropdown-content {
    padding: 56px 0;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.mega-menu-col h5 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.mega-menu-col a,
.dropdown-panel a {
    display: block;
    padding: 5px 0.625rem 0.4rem;
    color: #2d2d3a;
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    white-space: nowrap;
    border-radius: 0.375rem;
    transition: color var(--transition-fast);
}

.mega-menu-col a:hover,
.dropdown-panel a:hover {
    color: #7b5cd5;
}

/* Primary core service links — icon + larger text */
.mega-menu-col a.mega-primary {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 24px;
    font-weight: var(--weight-medium);
    padding: 0.5rem 0.625rem;
    margin-bottom: 16px;
    white-space: normal;
}

.mega-menu-col a.mega-primary:last-child {
    margin-bottom: 0;
}

.mega-menu-col a.mega-primary i {
    font-size: 26px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

/* Additional Services — two-column grid layout */
.mega-menu-col.mega-additional {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Solutions dropdown — icon + larger text (matches Core Services style) */
.solutions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.solutions-grid .solutions-col a {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 24px;
    font-weight: var(--weight-medium);
    padding: 0.5rem 0.625rem;
    margin-bottom: 16px;
    white-space: normal;
    color: #2d2d3a;
    font-family: var(--font-heading);
    border-radius: 0.375rem;
    transition: color var(--transition-fast);
}

.solutions-grid .solutions-col a:last-child {
    margin-bottom: 0;
}

.solutions-grid .solutions-col a:hover {
    color: #7b5cd5;
}

.solutions-grid .solutions-col a i {
    font-size: 26px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

/* Enhance Your Training — horizontal row below main columns */
.mega-enhance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-top: 42px;
    padding-top: 0;
}

.mega-enhance-label {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.mega-enhance a {
    display: inline;
    font-size: var(--text-lg);
    color: #2d2d3a;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.mega-enhance a:hover {
    color: #7b5cd5;
}

.mega-menu-footer,
.dropdown-footer {
    margin-top: 42px;
    padding-top: 0;
}

.mega-menu-footer a,
.dropdown-footer a {
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    font-size: var(--text-lg);
    transition: color var(--transition-fast);
}

.mega-menu-footer a:hover,
.dropdown-footer a:hover {
    color: var(--color-accent-primary-hover);
}

.dropdown-label {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    break-after: avoid;
}

/* Solutions dropdown — no longer using CSS columns (uses .solutions-grid instead) */

/* Use Cases dropdown — 2-column layout (on content wrapper) */
.nav-dropdown:nth-child(3) .dropdown-content {
    columns: 2;
    column-gap: var(--space-xl);
}

/* Footer spans both columns */
.dropdown-footer {
    column-span: all;
}


/* === Mobile Menu === */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 101;
    border-radius: var(--radius-md);
    transition: background var(--transition-base);
}

.mobile-menu-toggle:hover {
    background: #f1f1f1;
}

.mobile-menu-toggle:hover .hamburger,
.mobile-menu-toggle:hover .hamburger::before,
.mobile-menu-toggle:hover .hamburger::after {
    background: var(--color-accent-primary);
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 22px;
    height: 2px;
    background: #1a1a1a;
    transition: all var(--transition-base);
}

.hamburger {
    position: relative;
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
}

.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }

/* Hamburger → X animation */
.mobile-menu-toggle.is-active .hamburger {
    background: transparent;
}

.mobile-menu-toggle.is-active .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-toggle.is-active .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}


/* ============================================
   HERO (Home Page) — Full-Width Split Banner
   ============================================ */

.hero {
    padding-top: 0;
    padding-bottom: 0;
}

.hp-hero {
    position: relative;
    overflow: hidden;
}

/* Full-width banner container */
.hp-hero-banner {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        radial-gradient(ellipse at 75% 60%, #ffe7c8, transparent 45%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
}

/* Animated gradient overlay — drifting motion (home page only) */
.page-home .hp-hero-banner::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 35% 35%, rgba(204, 240, 244, 0.7), transparent 45%),
        radial-gradient(ellipse at 70% 60%, rgba(255, 231, 235, 0.65), transparent 45%),
        radial-gradient(ellipse at 25% 75%, rgba(255, 242, 205, 0.55), transparent 45%);
    animation: gradient-drift 18s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes gradient-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10%, -8%) rotate(2deg); }
    50% { transform: translate(-8%, 10%) rotate(-1deg); }
    75% { transform: translate(-10%, -6%) rotate(1.5deg); }
}

/* --- Left Column: Text --- */
.hp-hero-col--text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4rem 5.625rem 4rem 4rem;
    position: relative;
    z-index: 1;
}

.hp-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
    max-width: 45rem;
    text-align: left;
}

.hp-hero-text h1 {
    font-size: 4.5rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: #4c4c4c;
}

.accent-word {
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Typewriter hero text animation --- */
.hero-typewriter {
    display: inline;
}

.hero-typewriter-text {
    /* empty span filled by JS */
}

.hero-typewriter-cursor {
    display: inline-block;
    font-weight: var(--weight-regular);
    animation: cursor-blink 0.7s steps(1) infinite;
    margin-left: 0.02em;
    user-select: none;
    -webkit-text-fill-color: var(--color-accent-primary);
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hp-hero-body {
    font-size: var(--text-body);
    color: #4c4c4c;
    max-width: 56ch;
    line-height: var(--leading-relaxed);
}

.hero-ctas {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: var(--space-sm);
}

/* Hero primary CTA — matches Nav CTA purple gradient styling */
.hp-hero .cta-button.primary {
    background: linear-gradient(45deg, var(--color-accent-primary-light), var(--color-accent-primary));
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    isolation: isolate;
    transition: transform 0.35s var(--easing-in-out),
                box-shadow 0.35s var(--easing-in-out);
}

.hp-hero .cta-button.primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-accent-primary-dark);
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.35s var(--easing-in-out);
}

.hp-hero .cta-button.primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.hp-hero .cta-button.primary:hover::after {
    opacity: 1;
}

.hp-hero .cta-button.secondary {
    border-color: rgba(0, 0, 0, 0.25);
    color: #4c4c4c;
}

.hp-hero .cta-button.secondary:hover {
    border-color: rgba(0, 0, 0, 0.5);
}

/* --- Hero Stats (moved from stats strip into banner) --- */
.hp-hero-stats {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-md);
}

.hp-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.hp-hero-stat-number {
    font-size: 2.25rem;
    font-weight: var(--weight-bold);
    color: #4c4c4c;
}

.hp-hero-stat-label {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: var(--weight-medium);
    color: #4c4c4c;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 0.9;
}

.hp-hero-stat-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.15);
}

/* --- Right Column: Scrolling Visuals --- */
.hp-hero-col--visuals {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 0;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%, black 12%, black 88%, transparent 100%);
}

/* Marquee container — holds vertical columns side by side */
.hp-hero-marquee {
    display: flex;
    gap: var(--space-md);
    height: 100%;
    padding: 0;
}

/* Each vertical column */
.hp-hero-marquee-col {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* The track that scrolls — holds 2x items for seamless loop */
.hp-hero-marquee-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Static image variant for landing page heroes (no marquee scroll/mask) */
.hp-hero-col--static {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e8e8e8;
    border-radius: 0;
}

/* Individual placeholder box */
.hp-hero-marquee-item {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.hp-hero-marquee-item img,
.hp-hero-marquee-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scrolling animations (25% slower than original) */
.hp-hero-marquee-col--up .hp-hero-marquee-track {
    animation: hero-marquee-up 40s linear infinite;
}

.hp-hero-marquee-col--down .hp-hero-marquee-track {
    animation: hero-marquee-down 40s linear infinite;
}

/* Stagger durations per column for organic feel */
.hp-hero-marquee-col:nth-child(1) .hp-hero-marquee-track { animation-duration: 37s; }
.hp-hero-marquee-col:nth-child(2) .hp-hero-marquee-track { animation-duration: 43s; }

@keyframes hero-marquee-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes hero-marquee-down {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

.media-placeholder {
    background: #d4d3d3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    color: #a8a8a8;
    min-height: 300px;
}

.media-placeholder--hero {
    min-height: 70vh;
    border-radius: 1.5rem;
}

.media-placeholder--card {
    min-height: 200px;
    border-radius: var(--radius-md);
}

.media-placeholder--avatar {
    width: 3rem;
    height: 3rem;
    min-height: auto;
    border-radius: var(--radius-md);
    background: var(--color-grey-200);
}

.media-placeholder-icon {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.media-placeholder-label {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.4;
}


/* === Logo Marquee (below hero banner) === */
.hp-hero-logos {
    margin-top: 0;
    padding: 3rem 0;
    background-color: var(--color-bg);
    position: relative;
    z-index: 1;
}

.hp-logo-marquee {
    overflow: hidden;
    position: relative;
}

/* Edge fades removed — they appeared as opaque white blocks */

.hp-logo-track {
    display: flex;
    gap: var(--space-3xl);
    animation: marquee 40s linear infinite;
    width: max-content;
}

.client-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 50px;
}

.client-logo img {
    display: block;
    max-width: 120px;
    max-height: 50px;
    width: 120px;
    height: 50px;
    object-fit: contain;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ============================================
   STATS STRIP
   ============================================ */

.hp-stats-strip {
    padding: var(--space-section-y) var(--space-section-x);
}

.hp-stats-row {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xl);
}

.hp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.hp-stat-number {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.hp-stat-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

.hp-stat-divider {
    width: 1px;
    height: 3rem;
    background: var(--color-border);
}


/* ============================================
   PROBLEM SECTION (Sticky Scroll Cards)
   ============================================ */

/* === Problem Section — Light theme "Right Place" grid === */
.problem-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: none;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: clip;
    background: var(--color-bg);
}

.section-decor {
    display: none;
}

/* --- Centered header --- */
.problem-header {
    max-width: var(--max-width-medium);
    width: 100%;
    margin: 0 auto 4rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.problem-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: none;
    margin: 0 auto var(--space-lg);
    color: var(--color-text-primary);
    text-align: center;
    line-height: var(--leading-tight);
}

.text-highlight {
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.problem-section .text-highlight {
    background: linear-gradient(90deg, #FFD700, #f9930d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- 3-column, 2-row outcome grid --- */
.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: var(--max-width-medium);
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.problem-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    transition: transform var(--transition-slow),
                box-shadow var(--transition-slow);
}

.problem-item-icon {
    line-height: 0;
    margin-bottom: var(--space-lg);
}

.problem-item-icon img {
    width: 96px;
    height: 96px;
}

.problem-item-text {
    font-family: var(--font-heading);
    font-size: var(--text-h5);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    margin: 0;
}

.link {
    margin-top: var(--space-2xl);
}

.link a {
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
    font-size: var(--text-small);
    transition: opacity var(--transition-base);
}

.link a:hover {
    opacity: 0.8;
}

.link a.cta-button {
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    opacity: 1;
}

.link a.cta-button:hover {
    opacity: 1;
}


/* ============================================
   SOLUTIONS SECTION
   ============================================ */

.industries-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
}

.eyebrow {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-md);
}

.eyebrow.on-dark {
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.industries-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 63ch;
    margin: 0 auto 1.5rem;
}

.industries-section > p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 48ch;
    margin: 0 auto 3rem;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.industry-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    transition: background var(--transition-base), transform var(--transition-base);
}

.industry-card:hover {
    background: var(--color-surface-hover);
    transform: translateY(-2px);
}

.industry-card .icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-primary);
}

.industry-card .icon svg {
    width: 24px;
    height: 24px;
}

.industry-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.secondary-industries {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.secondary-industries a {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.secondary-industries a:hover {
    color: var(--color-text-primary);
}


/* ============================================
   SOLUTIONS MARQUEE — Auto-Scrolling Panels
   ============================================ */

.industries-marquee {
    padding: var(--space-section-y) 0;
}

.industries-marquee .container {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding: 0 var(--space-section-x);
    text-align: left;
}

.industries-marquee h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 3rem;
}

/* Viewport: masks overflow, full-width */
.industries-marquee-viewport {
    width: 100%;
    overflow: hidden;
    padding: 2.5rem 0;
    margin-top: -1rem;
    margin-bottom: var(--space-xl);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

.industries-marquee-viewport:active {
    cursor: grabbing;
}

/* Track: flex row of panels, translated by JS */
.industries-marquee-track {
    display: flex;
    gap: var(--space-xl);
    will-change: transform;
}

/* Individual panel — full-panel link with text overlay on image bg */
.industries-marquee-panel {
    flex: 0 0 auto;
    width: 28rem;   /* ~448px */
    height: 75vh;
    min-height: 28rem;
    max-height: 48rem;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

/* Placeholder background — fills entire panel */
.industries-panel-bg {
    position: absolute;
    inset: 0;
    background: var(--color-grey-100);
    z-index: 0;
}

/* Gradient scrim for text readability over image */
.industries-panel-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.5) 30%,
        transparent 50%
    );
    z-index: 0;
}

/* Content overlay — positioned on top of bg */
.industries-panel-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 2.5rem;
    height: 100%;
    width: 100%;
}

/* Hover: scale up + lift (disabled temporarily for launch) */
/*
.industries-marquee-panel:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 2;
}
*/

/* Spotlight: dim siblings when any panel is hovered (disabled temporarily for launch) */
/*
.industries-marquee-track.has-hover .industries-marquee-panel:not(:hover) {
    opacity: 0.4;
}
*/
.industries-marquee-panel {
    cursor: default;
}

/* Icon: 56px, yellow-to-orange gradient */
.industries-panel-icon {
    line-height: 0;
    position: relative;
    z-index: 1;
}

.industries-panel-icon i {
    font-size: 24px;
    background: linear-gradient(45deg, #FFD600, #FF6B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Heading: 26px (1.625rem) */
.industries-panel-heading {
    font-size: 1.625rem;
    font-weight: var(--weight-medium);
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Description: 18px (1.125rem) */
.industries-panel-description {
    font-size: var(--text-lg);
    color: #f1f1f1;
    line-height: var(--leading-normal);
    margin: 0;
    position: relative;
    z-index: 1;
}


/* ============================================
   TESTIMONIAL CAROUSEL
   ============================================ */

.testimonial-carousel-section {
    padding: 0 0 var(--space-section-y) 0;
}

.testimonial-carousel-section .container {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding: 0 var(--space-section-x);
    text-align: left;
}

.testimonial-heading {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 3rem;
    color: var(--color-text-primary);
}

.testimonial-marquee-viewport {
    width: 100%;
    overflow: hidden;
    padding: 2.5rem 0;
    margin-top: -1rem;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

.testimonial-marquee-viewport:active {
    cursor: grabbing;
}

.testimonial-marquee-track {
    display: flex;
    gap: var(--space-xl);
    will-change: transform;
}

.testimonial-card {
    flex: 0 0 auto;
    width: 420px;
    background: #fff;
    padding: var(--space-3xl) var(--space-xl);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.testimonial-logo {
    display: flex;
    align-items: center;
}

.testimonial-logo-placeholder {
    width: 90px;
    height: 40px;
    background: var(--color-border);
    border-radius: var(--radius-sm);
}

.testimonial-logo img {
    max-width: 90px;
    max-height: 40px;
    display: block;
}

.testimonial-quote {
    margin: 0;
}

.testimonial-quote p {
    font-family: var(--font-heading);
    font-size: var(--text-h5);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    color: var(--color-text-primary);
}

.testimonial-attribution {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name,
.testimonial-title {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--color-text-primary);
}

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

.testimonial-company {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-marquee-track {
        transform: none !important;
        flex-wrap: wrap;
        gap: var(--space-lg);
        justify-content: center;
    }
}


/* ============================================
   HOME – SERVICES OVERVIEW
   ============================================ */

.hp-services {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.hp-services-inner {
    text-align: left;
}

.hp-services .eyebrow {
    margin-bottom: var(--space-sm);
}

.hp-services h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 3rem;
}

.hp-services-group {
    margin-bottom: 3rem;
}

.hp-services-group:last-of-type {
    margin-bottom: 2.5rem;
}

.hp-services-group-label {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.25rem;
}

/* Core Services: 3 columns, no right border on last column */
.hp-services-group--core .hp-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hp-services-group--core .hp-service-item {
    border-right: 1px solid var(--color-border);
    cursor: default;
}

.hp-services-group--core .hp-service-item:last-child {
    border-right: none;
}

/* Engagement & All Capabilities: 4 columns */
.hp-services-group--engagement .hp-services-grid,
.hp-services-group--capabilities .hp-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hp-service-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--color-surface);
    cursor: default;
}

/* Make empty grid cells white instead of grey */
.hp-services-group--capabilities .hp-services-grid::after {
    content: '';
    background: #ffffff;
}

.hp-service-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-primary);
    background: rgba(123, 92, 213, 0.08);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.hp-service-icon svg {
    width: 20px;
    height: 20px;
}

/* Core Services: h4 size (30px) */
.hp-services-group--core .hp-service-name {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 10px;
    line-height: var(--leading-tight);
}

/* Engagement & All Capabilities: h5 size (24px) */
.hp-services-group--engagement .hp-service-name,
.hp-services-group--capabilities .hp-service-name {
    font-size: var(--text-h5);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 10px;
    line-height: var(--leading-tight);
}

/* All body copy at 16px */
.hp-service-desc {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

@media (max-width: 991px) {
    .hp-services-group--core .hp-services-grid {
        grid-template-columns: 1fr;
    }
    .hp-services-group--core .hp-service-item {
        border-right: none;
    }
    .hp-services-group--engagement .hp-services-grid,
    .hp-services-group--capabilities .hp-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================
   HOW WE WORK / CAPTURE-TRANSFORM-SCALE
   Stacking scroll cards (Entropy "steps" pattern)
   ============================================ */

.how-section {
    padding: var(--space-section-y) var(--space-section-x);
    position: relative;
}

.how-section-inner {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.hp-how-header {
    text-align: left;
    margin-bottom: var(--space-3xl);
}

.hp-how-header h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 1.5rem;
}

.how-intro {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0;
}

/* --- Stacking scroll cards --- */
.steps-stack-component {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.steps-item {
    position: sticky;
    top: 8vh;
}

.steps-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: row;
    height: 50vh;
    min-height: 420px;
    overflow: hidden;
}

.steps-left-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 53%;
    padding: 3rem 3rem 3rem 2.5rem;
}

.steps-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.steps-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(223, 223, 223, 0.06);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.75rem;
    width: fit-content;
}

.steps-tag-label {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
}

.steps-tag-divider {
    width: 1px;
    height: 0.75rem;
    background: var(--color-border-strong);
}

.steps-tag-number {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}

.steps-heading {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
}

.steps-description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.how-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.how-tags span {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    line-height: 1;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    background-color: var(--color-text-primary);
    border: 1px solid var(--color-text-primary);
    color: var(--color-bg);
}

.steps-right-content {
    width: 47%;
    background: var(--color-grey-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.steps-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.steps-image-placeholder {
    display: none;
}

.steps-image-placeholder svg {
    width: 80px;
    height: 80px;
}


/* --- "Explore all services" standalone link below steps --- */
.how-section-explore {
    text-align: left;
}


/* ============================================
   RESULTS & WHY WRAPPER
   ============================================ */

.results-why-wrapper {
    background: linear-gradient(to right, #f7f9fb, #fff);
}


/* ============================================
   CASE STUDIES / PROOF SECTION
   ============================================ */

.proof-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: left;
    background: linear-gradient(to right, #f7f9fb, #fff);
}

.proof-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 3rem;
}

.case-studies-grid {
    display: grid;
    gap: var(--space-lg);
    text-align: left;
    margin-bottom: var(--space-3xl);
}

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

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

/* === Unified Case Study Card === */
.case-study-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 0;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
}

/* Disabled temporarily for launch */
/*
.case-study-card:hover {
    border-color: #f9930d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
*/
.case-study-card {
    cursor: default;
}

.cs-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.cs-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-card-logo-badge {
    position: absolute;
    top: 170px;
    right: 1.5rem;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.cs-card-logo-badge img {
    max-width: 90px;
    max-height: 90px;
    display: block;
}

.cs-card-body {
    padding: 2.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: left;
}

.case-study-card h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.case-study-card h4 {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    line-height: var(--leading-normal);
    margin: 0;
}

.case-study-card p {
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: var(--leading-normal);
}

.tag {
    display: inline-block;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border: 1px solid rgba(0, 161, 172, 0.55) /* tertiary teal */;
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.75rem;
    align-self: flex-start;
}

/* Stats */
.cs-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xs);
}

.cs-card-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hp-case-stat-number {
    font-size: var(--text-h5);
    font-weight: var(--weight-bold);
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hp-case-stat-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
}

.cs-card-stat--text .hp-case-stat-label {
    font-style: italic;
}

/* === Case Study Logo Bar === */
.cs-logo-bar {
    padding: var(--space-section-y) var(--space-section-x);
    text-align: center;
}

.cs-logo-bar-content {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.cs-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xl);
    align-items: center;
}

.cs-logos img {
    height: 40px;
    width: auto;
    opacity: 0.6;
    transition: opacity var(--transition-base);
    filter: grayscale(100%);
}

.cs-logos img:hover {
    opacity: 1;
    filter: grayscale(0%);
}


/* === Client Quote === */
.client-quote {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 3rem;
    margin-bottom: var(--space-xl);
    text-align: left;
}

.client-quote blockquote {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    font-style: normal;
    margin-bottom: var(--space-lg);
}

.client-quote-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.client-quote-author cite {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    font-style: normal;
    display: block;
}

.client-quote-role {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    display: block;
}


/* ============================================
   WHY SECTION
   ============================================ */

.why-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: left;
}

.why-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 1rem;
}

.why-intro {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 0 4rem;
}

.hp-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    text-align: left;
    margin-bottom: var(--space-xl);
}

.hp-why-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hp-why-item img {
    width: 124px;
    height: 124px;
    margin-bottom: var(--space-md);
}

.hp-why-item h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.hp-why-item p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}


/* ============================================
   COMPARISON TABLE SECTION
   ============================================ */

.hp-compare {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: left;
}

.hp-compare-header {
    margin-bottom: var(--space-3xl);
}

.hp-compare-header h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 63ch;
    margin: 0;
}

/* --- Table wrapper: enables horizontal scroll on small screens --- */
.hp-compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
}

.hp-compare-table-wrap::-webkit-scrollbar {
    height: 6px;
}

.hp-compare-table-wrap::-webkit-scrollbar-track {
    background: var(--color-surface);
    border-radius: 3px;
}

.hp-compare-table-wrap::-webkit-scrollbar-thumb {
    background: var(--color-grey-200);
    border-radius: 3px;
}

/* --- The table itself --- */
.hp-compare-table {
    width: 100%;
    min-width: 56rem;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* --- Column widths --- */
.hp-compare-th--provider,
.hp-compare-provider {
    width: 40%;
}

.hp-compare-th:not(.hp-compare-th--provider),
.hp-compare-cell {
    width: calc(60% / 5);
}

/* --- Table header row --- */
.hp-compare-th {
    padding: 1.25rem 1.5rem;
    font-size: 12px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2d2d3a;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.hp-compare-th--provider {
    text-align: left;
}

/* --- Table body rows --- */
.hp-compare-row:not(:last-child):not(.hp-compare-row--featured) td {
    border-bottom: 1px solid var(--color-border);
}

.hp-compare-row--featured td {
    border-bottom: none;
}

.hp-compare-row:last-child td {
    border-bottom: none;
}

/* --- Featured row (Neovation) --- */
.hp-compare-row--featured {
    background: linear-gradient(45deg, var(--color-accent-primary), var(--color-accent-primary-hover));
}

.hp-compare-row--featured .hp-compare-name {
    color: white;
    font-weight: var(--weight-bold);
}

.hp-compare-row--featured .hp-compare-desc {
    color: white;
}

/* --- Provider cell (name + description) --- */
.hp-compare-provider {
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    text-align: left;
    vertical-align: top;
}

.hp-compare-icon {
    float: left;
    width: 28px;
    height: 28px;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    color: #2d2d3a;
}

.hp-compare-icon img {
    width: 28px;
    height: 28px;
    display: block;
}

.hp-compare-provider-text {
    display: block;
    overflow: hidden;
}

.hp-compare-row--featured .hp-compare-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    color: white;
}

.hp-compare-row--featured .hp-compare-icon img {
    width: 64px;
    height: 64px;
}

.hp-compare-name {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-h5);
    font-weight: var(--weight-bold);
    color: #2d2d3a;
    margin-bottom: 0.375rem;
}

.hp-compare-desc {
    display: block;
    font-size: 16px;
    color: #4c4c4c;
    line-height: var(--leading-normal);
}

/* --- Attribute cells (check/x icons) --- */
.hp-compare-cell {
    padding: 1.5rem 1rem;
    text-align: center;
    vertical-align: middle;
}

.hp-compare-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7b5cd5;
}

.hp-compare-check svg,
.hp-compare-x svg {
    width: 48px;
    height: 48px;
}

.hp-compare-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4c4c4c;
}

/* --- Featured row icon backgrounds (white circles) --- */
.hp-compare-row--featured .hp-compare-check {
    color: var(--color-accent-tertiary);
}

.hp-compare-row--featured .hp-compare-check circle,
.hp-compare-row--featured .hp-compare-x circle {
    fill: white;
    opacity: 1;
}

/* --- Other row icon backgrounds (conditional) --- */
.hp-compare-row:not(.hp-compare-row--featured) .hp-compare-check {
    color: var(--color-accent-tertiary);
}

.hp-compare-row:not(.hp-compare-row--featured) .hp-compare-check circle {
    fill: #f1f1f1;
    opacity: 1;
}

.hp-compare-row:not(.hp-compare-row--featured) .hp-compare-x circle {
    fill: #f1f1f1;
    opacity: 1;
}


/* ============================================
   PROCESS / TIMELINE SECTION
   ============================================ */

.process-section {
    padding: var(--space-section-y) var(--space-section-x);
    background:
        radial-gradient(ellipse at 85% 60%, rgba(204, 240, 244, 0.5), transparent 55%),
        radial-gradient(ellipse at 15% 80%, rgba(255, 231, 235, 0.45), transparent 55%),
        radial-gradient(ellipse at 50% 10%, rgba(255, 242, 205, 0.5), transparent 55%),
        radial-gradient(ellipse at 25% 40%, rgba(255, 231, 200, 0.4), transparent 45%),
        radial-gradient(ellipse at 70% 35%, rgba(249, 147, 13, 0.07), transparent 50%),
        radial-gradient(ellipse at 30% 65%, rgba(255, 189, 2, 0.06), transparent 50%),
        linear-gradient(315deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
}

.hp-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

/* --- Left column: sticky context --- */
.hp-process-left {
    position: sticky;
    top: 8vh;
}

.hp-process-left h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 20ch;
    margin: 0 0 1rem;
}

.process-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 2rem;
}

.hp-process-body {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 42ch;
    margin: 0;
    line-height: var(--leading-relaxed);
}

.hp-process-left .link {
    margin-top: var(--space-xl);
}

/* --- Right column: vertical steps --- */
.hp-process-right {
    padding-top: var(--space-sm);
}

.hp-process-steps {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Vertical connecting line (background) */
.hp-process-line {
    position: absolute;
    left: 1.25rem;
    top: 0;
    height: 0;
    width: 1px;
    background: rgba(249, 147, 13, 0.2);
}

/* Vertical connecting line (glowing progress overlay) */
.hp-process-line-fill {
    position: absolute;
    left: 1.25rem;
    top: 0;
    height: 0;
    width: 1px;
    background: #f9930d;
    box-shadow: 0 0 6px rgba(249, 147, 13, 0.6), 0 0 16px rgba(249, 147, 13, 0.25);
    transform-origin: top;
    transform: scaleY(0);
}

/* Individual step row */
.hp-process-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: 2rem 0;
    position: relative;
}

.hp-process-step:first-of-type {
    padding-top: 0;
}

.hp-process-step:last-of-type {
    padding-bottom: 0;
}

/* Numbered circle indicator */
.hp-process-step-indicator {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(249, 147, 13, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.hp-process-step-indicator.is-active {
    border-color: #f9930d;
    box-shadow: 0 0 12px rgba(249, 147, 13, 0.5), 0 0 25px rgba(249, 147, 13, 0.2);
}

.hp-process-step-number {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    color: #f9930d;
    font-variant-numeric: tabular-nums;
    transition: color 0.4s ease;
}

.hp-process-step.is-active .hp-process-step-number {
    color: var(--color-text-primary);
}

/* Step text content */
.hp-process-step-content {
    padding-top: 0.35rem;
}

.hp-process-step-content h4 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin: 0 0 0.5rem;
}

.hp-process-step-content p {
    font-size: var(--text-lg);
    color: #4c4c4c;
    margin: 0;
    line-height: var(--leading-normal);
}


/* ============================================
   FINAL CTA
   ============================================ */

.final-cta {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    max-width: var(--max-width-medium);
    margin: var(--space-section-y) var(--space-section-x);
    margin-inline: max(var(--space-section-x), calc((100% - var(--max-width-medium)) / 2));
    padding: 4rem var(--space-section-x);
    position: relative;
    overflow: hidden;
}

.final-cta .cta-button {
    background: linear-gradient(45deg, var(--color-accent-primary-light), var(--color-accent-primary));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.final-cta h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    margin: 0 0 0.75rem;
}

.final-cta p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 80%;
}

/* --- Shared two-column CTA layout --- */
.cta-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
    gap: var(--space-lg);
}

.cta-text {
    flex: 0 1 70%;
    text-align: left;
}

.cta-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}


/* ============================================
   FOOTER
   ============================================ */

.footer {
    padding: 8rem var(--space-section-x) 3rem;
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Dark footer for visual grounding */
    background-color: #2d2d3a;
    box-shadow: 0 0 0 100vmax #2d2d3a;
    clip-path: inset(0 -100vmax);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-heading);
}

/* --- Grid layout: logo row + 3 content columns (1fr 2fr 1fr) --- */
.footer-main {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: var(--space-2xl);
    row-gap: var(--space-lg);
    margin-bottom: 5rem;
}

.footer-logo {
    grid-column: 1 / -1;
}

/* --- Logo --- */
.footer-logo img {
    height: 78px;
    margin: 0;
}

/* --- Tagline --- */
.footer-tagline {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* --- Email subscription form --- */
.footer-subscribe {
    margin-top: var(--space-sm);
}

.footer-subscribe-row {
    display: flex;
    gap: var(--space-sm);
}

.footer-subscribe-row input[type="email"] {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    min-width: 0;
}

.footer-subscribe-row input[type="email"]:hover {
    border-color: var(--color-grey-300);
}

.footer-subscribe-row input[type="email"]:focus {
    border-color: var(--color-accent-tertiary);
    box-shadow: 0 0 0 3px rgba(0, 161, 172, 0.15);
    outline: none;
}

.footer-subscribe-row input[type="email"]::placeholder {
    color: var(--color-text-muted);
}

.footer-subscribe-btn {
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* --- Footer column layout --- */
.footer-col-center > * {
    max-width: 70%;
}

.footer-col-right {
    text-align: right;
}

.footer-cta {
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--weight-bold);
    font-size: var(--text-body);
    display: inline-block;
    transition: transform var(--transition-base);
}

.footer-cta:hover {
    background: linear-gradient(45deg, var(--color-accent-tertiary), var(--color-accent-tertiary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateY(-2px);
}

/* --- Subscribe intro text --- */
.footer-subscribe-intro {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.7);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-md);
}

/* --- HubSpot form override for dark footer --- */
.footer-hubspot-form .hs-form input[type="email"],
.footer-hubspot-form .hs-form input[type="text"] {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-body);
}

.footer-hubspot-form .hs-form input[type="email"]:focus,
.footer-hubspot-form .hs-form input[type="text"]:focus {
    border-color: var(--color-accent-tertiary);
    box-shadow: 0 0 0 3px rgba(0, 161, 172, 0.15);
    outline: none;
}

.footer-hubspot-form .hs-form input[type="submit"] {
    background-color: var(--color-accent-tertiary);
    color: #ffffff;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.footer-hubspot-form .hs-form input[type="submit"]:hover {
    background-color: var(--color-accent-tertiary-hover);
}

.footer-hubspot-form .hs-form label {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-heading);
    font-size: var(--text-small);
}

.footer-hubspot-form .hs-error-msgs label {
    color: #ff6b6b;
}

/* --- Footer columns (shared) --- */
.footer-column h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.footer-column ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-column a {
    font-size: var(--text-small);
    color: var(--color-grey-300);
    transition: color var(--transition-base), transform var(--transition-base);
    display: inline-block;
    text-align: left;
}

.footer-column a:hover {
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

/* --- Footer bottom --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom div {
    display: flex;
    gap: 6px;
}

.footer-bottom a {
    color: var(--color-grey-300);
    transition: color var(--transition-base), transform var(--transition-base);
    display: inline-block;
}

.footer-bottom a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- Dark footer overrides (light theme) --- */
.footer-tagline {
    color: rgba(255, 255, 255, 0.7);
}

.footer-subscribe-row input[type="email"] {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.footer-subscribe-row input[type="email"]:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.footer-subscribe-row input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer-subscribe-btn {
    background-color: var(--color-accent-tertiary);
    color: #ffffff;
}

.footer-subscribe-btn:hover {
    background-color: var(--color-accent-tertiary-hover);
}

.footer-column h4 {
    color: #ffffff;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.5);
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.5);
}


/* ============================================
   SUB-PAGE HERO (Services, Solutions, etc.)
   ============================================ */

.page-hero {
    padding: 13rem var(--space-section-x) 3rem;
    text-align: center;
    position: relative;
}

.page-hero .eyebrow {
    margin-bottom: var(--space-md);
}

.page-hero h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    max-width: 70ch;
    margin: 0 auto 1rem;
}

.page-hero p,
.page-hero .hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 46ch;
    margin: 0 auto;
}


/* ============================================
   GENERIC CONTENT SECTIONS (Sub-pages)
   ============================================ */

section {
    position: relative;
}

.content-section,
.detail-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.content-section h2,
.detail-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-lg);
    text-align: center;
}

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


/* === Generic Cards Grid (used in services, industries, use-cases) === */
.card-grid,
.services-grid,
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.card,
.service-card,
.use-case-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: background var(--transition-base), transform var(--transition-base);
}

.card:hover,
.service-card:hover,
.use-case-card:hover {
    background: var(--color-surface-hover);
    transform: translateY(-2px);
}

.card h3,
.service-card h3,
.use-case-card h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.card p,
.service-card p,
.use-case-card p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}


/* === Feature List (on detail pages) === */
.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.feature-item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.feature-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-grey-200);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-item h4 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.feature-item p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    text-align: left;
    margin: 0;
}


/* === Banner / CTA Sections on sub-pages === */
.banner-section {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 4rem;
    text-align: center;
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-section-y);
}

.cta-section {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 4rem 0;
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-section-y);
}

.banner-section h2,
.cta-section h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
}

.banner-section p {
    color: var(--color-text-secondary);
    max-width: 46ch;
    margin: 1rem auto 2rem;
}

.cta-section p {
    color: var(--color-text-secondary);
    margin: 0.75rem 0 0;
}

/* --- Tertiary CTA link --- */
.cta-button-tertiary {
    color: var(--color-text-secondary);
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.cta-button-tertiary:hover {
    color: var(--color-accent-primary);
}


/* ============================================
   INDUSTRY DETAIL PAGES
   ============================================ */

/* --- Hero Banner (split layout) --- */
.ind-hero {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

.ind-hero-banner {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        radial-gradient(ellipse at 75% 60%, #ffe7c8, transparent 45%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
    overflow: hidden;
}

.ind-hero-col--text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4rem 5.625rem 4rem 4rem;
    position: relative;
    z-index: 1;
}

.ind-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    max-width: 45rem;
    text-align: left;
}

.ind-hero-text h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

.ind-hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 48ch;
    line-height: var(--leading-relaxed);
}

.ind-hero-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ind-hero-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.ind-hero-benefit-icon {
    flex-shrink: 0;
    color: var(--color-accent-primary);
    margin-top: 0.15rem;
}

.ind-hero-ctas {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: var(--space-sm);
}

.ind-hero-col--image {
    width: 50%;
    position: relative;
    z-index: 1;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e8e8e8;
    border-radius: 0;
}

/* --- Challenges Accordion --- */
.ind-challenges {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.ind-challenges .eyebrow {
    display: block;
    text-align: center;
    margin-bottom: var(--space-md);
}

.ind-challenges h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    text-align: center;
    max-width: 800px;
    margin: 0 auto 1rem;
}

.ind-challenges-intro,
.ind-challenges-closing {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 60ch;
    margin: 0 auto 1.5rem;
    text-align: center;
    line-height: var(--leading-relaxed);
}

.ind-challenges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin: 3rem 0;
}

.ind-challenge-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ind-challenge-card:hover {
    border-color: var(--color-border-strong);
}

.ind-challenge-card.is-open {
    border-color: var(--color-accent-primary);
    box-shadow: 0 4px 16px rgba(0, 161, 172, 0.08);
}

.ind-challenge-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 1.25rem 1.5rem;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    text-align: left;
    line-height: var(--leading-snug);
}

.ind-challenge-icon {
    flex-shrink: 0;
    color: var(--color-accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: rgba(0, 161, 172, 0.08);
}

.ind-challenge-title {
    flex: 1;
}

.ind-challenge-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform var(--transition-base);
    display: flex;
    align-items: center;
}

.ind-challenge-card.is-open .ind-challenge-chevron {
    transform: rotate(180deg);
}

.ind-challenge-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 1.5rem 0 4.5rem;
}

.ind-challenge-card.is-open .ind-challenge-body {
    padding-bottom: 1.25rem;
}

.ind-challenge-body p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* --- How We Help Grid --- */
.ind-services {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.ind-services .eyebrow {
    display: block;
    text-align: center;
    margin-bottom: var(--space-md);
}

.ind-services h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    text-align: center;
    margin-bottom: var(--space-md);
}

.ind-services-intro {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 60ch;
    margin: 0 auto 3rem;
    text-align: center;
    line-height: var(--leading-relaxed);
}

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

.ind-service-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.ind-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 161, 172, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.ind-service-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: rgba(0, 161, 172, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-primary);
    margin-bottom: var(--space-xs);
}

.ind-service-icon svg {
    width: 24px;
    height: 24px;
}

.ind-service-card h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.ind-service-card p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* --- Use Cases Marquee --- */
.ind-use-cases {
    padding: var(--space-section-y) 0;
}

.ind-use-cases > .container {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding: 0 var(--space-section-x);
    text-align: center;
}

.ind-use-cases .eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.ind-use-cases h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 auto 3rem;
}

.ind-use-cases-viewport {
    width: 100%;
    overflow: hidden;
    padding: 2.5rem 0;
    margin-top: -1rem;
    margin-bottom: var(--space-xl);
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

.ind-use-cases-viewport:active {
    cursor: grabbing;
}

.ind-use-cases-track {
    display: flex;
    gap: var(--space-xl);
    will-change: transform;
}

.ind-use-case-panel {
    flex: 0 0 auto;
    width: 28rem;
    height: 65vh;
    min-height: 24rem;
    max-height: 42rem;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

.ind-use-case-bg {
    position: absolute;
    inset: 0;
    background: var(--color-grey-100);
    z-index: 0;
}

.ind-use-case-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.3) 100%
    );
    z-index: 0;
}

.ind-use-case-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 2.5rem;
    height: 100%;
    width: 100%;
}

.ind-use-case-panel:hover {
    transform: scale(1.03) translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

.ind-use-cases-track.has-hover .ind-use-case-panel:not(:hover) {
    opacity: 0.4;
}

.ind-use-case-icon {
    color: var(--color-accent-primary);
    line-height: 0;
    position: relative;
    z-index: 1;
}

.ind-use-case-icon svg {
    width: 48px;
    height: 48px;
}

.ind-use-case-heading {
    font-size: 1.625rem;
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    line-height: 1.2;
    margin: 0;
    position: relative;
    z-index: 1;
}

.ind-use-case-description {
    font-size: var(--text-lg);
    color: #4c4c4c;
    line-height: var(--leading-normal);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* --- Enhanced CTA: Mid-Page --- */
.ind-cta-mid {
    padding: 0 var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-section-y);
}

.ind-cta-mid-inner {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
    background:
        radial-gradient(ellipse at 20% 50%, #ccf0f4, transparent 60%),
        radial-gradient(ellipse at 80% 30%, #ffe7eb, transparent 60%),
        linear-gradient(135deg, #ccf0f4, #ffe7eb);
    border-radius: var(--radius-xl);
    padding: 4rem;
    overflow: hidden;
    position: relative;
}

.ind-cta-mid-text {
    flex: 1;
}

.ind-cta-mid-text h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.ind-cta-mid-text p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 42ch;
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);
}

.ind-cta-mid-image {
    flex: 0 0 auto;
    width: 280px;
}

.ind-cta-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    backdrop-filter: blur(4px);
}

/* --- Enhanced CTA: Final --- */
.ind-cta-final {
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
    padding: var(--space-section-y) var(--space-section-x);
}

.ind-cta-final-inner {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3xl);
}

.ind-cta-final-image {
    flex: 0 0 auto;
    width: 320px;
}

.ind-cta-final-text {
    flex: 1;
}

.ind-cta-final-text h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.ind-cta-final-text p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 50ch;
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);
}

/* --- Comparison Table Refinement --- */
.page-industry-detail .comparison-table {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-top: var(--space-xl);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.page-industry-detail .comparison-table th {
    background: rgba(0, 161, 172, 0.06);
    padding: 1rem 1.5rem;
    font-weight: var(--weight-medium);
    font-size: var(--text-lg);
    text-align: left;
}

.page-industry-detail .comparison-table td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

.page-industry-detail .comparison-table tr:last-child td {
    border-bottom: none;
}


/* ============================================
   CASE STUDY LANDING PAGE — Filter Bar & Trust Bar
   ============================================ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.filter-link {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
}

.filter-link:hover {
    background: var(--color-surface);
    border-color: var(--color-accent-primary);
    color: var(--color-text-primary);
}

.filter-link.active {
    background: linear-gradient(45deg, var(--color-accent-primary-light), var(--color-accent-primary));
    color: #fff;
    border-color: transparent;
}

.trust-bar {
    padding: var(--space-section-y) var(--space-section-x);
    text-align: center;
}

.trust-bar-content {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.trust-bar-content h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-xl);
    color: var(--color-text-primary);
}

.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    align-items: center;
}

.client-logo-placeholder {
    width: 120px;
    height: 60px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-small);
    color: var(--color-text-muted);
}


/* ============================================
   CASE STUDY DETAIL PAGES — Split-Layout Hero
   ============================================ */

.cs-hero {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

.cs-hero-banner {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        radial-gradient(ellipse at 75% 60%, #ffe7c8, transparent 45%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
    overflow: hidden;
}

.cs-hero-col--text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4rem 5.625rem 4rem 4rem;
    position: relative;
    z-index: 1;
}

.cs-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
    max-width: 45rem;
    text-align: left;
}

.cs-hero-text h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

.cs-hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 48ch;
    line-height: var(--leading-relaxed);
}

.cs-hero-col--image {
    width: 50%;
    position: relative;
    z-index: 1;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ============================================
   CASE STUDY DETAIL — SECTION & CONTENT STYLES
   ============================================ */

.page-case-study-detail .section {
    max-width: var(--max-width-medium);
    margin-left: auto;
    margin-right: auto;
}

.section-gray {
    background: var(--color-surface);
    box-shadow: 0 0 0 100vmax var(--color-surface);
    clip-path: inset(0 -100vmax);
}

.content-block {
    max-width: 52rem;
}

.content-block p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.content-block p:last-child {
    margin-bottom: 0;
}

.content-block a {
    color: var(--color-accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.content-block a:hover {
    color: var(--color-accent-primary-hover);
}

/* --- Stat Highlights (Results section) --- */
.stat-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--color-border);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stat-number {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: 1;
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: var(--text-body);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

@media (max-width: 767px) {
    .stat-highlights {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}


/* ============================================
   CASE STUDY DETAIL PAGES (Legacy)
   ============================================ */

.case-hero {
    padding: 13rem var(--space-section-x) 3rem;
    text-align: left;
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.case-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.case-hero h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
}

.case-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
}

.case-sidebar {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2rem;
}

.case-sidebar dt {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.case-sidebar dd {
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.case-content {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.case-content h2 {
    font-size: var(--text-h4);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-md);
    text-align: left;
}

.case-content p {
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-lg);
    text-align: left;
    max-width: none;
}

.case-content ul {
    margin-bottom: var(--space-lg);
    padding-left: 1.5rem;
}

.case-content li {
    list-style: disc;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin: 2rem 0;
}

.result-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
}

.result-number {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.result-label {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}


/* ============================================
   ABOUT PAGE
   ============================================ */

.about-hero {
    padding: 13rem var(--space-section-x) 4rem;
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
}

.about-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-3xl);
    margin-top: var(--space-3xl);
}


/* ============================================
   HOW WE WORK PAGES
   ============================================ */

.process-detail {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.process-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

.process-step-number {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.process-step h3 {
    font-size: var(--text-h2);
    font-weight: var(--weight-medium);
    margin: 0.5rem 0;
}


/* ============================================
   POINTS MODEL PAGE
   ============================================ */

.points-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}


/* ============================================
   QUOTE / CONTACT PAGE
   ============================================ */

/* --- Shortened gradient banner --- */
.quote-hero {
    padding: 10rem var(--space-section-x) 4rem;
    text-align: left;
    position: relative;
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        radial-gradient(ellipse at 75% 60%, #ffe7c8, transparent 45%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
}

.quote-hero-inner {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.quote-hero h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: var(--color-text-primary);
    margin: 0;
}

/* --- Two-column layout: 1/3 info + 2/3 form --- */
.quote-content {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.quote-layout {
    display: flex;
    gap: 12rem;
    align-items: flex-start;
}

.quote-info {
    flex: 1 1 33.333%;
    min-width: 0;
    max-width: 33.333%;
}

.quote-form-col {
    flex: 1 1 66.666%;
    min-width: 0;
    max-width: 66.666%;
    padding-top: 3.1rem;
}

.quote-info h2 {
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-md);
}

.quote-info > p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-xl);
}

.quote-next-steps {
    margin-bottom: var(--space-xl);
}

.quote-next-steps h3 {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-md);
}

.quote-next-steps ol {
    list-style: none;
    padding: 0;
    counter-reset: steps;
}

.quote-next-steps li {
    counter-increment: steps;
    padding-left: 2rem;
    position: relative;
    margin-bottom: var(--space-lg);
}

.quote-next-steps li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    color: #fff;
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.quote-next-steps li strong {
    display: block;
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.quote-next-steps li p {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

.quote-trust {
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.quote-trust .trust-stat {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm);
}

.quote-trust p:last-child {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* --- Email alternative link above form --- */
.quote-email-alt {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.quote-email-alt a {
    color: var(--color-accent-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.quote-email-alt a:hover {
    color: var(--color-accent-primary-hover);
}

.quote-form-disclaimer {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: var(--space-md);
    line-height: 1.5;
}

.quote-form-disclaimer a {
    color: var(--color-accent-primary);
    text-decoration: underline;
}

.quote-form-disclaimer a:hover {
    color: var(--color-accent-primary-hover);
}

.quote-response-time {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
    margin-top: var(--space-sm);
}


/* ============================================
   SUCCESS CONTACT US PAGE
   ============================================ */

.success-content {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.success-layout {
    display: flex;
    gap: var(--space-3xl);
    align-items: center;
}

.success-text {
    flex: 0 0 50%;
    max-width: 50%;
}

.success-text h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.success-text p {
    font-size: var(--text-body-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
}

.success-image {
    flex: 1 1 auto;
    min-width: 0;
}

.success-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1023px) {
    .success-layout {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .success-text {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .success-image {
        width: 100%;
    }
}

/* ============================================
   PRIVACY / TERMS PAGES
   ============================================ */

/* Old legal-content styles removed — see legal page section below */


/* ============================================
   404 PAGE
   ============================================ */

.page-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--space-section-x);
}

.page-404 h1 {
    font-size: 15.125rem;
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

.page-404 p {
    color: var(--color-text-secondary);
    margin: 1rem 0 2rem;
}

.page-404 .cta-row {
    justify-content: center;
    margin-top: var(--space-xl);
}


/* ============================================
   ANIMATIONS
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger-1 { transition-delay: 0.05s; }
.reveal-stagger-2 { transition-delay: 0.1s; }
.reveal-stagger-3 { transition-delay: 0.15s; }
.reveal-stagger-4 { transition-delay: 0.2s; }
.reveal-stagger-5 { transition-delay: 0.25s; }
.reveal-stagger-6 { transition-delay: 0.3s; }
.reveal-stagger-7 { transition-delay: 0.35s; }
.reveal-stagger-8 { transition-delay: 0.4s; }

/* --- Scroll-reveal animation (JS adds .scroll-reveal, observer adds .is-visible) --- */
.js-animations .scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-animations .scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js-animations .scroll-reveal-fade {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-animations .scroll-reveal-fade.is-visible {
    opacity: 1;
}

/* Stagger delays for scroll-reveal children */
.js-animations .stagger-1 { transition-delay: 0.05s; }
.js-animations .stagger-2 { transition-delay: 0.1s; }
.js-animations .stagger-3 { transition-delay: 0.15s; }
.js-animations .stagger-4 { transition-delay: 0.2s; }
.js-animations .stagger-5 { transition-delay: 0.25s; }
.js-animations .stagger-6 { transition-delay: 0.3s; }
.js-animations .stagger-7 { transition-delay: 0.35s; }
.js-animations .stagger-8 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scroll-reveal,
    .scroll-reveal-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hp-hero-marquee-col--up .hp-hero-marquee-track,
    .hp-hero-marquee-col--down .hp-hero-marquee-track {
        animation: none;
    }

    .hp-logo-track {
        animation: none;
    }

    .scroll-reveal,
    .scroll-reveal-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .industries-marquee-track {
        transform: none !important;
        flex-wrap: wrap;
        gap: var(--space-lg);
        padding: 0 var(--space-section-x);
        justify-content: center;
    }

    .industries-marquee-panel {
        height: auto;
        min-height: 16rem;
        max-height: none;
        width: min(90vw, 28rem);
    }

    .industries-panel-bg {
        display: none;
    }

    .industries-panel-content::before {
        display: none;
    }

    .industries-panel-content {
        background: var(--color-surface);
        border-radius: var(--radius-xl);
    }

    .industries-marquee-viewport {
        overflow: visible;
    }

    .hp-process-step-indicator {
        transition: none;
    }

    .hp-process-step-number {
        transition: none;
    }

    .hp-process-line-fill {
        display: none;
    }

    .ind-use-cases-track {
        transform: none !important;
        flex-wrap: wrap;
        gap: var(--space-lg);
        padding: 0 var(--space-section-x);
        justify-content: center;
    }

    .ind-use-case-panel {
        height: auto;
        min-height: 16rem;
        max-height: none;
        width: min(90vw, 28rem);
    }

    .ind-use-case-bg {
        display: none;
    }

    .ind-use-case-content::before {
        display: none;
    }

    .ind-use-case-content {
        background: var(--color-surface);
        border-radius: var(--radius-xl);
    }

    .ind-use-cases-viewport {
        overflow: visible;
    }

    .ind-challenge-body {
        transition: none;
    }

    .ind-challenge-chevron {
        transition: none;
    }

    /* Service page hero cascade */
    .js-animations .sp-hero-text > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js-animations .sp-hero-col--image .sp-hero-image {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Comparison table row reveal */
    .js-animations .sp-comparison-table tbody tr {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* FAQ accordion */
    .js-animations .faq-item .faq-answer {
        max-height: none;
        opacity: 1;
        transition: none;
    }
}


/* ============================================
   SERVICE PAGE SECTIONS
   ============================================ */

/* === Service Page Hero Banner === */
.sp-hero {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
}

.sp-hero-banner {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        radial-gradient(ellipse at 75% 60%, #ffe7c8, transparent 45%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
    overflow: hidden;
}

.sp-hero-col--text {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4rem 5.625rem 4rem 4rem;
    position: relative;
    z-index: 1;
}

.sp-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    max-width: 45rem;
    text-align: left;
}

.sp-hero-text .eyebrow {
    margin-bottom: 0;
}

.sp-hero-text h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

.sp-hero-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 48ch;
    line-height: var(--leading-relaxed);
}

.sp-hero-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sp-hero-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.sp-hero-benefit-icon {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.sp-hero-ctas {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    margin-top: var(--space-sm);
}

.sp-hero-col--image {
    width: 50%;
    position: relative;
    z-index: 1;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e8e8e8;
    border-radius: 0;
}

/* --- Service Page Hero Cascade Animation --- */
.js-animations .sp-hero-text > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-animations .sp-hero-text.sp-hero-animate > * {
    opacity: 1;
    transform: translateY(0);
}

.js-animations .sp-hero-text.sp-hero-animate > *:nth-child(1) { transition-delay: 0.05s; }
.js-animations .sp-hero-text.sp-hero-animate > *:nth-child(2) { transition-delay: 0.12s; }
.js-animations .sp-hero-text.sp-hero-animate > *:nth-child(3) { transition-delay: 0.19s; }
.js-animations .sp-hero-text.sp-hero-animate > *:nth-child(4) { transition-delay: 0.26s; }
.js-animations .sp-hero-text.sp-hero-animate > *:nth-child(5) { transition-delay: 0.33s; }
.js-animations .sp-hero-text.sp-hero-animate > *:nth-child(6) { transition-delay: 0.40s; }

.js-animations .sp-hero-col--image .sp-hero-image {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.js-animations .sp-hero-col--image.sp-hero-image-animate .sp-hero-image {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* === Service Page Problem Section === */
.sp-problem {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding-top: calc(var(--space-section-y) + 50px);
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
}

.sp-problem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 600px);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
    opacity: 0.4;
}

.sp-problem h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-md);
    text-align: center;
}

.sp-problem .section-subtitle,
.sp-problem h3.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    font-weight: var(--weight-medium);
    text-align: center;
}

.sp-problem-intro {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.sp-problem-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin: 2.5rem 0;
}

.sp-problem-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    width: calc((100% - 2 * var(--space-md)) / 3);
    box-sizing: border-box;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.sp-problem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 161, 172, 0.2);
}

.sp-problem-icon {
    flex-shrink: 0;
    color: #d32f2f;
    margin-top: 0.1rem;
    transition: color var(--transition-base);
}

.sp-problem-card:hover .sp-problem-icon {
    color: #b71c1c;
}

.sp-problem-card p {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin: 0;
    line-height: var(--leading-snug);
}

.sp-problem-closing {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
}


/* === Service Page Solution Section === */
.sp-solution {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: left;
}

.sp-solution .sp-solution-header {
    text-align: left;
    margin-bottom: var(--space-3xl);
}

.sp-solution .sp-solution-header h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 1rem;
}

.sp-solution .sp-solution-header p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0;
    line-height: var(--leading-relaxed);
}

.sp-solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    text-align: left;
    margin-bottom: var(--space-xl);
}

.sp-solution-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sp-solution-item .sp-solution-icon {
    width: 124px;
    height: 124px;
    margin-bottom: var(--space-md);
}

.sp-solution-item .sp-solution-icon img {
    width: 100%;
    height: 100%;
}

.sp-solution-item h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.sp-solution-item p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}


/* === Service Page Before/After Comparison Table === */
.sp-comparison {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
}

.sp-comparison h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 auto 0.75rem;
}

.sp-comparison .section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.sp-comparison > .container > p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2xl);
}

.sp-comparison-table {
    max-width: 56rem;
    margin: 0 auto;
    overflow-x: auto;
}

.sp-comparison-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-align: left;
}

.sp-comparison-th {
    padding: 1.25rem 1.5rem;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    background: #f7f7f7;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.sp-comparison-th svg {
    vertical-align: middle;
    margin-right: 0.5rem;
}

.sp-comparison-th--before {
    width: 50%;
    border-right: 1px solid var(--color-border);
}

.sp-comparison-th--after {
    width: 50%;
}

.sp-comparison-cell {
    padding: 1.25rem 1.5rem;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.sp-comparison-cell--before {
    border-right: 1px solid var(--color-border);
}

.sp-comparison-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

tr:last-child .sp-comparison-cell {
    border-bottom: none;
}

/* Row hover highlight */
.sp-comparison-table tbody tr {
    transition: background var(--transition-base);
}

.sp-comparison-table tbody tr:hover {
    background: rgba(0, 161, 172, 0.03);
}

/* Animated row reveal */
.js-animations .sp-comparison-table tbody tr {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background var(--transition-base);
}

.js-animations .sp-comparison-table.is-visible tbody tr {
    opacity: 1;
    transform: translateY(0);
}

.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(1) { transition-delay: 0.05s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(2) { transition-delay: 0.1s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(3) { transition-delay: 0.15s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(4) { transition-delay: 0.2s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(5) { transition-delay: 0.25s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(6) { transition-delay: 0.3s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(7) { transition-delay: 0.35s; }
.js-animations .sp-comparison-table.is-visible tbody tr:nth-child(8) { transition-delay: 0.4s; }

/* "After" column subtle accent tint */
.sp-comparison-cell:not(.sp-comparison-cell--before) {
    background: rgba(0, 161, 172, 0.02);
}

/* Plain comparison table hover (elearning-development, multilingual pages) */
.comparison-table tbody tr {
    transition: background var(--transition-base);
}

.comparison-table tbody tr:hover {
    background: rgba(0, 161, 172, 0.03);
}


/* === Service Page "What You Get" Deliverables === */
.sp-deliverables {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
    background: #f7f7f7;
}

.sp-deliverables h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-lg);
}

.sp-deliverables-intro {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 60ch;
    margin: 0 auto 3rem;
}

.sp-deliverables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    text-align: left;
}

.sp-deliverable {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base),
                box-shadow var(--transition-base);
}

.sp-deliverable:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.sp-deliverable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}

.sp-deliverable:hover::before {
    transform: scaleX(1);
}

.sp-deliverable h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.sp-deliverable p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}


/* === Service Page Case Studies === */
.sp-proof h2 {
    margin-bottom: var(--space-2xl);
}

.sp-case-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.sp-case-featured {
    grid-column: 1 / -1;
}

.sp-case-card {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-decoration: none;
    color: inherit;
    text-align: left;
    transition: background var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.sp-case-card:hover {
    background: #fff;
    border-color: #f9930d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.sp-case-card .sp-case-image {
    transition: transform var(--transition-slow);
}

.sp-case-card:hover .sp-case-image {
    transform: scale(1.02);
}

.sp-case-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-grey-200);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
}

.sp-case-featured .sp-case-image {
    aspect-ratio: 21 / 9;
}

.sp-case-card .tag {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border: 1px solid rgba(0, 161, 172, 0.55) /* tertiary teal */;
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.75rem;
    align-self: flex-start;
}

.sp-case-card h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.sp-case-card p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.sp-case-card .read-more {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-top: auto;
    transition: opacity var(--transition-base);
}

.sp-case-card:hover .read-more {
    opacity: 0.8;
}


/* === Service Page Related Services === */
.sp-related {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
}

.sp-related h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2xl);
}

.sp-related .card-grid {
    text-align: left;
}

.sp-related-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-primary);
    margin-bottom: var(--space-sm);
    transition: transform var(--transition-base), color var(--transition-base);
}

.sp-related .service-card,
.related-services-section .service-card {
    border: 1px solid var(--color-border);
    transition: background var(--transition-base),
                transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.sp-related .service-card:hover,
.related-services-section .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 161, 172, 0.25);
}

.sp-related .service-card:hover .sp-related-icon {
    transform: scale(1.1);
    color: var(--color-accent-primary-hover);
}

.sp-related .service-card:hover h3 {
    color: var(--color-accent-primary);
}

.sp-related .service-card h3 {
    transition: color var(--transition-base);
}


/* === Service Page Final CTA === */
.sp-final-cta {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(204, 240, 244, 0.3), transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(255, 231, 235, 0.3), transparent 60%),
        var(--color-surface);
    border-radius: var(--radius-xl);
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-section-y);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.sp-final-cta h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    margin: 0 0 0.75rem;
}

.sp-final-cta p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0;
}

.sp-final-cta .accent-word {
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.final-cta-section {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(204, 240, 244, 0.3), transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(255, 231, 235, 0.3), transparent 60%),
        var(--color-surface);
    border-radius: var(--radius-xl);
    max-width: var(--max-width-medium);
    margin: 0 auto var(--space-section-y);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.final-cta-section h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    margin: 0 0 0.75rem;
}

.final-cta-section p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin: 0;
}

/* --- CTA Button Shimmer Effect --- */
.page-service-detail .cta-section .cta-button,
.page-service-detail .sp-final-cta .cta-button,
.page-service-detail .final-cta-section .cta-button {
    position: relative;
    overflow: hidden;
}

.page-service-detail .cta-section .cta-button::after,
.page-service-detail .sp-final-cta .cta-button::after,
.page-service-detail .final-cta-section .cta-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.page-service-detail .cta-section .cta-button:hover::after,
.page-service-detail .sp-final-cta .cta-button:hover::after,
.page-service-detail .final-cta-section .cta-button:hover::after {
    left: 100%;
}

/* --- Mid-Page CTA Gradient Border --- */
.page-service-detail .cta-section {
    position: relative;
}

.page-service-detail .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 161, 172, 0.15), transparent 50%, rgba(0, 161, 172, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* --- Service Page Content Block Enhancement (Variant B pages) --- */
.page-service-detail .services-section {
    counter-reset: content-step;
}

.page-service-detail .services-section .content-block {
    counter-increment: content-step;
    padding: 2rem 2rem 2rem 2.5rem;
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-base);
    position: relative;
}

.page-service-detail .services-section .content-block:hover {
    border-left-color: var(--color-accent-primary);
    background: var(--color-surface-hover);
    transform: translateX(4px);
}

.page-service-detail .services-section .content-block::before {
    content: counter(content-step, decimal-leading-zero);
    position: absolute;
    top: 2rem;
    right: 1.5rem;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text-muted);
    opacity: 0.3;
}

/* --- FAQ Accordion Enhancement --- */
.faq-item {
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

.faq-item h3 {
    cursor: pointer;
    padding: 1.5rem 2.5rem 1.5rem 0;
    position: relative;
    transition: color var(--transition-base);
}

.faq-item h3::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.625rem;
    font-weight: var(--weight-light);
    color: var(--color-text-muted);
    transition: transform var(--transition-base), color var(--transition-base);
}

.faq-item.is-open h3::after {
    content: '\2212';
    color: var(--color-accent-primary);
}

.faq-item h3:hover {
    color: var(--color-accent-primary);
}

.js-animations .faq-item .faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    padding-bottom: 0;
}

.js-animations .faq-item.is-open .faq-answer {
    max-height: 500px;
    opacity: 1;
    padding-bottom: var(--space-lg);
}


/* --- Service Page Solution Steps Enhancement (Variant A pages) --- */
.sp-solution .steps-card {
    transition: box-shadow var(--transition-slow);
}

.sp-solution .steps-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.js-animations .sp-solution .steps-item.is-visible .steps-tag-number {
    color: var(--color-accent-primary);
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================
   RESPONSIVE — Wide Desktop / BP1 (1598px)
   ============================================ */

@media screen and (max-width: 1598px) {
    .hp-hero-text h1 {
        font-size: 58px;
    }
    .hp-hero-stat-number {
        font-size: 30px;
    }
}


/* ============================================
   RESPONSIVE — Desktop / BP2 (1200px)
   ============================================ */

@media screen and (max-width: 1200px) {
    .hp-hero-text h1 {
        font-size: 50px;
    }
    .hp-hero-stat-number {
        font-size: 24px;
    }
}


/* ============================================
   RESPONSIVE — Tablet (991px)
   ============================================ */

@media screen and (max-width: 991px) {
    .header-inner {
        padding-top: 6px;
        padding-bottom: 6px;
        height: auto;
    }

    :root {
        --heading-1: 6.125rem;
        --heading-2: 4.125rem;
        --heading-3: 3.625rem;
        --heading-4: 2.625rem;
        --heading-5: 2.125rem;
        --heading-6: 1.875rem;
        --text-large: 1.425rem;
        --space-section-y: 6rem;
    }

    .hp-hero-stat-label {
        font-size: 12px;
    }

    /* Hero banner: stack vertically at BP3 (same as BP4 layout) */
    .hp-hero-banner {
        flex-direction: column;
        height: auto;
    }

    .hp-hero-col--text {
        width: 100%;
        justify-content: center;
        padding: calc(84px + 48px) var(--space-section-x) 3rem;
    }

    .hp-hero-col--visuals {
        width: 100%;
        height: 50vh;
    }


    .hp-hero-text {
        max-width: 56rem;
        align-items: center;
        text-align: center;
    }

    .hp-hero-text h1 {
        font-size: 3.5rem;
    }

    .hp-hero-body {
        max-width: 58ch;
    }

    .hero-ctas {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: auto;
    }

    .hp-hero-stats {
        justify-content: center;
    }

    .hp-stats-row {
        gap: 2.5rem;
    }

    /* Problem section: 2-column on tablet */
    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

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

    .problem-item-icon img {
        width: 72px;
        height: 72px;
    }

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

    .industries-marquee-panel {
        width: 26rem;
    }

    .testimonial-card {
        width: 340px;
    }

    .testimonial-quote p {
        font-size: 20px;
    }

    .testimonial-name,
    .testimonial-title,
    .testimonial-company {
        font-size: 14px;
    }

    .steps-card {
        flex-direction: column;
        height: auto;
        min-height: 0;
    }

    .steps-left-content {
        width: 100%;
        padding: 3rem 2.5rem;
    }

    .steps-right-content {
        width: 100%;
        height: 40vh;
    }

    .steps-item {
        position: relative;
        top: auto;
    }

    .case-studies-grid.featured-grid {
        grid-template-columns: 1fr;
    }

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

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

    .hp-process-grid {
        gap: var(--space-2xl);
    }

    .hp-why-item img {
        margin-bottom: 12px;
    }

    /* Comparison table */
    .hp-compare-table {
        min-width: 52rem;
    }

    .hp-compare-provider {
        padding: 1.25rem 1rem 1.25rem 1.5rem;
    }

    .hp-compare-desc {
        font-size: var(--text-small);
    }

    .final-cta {
        padding: 3rem var(--space-section-x);
    }

    .cta-layout {
        flex-direction: column;
        text-align: center;
        width: 100%;
    }

    .final-cta p {
        max-width: none;
    }

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

    .cta-actions {
        align-items: center;
    }

    .card-grid,
    .services-grid,
    .use-cases-grid {
        grid-template-columns: 1fr 1fr;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr;
        row-gap: var(--space-xl);
    }

    .footer-col-center > * {
        max-width: none;
    }

    .footer-col-right {
        text-align: left;
    }

    .process-step {
        grid-template-columns: 1fr;
    }

    .case-overview {
        grid-template-columns: 1fr;
    }

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

    /* --- Service Page Tablet Overrides --- */
    .sp-hero-banner {
        flex-direction: column;
        height: auto;
    }

    .sp-hero-col--text {
        width: 100%;
        padding: calc(6rem + 12px) var(--space-section-x) 3rem;
        justify-content: flex-start;
    }

    .page-hero {
        padding-top: calc(13rem + 12px);
    }

    .sp-hero-col--image {
        width: 100%;
        min-height: 300px;
    }

    .sp-solution .steps-item {
        position: relative;
        top: auto;
    }

    .sp-solution .steps-card {
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .sp-solution .steps-left-content {
        width: 100%;
    }

    .sp-solution .steps-right-content {
        width: 100%;
        min-height: 200px;
    }

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

    .sp-case-grid {
        grid-template-columns: 1fr;
    }

    .sp-case-featured {
        grid-column: 1;
    }

    .sp-case-featured .sp-case-image {
        aspect-ratio: 16 / 9;
    }

    .sp-final-cta {
        padding: 3rem 0;
    }

    /* --- Industry Detail 991px --- */
    .ind-hero-banner { flex-direction: column; height: auto; }
    .ind-hero-col--text { width: 100%; padding: calc(6rem + 12px) var(--space-section-x) 3rem; justify-content: flex-start; }
    .ind-hero-col--image { width: 100%; min-height: 300px; }
    .ind-services-grid { grid-template-columns: repeat(2, 1fr); }
    .ind-use-case-panel { width: 26rem; }

    /* --- Case Study Detail 991px --- */
    .cs-hero-banner { flex-direction: column; height: auto; }
    .cs-hero-col--text { width: 100%; padding: calc(6rem + 12px) var(--space-section-x) 3rem; justify-content: flex-start; }
    .cs-hero-col--image { width: 100%; min-height: 300px; }
}


/* ============================================
   RESPONSIVE — Mobile (767px)
   ============================================ */

@media screen and (max-width: 767px) {
    /* Mobile nav — full-screen overlay */
    .mobile-menu-toggle {
        display: block;
        order: 3;
        margin-left: auto;
        padding: 18px var(--space-lg);
    }

    .header.header-scrolled .header-inner {
        height: 3rem;
    }

    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        background: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 2rem;
        gap: var(--space-xs);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-base), visibility var(--transition-base);
        overflow-y: auto;
        z-index: 99;
        margin-left: 0;
        flex: none;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-item {
        font-size: 1.25rem;
        padding: 0.75rem 0;
        width: 100%;
        color: #1a1a1a;
        transform: none;
    }

    .nav .cta-button,
    .header .cta-button {
        width: 100%;
        text-align: center;
        margin-top: var(--space-lg);
        margin-left: 0;
        padding: 1rem;
        font-size: var(--text-lg);
        background: linear-gradient(45deg, var(--color-accent-primary), var(--color-accent-primary-hover));
        transform: none;
    }

    .nav-dropdown {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        align-self: auto;
    }

    .mega-menu,
    .dropdown-panel {
        position: static;
        transform: none;
        background: #f7f7f7;
        border: none;
        border-radius: var(--radius-md);
        box-shadow: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        min-width: 0;
        width: auto;
        left: auto;
        right: auto;
        columns: 1;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: max-height var(--transition-slow), opacity var(--transition-base), padding var(--transition-base);
    }

    .nav-dropdown.is-open .mega-menu,
    .nav-dropdown.is-open .dropdown-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 1000px;
        padding: 1rem;
    }

    .dropdown-content {
        max-width: none;
        columns: 1 !important;
        padding: 0;
    }

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

    .mega-menu-col.mega-additional {
        grid-template-columns: 1fr;
    }

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

    .mega-enhance {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    /* Core Services: single column at BP4 */
    .hp-services-group--core .hp-services-grid,
    .hp-services-group--engagement .hp-services-grid,
    .hp-services-group--capabilities .hp-services-grid {
        grid-template-columns: 1fr;
    }

    /* Remove left/right and bottom borders from service blocks at BP4+ */
    .hp-services-group--core .hp-service-item {
        border-right: none;
        border-bottom: none;
    }

    .hp-services-group--engagement .hp-services-grid,
    .hp-services-group--capabilities .hp-services-grid {
        gap: 0;
        background: none;
    }

    .hp-service-item {
        border-bottom: none;
    }

    .hp-why-item img {
        margin-bottom: 8px;
    }

    .cta-text {
        flex: 0 1 84%;
    }

    /* "You're in the right place" blocks: 2-col at BP4 with smaller text */
    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .problem-item-text {
        font-size: var(--text-body);
    }

    /* "Why teams choose us" blocks: single column at BP4 */
    .hp-why-grid {
        grid-template-columns: 1fr;
    }

    .cs-landing-grid {
        grid-template-columns: 1fr;
    }

    .cs-logos {
        gap: var(--space-lg);
    }

    .cs-logos img {
        height: 30px;
    }

    :root {
        --heading-1: 4.125rem;
        --heading-2: 3.125rem;
        --heading-3: 2.625rem;
        --heading-4: 2.125rem;
        --heading-5: 1.875rem;
        --heading-6: 1.625rem;
        --text-h2: 2.5rem;
        --space-section-y: 5rem;
        --space-section-x: 1.5rem;
    }

    h2 {
        line-height: 1.2;
    }

    .hp-hero-text h1 {
        font-size: 42px;
    }

    /* Hero CTAs: keep row layout, center both buttons on same line */
    .hero-ctas {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
    }

    .hp-stats-row {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .hp-stat-divider {
        width: 3rem;
        height: 1px;
    }

    .industries-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    .industries-marquee-panel {
        width: 22.1rem;
        height: 64vh;
        min-height: 23.8rem;
        max-height: 40.8rem;
    }

    .industries-panel-content {
        padding: 2rem;
    }

    .industries-panel-heading {
        font-size: 1.375rem;
    }

    .industries-panel-description {
        font-size: var(--text-lg);
    }

    .testimonial-quote p {
        font-size: 18px;
    }

    .testimonial-name,
    .testimonial-title,
    .testimonial-company {
        font-size: 13px;
    }

    .hp-how-tabs {
        flex-direction: column;
        border-bottom: none;
        gap: var(--space-sm);
    }

    .hp-how-tab {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 1rem;
    }

    .hp-how-tab.active {
        border-color: var(--color-accent-primary);
        background: rgba(0, 161, 172, 0.05);
    }

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

    .hp-process-left {
        position: relative;
        top: auto;
    }

    .hp-process-left h2 {
        max-width: none;
    }

    /* Comparison table */
    .hp-compare-table {
        min-width: 48rem;
    }

    .hp-compare-th {
        padding: 1rem;
        font-size: 12px;
    }

    .hp-compare-provider {
        padding: 1rem;
    }

    .hp-compare-cell {
        padding: 1rem 0.75rem;
    }

    .hp-compare-desc {
        display: none;
    }

    .hp-compare-icon {
        width: 24px;
        height: 24px;
    }

    .hp-compare-icon img,
    .hp-compare-icon svg {
        width: 24px;
        height: 24px;
    }

    .hp-compare-row--featured .hp-compare-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .hp-compare-row--featured .hp-compare-icon img {
        width: 40px;
        height: 40px;
    }

    .hp-compare-check svg,
    .hp-compare-x svg {
        width: 32px;
        height: 32px;
    }

    .hp-compare-name {
        font-size: var(--text-lg);
    }

    .hp-compare-table-wrap {
        position: relative;
    }

    .hp-compare-table-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 2.5rem;
        background: linear-gradient(to left, var(--color-surface), transparent);
        pointer-events: none;
        border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    }

    .card-grid,
    .services-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        text-align: left;
    }

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

    .page-404 h1 {
        font-size: 8.125rem;
    }

    .about-stats {
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* --- Service Page Mobile Overrides --- */
    .sp-hero-col--text {
        padding: 6rem var(--space-section-x) 2rem;
    }

    .sp-hero-text {
        align-items: center;
        text-align: center;
    }

    .sp-hero-benefits {
        align-items: flex-start;
        text-align: left;
    }

    .sp-hero-ctas {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }

    .sp-problem-cards {
        flex-direction: column;
    }

    .sp-problem-card {
        width: 100%;
    }

    .sp-solution-grid {
        grid-template-columns: 1fr;
    }

    .sp-deliverables-grid {
        grid-template-columns: 1fr;
    }

    .sp-comparison-table {
        -webkit-overflow-scrolling: touch;
    }

    .sp-related .card-grid {
        grid-template-columns: 1fr;
    }

    .sp-final-cta {
        padding: 3rem 0;
    }

    /* --- Industry Detail 767px --- */
    .ind-hero-banner { flex-direction: column; }
    .ind-hero-col--text {
        width: 100%;
        padding: 6rem var(--space-section-x) 2rem;
    }
    .ind-hero-text {
        align-items: center;
        text-align: center;
        max-width: none;
    }
    .ind-hero-benefits { align-items: flex-start; text-align: left; }
    .ind-hero-ctas {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    .ind-hero-col--image {
        width: 100%;
        min-height: 250px;
    }
    .ind-challenges-grid { grid-template-columns: 1fr; }
    .ind-services-grid { grid-template-columns: 1fr; }
    .ind-use-case-panel { width: 75vw; }
    .ind-use-case-content { padding: 2rem; }
    .ind-use-case-icon svg { width: 44px; height: 44px; }
    .ind-use-case-heading { font-size: 1.375rem; }
    .ind-use-case-description { font-size: var(--text-lg); }
    .ind-cta-mid-inner {
        flex-direction: column;
        padding: 3rem 2rem;
        text-align: center;
    }
    .ind-cta-mid-text p { max-width: none; }
    .ind-cta-mid-image { width: 100%; max-width: 280px; }
    .ind-cta-final-inner {
        flex-direction: column;
        text-align: center;
    }
    .ind-cta-final-image { width: 100%; max-width: 320px; }
    .ind-cta-final-text p { max-width: none; }

    /* --- Case Study Detail 767px --- */
    .cs-hero-banner { flex-direction: column; }
    .cs-hero-col--text {
        width: 100%;
        padding: 6rem var(--space-section-x) 2rem;
    }
    .cs-hero-text {
        align-items: center;
        text-align: center;
        max-width: none;
    }
    .cs-hero-col--image {
        width: 100%;
        min-height: 250px;
    }

    .filter-bar {
        gap: 0.375rem;
    }
    .filter-link {
        font-size: 0.8125rem;
        padding: 0.375rem 0.875rem;
    }
}


/* ============================================
   RESPONSIVE — Small Mobile (479px)
   ============================================ */

@media screen and (max-width: 479px) {
    :root {
        --heading-2: 2.625rem;
        --heading-4: 1.875rem;
        --text-h2: 2.375rem;
        --space-section-x: 1rem;
    }

    h2 {
        line-height: 1.2;
    }

    .logo img {
        height: 53.6px;
    }

    .footer-logo img {
        height: 58.5px;
    }

    .hp-hero-col--text {
        padding: calc(5rem + 32px) var(--space-section-x) 2.5rem;
    }

    .hp-hero-stat {
        align-items: flex-start;
    }

    .hp-hero-stat-label {
        text-align: left;
    }

    .hp-hero-col--visuals {
        height: 40vh;
    }

    .hp-hero-col--static {
        display: none;
    }

    .hp-hero-text h1 {
        font-size: 2.625rem;
    }

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

    .industries-marquee-panel {
        width: 22.1rem;
    }

    .industries-panel-content {
        padding: 1.5rem;
        gap: var(--space-md);
    }

    .steps-left-content {
        padding: 2rem 1.5rem;
    }

    .steps-heading {
        font-size: var(--text-h5);
    }

    .final-cta {
        padding: 2.5rem var(--space-section-x);
    }

    .cta-layout {
        width: 90%;
    }

    .client-quote {
        padding: 2rem 1.5rem;
    }

    .hp-why-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        width: 300px;
    }

    /* Problem section: 2-column compact on mobile */
    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .problem-item {
        padding: var(--space-lg) var(--space-md);
    }

    .problem-item-icon img {
        width: 64px;
        height: 64px;
    }

    .problem-item-text {
        font-size: var(--text-body);
    }

    .page-hero {
        padding-top: 10rem;
    }

    .page-404 h1 {
        font-size: 5.125rem;
    }

    /* Comparison table */
    .hp-compare-table {
        min-width: 44rem;
    }

    .hp-compare-name {
        font-size: var(--text-small);
    }

    .hp-compare-check svg,
    .hp-compare-x svg {
        width: 24px;
        height: 24px;
    }

    .hp-compare-icon {
        width: 20px;
        height: 20px;
    }

    .hp-compare-icon img,
    .hp-compare-icon svg {
        width: 20px;
        height: 20px;
    }

    .hp-compare-row--featured .hp-compare-icon {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .hp-compare-row--featured .hp-compare-icon img {
        width: 28px;
        height: 28px;
    }

    .footer-subscribe-row {
        flex-direction: column;
        border-radius: var(--radius-md);
    }

    .footer-subscribe-row input[type="email"] {
        border-bottom: 1px solid var(--color-border);
        padding: 0.75rem 1rem;
    }

    .footer-subscribe-btn {
        border-radius: 0;
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);
        padding: 0.75rem 1rem;
    }

    /* --- Service Page Small Mobile Overrides --- */
    .sp-hero-col--text {
        padding: 5rem var(--space-section-x) 2rem;
    }

    .sp-problem {
        padding-top: calc(var(--space-section-y) + 30px);
    }

    .sp-final-cta {
        padding: 2.5rem 0;
    }

    /* --- Industry Detail 479px --- */
    .ind-hero-col--text { padding: 5rem var(--space-section-x) 2rem; }
    .ind-use-case-panel { width: 90vw; }
    .ind-use-case-content { padding: 1.5rem; gap: var(--space-md); }
    .ind-use-case-icon svg { width: 40px; height: 40px; }
    .ind-cta-mid-inner { padding: 2.5rem 1.5rem; }

    /* --- Case Study Detail 479px --- */
    .cs-hero-col--text { padding: 5rem var(--space-section-x) 2rem; }

    /* Simplify CTA backgrounds on small screens */
    .sp-final-cta,
    .final-cta-section {
        background: var(--color-surface);
    }

    /* Reduce animation distances on small screens */
    .js-animations .sp-hero-text > * {
        transform: translateY(12px);
    }

    /* Hide content block counter numbers on very small screens */
    .page-service-detail .services-section .content-block::before {
        display: none;
    }
}


/* ============================================
   HUB LANDING PAGES (Services, Solutions, Use Cases)
   ============================================ */

/* === Hub Hero with Animated Stat Bar === */
.hub-hero {
    padding-top: 0;
    padding-bottom: 0;
}

.hub-hero-banner {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15% 40%, #ccf0f4, transparent 55%),
        radial-gradient(ellipse at 85% 20%, #ffe7eb, transparent 55%),
        radial-gradient(ellipse at 50% 90%, #fff2cd, transparent 55%),
        radial-gradient(ellipse at 75% 60%, #ffe7c8, transparent 45%),
        linear-gradient(135deg, #ccf0f4 0%, #fff2cd 35%, #ffe7c8 65%, #ffe7eb 100%);
}

.hub-hero-banner::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 35% 35%, rgba(204, 240, 244, 0.7), transparent 45%),
        radial-gradient(ellipse at 70% 60%, rgba(255, 231, 235, 0.65), transparent 45%),
        radial-gradient(ellipse at 25% 75%, rgba(255, 242, 205, 0.55), transparent 45%);
    animation: gradient-drift 18s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

.hub-hero-col {
    position: relative;
    z-index: 1;
}

.hub-hero-col--text {
    width: 50%;
    padding: 10rem 3rem 4rem var(--space-section-x);
}

.hub-hero-col--image {
    width: 50%;
    padding: 10rem var(--space-section-x) 4rem 2rem;
    display: flex;
    align-items: center;
}

.hub-hero-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #e8e8e8;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-hero-image svg {
    width: 100%;
    height: 100%;
}

.hub-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-lg);
    max-width: 45rem;
}

.hub-hero-text h1 {
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    max-width: 20ch;
}

.hub-hero-text .subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    max-width: 50ch;
    line-height: var(--leading-relaxed);
}

.hub-hero-stats {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-md);
}

.hub-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.hub-hero-stat-number {
    font-size: var(--text-h5);
    font-weight: var(--weight-bold);
    background: linear-gradient(45deg, var(--color-accent-tertiary-light), var(--color-accent-tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hub-hero-stat-label {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

.hub-hero-stat-divider {
    width: 1px;
    height: 2.5rem;
    background: var(--color-border);
}

/* === Bento Service Sections (Services page) === */
.bento-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.bento-section-inner {
    text-align: left;
}

.bento-section .eyebrow {
    margin-bottom: var(--space-sm);
}

.bento-section h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 0 2.5rem;
}

/* === Bento Card === */
.bento-card {
    background-color: var(--color-card-dark);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-xl);
    padding: 2rem;
    min-height: 22rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-slow),
                box-shadow var(--transition-slow);
}

.bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(45, 45, 58, 0.15) 0%, rgba(45, 45, 58, 0.85) 70%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.bento-card-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: 0.75rem;
    transition: transform var(--transition-slow);
}

.bento-card:hover .bento-card-icon {
    transform: scale(1.1);
}

.bento-card-icon svg {
    width: 28px;
    height: 28px;
}

.bento-card-title {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: #ffffff;
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-sm);
}

.bento-card-desc {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--leading-relaxed);
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-md);
}

.bento-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    position: relative;
    z-index: 1;
}

.bento-card-link span {
    display: inline-block;
    transition: transform var(--transition-base);
}

.bento-card:hover .bento-card-link span {
    transform: translate(3px, -3px);
}

/* === Bento Grid: Core Services (3fr 2fr, full-width bottom) === */
.bento-grid {
    display: grid;
    gap: var(--space-md);
}

.bento-grid--core {
    grid-template-columns: 2fr 3fr;
}

.bento-card--core-wide {
    grid-column: 1 / -1;
}

/* === Bento Grid: Engagement (2x2) === */
.bento-grid--engagement {
    grid-template-columns: repeat(2, 1fr);
}

/* === Bento Grid: Additional Services (complex bento) === */
.bento-grid--additional {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
}

.bento-card--add-wide { grid-column: 1 / 3; grid-row: 1; }
.bento-card--add-tall { grid-column: 3; grid-row: 1 / 3; }
.bento-card--add-6 { grid-column: 1; grid-row: 2; }
.bento-card--add-7 { grid-column: 2; grid-row: 2; }
.bento-card--add-1 { grid-column: 1; grid-row: 3; }
.bento-card--add-2 { grid-column: 2; grid-row: 3; }
.bento-card--add-3 { grid-column: 3; grid-row: 3; }

/* === Hub Card Grid === */
.hub-cards-section {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

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

.hub-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: transform var(--transition-slow),
                border-color var(--transition-base),
                box-shadow var(--transition-slow);
}

.hub-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.hub-card-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow);
}

.hub-card:hover .hub-card-icon {
    transform: scale(1.1);
}

.hub-card-icon svg {
    width: 28px;
    height: 28px;
}

.hub-card .tag {
    display: inline-block;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-primary);
    background: rgba(0, 161, 172, 0.08);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-md);
    width: fit-content;
}

.hub-card h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.hub-card p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    flex: 1;
}

.hub-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    margin-top: auto;
}

.hub-card-link span {
    display: inline-block;
    transition: transform var(--transition-base);
}

.hub-card:hover .hub-card-link span {
    transform: translateX(4px);
}

.hub-card-icon i {
    font-size: 28px;
}

/* Filter hide/show transitions */
.hub-card--hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

/* (Spotlight section removed — replaced by bento sections above) */

/* === Hub Social Proof === */
.hub-proof {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
}

.hub-proof .eyebrow {
    margin-bottom: var(--space-sm);
}

.hub-proof h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 auto 3rem;
}

.hub-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    text-align: left;
}

.hub-proof .link {
    margin-top: var(--space-xl);
}

.hub-proof .link a {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
}

.hub-proof .link a:hover {
    text-decoration: underline;
}

/* === Hub Why Section (Complete styling) === */
.hub-why {
    padding: var(--space-section-y) var(--space-section-x);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    text-align: center;
}

.hub-why h2 {
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    max-width: 800px;
    margin: 0 auto 1rem;
}

.hub-why .why-intro {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    max-width: 50ch;
    margin: 0 auto 3rem;
}

.hub-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    text-align: left;
}

.hub-why-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hub-why-card-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-why-card-icon svg {
    width: 28px;
    height: 28px;
}

.hub-why-card h3 {
    font-size: var(--text-h5);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.hub-why-card p {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.hub-why-card .proof-point {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    color: var(--color-accent-primary);
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

/* === Hub Responsive Overrides === */
@media screen and (max-width: 991px) {
    .hub-hero-col--text {
        padding: 8rem 2rem 3rem var(--space-section-x);
    }

    .hub-hero-col--image {
        padding: 8rem var(--space-section-x) 3rem 1rem;
    }

    .hub-hero-text h1 {
        font-size: var(--text-h2);
    }

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

    .bento-grid--core {
        grid-template-columns: 1fr;
    }

    .bento-card--core-wide {
        grid-column: 1;
    }

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

    .bento-card--add-1 { grid-column: 1; grid-row: auto; }
    .bento-card--add-2 { grid-column: 2; grid-row: auto; }
    .bento-card--add-3 { grid-column: 1; grid-row: auto; }
    .bento-card--add-wide { grid-column: 1 / -1; grid-row: auto; }
    .bento-card--add-tall { grid-column: 1 / -1; grid-row: auto; }
    .bento-card--add-6 { grid-column: 1; grid-row: auto; }
    .bento-card--add-7 { grid-column: 2; grid-row: auto; }

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

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

@media screen and (max-width: 767px) {
    .hub-hero-banner {
        flex-direction: column;
    }

    .hub-hero-col--text {
        width: 100%;
        padding: 7rem var(--space-section-x) 2rem;
    }

    .hub-hero-col--image {
        width: 100%;
        padding: 0 var(--space-section-x) 2.5rem;
    }

    .hub-hero-text h1 {
        font-size: var(--text-h5);
    }

    .hub-hero-stats {
        gap: var(--space-lg);
    }

    .hub-hero-stat-number {
        font-size: var(--text-h6);
    }

    .hub-card-grid {
        grid-template-columns: 1fr;
    }

    .hub-card {
        padding: 2rem;
    }

    .bento-grid--core,
    .bento-grid--engagement {
        grid-template-columns: 1fr;
    }

    .bento-grid--additional {
        grid-template-columns: 1fr;
    }

    .bento-card--add-1,
    .bento-card--add-2,
    .bento-card--add-3,
    .bento-card--add-wide,
    .bento-card--add-tall,
    .bento-card--add-6,
    .bento-card--add-7 {
        grid-column: 1;
        grid-row: auto;
    }

    .bento-card {
        min-height: 18rem;
    }

    .hub-proof-grid {
        grid-template-columns: 1fr;
    }

    .hub-why-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 479px) {
    .hub-hero-col--text {
        padding: 6rem 1.5rem 1.5rem;
    }

    .hub-hero-col--image {
        display: none;
    }

    .hub-hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .hub-hero-stat-divider {
        width: 3rem;
        height: 1px;
    }

    .bento-card {
        min-height: 16rem;
        padding: 1.5rem;
    }
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.content-block-narrow {
    max-width: 800px;
    margin: 0 auto;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================
   TOUCH DEVICE REFINEMENTS
   ============================================ */

@media (hover: none) {
    .sp-problem-card:hover,
    .sp-deliverable:hover,
    .sp-case-card:hover,
    .case-study-card:hover,
    .sp-related .service-card:hover,
    .related-services-section .service-card:hover,
    .sp-solution .steps-card:hover,
    .page-service-detail .services-section .content-block:hover {
        transform: none;
        box-shadow: none;
    }

    .case-study-card:hover,
    .sp-case-card:hover {
        border-color: var(--color-border);
        box-shadow: none;
    }

    .sp-deliverable:hover::before {
        transform: scaleX(0);
    }

    .page-service-detail .cta-section .cta-button::after,
    .page-service-detail .sp-final-cta .cta-button::after,
    .page-service-detail .final-cta-section .cta-button::after {
        display: none;
    }
}


/* ============================================
   CASE STUDY DETAIL V2 — New Layout
   ============================================ */

/* --- Hero V2: Auto-height with image element --- */
.cs-hero-v2 .cs-hero-banner {
    height: auto;
    min-height: 0;
    align-items: center;
    padding: 8rem 0 4rem;
}

.cs-hero-v2 .cs-hero-col--text {
    width: 50%;
    padding: 2rem 3rem 2rem 4rem;
}

.cs-hero-v2 .cs-hero-text h1 {
    font-size: var(--text-h1);
    margin-bottom: 0.5rem;
}

.cs-hero-v2 .cs-hero-text h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    max-width: 48ch;
}

.cs-hero-v2 .cs-hero-col--media {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 4rem 2rem 2rem;
}

.cs-hero-media {
    max-width: 660px;
    max-height: 450px;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cs-hero-media img,
.cs-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* --- Two-Column Content Layout --- */
.cs-detail-wrapper {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding: var(--space-section-y) var(--space-section-x);
}

.cs-detail-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}

.cs-detail-main {
    max-width: 52rem;
    padding-right: var(--space-xl);
}


/* --- Content Sections within Main --- */
.cs-content-section {
    margin-bottom: var(--space-section-y);
}

.cs-content-section:last-child {
    margin-bottom: 0;
}

.cs-content-section h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    line-height: var(--leading-tight);
}

.cs-byline {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-xl);
}


/* --- Final Result (visually distinct) --- */
.cs-final-result {
    background: var(--color-grey-100);
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-xl);
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
}


/* --- Testimonial Block (dark) --- */
.cs-testimonial {
    background: var(--color-card-dark);
    color: #fff;
    padding: var(--space-2xl) var(--space-xl);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    margin-top: -1 * var(--radius-xl);
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
    position: relative;
}

.cs-testimonial-content {
    display: flex;
    align-items: center;
    gap: var(--space-2xl);
}

.cs-testimonial-quote-area {
    flex: 1;
}

.cs-testimonial-icon {
    font-size: var(--text-h2);
    color: var(--color-accent-tertiary);
    margin-bottom: var(--space-lg);
    display: block;
}

.cs-testimonial-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    margin-bottom: var(--space-lg);
}

.cs-testimonial-logo img {
    max-width: 90px;
    max-height: 60px;
    display: block;
}

.cs-testimonial blockquote {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    font-style: italic;
    margin-bottom: var(--space-lg);
    color: rgba(255, 255, 255, 0.92);
}

.cs-testimonial cite {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-style: normal;
    display: block;
    color: #fff;
}

.cs-testimonial-role {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-top: var(--space-xs);
}

.cs-testimonial-headshot {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.cs-testimonial-headshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* --- Sidebar --- */
.cs-detail-sidebar {
    position: sticky;
    top: 7rem;
}

.cs-sidebar-strip {
    background: var(--color-grey-100);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.cs-sidebar-block {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.cs-sidebar-block:first-child {
    padding-top: 0;
}

.cs-sidebar-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cs-sidebar-block-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.cs-sidebar-block-header i {
    font-size: var(--text-lg);
    color: var(--color-accent-tertiary);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.cs-sidebar-block-header h3 {
    font-size: var(--text-small);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--leading-tight);
}

.cs-sidebar-block p {
    font-size: var(--text-body);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
    margin: 0;
}

.cs-sidebar-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.cs-sidebar-block ul li {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    padding-left: 1rem;
    position: relative;
}

.cs-sidebar-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent-tertiary);
}


/* --- About Section --- */
.cs-about-section {
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding: var(--space-section-y) var(--space-section-x);
    border-top: 1px solid var(--color-border);
}

.cs-about-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xl);
}

.cs-about-content {
    flex: 1;
}

.cs-about-content h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.cs-about-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-accent-primary);
    margin-bottom: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cs-about-content h3 i {
    font-size: var(--text-h5);
    color: var(--color-accent-tertiary);
}

.cs-about-link {
    margin-top: var(--space-xl);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

.cs-about-link a {
    color: var(--color-accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.cs-about-link a:hover {
    color: var(--color-accent-primary-hover);
}

.cs-about-logo {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-about-logo img {
    max-width: 300px;
    max-height: 240px;
    object-fit: contain;
}


/* --- Gallery / Lightbox (scaffold) --- */
.cs-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.cs-gallery-thumb {
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cs-gallery-thumb:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

.cs-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}

.cs-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cs-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.cs-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: var(--text-h3);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.cs-lightbox-close:hover {
    opacity: 1;
}

.cs-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: var(--text-h4);
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.cs-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.cs-lightbox-prev {
    left: 1.5rem;
}

.cs-lightbox-next {
    right: 1.5rem;
}


/* --- Case Study Detail V2 Responsive --- */
@media (max-width: 991px) {
    .cs-hero-v2 .cs-hero-banner {
        flex-direction: column;
        height: auto;
        padding: 7rem 0 0;
    }

    .cs-hero-v2 .cs-hero-col--text {
        width: 100%;
        padding: 2rem var(--space-section-x);
    }

    .cs-hero-v2 .cs-hero-col--media {
        width: 100%;
        padding: var(--space-xl) var(--space-section-x);
    }

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

    .cs-detail-sidebar {
        position: static;
        order: -1;
    }

    .cs-detail-main {
        padding-right: 0;
    }

    .cs-about-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cs-about-content h3 {
        justify-content: center;
    }

    .cs-about-logo {
        width: auto;
    }
}

@media (max-width: 767px) {
    .cs-hero-v2 .cs-hero-text h1 {
        font-size: var(--text-h3);
    }

    .cs-content-section h2 {
        font-size: var(--text-h4);
    }

    .cs-final-result {
        margin-left: calc(-1 * var(--space-section-x));
        margin-right: calc(-1 * var(--space-section-x));
        border-radius: 0;
        padding: var(--space-xl) var(--space-section-x);
    }

    .cs-testimonial {
        margin-left: calc(-1 * var(--space-section-x));
        margin-right: calc(-1 * var(--space-section-x));
        border-radius: 0;
        padding: var(--space-xl) var(--space-section-x);
    }

    .cs-testimonial-content {
        flex-direction: column;
        text-align: center;
    }

    .cs-testimonial-headshot {
        order: -1;
    }

    .cs-about-content h2 {
        font-size: var(--text-h4);
    }
}

@media (max-width: 479px) {
    .cs-hero-v2 .cs-hero-text h1 {
        font-size: var(--text-h4);
    }

    .cs-hero-media {
        border-radius: var(--radius-md);
    }

    .cs-sidebar-strip {
        padding: var(--space-md);
    }
}


/* --- Quote Page Responsive --- */
@media (max-width: 991px) {
    .quote-hero {
        padding: 8rem var(--space-section-x) 3rem;
    }

    .quote-layout {
        flex-direction: column;
        gap: var(--space-2xl);
    }

    .quote-info {
        flex: none;
        width: 100%;
        max-width: none;
    }

    .quote-form-col {
        flex: none;
        width: 100%;
        max-width: none;
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .quote-hero {
        padding: 7rem var(--space-section-x) 2.5rem;
    }

    .quote-hero h1 {
        font-size: var(--text-h3);
    }
}


/* ============================================
   LEGAL PAGES (Privacy Policy & Terms)
   ============================================
   Layout: Banner hero + 3/4 content + 1/4 sidebar
   with 3× gutter between columns.
   ============================================ */

/* --- Hero Banner --- */
.legal-hero {
    background: var(--gradient-banner);
    padding: 10rem var(--space-section-x) var(--space-3xl);
    text-align: left;
}

.legal-hero__inner {
    max-width: var(--max-width-medium);
    margin: 0 auto;
}

.legal-hero__title {
    font-family: var(--font-heading);
    font-size: var(--text-hero-lg);
    font-weight: var(--weight-black);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
}

.legal-hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    max-width: 40rem;
    margin: 0 0 var(--space-lg);
}

.legal-hero__date {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.legal-hero__date i {
    color: var(--color-accent-primary);
}

/* --- Content + Sidebar Grid ---
   3/4 content | 3× gutter | 1/4 sidebar
   Standard gutter is --space-lg (1.5rem),
   so 3× gutter = calc(var(--space-lg) * 3) = 4.5rem */
.legal-section {
    padding-top: var(--space-section-y);
    padding-bottom: var(--space-section-y);
}

.legal-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: calc(var(--space-lg) * 9);
    max-width: var(--max-width-medium);
    margin: 0 auto;
    padding: 0 var(--space-section-x);
}

/* --- Main Content Column --- */
.legal-content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.legal-content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h5);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.legal-content p {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.legal-content p:last-child {
    margin-bottom: 0;
}

.legal-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
}

.legal-content ul li {
    position: relative;
    padding-left: var(--space-lg);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.legal-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-text-secondary);
}

.legal-content ol {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
    counter-reset: legal-ol;
}

.legal-content ol li {
    position: relative;
    padding-left: var(--space-xl);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    counter-increment: legal-ol;
}

.legal-content ol li::before {
    content: counter(legal-ol) ".";
    position: absolute;
    left: 0;
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
}

.legal-content a {
    color: var(--color-accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.legal-content a:hover {
    color: var(--color-accent-primary-hover);
}

/* --- Sidebar --- */
.legal-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: 6.5rem;
    align-self: start;
}

.legal-sidebar__card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.legal-sidebar__card--cta {
    background: var(--color-grey-100);
    border-color: transparent;
}

.legal-sidebar__heading {
    font-family: var(--font-heading);
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.legal-sidebar__heading i {
    color: var(--color-accent-primary);
    font-size: var(--text-lg);
}

/* Sidebar navigation links */
.legal-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.legal-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.legal-sidebar__link:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.legal-sidebar__link--active {
    background-color: rgba(123, 92, 213, 0.08);
    color: var(--color-accent-primary);
    font-weight: var(--weight-bold);
}

.legal-sidebar__link--active:hover {
    background-color: rgba(123, 92, 213, 0.12);
    color: var(--color-accent-primary);
}

.legal-sidebar__link i {
    font-size: var(--text-body);
    width: 1.25em;
    text-align: center;
}

/* Sidebar summary list */
.legal-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.legal-sidebar__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.legal-sidebar__list li i {
    color: var(--color-accent-tertiary);
    font-size: var(--text-body);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Sidebar contact section */
.legal-sidebar__card p {
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-md);
}

.legal-sidebar__contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.legal-sidebar__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.legal-sidebar__contact-item i {
    color: var(--color-accent-tertiary);
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-top: 2px;
    width: 1.25em;
    text-align: center;
}

.legal-sidebar__contact-item a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.legal-sidebar__contact-item a:hover {
    color: var(--color-accent-primary-hover);
    text-decoration: underline;
}

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

.legal-sidebar__phone {
    display: flex;
    flex-direction: column;
}

.legal-sidebar__phone-label {
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-sidebar__phone a {
    font-size: var(--text-small);
}

/* --- Legal Page Responsive --- */
@media (max-width: 991px) {
    .legal-hero {
        padding: 8rem var(--space-lg) var(--space-2xl);
    }

    .legal-hero__title {
        font-size: var(--text-h3);
    }

    .legal-layout {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        padding: 0 var(--space-lg);
    }

    .legal-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .legal-sidebar__card {
        flex: 1;
        min-width: 240px;
    }
}

@media (max-width: 767px) {
    .legal-hero {
        padding: 7rem var(--space-md) var(--space-xl);
    }

    .legal-hero__title {
        font-size: var(--text-h4);
    }

    .legal-hero__subtitle {
        font-size: var(--text-body);
    }

    .legal-layout {
        padding: 0 var(--space-md);
    }

    .legal-section {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .legal-sidebar {
        flex-direction: column;
    }

    .legal-sidebar__card {
        min-width: 0;
    }

    .legal-content h2 {
        font-size: var(--text-h5);
    }
}