/* ==========================================================================
   Smart Hub Tech: the one site stylesheet
   Every page loads only this file. It joins the former stylesheets in their
   original cascade order, so later sections still override earlier ones:
     Section 1  Base                 (was styles.css)
     Section 2  Soro theme overrides (was theme-soro.css)
     Section 3  Blog                 (was blog.css, scoped to blog pages)
     Section 4  Editorial layout     (was editorial.css)
     Section 5  Midnight design      (was midnight.css)
     Section 6  Homepage visuals     (was home-visuals.css)
     Section 7  Homepage theme       (was home-theme.css)
   Add new rules to the section they belong to, not to the end of the file.
   ========================================================================== */

/* ==========================================================================
   SECTION 1: Base (was styles.css)
   ========================================================================== */

/* Smart Hub Tech - Premium Consulting Website Styles */
/* illustrations.css is loaded as a separate <link> tag in HTML for parallel download */

/* ========================================
   CSS Custom Properties (Design Tokens)
======================================== */
:root {
    /* Primary Colors */
    --primary-dark: #0a1628;
    --primary-blue: #1e3a5f;
    --primary-accent: #2563eb;
    --accent-light: #3b82f6;
    --accent-cyan: #06b6d4;

    /* Neutral Colors */
    --white: #ffffff;
    --off-white: #f8fafc;
    --light-gray: #e2e8f0;
    --medium-gray: #94a3b8;
    --dark-gray: #475569;
    --text-dark: #1e293b;

    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, #1e3a5f 0%, #0a1628 100%);
    --gradient-accent: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    --gradient-hero: linear-gradient(135deg, #0a1628 0%, #1e3a5f 50%, #0f2744 100%);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', var(--font-primary);

    /* Spacing */
    --section-padding: clamp(5rem, 8vw, 8rem);
    --container-max: 1200px;
    --container-narrow: 960px;
    --text-max: 65ch;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.3);
}

/* ========================================
   CSS Reset & Base Styles
======================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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

/* list-style reset only on UI components — content ul/ol keep browser defaults */

/* ========================================
   Typography
======================================== */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

p {
    margin-bottom: 1rem;
}

/* ========================================
   Layout Components
======================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

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

.section--light {
    background: var(--off-white);
}

.section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.section__title {
    margin-bottom: 1.5rem;
}

.section__description {
    font-size: 1.125rem;
    color: var(--dark-gray);
    max-width: var(--text-max);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

/* ========================================
   Buttons
======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn--primary {
    background: var(--gradient-accent);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.btn--large {
    padding: 1.25rem 2.5rem;
    font-size: 1.125rem;
}

/* Accessible focus states */
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--primary-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ========================================
   Navigation
======================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: all var(--transition-base);
    width: 100%;
}

.header.scrolled {
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
}

.header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
}

.header__logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__logo-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
}

.nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    position: static;
}

.nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav__link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-fast);
    position: relative;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link.active {
    color: var(--white);
}

.nav__link:hover::after,
.nav__link.active::after {
    width: 100%;
}

.nav__cta {
    padding: 0.75rem 1.5rem;
}

/* Header phone: quiet text link beside the CTA; mobile also has the sticky Call button */
.nav__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: -1rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.nav__phone svg { width: 14px; height: 14px; flex: none; }
/* Blog pages space the nav at 12px, so the pull towards the button would overlap it */
.page--blog .nav__phone { margin-right: 0; }

@media (min-width: 1025px) and (max-width: 1199px) {
    .nav__phone { display: none; }
}

/* Mobile Navigation */
.mobile-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.5rem;
    min-width: 48px;
    min-height: 48px;
    margin: -8px -12px -8px 0;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: all var(--transition-base);
}

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

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

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

@media (max-width: 1024px) {
    .mobile-toggle {
        display: flex;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        overflow-y: auto;
        background: var(--gradient-primary);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 6rem 2rem 2rem;
        gap: 2rem;
        transition: right var(--transition-base);
    }

    .nav.active {
        right: 0;
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .nav__link {
        font-size: 1.25rem;
        padding: 0.5rem 0;
    }

    .nav__cta {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   Mega Menu & Dropdowns
======================================== */

/* Nav item wrappers */
.nav__item--mega {
    position: static;
}

.nav__item--dropdown {
    position: relative;
}

/* Trigger buttons inherit nav__link look */
.nav__mega-trigger,
.nav__dropdown-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
}

.nav__arrow {
    transition: transform var(--transition-base);
    flex-shrink: 0;
    opacity: 0.7;
}

.nav__item--mega.is-open .nav__arrow,
.nav__item--dropdown.is-open .nav__arrow {
    transform: rotate(180deg);
    opacity: 1;
}

/* Solid header background when any menu is open (transparent header state) */
.header.has-open-menu {
    background: rgba(10, 22, 40, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}

/* ---- Mega Menu (Services) ---- */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(10, 22, 40, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 999;
}

.nav__item--mega.is-open .mega-menu,
.nav__item--mega:hover .mega-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-menu__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem clamp(1rem, 4vw, 2rem) 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 0 2.5rem;
}

/* Column headings */
.mega-menu__col-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Link list */
.mega-menu__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mega-menu__link {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.75rem 0.75rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.mega-menu__link:hover {
    background: rgba(37, 99, 235, 0.12);
    color: var(--white);
}

.mega-menu__link-icon {
    width: 38px;
    height: 38px;
    background: rgba(37, 99, 235, 0.35);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.mega-menu__link-icon svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

.mega-menu__link:hover .mega-menu__link-icon {
    background: rgba(37, 99, 235, 0.55);
}

.mega-menu__link strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.mega-menu__link em {
    display: block;
    font-size: 0.8125rem;
    font-style: normal;
    color: rgba(255, 255, 255, 0.48);
    line-height: 1.45;
}

/* CTA column */
.mega-menu__col--cta {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    padding-left: 2rem;
}

.mega-menu__cta-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
}

.mega-menu__cta-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    width: fit-content;
}

.mega-menu__cta-heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--white);
    font-family: var(--font-heading);
    line-height: 1.3;
    margin: 0;
}

.mega-menu__cta-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0;
}

.mega-menu__cta-btn {
    display: block;
    text-align: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}

.mega-menu__trust {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mega-menu__trust li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.48);
}

.mega-menu__trust svg {
    stroke: var(--accent-cyan);
    flex-shrink: 0;
}

/* ---- Blog Dropdown ---- */
.nav__dropdown {
    position: absolute;
    top: calc(100% + 1rem);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    background: rgba(10, 22, 40, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0.5rem;
    list-style: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    z-index: 998;
}

.nav__item--dropdown.is-open .nav__dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Caret pointing up */
.nav__dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(255, 255, 255, 0.1);
}

.nav__dropdown::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(10, 22, 40, 0.98);
}

.nav__dropdown-link {
    display: block;
    padding: 0.6rem 0.875rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.nav__dropdown-link:hover {
    background: rgba(37, 99, 235, 0.12);
    color: var(--white);
}

/* "All Articles" top item */
.nav__dropdown-link--all {
    font-weight: 600;
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px 8px 0 0;
    margin-bottom: 0.25rem;
    padding-bottom: 0.75rem;
}

.nav__dropdown-link--all:hover {
    border-radius: 8px 8px 0 0;
}

/* ---- Mobile overrides ---- */
@media (max-width: 1024px) {

    .nav__mega-trigger,
    .nav__dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        font-size: 1.25rem;
        padding: 0.5rem 0;
    }

    /* Mega menu: become a static accordion panel */
    .mega-menu {
        position: static;
        display: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: none;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow: none;
        border-radius: 10px;
        margin-top: 0.25rem;
        z-index: auto;
    }

    .nav__item--mega.is-open .mega-menu {
        display: block;
    }

    /* Disable CSS hover reveal on mobile — JS handles open/close */
    .nav__item--mega:hover .mega-menu {
        display: none;
    }

    .nav__item--mega.is-open:hover .mega-menu {
        display: block;
    }

    .mega-menu__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0.75rem 1rem;
        max-width: 100%;
    }

    .mega-menu__col {
        padding-bottom: 0.75rem;
    }

    .mega-menu__col + .mega-menu__col {
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        padding-top: 0.75rem;
    }

    .mega-menu__col--cta {
        border-left: none;
        padding-left: 0;
    }

    .mega-menu__col-heading {
        font-size: 0.6875rem;
        margin-bottom: 0.5rem;
        padding-bottom: 0;
        border-bottom: none;
    }

    .mega-menu__link {
        padding: 0.5rem 0.5rem;
    }

    .mega-menu__link em {
        display: none;
    }

    .mega-menu__link-icon {
        width: 30px;
        height: 30px;
    }

    .mega-menu__link-icon svg {
        width: 15px;
        height: 15px;
    }

    .mega-menu__cta-text,
    .mega-menu__trust {
        display: none;
    }

    .mega-menu__cta-heading {
        font-size: 1rem;
    }

    .mega-menu__cta-btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }

    /* Blog dropdown: become a static accordion */
    .nav__dropdown {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        background: rgba(255, 255, 255, 0.04);
        border: none;
        border-radius: 10px;
        box-shadow: none;
        backdrop-filter: none;
        padding: 0.5rem 0.75rem;
        display: none;
        min-width: 0;
        margin: 0.25rem 0 0.5rem;
    }

    .nav__item--dropdown.is-open .nav__dropdown {
        display: block;
    }

    .nav__dropdown::before,
    .nav__dropdown::after {
        display: none;
    }

    .nav__dropdown-link {
        font-size: 1rem;
        padding: 0.5rem 0.5rem;
        white-space: normal;
        color: rgba(255, 255, 255, 0.65);
    }

    .nav__dropdown-link--all {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px 8px 0 0;
        margin-bottom: 0.125rem;
    }
}

/* ========================================
   Hero Section
======================================== */

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

/* Background image layer */

.hero::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero::before {
    content: '';
    background:
        linear-gradient(
            180deg,
            rgba(10, 15, 30, 0.85) 0%,
            rgba(8, 12, 25, 0.9) 100%
        ),
        radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 60% 80%, rgba(37, 99, 235, 0.15) 0%, transparent 40%);
    z-index: 0;
}

/* Grid overlay */

/* Content layer */
.hero .container {
    position: relative;
    z-index: 1;
}

/* Badge */

/* Typography */

/* Stats */

/* Hero Visual */

/* ========================================
   Responsive
======================================== */

/* ========================================
   Trust Bar
======================================== */

/* ========================================
   Services Section
======================================== */

/* ========================================
   Process Section
======================================== */

.process-step {
    text-align: center;
    position: relative;
}

.process-step__number {
    width: 80px;
    height: 80px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-glow);
}

/* ========================================
   Why SmartHub – Grid Version (No UL/LI)
======================================== */

/* Icon block */

/* Text */

/* Responsive Layout */

/* ========================================
   Certifications Section
======================================== */

/* ========================================
   Testimonials
======================================== */

/* ========================================
   FAQ Section
======================================== */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}

.faq-item {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--light-gray);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--white);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.faq-item__question:hover {
    background: var(--off-white);
}

.faq-item__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--primary-accent);
    transition: transform var(--transition-base);
}

.faq-item.active .faq-item__icon {
    transform: rotate(180deg);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.faq-item.active .faq-item__answer {
    max-height: 500px;
}

.faq-item__answer-inner {
    padding: 0 1.5rem 1.5rem;
    color: var(--dark-gray);
    line-height: 1.8;
}

/* ========================================
   CTA Sections
======================================== */

/* ========================================
   Lead Capture Form
======================================== */

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--off-white);
    border: 2px solid var(--light-gray);
    border-radius: 10px;
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-accent);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

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

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Honeypot field - hidden from users */
.form-honeypot {
    position: absolute;
    left: -9999px;
}

/* ========================================
   Industries Section
======================================== */

/* ========================================
   Footer
======================================== */
.footer {
    background: var(--primary-dark);
    color: var(--white);
    padding-top: 5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 3rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .footer__grid {
        grid-template-columns: 1fr;
    }
}

.footer__brand {
    max-width: 350px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.footer__logo-icon {
    width: 40px;
    height: 40px;
    background: var(--gradient-accent);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__logo-icon svg {
    width: 24px;
    height: 24px;
    fill: var(--white);
}

.footer__description {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.footer__social {
    display: flex;
    gap: 1rem;
}

.footer__social-link {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.footer__social-link:hover {
    background: var(--primary-accent);
}

.footer__social-link svg {
    width: 20px;
    height: 20px;
}

.footer__heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
}

.footer__list {
    list-style: none;
}

.footer__list li {
    margin-bottom: 0.75rem;
}

.footer__list a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

.footer__list a:hover {
    color: var(--white);
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer__contact-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--accent-cyan);
}

.footer__bottom {
    padding: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer__copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.footer__legal {
    display: flex;
    gap: 2rem;
}

.footer__legal a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    transition: color var(--transition-fast);
}

.footer__legal a:hover {
    color: var(--white);
}

/* ========================================
   Sticky Mobile CTA
======================================== */
.mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: var(--white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.mobile-cta .btn {
    width: 100%;
}

@media (max-width: 768px) {
    .mobile-cta {
        display: block;
    }

    .footer {
        padding-bottom: 6rem;
    }
}

/* ========================================
   Page Headers (Inner Pages)
======================================== */
.page-header {
    position: relative;
    padding: 5.5rem 0 3rem;
    background: var(--gradient-hero);
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(6, 182, 212, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.page-header__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.page-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
}

.page-header__breadcrumb a {
    transition: color var(--transition-fast);
}

.page-header__breadcrumb a:hover {
    color: var(--white);
}

.page-header__breadcrumb svg {
    width: 16px;
    height: 16px;
}

.page-header__title {
    color: var(--white);
    margin-bottom: 0.75rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    overflow-wrap: break-word;
}

.page-header__description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
}

/* ========================================
   About Page Specific
======================================== */

/* Team Grid */

/* Team card — real photo override */

/* Team card — 3-column override for about page */

/* Certification badges */

/* Profile link badges */

/* Stats grid */

/* ========================================
   Services Page Specific
======================================== */

/* ========================================
   Contact Page Specific
======================================== */

/* ========================================
   Privacy Policy Page
======================================== */
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
}

.privacy-content h2 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-gray);
}

.privacy-content h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.privacy-content p {
    color: var(--dark-gray);
}

.privacy-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.privacy-content li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
    color: var(--dark-gray);
}

.privacy-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background: var(--primary-accent);
    border-radius: 50%;
}

/* ========================================
   Animations
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Intersection Observer animations */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }

/* ========================================
   Utility Classes
======================================== */

.hidden { display: none; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Success Message */
.form-success {
    background: #10b981;
    color: var(--white);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1.5rem;
    display: none;
}

.form-success.show {
    display: block;
}

.form-error {
    background: #ef4444;
    color: var(--white);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 1.5rem;
    display: none;
}

.form-error.show {
    display: block;
}

/* Map placeholder */

/* ========================================
   Print Styles
======================================== */
@media print {
    .header,
    .mobile-cta,
    .footer {
        display: none;
    }

    .section {
        padding: 2rem 0;
    }

    body {
        font-size: 12pt;
    }
}

/* ========================================
   Problem Cards (21st.dev soft card style)
======================================== */

/* ========================================
   Framework Cards (21st.dev soft card style)
======================================== */



/* ========================================
   Service Card — Enhanced Arrow Animation
======================================== */

/* ========================================
   Testimonials — Bento Grid Layout
======================================== */

/* ========================================
   Trust Bar — Scrolling Marquee
======================================== */

@keyframes trustMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ========================================
   CTA Section — Metrics Block
======================================== */

/* ========================================
   Custom Styles
======================================== */

/* Logo Container */
.header__logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: #ffffff; /* full white for maximum contrast */
    transition: transform 0.3s ease;
}

/* Logo Icon */
.header__logo-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Blue-to-dark gradient background */
    background: linear-gradient(145deg, #3b82f6, #1a1a1f);
    color: #ffffff; /* icon fully white */

    border: 1px solid rgba(255, 255, 255, 0.15); /* subtle white border */
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.header__logo-icon svg {
    width: 32px;
    height: 32px;
    stroke: currentColor; /* uses white from parent */
    fill: none;
    transition: stroke 0.3s ease, filter 0.3s ease;
}

/* Hover: lift + subtle glow */
.header__logo:hover .header__logo-icon {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5),
                0 0 15px rgba(255, 255, 255, 0.2); /* subtle white glow */
    color: #ffffff;
}

/* Grid lines glow fully on hover */
.header__logo:hover .header__logo-icon svg .logo-grid {
    opacity: 1;
    stroke: #ffffff;
}

/* Logo Text */
.header__logo-text {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* Primary Text */
.logo-primary {
    color: #ffffff; /* fully white */
    font-weight: 600;
}

/* Divider */
.logo-divider {
    width: 1px;
    height: 18px;
    margin: 0 14px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    ); /* visible over dark background */
}

/* Accent Text */
.logo-accent {
    color: #ffffff; /* fully white */
    font-weight: 600;
    transition: color 0.3s ease;
}


/* ========================================
   Service Details Grid
======================================== */

/* ========================================
   Content Grid Layout
======================================== */

/* ========================================
   Highlight Box (Info Cards)
======================================== */

/* ========================================
   Info Box
======================================== */

/* ========================================
   TL;DR Box
======================================== */

/* ========================================
   Challenge Grid
======================================== */

/* ========================================
   Audit Fixes: Readability & UX
======================================== */
.section__description, .faq-item__answer-inner {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}
.btn { text-transform: capitalize; }

/* ==========================================================================
   SECTION 2: Soro theme overrides (was theme-soro.css)
   ========================================================================== */

/* ============================================================
   theme-soro.css — Soro-Inspired Minimal Theme
   Smart Hub Tech · smarthubtech.com
   ============================================================

   HOW TO ACTIVATE:
     Add  data-theme="soro"  to the <html> element:
     <html lang="en-GB" data-theme="soro">

   HOW TO DEACTIVATE:
     Remove the data-theme attribute from <html>:
     <html lang="en-GB">

   LOAD ORDER — add this tag AFTER styles.css in <head>:
     <link rel="stylesheet" href="css/theme-soro.css">

   Zero content changes. Zero SEO impact.
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   All CSS custom properties are overridden here. Downstream
   components that reference these vars inherit the new values
   automatically.
   ============================================================ */
[data-theme="soro"] {
    /* Backgrounds — slate family: barely-there blue tint */
    --white:       #ffffff;
    --off-white:   #f8fafc;   /* slate-50: crisper than neutral gray */
    --light-gray:  #e2e8f0;   /* slate-200: blue-tinted border */

    /* Text — slate scale, warm not stark */
    --text-dark:   #1e293b;   /* slate-800: softer read than near-black */
    --dark-gray:   #475569;   /* slate-600 */
    --medium-gray: #94a3b8;   /* slate-400 */

    /* Brand dark — SmartHub Tech navy */
    --primary-dark:   #032e61;  /* navy */
    --primary-blue:   #05438e;  /* navy-mid */

    /* Accent — Salesforce blue */
    --primary-accent: #00a1e0;
    --accent-light:   #41b5e5;
    --accent-cyan:    #00a1e0;

    /* Commerce green */
    --accent-green:   #41B658;

    /* Flatten gradients to solids */
    --gradient-primary: #f8fafc;
    --gradient-accent:  #00a1e0;
    --gradient-hero:    #032e61;

    /* Shadows tinted with navy */
    --shadow-sm: 0 1px 2px rgba(3, 46, 97, 0.05);
    --shadow-md: 0 1px 3px rgba(3, 46, 97, 0.08), 0 1px 2px rgba(3, 46, 97, 0.04);
    --shadow-lg: 0 4px 10px rgba(3, 46, 97, 0.07);
    --shadow-xl: 0 6px 20px rgba(3, 46, 97, 0.08);
    --shadow-glow: 0 4px 14px rgba(0, 161, 224, 0.3);
}


/* ============================================================
   2. TYPOGRAPHY — Tighter, more assertive headings
   ============================================================ */
[data-theme="soro"] h1 {
    letter-spacing: -0.03em;
    font-weight: 800;
}

[data-theme="soro"] h2 {
    letter-spacing: -0.025em;
    font-weight: 800;
}

[data-theme="soro"] h3 {
    letter-spacing: -0.015em;
}


/* ============================================================
   3. NAVIGATION — Always white, dark text links
   ============================================================ */

/* Base state: dark navy bar */
[data-theme="soro"] .header {
    background: var(--primary-dark);
    border-bottom: 1px solid rgba(0, 161, 224, 0.2);
    backdrop-filter: none;
}

[data-theme="soro"] .header.scrolled {
    background: rgba(3, 46, 97, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 20px rgba(3, 46, 97, 0.4);
    border-bottom-color: rgba(0, 161, 224, 0.15);
}

[data-theme="soro"] .header.has-open-menu {
    background: var(--primary-dark);
    backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: rgba(0, 161, 224, 0.2);
}

/* Logo */
[data-theme="soro"] .header__logo {
    color: #ffffff;
}

[data-theme="soro"] .header__logo-icon {
    background: var(--primary-accent);
    border-radius: 8px;
}

/* Nav links — white on dark */
[data-theme="soro"] .nav__link {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="soro"] .nav__link:hover,
[data-theme="soro"] .nav__link.active {
    color: #ffffff;
}

[data-theme="soro"] .nav__link::after {
    background: var(--primary-accent);
}

/* Trigger buttons (Services / Blog dropdowns) */
[data-theme="soro"] .nav__mega-trigger,
[data-theme="soro"] .nav__dropdown-trigger {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
    font-weight: 500;
}

[data-theme="soro"] .nav__mega-trigger:hover,
[data-theme="soro"] .nav__dropdown-trigger:hover {
    color: #ffffff;
}

/* Arrow icon tint */
[data-theme="soro"] .nav__arrow {
    color: rgba(255, 255, 255, 0.38);
}

[data-theme="soro"] .nav__item--mega.is-open .nav__arrow,
[data-theme="soro"] .nav__item--dropdown.is-open .nav__arrow {
    color: #ffffff;
}

/* CTA button in nav — green accent */
[data-theme="soro"] .nav .btn--primary {
    background: var(--accent-green);
    box-shadow: 0 3px 12px rgba(65, 182, 88, 0.35);
    color: #ffffff;
}

[data-theme="soro"] .nav .btn--primary:hover {
    background: #38a34e;
    box-shadow: 0 4px 16px rgba(65, 182, 88, 0.45);
    transform: none;
    color: #ffffff;
}

/* Mobile hamburger — white lines */
[data-theme="soro"] .mobile-toggle span {
    background: #ffffff;
}

/* Mobile nav panel — keep light for readability */
@media (max-width: 1024px) {
    [data-theme="soro"] .nav {
        background: var(--white);
        border-left: 1px solid var(--light-gray);
    }

    [data-theme="soro"] .nav__link,
    [data-theme="soro"] .nav__mega-trigger,
    [data-theme="soro"] .nav__dropdown-trigger {
        color: var(--text-dark);
        font-size: 1.125rem;
    }

    [data-theme="soro"] .nav__arrow {
        color: var(--medium-gray);
    }
}

/* ---- Mega menu — stays LIGHT, Salesforce blue accents ---- */
[data-theme="soro"] .mega-menu {
    background: rgba(255, 255, 255, 0.99);
    border-top: 1px solid var(--light-gray);
    box-shadow: 0 16px 40px rgba(3, 46, 97, 0.1);
}

[data-theme="soro"] .mega-menu__col-heading {
    color: var(--primary-accent);
    border-bottom-color: var(--light-gray);
}

[data-theme="soro"] .mega-menu__link {
    color: var(--dark-gray);
}

[data-theme="soro"] .mega-menu__link:hover {
    background: rgba(3, 46, 97, 0.04);
    color: var(--primary-dark);
}

[data-theme="soro"] .mega-menu__link-icon {
    background: rgba(0, 161, 224, 0.07);
}

[data-theme="soro"] .mega-menu__link:hover .mega-menu__link-icon {
    background: rgba(0, 161, 224, 0.14);
}

[data-theme="soro"] .mega-menu__link-icon svg {
    stroke: var(--primary-accent);
}

[data-theme="soro"] .mega-menu__link strong {
    color: var(--text-dark);
}

[data-theme="soro"] .mega-menu__link em {
    color: var(--medium-gray);
}

[data-theme="soro"] .mega-menu__col--cta {
    border-left-color: var(--light-gray);
}

[data-theme="soro"] .mega-menu__cta-badge {
    color: var(--primary-accent);
    background: rgba(0, 161, 224, 0.07);
    border-color: rgba(0, 161, 224, 0.22);
}

[data-theme="soro"] .mega-menu__cta-heading {
    color: var(--text-dark);
}

[data-theme="soro"] .mega-menu__cta-text {
    color: var(--dark-gray);
}

[data-theme="soro"] .mega-menu__trust {
    border-top-color: var(--light-gray);
}

[data-theme="soro"] .mega-menu__trust li {
    color: var(--medium-gray);
}

[data-theme="soro"] .mega-menu__trust svg {
    stroke: var(--primary-accent);
}

[data-theme="soro"] .mega-menu__cta-btn.btn--primary {
    background: var(--primary-dark);
    color: var(--white);
    box-shadow: none;
}

[data-theme="soro"] .mega-menu__cta-btn.btn--primary:hover {
    background: var(--primary-blue);
    transform: none;
    box-shadow: 0 4px 14px rgba(3, 46, 97, 0.25);
    color: #ffffff;
}

/* Blog dropdown */
[data-theme="soro"] .nav__dropdown {
    background: var(--white);
    border-color: var(--light-gray);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

[data-theme="soro"] .nav__dropdown::before {
    border-bottom-color: var(--light-gray);
}

[data-theme="soro"] .nav__dropdown::after {
    border-bottom-color: var(--white);
}

[data-theme="soro"] .nav__dropdown-link {
    color: var(--dark-gray);
}

[data-theme="soro"] .nav__dropdown-link:hover {
    background: rgba(3, 46, 97, 0.04);
    color: var(--primary-dark);
}

[data-theme="soro"] .nav__dropdown-link--all {
    color: var(--text-dark);
    border-bottom-color: var(--light-gray);
}

/* Mobile mega/dropdown panels */
@media (max-width: 1024px) {
    [data-theme="soro"] .mega-menu {
        background: var(--off-white);
        border: none;
        border-radius: 8px;
    }

    [data-theme="soro"] .mega-menu__link,
    [data-theme="soro"] .mega-menu__link strong {
        color: var(--text-dark);
    }

    [data-theme="soro"] .nav__dropdown {
        background: var(--off-white);
        border: none;
    }

    [data-theme="soro"] .nav__dropdown-link {
        color: var(--dark-gray);
    }

    [data-theme="soro"] .nav__dropdown-link--all {
        color: var(--text-dark);
    }
}


/* ============================================================
   4. HERO — Dark navy, Salesforce blue glow
   ============================================================ */
[data-theme="soro"] .hero {
    background: linear-gradient(140deg, #032e61 0%, #04368a 55%, #0856b8 100%);
    position: relative;
    overflow: hidden;
}

/* Blue radial glow — top right */
[data-theme="soro"] .hero::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -8%;
    width: 660px;
    height: 660px;
    background: radial-gradient(circle, rgba(0, 161, 224, 0.18) 0%, transparent 65%);
    pointer-events: none;
}

/* Subtle dot-grid overlay */

/* Background image — hide on dark bg */

/* Hero text */

/* Hero badge — glass morphism */

/* Right-side illustration — full opacity, using screenshot mockup */

/* Hero buttons — visible on dark navy background */
[data-theme="soro"] .hero .btn--primary {
    background: var(--primary-accent);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 161, 224, 0.35);
}
[data-theme="soro"] .hero .btn--primary:hover {
    background: #0091c7;
    box-shadow: 0 6px 24px rgba(0, 161, 224, 0.5);
    transform: none;
}

/* ============================================================
   Hero Screenshot Mockup
   ============================================================ */
/* Placeholder gradient shown until real screenshot is added */

/* ============================================================
   Service Card Image Thumbnail
   ============================================================ */

/* Dual CTA button group — shared across pages */

/* Dark-background service card image — navy placeholder instead of light blue */

/* B2B Commerce feature card — 2-col layout (thumb left, text right) */

/* Icon variants — used when product screenshots are unavailable */

/* Comparison table — B2B Commerce vs alternatives */

/* ============================================================
   Why SmartHub — split layout with visual
   ============================================================ */

/* ============================================================
   Testimonial Avatar — photo version
   ============================================================ */

/* ============================================================
   Framework Section Visual
   ============================================================ */

/* Stats row */


/* ============================================================
   5. TRUST BAR
   ============================================================ */


/* ============================================================
   6. BUTTONS — Flat, no gradients, no glow
   ============================================================ */
[data-theme="soro"] .btn--primary {
    background: var(--primary-dark);  /* deep ink blue, not flat black */
    color: #ffffff;
    box-shadow: none;
    border-radius: 6px;
}

[data-theme="soro"] .btn--primary:hover {
    background: var(--primary-blue);
    transform: none;
    box-shadow: var(--shadow-glow);
}

/* Buttons inside dark sections / CTA block */

/* Focus ring */
[data-theme="soro"] .btn:focus-visible,
[data-theme="soro"] a:focus-visible {
    outline-color: var(--primary-accent);
    border-radius: 6px;
}


/* ============================================================
   7. DARK SECTIONS — Flat near-black, no gradients
   ============================================================ */

/* Process step connector line */

/* Process step number circles — solid blue, no gradient glow */
[data-theme="soro"] .process-step__number {
    background: var(--primary-accent);
    box-shadow: none;
}


/* ============================================================
   8. SERVICE CARDS — Border-first, no lift on hover
   ============================================================ */

/* Service link colour — already uses --primary-accent so inherits correctly */


/* ============================================================
   9. WHY SMART HUB TECH — Tune icon bg
   ============================================================ */


/* ============================================================
   10. CERTIFICATIONS — Border cards
   ============================================================ */


/* ============================================================
   11. TESTIMONIALS — Border cards
   ============================================================ */


/* ============================================================
   12. FAQ
   ============================================================ */
[data-theme="soro"] .faq-item {
    border-radius: 8px;
    box-shadow: none;
}

[data-theme="soro"] .faq-item__question:hover {
    background: var(--off-white);
}

[data-theme="soro"] .faq-item.active .faq-item__question {
    background: var(--off-white);
}


/* ============================================================
   13. CTA SECTION — Flat black, no glow
   ============================================================ */


/* ============================================================
   14. LEAD CAPTURE FORM — Clean, no heavy shadow
   ============================================================ */

[data-theme="soro"] .form-input,
[data-theme="soro"] .form-textarea,
[data-theme="soro"] .form-select {
    border-radius: 6px;
    border-color: var(--light-gray);
    background: var(--white);
}

[data-theme="soro"] .form-input:focus,
[data-theme="soro"] .form-textarea:focus,
[data-theme="soro"] .form-select:focus {
    border-color: var(--text-dark);
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}


/* ============================================================
   15. INDUSTRY ITEMS
   ============================================================ */


/* ============================================================
   16. PAGE HEADERS (inner pages — about, services, contact…)
   ============================================================ */
[data-theme="soro"] .page-header {
    background: linear-gradient(140deg, #032e61 0%, #04368a 55%, #0856b8 100%);
    border-bottom: none;
    padding-top: 8rem;
    position: relative;
    overflow: hidden;
}

/* Blue radial glow */
[data-theme="soro"] .page-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -8%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 161, 224, 0.2) 0%, transparent 65%);
    pointer-events: none;
}

/* Dot grid overlay */
[data-theme="soro"] .page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
    z-index: 0;
}

[data-theme="soro"] .page-header .container {
    position: relative;
    z-index: 2;
}

[data-theme="soro"] .page-header__title {
    color: #ffffff;
}

[data-theme="soro"] .page-header__description {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="soro"] .page-header__breadcrumb {
    color: rgba(255, 255, 255, 0.45);
}

[data-theme="soro"] .page-header__breadcrumb a {
    color: rgba(255, 255, 255, 0.45);
}

[data-theme="soro"] .page-header__breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* Badge — match home hero glass badge (white text, blur) */

/* CTA buttons on dark page-header — match hero button styles */
[data-theme="soro"] .page-header .btn--primary {
    background: var(--primary-accent);
    color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 161, 224, 0.35);
}
[data-theme="soro"] .page-header .btn--primary:hover {
    background: #0091c7;
    box-shadow: 0 6px 24px rgba(0, 161, 224, 0.5);
    transform: translateY(-1px);
    color: #ffffff;
}


/* ============================================================
   17. FOOTER — Flat dark, accent replaces cyan
   ============================================================ */
[data-theme="soro"] .footer {
    background: var(--primary-dark);
}

[data-theme="soro"] .footer__logo-icon {
    background: var(--primary-accent);
    border-radius: 8px;
}

[data-theme="soro"] .footer__contact-item svg {
    color: var(--primary-accent);
}

[data-theme="soro"] .footer__grid {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="soro"] .footer__social-link:hover {
    background: var(--primary-accent);
}


/* ============================================================
   18. SECTION LIGHT — Keep neutral, no change needed
   ============================================================ */
/* .section--light already uses --off-white which is overridden in tokens */


/* ============================================================
   19. ANIMATIONS — Calm down hover lifts globally
   ============================================================ */

/* Any remaining translateY(-Xpx) hover effects are muted */
[data-theme="soro"] *:hover {
    /* Intentionally empty — individual overrides handle this */
}


/* ============================================================
   20. POLISH — Hero tint, footer top stripe, link colours
   ============================================================ */

/* Hero gradient already set in Section 4 — no override needed here */

/* Ink-blue top stripe on footer for grounding */
[data-theme="soro"] .footer {
    border-top: 3px solid var(--primary-accent);
}

/* Inline body links use accent, not black */
[data-theme="soro"] a:not(.btn):not(.nav__link):not(.nav__dropdown-link):not(.mega-menu__link):not(.footer__list a):not(.footer__legal a) {
    color: var(--primary-accent);
}

[data-theme="soro"] a:not(.btn):not(.nav__link):not(.nav__dropdown-link):not(.mega-menu__link):not(.footer__list a):not(.footer__legal a):hover {
    color: #0091c7;
}

/* Service card link arrow */

/* Hero badge icon inherits accent */

/* Trust bar icon matches accent */

/* ============================================================
   21. PAGE — salesforce-consultant-uk  (Enterprise Redesign)
   ALL rules scoped to [data-theme="soro"] .page-sc-uk
   Palette: #032e61 (navy) · #00a1e0 (accent blue) · #41B658 (green)
   ============================================================ */

/* --- Local design tokens ---------------------------------- */

/* --- Section vertical rhythm ------------------------------ */

/* --- Section headers: centred, constrained ---------------- */

/* --- Section label pill ----------------------------------- */

/* =====================================================
   HERO — Dark navy, blue-radial glow + grid
   ===================================================== */

/* Blue radial glow — top right */

/* Subtle dot-grid overlay */

/* Hero CTA */

/* --- Trust badge row --------------------------------------- */

/* =====================================================
   THE PROBLEM — White surface, green list accents
   ===================================================== */

/* Value list — green accent */

/* CTA button in problem section */

/* Section image */

/* =====================================================
   MEET EDUARD — Surface bg, green cert icons
   ===================================================== */

/* Cert container */

/* Cert badge cards */

/* Green star icons — override inline style via !important */

/* Headshot */

/* LinkedIn button */

/* =====================================================
   SERVICES — White surface, enterprise card grid
   ===================================================== */

/* Service card — blue top-border, green hover */

/* Icon */

/* Card typography */

/* Card link */

/* =====================================================
   HOW WE'RE DIFFERENT — Deep navy, green hover accents
   ===================================================== */

/* Green radial — bottom left */

/* Blue radial — top right */

/* Dark cards */

/* =====================================================
   HOW WE WORK — Surface bg, GREEN step numbers
   ===================================================== */

/* Step cards */

/* Green numbered circles */

/* Connector line — green-to-blue gradient */

/* =====================================================
   FAQ — White, blue hover / active
   ===================================================== */

/* =====================================================
   CTA — Navy gradient, green primary button
   ===================================================== */

/* Blue radial — top right */

/* Green radial — bottom left */

/* CTA heading */

/* Trust items — green icons */

/* Green primary CTA button */

/* =====================================================
   HERO SPLIT LAYOUT + CREDENTIAL PANEL
   ===================================================== */

/* Credential cards — glass on dark hero */

/* Stat mini-grid */

/* =====================================================
   IMAGE FRAME — offset accent border
   ===================================================== */

/* =====================================================
   DIFFER CARD ICONS
   ===================================================== */

/* =====================================================
   CTA 2-COLUMN LAYOUT
   ===================================================== */

/* =====================================================
   MOBILE CTA BAR
   ===================================================== */
[data-theme="soro"] .page-sc-uk .mobile-cta .btn--primary {
    background: var(--suk-green);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(65, 182, 88, 0.35);
}
[data-theme="soro"] .page-sc-uk .mobile-cta .btn--primary:hover {
    background: #38a34e;
}

/* =====================================================
   HERO CTA BUTTONS
   ===================================================== */

/* =====================================================
   HERO DASHBOARD MOCKUP
   ===================================================== */

/* Browser chrome strip */

/* Sidebar + main layout */

/* KPI tiles row */

/* Pipeline bar */

/* Row skeletons */

/* =====================================================
   PROOF STRIP — industry logo placeholders
   ===================================================== */

/* Logo placeholder slot — swap with <img> when real logos are ready */

/* =====================================================
   VISUAL SLOT — generic image/screenshot placeholder
   ===================================================== */

/* =====================================================
   TESTIMONIALS SECTION
   ===================================================== */

/* Star row */

/* Quote */

/* Author row */

/* Avatar — gradient circle with initials placeholder */

/* Header & footer now use global rules from Sections 3 & 17 — no page-sc-uk override needed */

/* =====================================================
   GLOBAL — Section visual image (full-width feature img between header + grid)
   ===================================================== */

/* Hero visual img — fills the suk-page-header-visual column */

/* =====================================================
   GLOBAL — Page-header split layout
   Used on all inner pages: text left, visual right
   ===================================================== */

/* Visual slot on dark page-header — override light defaults */

/* ============================================================
   IMAGE PLACEHOLDER — visual slot awaiting real assets
   ============================================================ */

/* ============================================================
   SYSTEMS LOGO GRID — integration page "systems we connect"
   ============================================================ */

/* ============================================================
   METRICS STRIP — consulting/services proof stats
   ============================================================ */

/* ============================================================
   MISSING IMAGE FALLBACK FRAME
   Used on any <img class="img-placeholder-frame"> whose src
   has not yet been captured. Shows a styled dark placeholder
   instead of a broken image icon. Once the real image is
   dropped in at the correct path the class has no effect.
   ============================================================ */

/* Hide the native broken-image icon */

/* Pseudo-element "screenshot pending" label */

/* Also hide broken icon on page-header visuals awaiting screenshots */

/* Suppress broken-img icon across all browsers */

/* ============================================================
   END OF THEME
   ============================================================ */

/* ==========================================================================
   SECTION 3: Blog (was blog.css)
   ========================================================================== */

/* Every rule here is scoped to the pages under /blog/ (body.blog-section)
   with :where(), which adds no specificity, so the cascade matches the old
   blog-only stylesheet. */

/* Smart Hub Tech - Blog Styles */
/* ========================================
   Blog Hero Section
======================================== */

/* Ensure hero text is readable on dark background */

/* ========================================
   Blog Container & Layout
======================================== */
:where(body.blog-section) .blog-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
}

/* Add breathing room between blog sections */
:where(body.blog-section) .blog-container > section {
    margin-top: 2.5rem;
}

/* ========================================
   Blog Cards Grid
======================================== */
:where(body.blog-section) .blog-grid {
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
}

:where(body.blog-section) .blog-grid--standard {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media (max-width: 768px) {
    
    :where(body.blog-section) .blog-grid--standard {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Blog Card
======================================== */
:where(body.blog-section) .blog-card {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    height: 100%;
}

:where(body.blog-section) .blog-card:hover {
    border-color: rgba(37,99,235,0.15);
    box-shadow: 0 8px 24px rgba(15, 40, 80, 0.08);
    transform: translateY(-8px) scale(1.01);
}

:where(body.blog-section) .blog-card--featured {
    padding: 2.5rem;
    border: 2px solid var(--light-gray);
}

:where(body.blog-section) .blog-card--featured:hover {
    border-color: var(--primary-accent);
}

:where(body.blog-section) .blog-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

:where(body.blog-section) .blog-card__tag {
    display: inline-block;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    color: var(--primary-accent);
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

:where(body.blog-section) .blog-card__meta {
    font-size: 0.8rem;
    color: var(--medium-gray);
    white-space: nowrap;
}

:where(body.blog-section) .blog-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-dark);
    font-family: var(--font-heading);
    line-height: 1.4;
}

:where(body.blog-section) .blog-card__title a {
    color: inherit;
    transition: color var(--transition-fast);
}

:where(body.blog-section) .blog-card__title a:hover {
    color: var(--primary-accent);
}

/* subtle accent underline for titles */
:where(body.blog-section) .blog-card__title a {
    position: relative;
}
:where(body.blog-section) .blog-card__title a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 50%;
    bottom: -6px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-accent), var(--accent-cyan));
    border-radius: 3px;
    transition: right 0.28s ease;
}
:where(body.blog-section) .blog-card__title a:hover::after {
    right: 0;
}

:where(body.blog-section) .blog-card__excerpt {
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: auto;
    padding-bottom: 1.5rem;
    font-size: 0.95rem;
}

:where(body.blog-section) .blog-card__link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-accent);
    font-weight: 600;
    transition: all var(--transition-fast);
    width: fit-content;
}

:where(body.blog-section) .blog-card__link:hover {
    gap: 0.5rem;
    color: var(--accent-cyan);
}

/* ========================================
   Topic Cards Grid
======================================== */

/* ========================================
   Blog CTA Section
======================================== */

/* ========================================
   Blog Article Container
======================================== */
:where(body.blog-section) .blog-article-container {
    background: var(--white);
}

:where(body.blog-section) .blog-article {
    display: flex;
    flex-direction: column;
}

/* ========================================
   Blog Article Header
======================================== */
:where(body.blog-section) .blog-article__header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--light-gray);
    padding: 3rem 0;
}

:where(body.blog-section) .blog-breadcrumb {
    font-size: 0.9rem;
    color: var(--medium-gray);
    margin-bottom: 1.5rem;
}

:where(body.blog-section) .blog-breadcrumb a {
    color: var(--primary-accent);
    font-weight: 500;
}

:where(body.blog-section) .blog-breadcrumb a:hover {
    text-decoration: underline;
}

:where(body.blog-section) .blog-article__title {
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-family: var(--font-heading);
}

:where(body.blog-section) .blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    font-size: 0.95rem;
    color: var(--medium-gray);
}

:where(body.blog-section) .blog-article__date {
    font-weight: 500;
    color: var(--text-dark);
}

:where(body.blog-section) .blog-article__reading-time {
    display: flex;
    align-items: center;
}

:where(body.blog-section) .blog-article__tag {
    display: inline-block;
    background: var(--primary-accent);
    color: var(--white);
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ========================================
   Blog Article Content
======================================== */
:where(body.blog-section) .blog-article__content {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    line-height: 1.8;
}

:where(body.blog-section) .blog-article__content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 2rem 0 1rem 0;
    padding-top: 1rem;
    font-family: var(--font-heading);
}

:where(body.blog-section) .blog-article__content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin: 1.5rem 0 0.75rem 0;
    font-family: var(--font-heading);
}

:where(body.blog-section) .blog-article__content p {
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

:where(body.blog-section) .blog-article__content ul,
:where(body.blog-section) .blog-article__content ol {
    margin-bottom: 1.5rem;
    margin-left: 1.5rem;
}

:where(body.blog-section) .blog-article__content li {
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

:where(body.blog-section) .blog-article__content strong {
    font-weight: 600;
    color: var(--primary-dark);
}

/* Tables scroll sideways inside the article on narrow screens instead of widening the page */
:where(body.blog-section) .blog-article__content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin: 2rem 0;
    border: 1px solid var(--light-gray);
    border-radius: 0.5rem;
}

@media (min-width: 769px) {
    :where(body.blog-section) .blog-article__content table {
        display: table;
        overflow: hidden;
    }
}

:where(body.blog-section) .blog-article__content th {
    background: var(--off-white);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--primary-dark);
    border-bottom: 1px solid var(--light-gray);
}

:where(body.blog-section) .blog-article__content td {
    padding: 1rem;
    border-bottom: 1px solid var(--light-gray);
    color: var(--text-dark);
}

:where(body.blog-section) .blog-article__content tr:last-child td {
    border-bottom: none;
}

:where(body.blog-section) .blog-article__content code {
    background: var(--off-white);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    color: #d73a49;
}

/* ========================================
   FAQ Section
======================================== */
:where(body.blog-section) .faq-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-gray);
}

:where(body.blog-section) .faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

:where(body.blog-section) .faq-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-accent);
    margin-bottom: 0.75rem;
}

:where(body.blog-section) .faq-item p {
    color: var(--text-dark);
    margin-bottom: 0;
}

/* ========================================
   Related Articles
======================================== */
:where(body.blog-section) .related-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

:where(body.blog-section) .related-article-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: all var(--transition-fast);
}

:where(body.blog-section) .related-article-link:hover {
    background: var(--white);
    border-color: var(--primary-accent);
    color: var(--primary-accent);
}

:where(body.blog-section) .related-article-icon {
    font-weight: 700;
    color: var(--primary-accent);
    flex-shrink: 0;
}

/* ========================================
   Blog Article CTA
======================================== */
:where(body.blog-section) .blog-article__cta {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 1px solid var(--light-gray);
    border-left: 4px solid var(--primary-accent);
    border-radius: 0.75rem;
    padding: 2.5rem;
    margin: 3rem 0;
    text-align: center;
}

:where(body.blog-section) .blog-article__cta-content h2 {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
}

:where(body.blog-section) .blog-article__cta-content p {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

/* ========================================
   Blog Navigation
======================================== */
:where(body.blog-section) .blog-article__nav {
    background: var(--off-white);
    border-top: 1px solid var(--light-gray);
    padding: 2rem 0;
}

:where(body.blog-section) .blog-article__nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 820px;
    margin: 0 auto;
}

:where(body.blog-section) .blog-nav-link {
    color: var(--primary-accent);
    font-weight: 600;
    transition: color var(--transition-fast);
    text-decoration: none;
}

:where(body.blog-section) .blog-nav-link:hover {
    color: var(--accent-cyan);
}

@media (max-width: 480px) {
    :where(body.blog-section) .blog-article__nav .container {
        flex-direction: column;
        gap: 1rem;
    }

    :where(body.blog-section) .blog-nav-link {
        display: block;
        text-align: center;
    }
}

/* ========================================
   Footer (Blog-specific)
======================================== */
:where(body.blog-section) .footer {
    background: var(--primary-dark);
    color: var(--white);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}

:where(body.blog-section) .footer__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

:where(body.blog-section) .footer__section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--accent-cyan);
}

:where(body.blog-section) .footer__section ul {
    list-style: none;
    margin-left: 0;
}

:where(body.blog-section) .footer__section li {
    margin-bottom: 0.5rem;
}

:where(body.blog-section) .footer__section a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-fast);
}

:where(body.blog-section) .footer__section a:hover {
    color: var(--accent-cyan);
}

:where(body.blog-section) .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    :where(body.blog-section) .blog-article__content {
        padding: 2rem 1rem;
    }

    :where(body.blog-section) .blog-article__header {
        padding: 2rem 0;
    }

    :where(body.blog-section) .blog-article__title {
        font-size: 1.75rem;
    }

    :where(body.blog-section) .blog-article__meta {
        gap: 1rem;
        font-size: 0.85rem;
    }

    :where(body.blog-section) .blog-article__cta {
        padding: 1.5rem;
    }
}

/* ========================================
   Article Micro-components: Feature image, author box, TOC, share links
======================================== */
:where(body.blog-section) .blog-feature-image {
    margin: 1.5rem 0 0.75rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
:where(body.blog-section) .blog-feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

:where(body.blog-section) .author-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--off-white);
    border: 1px solid var(--light-gray);
    padding: 1rem;
    border-radius: 0.5rem;
    margin: 1rem 0 1.25rem 0;
}
:where(body.blog-section) .author-box {
    color: var(--text-dark);
}
:where(body.blog-section) .author-info strong {
    display: block;
    font-weight: 700;
    color: var(--primary-dark);
}
:where(body.blog-section) .author-role {
    display: block;
    font-size: 0.9rem;
    color: var(--medium-gray);
    margin-bottom: 0.5rem;
}
:where(body.blog-section) .author-bio {
    margin: 0;
    color: var(--text-dark);
}
:where(body.blog-section) .share-links {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
:where(body.blog-section) .share-links a {
    background: var(--white);
    border: 1px solid var(--light-gray);
    padding: 0.45rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--primary-accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}
:where(body.blog-section) .share-links a:hover {
    background: var(--primary-accent);
    color: var(--white);
}

:where(body.blog-section) .toc {
    background: var(--off-white);
    border-left: 4px solid var(--light-gray);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1.5rem 0;
    border-radius: 0.5rem;
}
:where(body.blog-section) .toc strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}
:where(body.blog-section) .toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
:where(body.blog-section) .toc a {
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 600;
}
:where(body.blog-section) .toc a:hover {
    color: var(--accent-cyan);
    text-decoration: underline;
}

@media (max-width: 768px) {
    :where(body.blog-section) .author-box {
        flex-direction: column;
        align-items: flex-start;
    }
    :where(body.blog-section) .share-links {
        margin-left: 0;
    }
}

/* Improve article content spacing and contrast */
:where(body.blog-section) .blog-article__content {
    max-width: 880px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
    color: var(--text-dark);
}

@media (max-width: 768px) {
    :where(body.blog-section) .blog-article__content {
        padding: 2rem 1rem;
    }
}

/* ========================================
   Blog Header adjustments (match site header on blog pages)
======================================== */
.page--blog:where(.blog-section) .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page--blog:where(.blog-section) .header__inner {
    padding: 0.75rem 0;
}
.page--blog:where(.blog-section) .header__logo-text,
.page--blog:where(.blog-section) .nav__link {
    color: var(--white);
}
.page--blog:where(.blog-section) .nav__list {
    gap: 1.5rem;
}
.page--blog:where(.blog-section) .nav__cta {
    background: var(--primary-accent);
    color: var(--white);
}

/* ========================================
   Next Steps & Related Resources improvements
======================================== */
:where(body.blog-section) .blog-article #next-steps {
    margin-top: 2rem;
}
:where(body.blog-section) .blog-article #next-steps ol {
    padding-left: 1.25rem;
}
:where(body.blog-section) .blog-article #next-steps li {
    margin-bottom: 0.75rem;
    color: var(--dark-gray);
}
:where(body.blog-section) .blog-article .related-articles {
    margin-top: 1rem;
}
:where(body.blog-section) .related-article-link {
    align-items: center;
    padding: 1rem 1.25rem;
}
:where(body.blog-section) .related-article-link span {
    color: var(--primary-dark);
}

/* Progressive enhancement: show FAQ answers when JS is not available */
:where(body.blog-section) .no-js .faq-item__answer {
    max-height: none !important;
    overflow: visible !important;
}

/* When JS is present, enable accordion behaviour */
:where(body.blog-section) .js .faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}
:where(body.blog-section) .js .faq-item.active .faq-item__answer {
    max-height: 500px;
}


/* ========================================
   Legacy article pages visual uplift
======================================== */
.blog-post-page:where(.blog-section) {
    background: #f8fafc;
    color: var(--text-dark);
}

.blog-post-page:where(.blog-section) > header {
    background: var(--white);
    border-bottom: 1px solid var(--light-gray);
    position: sticky;
    top: 0;
    z-index: 50;
}

.blog-post-page:where(.blog-section) > header nav {
    max-width: 860px;
    margin: 0 auto;
    padding: 0.9rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-weight: 600;
}

.blog-post-page:where(.blog-section) > header nav a {
    color: var(--primary-accent);
    text-decoration: none;
}

.blog-post-page:where(.blog-section) main {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.blog-post-page:where(.blog-section) article {
    background: var(--white);
    border: 1px solid var(--light-gray);
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(15,40,80,0.06);
}

.blog-post-page:where(.blog-section) article > h1 {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    line-height: 1.2;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 1rem;
}

.blog-post-page:where(.blog-section) section {
    scroll-margin-top: 5rem;
}

.blog-post-page:where(.blog-section) section > h2 {
    font-family: var(--font-heading);
    color: var(--primary-dark);
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.blog-post-page:where(.blog-section) footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--light-gray);
}

@media (max-width: 768px) {
    .blog-post-page:where(.blog-section) article {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   SECTION 4: Editorial layout (was editorial.css)
   ========================================================================== */

/* ============================================================
   editorial.css — Shared design system for the homepage and
   service pages (body.ed-page).
   Loaded after styles.css + theme-soro.css, which still style
   the injected header and footer. Every rule is scoped to
   .ed-page so pages without the class are untouched.
   ============================================================ */

.ed-page {
    /* Core tones: Salesforce navy, Salesforce blue, slate white.
       Everything else is a tint of these three. */
    --ed-navy:  #032d60;
    --ed-blue:  #00a1e0;   /* CTAs, focus and rules only — fails contrast as text on slate */
    --ed-paper: #f3f4f6;

    --ed-navy-75:  rgba(3, 45, 96, 0.75);
    --ed-navy-15:  rgba(3, 45, 96, 0.15);
    --ed-navy-50:  rgba(3, 45, 96, 0.5);
    --ed-paper-70: rgba(243, 244, 246, 0.7);
    --ed-paper-45: rgba(243, 244, 246, 0.45);
    --ed-paper-15: rgba(243, 244, 246, 0.15);

    /* Motion */
    --ed-ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --ed-dur-enter: 760ms;
    --ed-dur-ui:    180ms;

    /* Type */
    --ed-font: 'Archivo', 'Inter', system-ui, sans-serif;

    /* Rhythm */
    --ed-gutter:  clamp(1rem, 4vw, 1.5rem);
    --ed-colgap:  clamp(1rem, 2vw, 1.5rem);
    --ed-section: clamp(4rem, 8vw, 7rem);
    --ed-block:   clamp(2.5rem, 4.5vw, 4rem);

    background: var(--ed-paper);
    color: var(--ed-navy);
}

.ed-page main {
    font-family: var(--ed-font);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------- Site chrome adjustments ---------- */
[data-theme="soro"] .ed-page .header,
[data-theme="soro"] .ed-page .header.scrolled,
[data-theme="soro"] .ed-page .header.has-open-menu {
    background: var(--ed-navy);
    border-bottom: 1px solid var(--ed-paper-15);
    box-shadow: none;
    backdrop-filter: none;
}

[data-theme="soro"] .ed-page .nav .btn--primary {
    background: var(--ed-blue);
    color: var(--ed-navy);
    border-radius: 0;
    box-shadow: none;
}

.ed-page .footer { background: var(--ed-navy); }

.ed-page .mobile-cta {
    background: var(--ed-navy);
    box-shadow: none;
    border-top: 1px solid var(--ed-paper-15);
}

.ed-page .mobile-cta .ed-cta { width: 100%; }

/* theme-soro colours every <a> through a long :not() chain (specificity 0,7,1);
   !important is the only clean way to opt these links out. */
.ed-page a.ed-cta { color: var(--ed-navy) !important; }
.ed-page a.ed-link,
.ed-page .ed-breadcrumb a { color: inherit !important; }

/* ---------- Grid ---------- */
.ed-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--ed-gutter);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ed-colgap);
}

.ed-section {
    padding: var(--ed-section) 0;
}

.ed-section--paper { background: var(--ed-paper); color: var(--ed-navy); }
.ed-section--navy  { background: var(--ed-navy);  color: var(--ed-paper); }
.ed-section--rule  { border-top: 1px solid var(--ed-navy-15); }

/* ---------- Type ---------- */
.ed-page h1,
.ed-page h2,
.ed-page h3 {
    font-family: var(--ed-font);
    color: inherit;
    margin: 0;
}

.ed-page .ed-h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.ed-page .ed-h1--long {
    font-size: clamp(2.125rem, 3.8vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.ed-hero .ed-h1.ed-h1--long { grid-column: 1 / 9; }

.ed-page .ed-h2 {
    grid-column: 1 / 9;
    font-size: clamp(1.875rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ed-page .ed-h2--wide { grid-column: 1 / 11; }
.ed-page .ed-h2--narrow { grid-column: 1 / 6; }

.ed-page .ed-h4 {
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ed-lede {
    grid-column: 1 / 8;
    margin: 1.25rem 0 0;
    max-width: 60ch;
}

.ed-lede p { margin: 0 0 1rem; }

.ed-section--paper .ed-lede,
.ed-section--paper .ed-muted { color: var(--ed-navy-75); }
.ed-section--navy .ed-lede,
.ed-section--navy .ed-muted,
.ed-hero .ed-muted { color: var(--ed-paper-70); }

.ed-link {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--ed-blue);
    text-underline-offset: 6px;
}

.ed-page p a:not(.ed-cta):not(.ed-link) {
    color: inherit !important;
    text-decoration: underline;
    text-decoration-color: var(--ed-blue);
    text-underline-offset: 3px;
}

.ed-page a:focus-visible,
.ed-page button:focus-visible,
.ed-page summary:focus-visible,
.ed-page input:focus-visible,
.ed-page select:focus-visible {
    outline: 2px solid var(--ed-blue);
    outline-offset: 4px;
}

/* ---------- Primary CTA: solid block, colour shift + scale ---------- */
.ed-cta {
    display: inline-flex;
    align-items: center;
    height: 3.25rem;
    padding: 0 2rem 0 1.125rem;
    font-family: var(--ed-font);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ed-navy);
    background: var(--ed-blue);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transform-origin: left center;
    /* Colour inverts instantly; only the scale is eased */
    transition: transform var(--ed-dur-ui) var(--ed-ease);
}

.ed-cta:hover    { background: var(--ed-paper); transform: scale(1.03); }
.ed-cta:active   { transform: scale(0.99); }
.ed-cta:disabled { cursor: progress; transform: none; }
.ed-cta .animate-spin { margin-right: 0.5rem; }

/* On slate sections blue lacks contrast (~2.8:1), so the CTA is navy and hovers to blue */
.ed-section--paper .ed-cta { background: var(--ed-navy); color: var(--ed-paper); }
.ed-page .ed-section--paper a.ed-cta { color: var(--ed-paper) !important; }
.ed-section--paper .ed-cta:hover { background: var(--ed-blue); color: var(--ed-navy); }
.ed-page .ed-section--paper a.ed-cta:hover { color: var(--ed-navy) !important; }

.ed-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* ---------- Hero ---------- */
.ed-hero {
    background: var(--ed-navy);
    color: var(--ed-paper);
    padding: calc(5rem + clamp(2.5rem, 4vw, 3.5rem)) 0 var(--ed-section);
}

.ed-hero .ed-h1     { grid-column: 1 / 8; }

/* Second line of the home H1: large display type, so blue passes contrast on navy */
.ed-hero__accent {
    display: block;
    margin-top: 0.25em;
    color: var(--ed-blue);
}
.ed-hero__copy {
    grid-column: 1 / 7;
    margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ed-hero__sub {
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.5;
    max-width: 44ch;
    margin: 0;
}

.ed-hero__copy .ed-actions { margin-top: 0.75rem; }

.ed-hero__note {
    font-size: 0.9375rem;
    max-width: 36ch;
    margin: 0;
}

/* Right column beside the H1: the inquiry form (home) or a screenshot (service pages) */
.ed-hero__aside {
    grid-column: 9 / 13;
    grid-row: 1 / span 3;
    align-self: start;
    margin-top: 0.5rem;
}

/* Hero index: jump links to the page's main routes (service pages) */

.ed-breadcrumb {
    grid-column: 1 / -1;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    color: var(--ed-paper-70);
}

.ed-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.ed-breadcrumb li + li::before {
    content: '/';
    margin-right: 0.5rem;
}

.ed-hero:has(.ed-breadcrumb) .ed-h1 { grid-row: 2; }
.ed-hero:has(.ed-breadcrumb) .ed-hero__copy {
    grid-row: 3;
    margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.ed-hero:has(.ed-breadcrumb) .ed-hero__aside {
    grid-row: 2 / span 2;
    margin-top: 0.5rem;
}

/* Entrance: one orchestrated sequence on load, transform + opacity only */
@keyframes ed-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
}

.ed-rise    { animation: ed-rise var(--ed-dur-enter) var(--ed-ease) both; }
.ed-rise--2 { animation-delay: 120ms; }
.ed-rise--3 { animation-delay: 240ms; }

/* The H1 is usually the LCP element: it moves into place but is never invisible,
   so the browser can count it as painted on the first frame */
@keyframes ed-rise-solid {
    from { transform: translateY(16px); }
    to   { transform: none; }
}
h1.ed-rise { animation-name: ed-rise-solid; }

/* ---------- Brand film (homepage, below the hero) ---------- */
.ed-film {
    background: var(--ed-paper);
    padding: var(--ed-section) 0;
}

.ed-film__video {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--ed-navy);
    border: 1px solid var(--ed-navy-15);
}

/* ---------- Figure: real product screenshots, sharp frame ---------- */
.ed-figure { margin: 0; }

.ed-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ed-paper-15);
}

.ed-section--paper .ed-figure img { border-color: var(--ed-navy-15); }

.ed-figure figcaption {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.ed-section--paper .ed-figure figcaption { color: var(--ed-navy-75); }

/* ---------- Screenshot slots: staged sandbox captures ----------
   Ship with .hidden; remove the class once the image is in place. */

.ed-shot--block {
    grid-column: 1 / 13;
    margin-top: var(--ed-block);
}
.ed-hero__aside .ed-figure { margin-top: 2rem; }
.ed-hero .ed-figure figcaption,
.ed-section--navy .ed-figure figcaption { color: var(--ed-paper-70); }

/* ---------- Platform generations (CloudCraze → Aura → LWR) ---------- */

/* ---------- Tiers (support plans) ---------- */
.ed-section--navy .ed-figure figcaption,
.ed-hero .ed-figure figcaption { color: var(--ed-paper-70); }

/* ---------- Indented rows (problems, audiences) ---------- */

/* ---------- Feature rows (services, capabilities) ---------- */

/* Compact variant: smaller titles for longer lists */

/* ---------- Numbered steps (genuine sequences only) ---------- */

/* ---------- People ---------- */
.ed-people {
    grid-column: 4 / 13;
    margin-top: var(--ed-block);
}

.ed-person {
    display: grid;
    grid-template-columns: 7rem 1fr;
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
    padding: 1.5rem 0;
    border-top: 1px solid currentColor;
}

.ed-person img {
    width: 7rem;
    height: 8.5rem;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
}

.ed-page .ed-person h3 {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ed-person__role { margin: 0.25rem 0 1rem; font-weight: 600; }
.ed-person p     { margin: 0; max-width: 46ch; }
.ed-person .ed-person__certs { margin-top: 1rem; font-size: 0.875rem; }

/* ---------- Comparison table ---------- */
.ed-table-wrap {
    grid-column: 1 / 13;
    margin-top: var(--ed-block);
    overflow-x: auto;
}

.ed-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.ed-table th,
.ed-table td {
    text-align: left;
    vertical-align: top;
    padding: 0.875rem 1.25rem 0.875rem 0;
    border-bottom: 1px solid var(--ed-navy-15);
}

.ed-table thead th {
    font-size: 0.8125rem;
    font-weight: 700;
    border-bottom: 1px solid var(--ed-navy);
}

.ed-table tbody th { font-weight: 700; width: 26%; }
.ed-table td:last-child { font-weight: 600; }
.ed-table td:nth-child(2) { color: var(--ed-navy-75); }

.ed-note {
    grid-column: 4 / 13;
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
}

/* ---------- FAQ ---------- */
.ed-faq {
    grid-column: 7 / 13;
    border-top: 1px solid currentColor;
}

.ed-faq details { border-bottom: 1px solid var(--ed-navy-15); }

.ed-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.125rem 0;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.ed-faq summary::-webkit-details-marker { display: none; }

.ed-faq summary::after {
    content: '+';
    flex-shrink: 0;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform var(--ed-dur-ui) var(--ed-ease);
}

.ed-faq details[open] summary::after { transform: rotate(45deg); }

.ed-faq details p {
    margin: 0;
    padding: 0 0 1.25rem;
    max-width: 60ch;
    color: var(--ed-navy-75);
}

.ed-faq h3 { font: inherit; }

/* ---------- Closing band ---------- */
.ed-close .ed-h2 { grid-column: 1 / 9; }

.ed-close .ed-cta {
    grid-column: 9 / 13;
    align-self: end;
    justify-self: end;
}

/* Closing band that carries the inquiry form (service pages) */

.ed-section--scene .ed-wrap { grid-template-rows: auto 1fr; }

/* ---------- Inquiry form ---------- */
.ed-inquiry {
    color: var(--ed-navy);
    background: var(--ed-paper);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-top: 4px solid var(--ed-blue);
}

.ed-page .ed-inquiry__title {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.ed-inquiry__promise {
    margin: 0.375rem 0 1.25rem;
    font-size: 0.9375rem;
    color: var(--ed-navy-75);
}

.ed-inquiry__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ed-field {
    display: flex;
    flex-direction: column;
}

.ed-field label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ed-navy-75);
}

.ed-field input,
.ed-field select {
    font: inherit;
    font-size: 1.0625rem;
    color: var(--ed-navy);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ed-navy);
    border-radius: 0;
    height: 2.75rem;
    padding: 0;
    width: 100%;
    transition: border-color var(--ed-dur-ui) ease, box-shadow var(--ed-dur-ui) ease;
}

.ed-field input::placeholder { color: var(--ed-navy-50); }

.ed-field select {
    appearance: none;
    padding-right: 2rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23032d60' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.ed-field select:invalid { color: var(--ed-navy-50); }
.ed-field select option  { color: var(--ed-navy); background: var(--ed-paper); }

.ed-field input:focus,
.ed-field select:focus {
    border-bottom-color: var(--ed-blue);
    box-shadow: 0 1px 0 var(--ed-blue);
}

.ed-inquiry .ed-cta {
    width: 100%;
    margin-top: 0.5rem;
    justify-content: center;
    padding: 0 1.125rem;
    background: var(--ed-navy);
    color: var(--ed-paper);
}

.ed-inquiry .ed-cta:hover { background: var(--ed-blue); color: var(--ed-navy); }

.ed-inquiry__legal {
    font-size: 0.8125rem;
    margin: 1.25rem 0 0;
    color: var(--ed-navy-75);
}

.ed-page .ed-inquiry .form-success,
.ed-page .ed-inquiry .form-error {
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 1.5rem;
}

.ed-page .form-honeypot {
    position: absolute;
    left: -9999px;
}

/* ---------- 3D scene (B2B Commerce page, beside the engine heading) ----------
   js/b2b-commerce-scene.min.js mounts a WebGL canvas into [data-b2b-scene]
   when it nears the viewport; until then (or without WebGL) a soft glow shows. */
.ed-scene {
    grid-column: 9 / 13;
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.ed-scene__canvas {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 360 / 252;
    background: radial-gradient(60% 60% at 50% 60%, rgba(0, 161, 224, 0.28), transparent 70%);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 1000ms var(--ed-ease) 100ms, transform 1000ms var(--ed-ease) 100ms;
}

.ed-scene__canvas.is-ready,
.ed-scene__canvas.is-fallback { opacity: 1; transform: none; }

.ed-scene__canvas canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.ed-scene__text { max-width: 32ch; }
.ed-page .ed-scene__text h3 { margin: 0 0 0.75rem; }
.ed-scene__text p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ed-hero__copy { grid-column: 1 / 8; }
    
    .ed-people,
    .ed-note { grid-column: 3 / 13; }
}

@media (max-width: 768px) {
    .ed-wrap > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .ed-hero { padding-top: calc(5rem + 2rem); }
    .ed-page .ed-h1 { letter-spacing: -0.045em; }
    .ed-hero__aside,
    .ed-scene { margin-top: 2.5rem; }
    .ed-person { grid-template-columns: 5rem 1fr; }
    .ed-person img { width: 5rem; height: 6rem; }
    .ed-faq { margin-top: 2rem; }
    .ed-close .ed-cta { justify-self: stretch; margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ed-rise { animation: none; }
    .ed-scene__canvas { transition: none; transform: none; }
    .ed-cta,
    .ed-faq summary::after { transition: none; }
    .ed-cta:hover { transform: none; }
}

/* ==========================================================================
   SECTION 5: Midnight design (was midnight.css)
   ========================================================================== */

/* ==========================================================================
   Midnight: the site-wide theme (body.th-midnight)
   60% white reading surfaces, 30% midnight navy and Salesforce Cloud Blue
   blocks, 10% orange, which is used only on buttons that capture a lead.
   Dark blocks get fine grain and a slow Cloud Blue glow; panels are rounded
   and softly lit (Salesforce-page styling).

   Load after styles.css, theme-soro.css and editorial.css (and blog.css).
   body.th-light-top: pages that start on white get the solid header at once.

   One colour, one meaning
     ink        type, dark blocks, footer
     blue       Salesforce/system, links, diagrams
     cta        buttons that capture a lead, and nothing else
     leak       problems and overruns in the card visuals

   Part 1  Theme: tokens, header, menu, footer, buttons, blocks, editorial map
   Part 2  Shared components: trust strip, explorers, people, FAQ
   ========================================================================== */

/* ---------- Web fonts, self-hosted (assets/fonts/, latin subset, variable) ----------
   Downloaded from Google Fonts 2026-10-09. Each page preloads the font its first
   screen uses; the rest load on demand. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Font fallbacks sized to match the web fonts ----------
   Until the web fonts arrive, text renders in Arial adjusted to the same
   metrics, so the swap does not reflow the page (CLS).
   Values computed from @capsizecss/metrics. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.12%; ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 98.70%; ascent-override: 88.96%; descent-override: 21.28%; line-gap-override: 0%; }
@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"); size-adjust: 104.98%; ascent-override: 98.88%; descent-override: 21.15%; line-gap-override: 0%; }

.th-midnight {
    --th-ink:        #0B132B;
    --th-muted:      #4A5568;
    --th-line:       #D5DEE8;
    --th-blue:       #0176D3;
    --th-blue-light: #1B96FF;
    --th-pale:       #F8FAFC;
    --th-white:      #FFFFFF;
    --th-cta:        #FF6B1F;
    --th-on-cta:     #0B132B;   /* white on orange fails contrast; navy is 6:1 */
    --th-cta-hover:  #FF8442;
    --th-leak:       #BA0517;
    --th-highlight:  #E5F1FC;

    --th-radius: 16px;
    --th-soft-shadow: 0 1px 2px rgba(11, 19, 43, 0.06), 0 12px 32px -16px rgba(11, 19, 43, 0.22);
    --mn-glow:   rgba(1, 118, 211, 0.55);
    --mn-glow-2: rgba(64, 52, 214, 0.32);
    --mn-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Editorial tokens (editorial.css) re-pointed at Midnight */
    --ed-navy:    #0B132B;
    --ed-blue:    #1B96FF;
    --ed-paper:   #FFFFFF;
    --ed-navy-75: rgba(11, 19, 43, 0.75);
    --ed-navy-50: rgba(11, 19, 43, 0.5);
    --ed-navy-15: rgba(11, 19, 43, 0.12);
    --ed-paper-70: rgba(255, 255, 255, 0.74);
    --ed-paper-45: rgba(255, 255, 255, 0.45);
    --ed-paper-15: rgba(255, 255, 255, 0.14);

    /* Font stacks with the metric-matched fallbacks */
    --font-primary: 'Inter', 'Inter Fallback', system-ui, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', 'Inter', 'Inter Fallback', sans-serif;
    --ed-font: 'Archivo', 'Archivo Fallback', 'Inter', 'Inter Fallback', system-ui, sans-serif;
}

/* Visual role tokens used by the card visuals (and home-visuals.css) */
.th-midnight,
.th-midnight .hv {
    --hv-ink:          var(--th-ink);
    --hv-muted:        var(--th-muted);
    --hv-faint:        rgba(11, 19, 43, 0.42);
    --hv-line:         var(--th-line);
    --hv-white:        #FFFFFF;
    --hv-system:       var(--th-blue);
    --hv-connect:      var(--th-blue);
    --hv-shadow:       var(--th-blue);
    --hv-event:        var(--th-leak);
    --hv-on-event:     #FFFFFF;
    --hv-transform:    var(--th-blue);
    --hv-highlight:    var(--th-highlight);
    --hv-cta:          var(--th-cta);
    --hv-on-cta:       var(--th-on-cta);
    --hv-cta-hover:    var(--th-cta-hover);
    --hv-on-cta-hover: var(--th-on-cta);
    --hv-ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Part 1  Theme
   ========================================================================== */

/* ---------- Header ----------
   Over a dark hero it is transparent, with an outline button. Once scrolled
   (or on pages that start on white) it is a white bar with a solid orange
   button: one obvious action in every view. */
[data-theme="soro"] .th-midnight .header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    backdrop-filter: none;
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
}
[data-theme="soro"] .th-midnight .header.scrolled,
[data-theme="soro"] .th-midnight .header.has-open-menu,
[data-theme="soro"] .th-midnight.th-light-top .header {
    background: var(--th-white);
    border-bottom-color: var(--th-line);
    box-shadow: 0 8px 24px -16px rgba(11, 19, 43, 0.35);
    backdrop-filter: none;
}

[data-theme="soro"] .th-midnight .header__logo-icon { background: var(--th-blue); border-radius: 0; }
[data-theme="soro"] .th-midnight .header .header__logo,
[data-theme="soro"] .th-midnight .header .header__logo-text,
[data-theme="soro"] .th-midnight .header .logo-primary,
[data-theme="soro"] .th-midnight .header .logo-accent,
[data-theme="soro"] .th-midnight .nav__link,
[data-theme="soro"] .th-midnight .nav__mega-trigger,
[data-theme="soro"] .th-midnight .nav__dropdown-trigger { color: #FFFFFF; transition: color 250ms ease; }
[data-theme="soro"] .th-midnight .header .logo-divider { background: currentColor; opacity: 0.35; }
[data-theme="soro"] .th-midnight .nav__link:hover,
[data-theme="soro"] .th-midnight .nav__mega-trigger:hover,
[data-theme="soro"] .th-midnight .nav__dropdown-trigger:hover { color: var(--th-blue-light); }
[data-theme="soro"] .th-midnight .nav__link::after { background: var(--th-blue-light); }
[data-theme="soro"] .th-midnight .nav__arrow { color: currentColor; opacity: 0.6; }
[data-theme="soro"] .th-midnight .mobile-toggle span { background: #FFFFFF; }

[data-theme="soro"] .th-midnight .header:is(.scrolled, .has-open-menu) :is(.header__logo, .header__logo-text, .logo-primary, .logo-accent, .nav__link, .nav__mega-trigger, .nav__dropdown-trigger),
[data-theme="soro"] .th-midnight.th-light-top .header :is(.header__logo, .header__logo-text, .logo-primary, .logo-accent, .nav__link, .nav__mega-trigger, .nav__dropdown-trigger) { color: var(--th-ink); }
[data-theme="soro"] .th-midnight .header:is(.scrolled, .has-open-menu) :is(.nav__link, .nav__mega-trigger, .nav__dropdown-trigger):hover,
[data-theme="soro"] .th-midnight.th-light-top .header :is(.nav__link, .nav__mega-trigger, .nav__dropdown-trigger):hover { color: var(--th-blue); }
[data-theme="soro"] .th-midnight .header:is(.scrolled, .has-open-menu) .nav__link::after,
[data-theme="soro"] .th-midnight.th-light-top .header .nav__link::after { background: var(--th-blue); }
[data-theme="soro"] .th-midnight .header:is(.scrolled, .has-open-menu) .mobile-toggle span,
[data-theme="soro"] .th-midnight.th-light-top .header .mobile-toggle span { background: var(--th-ink); }

[data-theme="soro"] .th-midnight #header .nav__phone { color: rgba(255, 255, 255, 0.72); transition: color 250ms ease; }
[data-theme="soro"] .th-midnight #header .nav__phone:hover { color: #FFFFFF; }
[data-theme="soro"] .th-midnight #header:is(.scrolled, .has-open-menu) .nav__phone,
[data-theme="soro"] .th-midnight.th-light-top #header .nav__phone { color: var(--th-ink); }
[data-theme="soro"] .th-midnight #header:is(.scrolled, .has-open-menu) .nav__phone:hover,
[data-theme="soro"] .th-midnight.th-light-top #header .nav__phone:hover { color: var(--th-blue); }
@media (max-width: 1024px) {
    [data-theme="soro"] .th-midnight #header .nav .nav__phone { color: var(--th-ink); margin-right: 0; font-size: 1rem; }
}

/* Mobile menu: the toggle stays above the open white panel and shows as a dark X, so the menu can be closed */
@media (max-width: 1024px) {
    [data-theme="soro"] .th-midnight .mobile-toggle { position: relative; z-index: 2; }
    [data-theme="soro"] .th-midnight .header .mobile-toggle.active span { background: var(--th-ink); }
}

/* Header button: outline over a dark hero, solid orange on white */
[data-theme="soro"] .th-midnight .nav .btn--primary {
    background: transparent;
    color: #FFFFFF;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
    transform: none;
    transition: background-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}
[data-theme="soro"] .th-midnight .nav .btn--primary:hover {
    background: #FFFFFF;
    color: var(--th-ink);
    box-shadow: inset 0 0 0 1.5px #FFFFFF;
}
[data-theme="soro"] .th-midnight .header:is(.scrolled, .has-open-menu) .nav .btn--primary,
[data-theme="soro"] .th-midnight.th-light-top .header .nav .btn--primary {
    background: var(--th-cta);
    color: var(--th-on-cta);
    box-shadow: 0 6px 16px -8px rgba(255, 107, 31, 0.7);
}
[data-theme="soro"] .th-midnight .header:is(.scrolled, .has-open-menu) .nav .btn--primary:hover,
[data-theme="soro"] .th-midnight.th-light-top .header .nav .btn--primary:hover { background: var(--th-cta-hover); }

/* Mobile nav opens as a white panel whatever the header state */
@media (max-width: 1024px) {
    [data-theme="soro"] .th-midnight .nav .nav__link,
    [data-theme="soro"] .th-midnight .nav .nav__mega-trigger,
    [data-theme="soro"] .th-midnight .nav .nav__dropdown-trigger { color: var(--th-ink); }
    [data-theme="soro"] .th-midnight .nav .btn--primary {
        background: var(--th-cta);
        color: var(--th-on-cta);
        box-shadow: none;
    }
}

/* ---------- Dropdown menus ---------- */
[data-theme="soro"] .th-midnight .mega-menu {
    border-top: 1px solid var(--th-line);
    border-radius: 0 0 var(--th-radius) var(--th-radius);
    box-shadow: 0 24px 48px -24px rgba(11, 19, 43, 0.35);
}
[data-theme="soro"] .th-midnight .mega-menu__col-heading { color: var(--th-blue); }
[data-theme="soro"] .th-midnight .mega-menu__link { border-radius: 10px; }
[data-theme="soro"] .th-midnight .mega-menu__cta-card { border-radius: var(--th-radius); }
[data-theme="soro"] .th-midnight .mega-menu .btn--primary {
    background: var(--th-cta);
    color: var(--th-on-cta);
    border-radius: 999px;
    box-shadow: none;
}
[data-theme="soro"] .th-midnight .mega-menu .btn--primary:hover { background: var(--th-cta-hover); color: var(--th-on-cta); }

/* ---------- Buttons that capture a lead: solid orange pills ---------- */
.th-midnight .ed-cta,
.th-midnight .ed-inquiry .ed-cta,
.th-midnight .ed-section--paper .ed-cta,
.th-midnight .ed-section--navy .ed-cta {
    background: var(--th-cta);
    color: var(--th-on-cta);
    border-radius: 999px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 20px -10px rgba(255, 107, 31, 0.75);
    transition: transform 180ms var(--ed-ease), background-color 180ms ease, box-shadow 180ms ease;
}
.ed-page.th-midnight a.ed-cta,
.ed-page.th-midnight .ed-section--paper a.ed-cta { color: var(--th-on-cta) !important; }

.th-midnight .ed-cta:hover,
.th-midnight .ed-inquiry .ed-cta:hover,
.th-midnight .ed-section--paper .ed-cta:hover,
.th-midnight .ed-section--navy .ed-cta:hover {
    background: var(--th-cta-hover);
    color: var(--th-on-cta);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 24px -10px rgba(255, 107, 31, 0.85);
}
.ed-page.th-midnight a.ed-cta:hover,
.ed-page.th-midnight .ed-section--paper a.ed-cta:hover { color: var(--th-on-cta) !important; }
.th-midnight .ed-cta:active { transform: none; }
.th-midnight .ed-cta:focus-visible { outline: 3px solid var(--th-blue-light); outline-offset: 3px; }

/* Older pages' buttons (styles.css .btn) follow the same rule */
[data-theme="soro"] .th-midnight main .btn--primary {
    background: var(--th-cta);
    color: var(--th-on-cta);
    border-radius: 999px;
    box-shadow: 0 8px 20px -10px rgba(255, 107, 31, 0.75);
}
[data-theme="soro"] .th-midnight main .btn--primary:hover { background: var(--th-cta-hover); color: var(--th-on-cta); }

/* ---------- Floating mobile bar ---------- */
.th-midnight .mobile-cta {
    background: var(--th-white);
    border-top: 1px solid var(--th-line);
    box-shadow: 0 -8px 24px -16px rgba(11, 19, 43, 0.3);
}
.th-midnight .mobile-cta .ed-cta,
.th-midnight .mobile-cta .btn { width: 100%; justify-content: center; }
[data-theme="soro"] .th-midnight .mobile-cta .btn--primary {
    background: var(--th-cta);
    color: var(--th-on-cta);
    border-radius: 999px;
    box-shadow: 0 8px 20px -10px rgba(255, 107, 31, 0.75);
}

/* ---------- Hero ---------- */
.th-midnight .ed-hero { background: var(--th-ink); color: #FFFFFF; }
.th-midnight .ed-hero .ed-h1 { color: #FFFFFF; }
.th-midnight .ed-hero__accent {
    background: linear-gradient(90deg, var(--th-blue-light) 0%, #6FC1FF 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.th-midnight .ed-hero__sub { color: rgba(255, 255, 255, 0.74); }
.th-midnight .ed-hero .ed-link { text-decoration-color: var(--th-blue-light); }

/* ---------- Inquiry form: a lit white card ---------- */
.th-midnight .ed-inquiry {
    background: var(--th-white);
    color: var(--th-ink);
    border: 0;
    border-radius: var(--th-radius);
    box-shadow: 0 40px 100px -24px rgba(1, 118, 211, 0.65), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.th-midnight .ed-section--paper .ed-inquiry { box-shadow: var(--th-soft-shadow); border: 1px solid var(--th-line); }
.th-midnight .ed-inquiry__promise,
.th-midnight .ed-field label { color: var(--th-muted); }
.th-midnight .ed-field input,
.th-midnight .ed-field select,
.th-midnight .ed-field textarea { color: var(--th-ink); border-bottom-color: var(--th-line); }
.th-midnight .ed-field input:focus,
.th-midnight .ed-field select:focus,
.th-midnight .ed-field textarea:focus { border-bottom-color: var(--th-blue); box-shadow: 0 1px 0 var(--th-blue); }

/* ---------- Dark and blue blocks: grain (::before), drifting glow (::after) ---------- */
.th-midnight .ed-hero,
.th-midnight .ed-section--navy,
.th-midnight .hv-film,
.th-midnight .hv-people,
.th-midnight .hv-close,
.th-midnight :is(.ed-close),
.th-midnight :is(.page-header) {
    position: relative;
    isolation: isolate;
    overflow: clip;
    --gx: 80%;
    --gy: 30%;
}
.th-midnight .ed-section--navy { background: var(--th-ink); --gx: 15%; --gy: 70%; }
/* Older pages' headers (styles.css, theme-soro.css, blog.css) join the dark blocks */
.th-midnight :is(.page-header) { background: var(--th-ink); --mn-glow-2: transparent; }
.th-midnight .ed-hero,
.th-midnight .hv-film   { --mn-glow-2: transparent; }
.th-midnight .hv-film   { --gx: 50%; --gy: 55%; }
.th-midnight .hv-people { --gx: 15%; --gy: 70%; }

/* Closing blocks: Cloud Blue into deep Salesforce blue, white light */
.th-midnight :is(.ed-close) { color: #FFFFFF; }
.th-midnight .hv-close,
.th-midnight :is(.ed-close) {
    background: linear-gradient(135deg, #0176D3 0%, #0B5CAB 55%, #032D60 100%);
    --gx: 20%;
    --gy: 0%;
    --mn-glow:   rgba(255, 255, 255, 0.22);
    --mn-glow-2: rgba(27, 150, 255, 0.35);
}
.th-midnight :is(.ed-close) .ed-lede,
.th-midnight :is(.ed-close) .ed-muted { color: rgba(255, 255, 255, 0.82); }
.th-midnight :is(.ed-close) .ed-inquiry { box-shadow: 0 40px 90px -30px rgba(3, 13, 40, 0.7); }

.th-midnight .ed-hero::before,
.th-midnight .ed-section--navy::before,
.th-midnight .hv-film::before,
.th-midnight .hv-people::before,
.th-midnight .hv-close::before,
.th-midnight :is(.ed-close)::before,
.th-midnight :is(.page-header)::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: -1;
    pointer-events: none;
    background: var(--mn-noise);
    background-size: auto;
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at var(--gx) var(--gy), #000 15%, transparent 80%);
            mask-image: radial-gradient(ellipse 75% 85% at var(--gx) var(--gy), #000 15%, transparent 80%);
}

.th-midnight .ed-hero::after,
.th-midnight .ed-section--navy::after,
.th-midnight .hv-film::after,
.th-midnight .hv-people::after,
.th-midnight .hv-close::after,
.th-midnight :is(.ed-close)::after,
.th-midnight :is(.page-header)::after {
    content: "";
    position: absolute;
    inset: -15%;
    width: auto;
    height: auto;
    z-index: -2;
    pointer-events: none;
    background-size: auto;
    background:
        radial-gradient(38% 45% at var(--gx) var(--gy), var(--mn-glow), transparent 70%),
        radial-gradient(30% 40% at calc(100% - var(--gx)) 95%, var(--mn-glow-2), transparent 70%);
    animation: mn-drift 22s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes mn-drift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* Phones: hold the glow still, which saves main-thread and GPU work for taps (INP) */
@media (max-width: 768px) {
    .th-midnight .ed-hero::after,
    .th-midnight .ed-section--navy::after,
    .th-midnight .hv-film::after,
    .th-midnight .hv-people::after,
    .th-midnight .hv-close::after,
    .th-midnight :is(.ed-close)::after,
    .th-midnight :is(.page-header)::after { animation: none; will-change: auto; }
}

/* Header, mega menu and dropdown backgrounds are 95-98% opaque, so a backdrop blur adds cost but no visible effect */
.th-midnight :is(.header, .header.scrolled, .header.has-open-menu, .mega-menu, .nav__dropdown) {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}

/* ---------- Editorial sections (service and about pages) ---------- */
/* White sections; the second of two in a row turns pale, so blocks stay distinct */
/* (.hv sections are the homepage's own rhythm, set in home-theme.css) */
.th-midnight .ed-section--paper:not(.hv) { background: var(--th-white); }
.th-midnight .ed-section--paper + .ed-section--paper:not(.hv):not(.ed-section--paper + .ed-section--paper + .ed-section--paper) { background: var(--th-pale); }
.th-midnight .ed-section--rule { border-top: 0; }
.th-midnight .ed-section--navy .ed-h2 { color: #FFFFFF; }

.th-midnight .ed-table-wrap {
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    box-shadow: var(--th-soft-shadow);
    background: var(--th-white);
    overflow: auto;
}
.th-midnight .ed-figure img { border-radius: var(--th-radius); }

/* ---------- Footer ---------- */
[data-theme="soro"] .th-midnight .footer { background: var(--th-ink); border-top: 0; }
[data-theme="soro"] .th-midnight .footer__logo-icon { background: var(--th-blue); border-radius: 0; }
[data-theme="soro"] .th-midnight .footer__contact-item svg { color: var(--th-blue-light); }
[data-theme="soro"] .th-midnight .footer__social-link { border-radius: 10px; }
[data-theme="soro"] .th-midnight .footer__social-link:hover { background: var(--th-blue); }

@media (prefers-reduced-motion: reduce) {
    .th-midnight :is(.ed-hero, .ed-section--navy, .hv-film, .hv-people, .hv-close, .ed-close, .page-header)::after { animation: none; }
    .th-midnight .ed-cta:hover { transform: none; }
}

/* ==========================================================================
   Part 2  Shared components
   ========================================================================== */

/* ==========================================================================
   Credentials strip (after the hero)
   ========================================================================== */
.hv-trust {
    background: var(--hv-bg-trust, var(--hv-white));
    padding: clamp(2.5rem, 5vw, 3.75rem) 0;
}
.hv-trust .tr__title {
    grid-column: 1 / -1;
    margin: 0 auto;
    max-width: 44ch;
    text-align: center;
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--hv-ink);
}
.tr__list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
.tr__list li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.125rem 1.25rem;
    background: var(--hv-white);
    border: 1px solid var(--hv-line);
    border-radius: var(--th-radius, 0);
    box-shadow: var(--th-soft-shadow, none);
}
.tr__list b    { font-size: 1.0625rem; font-weight: 800; color: var(--hv-ink); }
.tr__list span { font-size: 0.875rem; color: var(--hv-muted); }

@media (max-width: 900px) {
    .tr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Soft sky wash rising from below */
.th-midnight .hv-trust {
    background:
        radial-gradient(70% 120% at 50% 130%, rgba(1, 118, 211, 0.16), transparent 70%),
        var(--th-white);
}

/* ==========================================================================
   Explorers: accordion beside an animated UI card (Salesforce page pattern)
   Markup: .fx[data-fx] > .fx__media > .fx__view[data-fx-view]; .fx__list >
   .fx__item > .fx__btn[data-fx-btn]. Behaviour: js/explorer.js
   ========================================================================== */
.fx {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    margin-top: var(--ed-block);
}

.fx__media {
    position: relative;
    min-height: 26rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--th-radius, 0);
    background: linear-gradient(160deg,
        var(--hv-system) 0%,
        color-mix(in srgb, var(--hv-system) 45%, #FFFFFF) 58%,
        color-mix(in srgb, var(--hv-system) 8%, #FFFFFF) 100%);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.fx__view {
    grid-area: 1 / 1;
    position: relative;
    width: min(100%, 26rem);
}
.fx.is-js .fx__view { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 320ms var(--hv-ease), transform 420ms var(--hv-ease), visibility 0s 420ms; }
.fx.is-js .fx__view.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity 320ms var(--hv-ease), transform 420ms var(--hv-ease); }
.fx:not(.is-js) .fx__view:not(:first-child) { display: none; }

.fx__card {
    padding: 1.375rem 1.5rem 2.75rem;   /* room for the chip to overlap */
    background: var(--hv-white);
    color: var(--hv-ink);
    border-radius: calc(var(--th-radius, 0px) * 0.75);
    box-shadow: 0 28px 60px -24px rgba(3, 13, 40, 0.55);
}
.fx__card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--hv-line);
    font-size: 0.875rem;
}
.fx__card-head span { font-size: 0.75rem; color: var(--hv-muted); }

.fx__steps {
    display: flex;
    gap: 0.375rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hv-muted);
}
.fx__steps li {
    flex: 1 1 0;
    padding-top: 0.5rem;
    border-top: 3px solid var(--hv-line);
}
.fx__steps li.is-done { border-top-color: color-mix(in srgb, var(--hv-system) 40%, #FFFFFF); }
.fx__steps li.is-now  { border-top-color: var(--hv-system); color: var(--hv-system); }

.fx__title { margin: 1.25rem 0 0.875rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; }

.fx__before,
.fx__after {
    margin: 0;
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
    border-radius: calc(var(--th-radius, 0px) * 0.4);
}
.fx__before span,
.fx__after span { display: block; margin-bottom: 0.125rem; font-size: 0.75rem; font-weight: 800; }
.fx__before { color: var(--hv-muted); background: color-mix(in srgb, var(--hv-event) 7%, #FFFFFF); }
.fx__before span { color: var(--hv-event); }
.fx__after  { margin-top: 0.5rem; font-weight: 700; background: color-mix(in srgb, var(--hv-system) 10%, #FFFFFF); }
.fx__after span { color: var(--hv-system); }

.fx__chip {
    position: absolute;
    right: -1.5rem;
    bottom: -1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1rem;
    background: var(--hv-white);
    border-radius: calc(var(--th-radius, 0px) * 0.6);
    box-shadow: 0 18px 40px -16px rgba(3, 13, 40, 0.5);
    border-left: 4px solid var(--hv-system);
}
.fx__chip span { font-size: 0.75rem; color: var(--hv-muted); }
.fx__chip b    { font-size: 0.9375rem; color: var(--hv-ink); }

/* Accordion */
.fx__item {
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 3px solid var(--hv-line);
    transition: border-color 200ms ease;
}
.fx__item + .fx__item { margin-top: 0.5rem; }
.fx__item.is-active { border-left-color: var(--hv-system); }

.fx__head { margin: 0; }
.fx__btn {
    display: block;
    width: 100%;
    padding: 0.625rem 0;
    font: inherit;
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: left;
    color: var(--hv-ink);
    background: none;
    border: 0;
    cursor: pointer;
    scroll-margin-top: 6.5rem;
}
.fx__item.is-active .fx__btn { color: var(--hv-system); }
.fx__btn:hover { color: var(--hv-system); }
.fx__btn:focus-visible { outline: 2px solid var(--hv-system); outline-offset: 4px; }

.fx__panel p { margin: 0 0 0.75rem; color: var(--hv-muted); max-width: 46ch; }
.fx.is-js .fx__item:not(.is-active) .fx__panel { display: none; }

.fx__close { margin: 1.75rem 0 1rem; font-weight: 800; color: var(--hv-ink); }

@media (max-width: 900px) {
    .fx { grid-template-columns: 1fr; }
    .fx__media { min-height: 0; padding: 2rem 1.5rem 3rem; }
    .fx__chip { right: -0.5rem; }
}
@media (max-width: 600px) {
    /* No room to overlap: the chip sits under the card */
    .fx__chip { position: relative; right: auto; bottom: auto; width: fit-content; margin: 0.75rem 0 0 auto; }
    .fx__card { padding-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .fx.is-js .fx__view,
    .fx.is-js .fx__view.is-active { transition: none; transform: none; }
}

.hv-actions { grid-column: 4 / 13; margin-top: 1.5rem; }
@media (max-width: 1024px) { .hv-actions { grid-column: 3 / 13; } }
@media (max-width: 640px)  { .hv-actions { grid-column: 1 / -1; } }

/* ---------- Explorer variants and card parts ---------- */
.fx--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.fx--flip .fx__media { order: 2; }

.fx__rows { margin: 0; padding: 0; list-style: none; }
.fx__rows li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--hv-line);
    font-size: 0.9375rem;
}
.fx__rows li:first-child { border-top: 0; }
.fx__rows span { color: var(--hv-muted); }
.fx__rows b { text-align: right; font-weight: 700; }
.fx__rows s { color: var(--hv-muted); font-weight: 500; }
.fx__rows .is-ok b { color: var(--hv-system); }
.fx__rows .is-ok b::before { content: "✓"; display: inline-block; margin-right: 0.375rem; }
.fx__rows .is-tag b {
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    color: var(--hv-system);
    background: color-mix(in srgb, var(--hv-system) 10%, #FFFFFF);
    border-radius: 999px;
}

.fx__chart { display: block; width: 100%; height: auto; margin-bottom: 0.5rem; overflow: visible; }
.fx__chart-band  { fill: var(--hv-event); opacity: 0.12; }
.fx__chart-axis  { stroke: var(--hv-line); stroke-width: 1.5; fill: none; }
.fx__chart-tm    { stroke: #9AA3AD; stroke-width: 3; fill: none; }
.fx__chart-fixed { stroke: var(--hv-system); stroke-width: 4; fill: none; stroke-linejoin: round; }
.fx__legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 0.75rem; font-size: 0.75rem; color: var(--hv-muted); }
.fx__legend span::before { content: ""; display: inline-block; width: 0.875rem; height: 3px; margin-right: 0.375rem; vertical-align: middle; }
.fx__legend .is-fixed::before { background: var(--hv-system); }
.fx__legend .is-tm::before    { background: #9AA3AD; }
.fx__legend .is-band::before  { height: 0.625rem; background: color-mix(in srgb, var(--hv-event) 20%, #FFFFFF); }

.fx__fakebtns { display: flex; gap: 0.5rem; margin: 1rem 0 0; }
.fx__fakebtns span {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--hv-system);
    border: 1px solid color-mix(in srgb, var(--hv-system) 35%, #FFFFFF);
    border-radius: 999px;
}
.fx__fakebtns .is-primary { color: #FFFFFF; background: var(--hv-system); border-color: var(--hv-system); }

.fx__panel ul { margin: 0 0 0.875rem; padding: 0; list-style: none; }
.fx__panel li {
    padding: 0.5rem 0;
    border-top: 1px solid var(--hv-line);
    font-size: 0.9375rem;
    color: var(--hv-ink);
}
.fx__panel .ed-link { display: inline-block; margin-bottom: 0.75rem; font-weight: 700; }

@media (max-width: 900px) {
    .fx--flip { grid-template-columns: 1fr; }
    .fx--flip .fx__media { order: 0; }
}

/* ---------- Card animation: plays each time a preview opens ----------
   Carried over from the old visuals: the "today" line is struck through and
   the joined-up line arrives; rows tick in one by one; the stage bar fills;
   the pricing chart draws; the chip lands last. */
@keyframes fx-up    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fx-fill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fx-fade  { from { opacity: 0; } }
@keyframes fx-pop   { 0% { opacity: 0; transform: translateY(14px) scale(0.92); } 70% { transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes fx-strike {
    from { text-decoration-color: transparent; opacity: 1; }
    to   { text-decoration-color: var(--hv-event); opacity: 0.6; }
}

.fx__before { text-decoration: line-through; text-decoration-color: var(--hv-event); text-decoration-thickness: 2px; }
/* inline-block stops the strike-through reaching the label */
.fx__before span { display: inline-block; width: 100%; }
.fx__steps li { position: relative; }
.fx__steps li.is-now::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hv-system);
    transform-origin: left center;
}
.fx__chart-tm,
.fx__chart-fixed { stroke-dasharray: 1; }

.fx.is-in .fx__view.is-active .fx__steps li.is-now::after { animation: fx-fill 600ms var(--hv-ease) 150ms both; }
.fx.is-in .fx__view.is-active .fx__title   { animation: fx-up 450ms var(--hv-ease) 100ms both; }
.fx.is-in .fx__view.is-active .fx__before  { animation: fx-up 450ms var(--hv-ease) 250ms both, fx-strike 500ms ease 900ms both; }
.fx.is-in .fx__view.is-active .fx__after   { animation: fx-up 500ms var(--hv-ease) 1300ms both; }
.fx.is-in .fx__view.is-active .fx__rows li { animation: fx-up 420ms var(--hv-ease) both; }
.fx.is-in .fx__view.is-active .fx__rows li:nth-child(1) { animation-delay: 250ms; }
.fx.is-in .fx__view.is-active .fx__rows li:nth-child(2) { animation-delay: 550ms; }
.fx.is-in .fx__view.is-active .fx__rows li:nth-child(3) { animation-delay: 850ms; }
.fx.is-in .fx__view.is-active .fx__rows li:nth-child(4) { animation-delay: 1150ms; }
.fx.is-in .fx__view.is-active .fx__chart-tm    { animation: fx-draw 1600ms ease-in-out 200ms both; }
.fx.is-in .fx__view.is-active .fx__chart-fixed { animation: fx-draw 1600ms ease-in-out 300ms both; }
.fx.is-in .fx__view.is-active .fx__chart-band  { animation: fx-fade 500ms ease 1000ms both; }
.fx.is-in .fx__view.is-active .fx__chart ~ .fx__rows li { animation-delay: 1800ms; }
.fx.is-in .fx__view.is-active .fx__fakebtns    { animation: fx-up 420ms var(--hv-ease) 1300ms both; }
.fx.is-in .fx__view.is-active .fx__chip        { animation: fx-pop 600ms var(--hv-ease) 1700ms both; }

/* Animations only run once the explorer is on screen (.is-in); until then,
   or if that never happens, the cards simply show in their final state. */

@media (prefers-reduced-motion: reduce) {
    .fx.is-in .fx__view.is-active *,
    .fx.is-in .fx__view.is-active .fx__steps li.is-now::after { animation: none !important; }
}

/* ---------- Team: people as cards (Salesforce-page card pattern) ---------- */
.th-midnight .ed-people {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: var(--ed-block);
}
.th-midnight .ed-people .ed-person {
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: var(--th-radius, 0);
    background: color-mix(in srgb, currentColor 5%, transparent);
}
.th-midnight .ed-people .ed-person img { border-radius: calc(var(--th-radius, 0px) * 0.6); }
@media (max-width: 800px) {
    .th-midnight .ed-people { grid-template-columns: 1fr; }
}

/* ---------- FAQ: centred, Salesforce-page style ---------- */
.th-midnight .ed-section:has(.ed-faq) .ed-h2 { grid-column: 1 / -1; text-align: center; margin-inline: auto; }
.th-midnight .ed-faq {
    grid-column: 3 / 11;
    margin-top: 2rem;
    border-top: 0;
}
.th-midnight .ed-faq details {
    margin-bottom: 0.75rem;
    padding: 0 1.25rem;
    background: var(--hv-white);
    border: 1px solid var(--hv-line);
    border-radius: calc(var(--th-radius, 0px) * 0.75);
    box-shadow: var(--th-soft-shadow, none);
}
.th-midnight .ed-faq details[open] summary { color: var(--hv-system); }
@media (max-width: 900px) {
    .th-midnight .ed-faq { grid-column: 1 / -1; }
}


.th-midnight .ed-person--team { grid-column: 1 / -1; grid-template-columns: 1fr; }
.ed-person__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.ed-person__skills li {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
}

/* ---------- Client logos (trust strip) ----------
   Brand colours vary, so every logo is shown in greyscale at one height;
   white-on-dark logos (.is-light) are inverted to read on the white strip. */
.tr__logos {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem clamp(2rem, 5vw, 4rem);
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}
.tr__logos img {
    display: block;
    width: auto;
    height: 2.75rem;
    max-width: 11rem;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.8;
    transition: opacity 200ms ease;
}
.tr__logos .is-light img { filter: invert(1) grayscale(1); }
.tr__logos .is-tall img { height: 3.75rem; }   /* small wordmark under a large monogram */
.tr__logos img:hover { opacity: 1; }

.hv-trust .tr__sub {
    grid-column: 1 / -1;
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hv-muted);
}

/* ---------- Forms: two-up rows, message box, consent ---------- */
.ed-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 480px) { .ed-field-row { grid-template-columns: 1fr; } }

.th-midnight .ed-field textarea {
    font: inherit;
    font-size: 1.0625rem;
    width: 100%;
    min-height: 6rem;
    padding: 0.5rem 0;
    resize: vertical;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--th-line);
    border-radius: 0;
}
.th-midnight .ed-field textarea::placeholder { color: var(--ed-navy-50); }

.ed-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: var(--th-muted);
    cursor: pointer;
}
.ed-consent input { margin-top: 0.2rem; accent-color: var(--th-blue); }

/* ---------- Direct contact lines (hero) ---------- */
.ct-direct {
    display: grid;
    gap: 0.625rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.85);
}
.ct-direct li { display: flex; gap: 1rem; align-items: baseline; }
.ct-direct span {
    flex: none;
    width: 4rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}
.ed-page.th-midnight .ct-direct a { color: #FFFFFF !important; font-weight: 700; }

/* ---------- Closing block text and "get in touch" cards ---------- */
.th-midnight .ed-close .ed-h2 { color: #FFFFFF; }
.ct-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: var(--ed-block) 0 0;
    padding: 0;
    list-style: none;
}
.ct-card {
    padding: 1.5rem;
    color: var(--th-ink);
    background: var(--th-white);
    border-radius: var(--th-radius);
    box-shadow: 0 30px 70px -30px rgba(3, 13, 40, 0.6);
}
.ed-page .ct-card h3 { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--th-muted); }
.ed-page.th-midnight .ct-card a {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--th-blue) !important;
    text-decoration: none;
    word-break: break-word;
}
.ct-card p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--th-muted); }
.ct-card .ct-card__strong { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--th-ink); }
.ct-back { margin-top: 2rem; }
@media (max-width: 900px) { .ct-cards { grid-template-columns: 1fr; } }

/* ---------- Card part: a signature that draws itself ---------- */
.fx__sign {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--hv-line);
    font-size: 0.75rem;
    color: var(--hv-muted);
}
.fx__sign svg { width: 9rem; height: 2.25rem; }
.fx__sign path {
    fill: none;
    stroke: var(--hv-ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1;
}
.fx.is-in .fx__view.is-active .fx__sign path { animation: fx-draw 1200ms ease-in-out 1500ms both; }
@media (prefers-reduced-motion: reduce) { .fx.is-in .fx__view.is-active .fx__sign path { animation: none !important; } }

/* ---------- Hero with breadcrumb and a form: the tall form must not stretch
   the headline and copy rows apart; a spare last row takes the extra height ---------- */
@media (min-width: 769px) {
    .th-midnight .ed-hero:has(.ed-breadcrumb):has(.ed-hero__aside.ed-inquiry) .ed-wrap { grid-template-rows: auto auto auto 1fr; }
    .th-midnight .ed-hero:has(.ed-breadcrumb) .ed-hero__aside.ed-inquiry { grid-row: 2 / span 3; }
    .th-midnight .ed-hero:has(.ed-breadcrumb):has(.ed-hero__aside.ed-inquiry) .ed-hero__copy { align-self: start; }
}
.th-midnight .ct-back { grid-column: 1 / -1; }

/* ---------- Hero chips: jump links under the hero copy ---------- */
.ed-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.ed-page.th-midnight .ed-chips a {
    display: inline-block;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #FFFFFF !important;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    transition: background-color 200ms ease, border-color 200ms ease;
}
.ed-page.th-midnight .ed-chips a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); }

/* ---------- Explorer on a navy section ---------- */
.th-midnight .ed-section--navy .fx__item { border-left-color: rgba(255, 255, 255, 0.18); }
.th-midnight .ed-section--navy .fx__item.is-active { border-left-color: var(--th-blue-light); }
.th-midnight .ed-section--navy .fx__btn { color: #FFFFFF; }
.th-midnight .ed-section--navy .fx__btn:hover,
.th-midnight .ed-section--navy .fx__item.is-active .fx__btn { color: var(--th-blue-light); }
.th-midnight .ed-section--navy .fx__panel p { color: rgba(255, 255, 255, 0.74); }
.th-midnight .ed-section--navy .fx__panel li { color: #FFFFFF; border-top-color: rgba(255, 255, 255, 0.14); }
.th-midnight .ed-section--navy .fx__close { color: #FFFFFF; }
.th-midnight .ed-section--navy .fx__media { box-shadow: 0 40px 100px -40px rgba(1, 118, 211, 0.7); }

/* Explorer lists: inline code and links in panels */
.fx__panel code { font-size: 0.875em; }
.fx__close a { text-decoration-color: var(--hv-system); }

/* ---------- Card parts: speed meter, migration board, progress, code ---------- */
.fx__meter {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}
.fx__meter span { color: var(--hv-muted); }
.fx__meter b { font-weight: 800; color: var(--hv-system); }
.fx__meter b s { margin-right: 0.375rem; color: var(--hv-event); font-weight: 600; }
.fx__meter i {
    grid-column: 1 / -1;
    order: 3;
    display: block;
    height: 0.5rem;
    width: var(--to);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hv-system), #1B96FF);
}

.fx__rows--flip b { display: inline-grid; }
.fx__rows--flip b > * { grid-area: 1 / 1; text-align: right; }
.fx__rows--flip s { color: var(--hv-event); font-weight: 600; opacity: 0; }
.fx__rows--flip em { font-style: normal; color: var(--hv-system); }
.fx__rows--flip em::before { content: "\2713\00a0"; }

.fx__progress { margin-top: 0.875rem; font-size: 0.75rem; color: var(--hv-muted); }
.fx__progress i {
    display: block;
    height: 0.5rem;
    margin-bottom: 0.375rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hv-system), #1B96FF) 0 0 / 100% 100% no-repeat, var(--hv-line);
}

.fx__code {
    margin: 0 0 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    color: #E5F1FC;
    background: #0B132B;
    border-radius: 8px;
    overflow-x: auto;
}

@keyframes fx-shrink { from { width: var(--from); } to { width: var(--to); } }
@keyframes fx-grow   { from { background-size: 0% 100%, auto; } to { background-size: 100% 100%, auto; } }
@keyframes fx-out    { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes fx-in     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.fx.is-in .fx__view.is-active .fx__meter i { animation: fx-shrink 1400ms var(--hv-ease) 400ms both; }
.fx.is-in .fx__view.is-active .fx__meter b s { animation: fx-fade 300ms ease 200ms both; }
.fx.is-in .fx__view.is-active .fx__rows--flip s { animation: fx-in 300ms ease both, fx-out 300ms ease both; }
.fx.is-in .fx__view.is-active .fx__rows--flip em { animation: fx-in 350ms var(--hv-ease) both; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(1) s  { animation-delay: 300ms, 700ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(1) em { animation-delay: 850ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(2) s  { animation-delay: 550ms, 1000ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(2) em { animation-delay: 1150ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(3) s  { animation-delay: 800ms, 1300ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(3) em { animation-delay: 1450ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(4) s  { animation-delay: 1050ms, 1600ms; }
.fx.is-in .fx__view.is-active .fx__rows--flip li:nth-child(4) em { animation-delay: 1750ms; }
.fx.is-in .fx__view.is-active .fx__progress i { animation: fx-grow 1700ms ease-in-out 300ms both; }
.fx.is-in .fx__view.is-active .fx__code { animation: fx-up 420ms var(--hv-ease) 200ms both; }

@media (prefers-reduced-motion: reduce) {
    .fx.is-in .fx__view.is-active :is(.fx__meter i, .fx__meter b s, .fx__rows--flip s, .fx__rows--flip em, .fx__progress i, .fx__code) { animation: none !important; }
}

/* ---------- Comparison table: our column highlighted, ticks in on view ----------
   js/explorer.js adds .is-armed then .is-in ([data-reveal]); without JS it is static. */
.th-midnight .ed-versus th:last-child,
.th-midnight .ed-versus td:last-child {
    background: var(--th-highlight);
    color: var(--th-ink);
}
.th-midnight .ed-versus thead th:last-child { color: var(--th-blue); }
.th-midnight .ed-versus td:last-child::before {
    content: "\2713";
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: 800;
    color: var(--th-blue);
}
.ed-versus.is-armed:not(.is-in) tbody tr { opacity: 0; transform: translateY(8px); }
.ed-versus.is-in tbody tr { transition: opacity 400ms ease, transform 500ms var(--hv-ease); }
.ed-versus.is-in tbody tr:nth-child(2) { transition-delay: 100ms; }
.ed-versus.is-in tbody tr:nth-child(3) { transition-delay: 200ms; }
.ed-versus.is-in tbody tr:nth-child(4) { transition-delay: 300ms; }
.ed-versus.is-in tbody tr:nth-child(5) { transition-delay: 400ms; }
.ed-versus.is-in tbody tr:nth-child(6) { transition-delay: 500ms; }
.ed-versus.is-in tbody tr:nth-child(7) { transition-delay: 600ms; }

/* ---------- Closing block actions ---------- */
.ed-close__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-top: 2rem;
}
.ed-page.th-midnight .ed-close__alt {
    color: #FFFFFF !important;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
    text-underline-offset: 0.3em;
}

/* One consultant plus the delivery team: side by side */
.th-midnight .ed-people--pair .ed-person--team { grid-column: auto; }

/* Other named people (About): a quiet strip under the main cards, small round photos */
.ed-crew {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.ed-page .ed-crew__label {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.74;
}
.ed-crew__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ed-crew__list li { display: flex; gap: 0.875rem; align-items: flex-start; }
.ed-crew__list img {
    flex: none;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    filter: grayscale(1) contrast(1.05);
}
.ed-crew__list p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
}
.ed-crew__list b { display: block; font-size: 0.9375rem; }
.ed-crew__list span { color: color-mix(in srgb, currentColor 74%, transparent); }
@media (max-width: 800px) {
    .ed-crew__list { grid-template-columns: 1fr; }
}

/* ---------- Card parts: message bubble, "one price" bracket ---------- */
.fx__msg {
    position: relative;
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
    color: var(--hv-ink);
    background: #DCF8C6;
    border-radius: 12px 12px 12px 2px;
}
.fx__bracket {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--hv-system);
    background: color-mix(in srgb, var(--hv-system) 10%, #FFFFFF);
    border-left: 3px solid var(--hv-system);
    border-radius: 0 8px 8px 0;
}
.fx.is-in .fx__view.is-active .fx__msg     { animation: fx-pop 500ms var(--hv-ease) 200ms both; }
.fx.is-in .fx__view.is-active .fx__bracket { animation: fx-up 450ms var(--hv-ease) 1450ms both; }
@media (prefers-reduced-motion: reduce) {
    .fx.is-in .fx__view.is-active :is(.fx__msg, .fx__bracket) { animation: none !important; }
}

/* ---------- Coverage cards (Salesforce resource-card pattern) ---------- */
.cov-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: var(--ed-block) 0 0;
    padding: 0;
    list-style: none;
}
.cov-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    color: var(--th-ink);
    background: var(--th-white);
    border-radius: var(--th-radius);
    box-shadow: 0 30px 70px -34px rgba(1, 118, 211, 0.6);
}
.ed-page .cov-card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 800; letter-spacing: -0.01em; }
.cov-card p { margin: 0; font-size: 0.9375rem; color: var(--th-muted); }
.cov-card .cov-card__job {
    margin-top: auto;
    padding-top: 1rem;
    font-weight: 700;
    color: var(--th-ink);
}
.cov-card__job span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--th-blue);
}
.cov-cards.is-armed:not(.is-in) .cov-card { opacity: 0; transform: translateY(14px); }
.cov-cards.is-in .cov-card { transition: opacity 450ms ease, transform 550ms var(--hv-ease); }
.cov-cards.is-in .cov-card:nth-child(2) { transition-delay: 80ms; }
.cov-cards.is-in .cov-card:nth-child(3) { transition-delay: 160ms; }
.cov-cards.is-in .cov-card:nth-child(4) { transition-delay: 240ms; }
.cov-cards.is-in .cov-card:nth-child(5) { transition-delay: 320ms; }
.cov-cards.is-in .cov-card:nth-child(6) { transition-delay: 400ms; }
@media (max-width: 900px) { .cov-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cov-cards { grid-template-columns: 1fr; } }

/* Coverage cards: optional link to a service page */
.ed-page.th-midnight .cov-card__link {
    margin-top: 1rem;
    font-weight: 800;
    color: var(--th-blue) !important;
    text-decoration: underline;
    text-underline-offset: 0.3em;
}
.cov-card .cov-card__job + .cov-card__link { margin-top: 0.75rem; }
.cov-card p:not([class]) + .cov-card__link { margin-top: auto; padding-top: 1rem; }

/* Coverage card part: a progress bar that stops at the coverage figure */
.fx__progress--cov i { background-size: 92% 100%, auto; }
@keyframes fx-cov { from { background-size: 0% 100%, auto; } to { background-size: 92% 100%, auto; } }
.fx.is-in .fx__view.is-active .fx__progress--cov i { animation-name: fx-cov; }

/* Handover comparison (.hc, home-visuals.css) outside the homepage */
.th-midnight .hc__rows {
    border: 0;
    border-radius: var(--th-radius);
    overflow: hidden;
    box-shadow: 0 40px 100px -30px rgba(1, 118, 211, 0.6);
}
.th-midnight .hc__link i::after { background: var(--th-ink); }
.th-midnight .ed-section--navy .hc { color: var(--th-ink); }

/* ---------- Card variant: a phone (web development) ---------- */
.fx__card--phone {
    width: min(100%, 17rem);
    margin-inline: auto;
    padding: 1.75rem 1.125rem 2.75rem;
    border: 8px solid #0B132B;
    border-radius: 32px;
}
.fx__card--phone::before {
    content: "";
    display: block;
    width: 4.5rem;
    height: 0.375rem;
    margin: -1rem auto 1rem;
    border-radius: 999px;
    background: #0B132B;
}
.fx__card--phone .fx__title { font-size: 1.125rem; }
.fx__view:has(.fx__card--phone) .fx__chip { right: -0.5rem; }

/* Search ranking: your business climbs to the top */
.fx__rank { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.fx__rank li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    column-gap: 0.5rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--hv-line);
    font-size: 0.875rem;
    counter-increment: rank;
}
.fx__rank li::before { content: counter(rank) "."; grid-row: span 2; font-weight: 800; color: var(--hv-muted); }
.fx__rank b { font-weight: 700; }
.fx__rank span { font-size: 0.75rem; color: var(--hv-muted); }
.fx__rank .is-you { background: color-mix(in srgb, var(--hv-system) 10%, #FFFFFF); border-radius: 8px; padding-inline: 0.5rem; }
.fx__rank .is-you b { color: var(--hv-system); }

/* Reviews */
.fx__stars { margin: 0; padding: 0; list-style: none; }
.fx__stars li { padding: 0.5rem 0; border-top: 1px solid var(--hv-line); font-size: 0.875rem; }
.fx__stars b { display: block; color: #F5A623; letter-spacing: 0.05em; }
.fx__stars span { color: var(--hv-muted); }

@keyframes fx-climb { from { transform: translateY(200%); } to { transform: none; } }
.fx.is-in .fx__view.is-active .fx__rank .is-you { animation: fx-climb 900ms var(--hv-ease) 400ms both; position: relative; z-index: 1; }
.fx.is-in .fx__view.is-active .fx__rank li:not(.is-you) { animation: fx-up 420ms var(--hv-ease) 200ms both; }
.fx.is-in .fx__view.is-active .fx__stars li { animation: fx-pop 500ms var(--hv-ease) both; }
.fx.is-in .fx__view.is-active .fx__stars li:nth-child(2) { animation-delay: 300ms; }
.fx.is-in .fx__view.is-active .fx__stars li:nth-child(3) { animation-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
    .fx.is-in .fx__view.is-active :is(.fx__rank li, .fx__stars li) { animation: none !important; }
}

/* Coverage card part: a short bullet list */
.cov-card__list { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.cov-card__list li {
    padding: 0.375rem 0;
    border-top: 1px solid var(--th-line);
    font-size: 0.875rem;
    color: var(--th-ink);
}

/* Explorer panel: a list of links (blog reading lists) */
.fx__links { margin: 0 0 0.75rem; padding: 0; list-style: none; }
.fx__panel .fx__links li { padding: 0.5rem 0; }
.ed-page.th-midnight .fx__links a { font-weight: 700; color: var(--th-blue) !important; text-decoration: none; }
.ed-page.th-midnight .fx__links a:hover { text-decoration: underline; }

/* Hero chips that are labels, not links */
.ed-chips--static span {
    display: inline-block;
    padding: 0.4rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}
.ed-hero .ed-chips--static + .ed-actions { margin-top: 1.75rem; }

/* ==========================================================================
   Blog index: article cards as Salesforce-style resource cards
   ========================================================================== */
.th-midnight .blog-container { padding-top: var(--ed-section); padding-bottom: var(--ed-section); }
.th-midnight .blog-section-title { font-family: var(--ed-font); font-weight: 800; letter-spacing: -0.02em; color: var(--th-ink); }
.th-midnight .blog-section-title::before { display: none; }

.th-midnight .blog-card,
.th-midnight .blog-card--featured {
    border: 1px solid var(--th-line);
    border-top: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    box-shadow: var(--th-soft-shadow);
    transition: transform 220ms var(--ed-ease), box-shadow 220ms ease;
}
.th-midnight .blog-card:hover {
    border-color: var(--th-line);
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(11, 19, 43, 0.06), 0 24px 48px -20px rgba(1, 118, 211, 0.45);
}
.th-midnight .blog-card--hero {
    color: #FFFFFF;
    background:
        radial-gradient(60% 70% at 85% 10%, rgba(27, 150, 255, 0.45), transparent 70%),
        var(--th-ink);
    border-color: transparent;
}
.th-midnight .blog-card--hero :is(.blog-card__title, .blog-card__excerpt, .blog-card__meta) { color: #FFFFFF; }
.th-midnight .blog-card--hero .blog-card__excerpt { color: rgba(255, 255, 255, 0.78); }
.th-midnight .blog-card--hero .blog-card__link { color: #FFFFFF; }

.th-midnight .blog-card__title { font-family: var(--ed-font); font-weight: 800; letter-spacing: -0.015em; }
.th-midnight .blog-card__title a { color: inherit; }
.th-midnight .blog-card__title a::after { display: none; }
.th-midnight .blog-card__title a:hover { color: var(--th-blue); }
.th-midnight .blog-card--hero .blog-card__title a:hover { color: #6FC1FF; }

.th-midnight .blog-card__tag {
    color: var(--th-blue);
    background: var(--th-highlight);
    border: 0;
    border-radius: 999px;
}
.th-midnight .blog-card--hero .blog-card__tag { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); }
.th-midnight .blog-card__link { font-weight: 800; color: var(--th-blue); }

/* Cards rise in on scroll ([data-reveal], js/explorer.js) */
.blog-grid.is-armed:not(.is-in) .blog-card { opacity: 0; transform: translateY(14px); }
.blog-grid.is-in .blog-card { transition: opacity 450ms ease, transform 550ms var(--hv-ease), box-shadow 220ms ease; }
.blog-grid.is-in .blog-card:nth-child(2) { transition-delay: 80ms; }
.blog-grid.is-in .blog-card:nth-child(3) { transition-delay: 160ms; }
.blog-grid.is-in .blog-card:nth-child(4) { transition-delay: 240ms; }
.blog-grid.is-in .blog-card:nth-child(5) { transition-delay: 320ms; }
.blog-grid.is-in .blog-card:nth-child(6) { transition-delay: 400ms; }

/* theme-soro colours every <a> through a long :not() chain; opt the card links out */
.ed-page.th-midnight .blog-card__title a { color: var(--th-ink) !important; }
.ed-page.th-midnight .blog-card__title a:hover { color: var(--th-blue) !important; }
.ed-page.th-midnight .blog-card--hero .blog-card__title a,
.ed-page.th-midnight .blog-card--hero .blog-card__link { color: #FFFFFF !important; }
.ed-page.th-midnight .blog-card--hero .blog-card__title a:hover { color: #6FC1FF !important; }

/* ==========================================================================
   Blog posts (body.page--blog): styling only, so posts stay in sync with
   their .md sources. js/blog.js adds the contents sidebar, CTA card, author
   photo and closing block.
   ========================================================================== */
.page--blog.th-midnight { background: var(--th-white); }

/* Header band: breadcrumb, title, description */
.page--blog.th-midnight .page-header { padding: calc(5rem + clamp(2.5rem, 4vw, 3.5rem)) 0 clamp(3rem, 6vw, 4.5rem); }
.page--blog.th-midnight .page-header__title {
    max-width: 22ch;
    margin: 1rem 0 0;
    font-family: var(--ed-font);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #FFFFFF;
}
.page--blog.th-midnight .page-header__description { max-width: 60ch; margin-top: 1.25rem; color: rgba(255, 255, 255, 0.74); }
.page--blog.th-midnight .page-header__breadcrumb,
.page--blog.th-midnight .page-header__breadcrumb a { color: rgba(255, 255, 255, 0.74) !important; }

/* The article's own H1 and second breadcrumb repeat the header band:
   kept for search engines and screen readers, hidden visually */
.page--blog.th-midnight main article > h1,
.page--blog.th-midnight .post-main > h1,
.page--blog.th-midnight .blog-article__title,
.page--blog.th-midnight .blog-breadcrumb {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.page--blog.th-midnight .blog-article__header { padding: 0; background: none; border: 0; }

/* Reading column */
.page--blog.th-midnight main { font-family: var(--font-primary); }
.page--blog.th-midnight main article,
.page--blog.th-midnight .blog-article__content {
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) var(--ed-gutter) clamp(3rem, 6vw, 5rem);
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--th-ink);
    font-size: 1.0625rem;
    line-height: 1.75;
}
.page--blog.th-midnight .blog-article { background: none; box-shadow: none; border: 0; max-width: none; }
.page--blog.th-midnight .post-main { max-width: 46rem; margin: 0 auto; }

.page--blog.th-midnight main article h2,
.page--blog.th-midnight .blog-article__content h2 {
    margin: 3rem 0 1rem;
    font-family: var(--ed-font);
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--th-ink);
}
.page--blog.th-midnight main article h3,
.page--blog.th-midnight .blog-article__content h3 { font-family: var(--ed-font); font-weight: 800; color: var(--th-ink); }
.page--blog.th-midnight main article p,
.page--blog.th-midnight main article li { color: var(--th-ink); }
.page--blog.th-midnight main article a:not(.ed-cta):not(.btn) { text-decoration: underline; text-decoration-color: var(--th-blue); text-underline-offset: 0.2em; }

/* Images and tables as cards */
.page--blog.th-midnight .blog-feature-image img,
.page--blog.th-midnight main article img:not(.author-photo) { border-radius: var(--th-radius); }
.page--blog.th-midnight main article table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    box-shadow: var(--th-soft-shadow);
    font-size: 0.9375rem;
}
/* On phones a wide table scrolls inside its card instead of widening the page */
@media (max-width: 768px) {
    .page--blog.th-midnight main article table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
.page--blog.th-midnight main article th { background: var(--th-pale); color: var(--th-ink); text-align: left; }
.page--blog.th-midnight main article :is(th, td) { padding: 0.75rem 1rem; border: 0; border-bottom: 1px solid var(--th-line); }
.page--blog.th-midnight main article tr:last-child td { border-bottom: 0; }

/* TL;DR: a lit card */
.page--blog.th-midnight section#tldr:not(:has(.tldr-box)),
.page--blog.th-midnight .tldr-box {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    font-style: normal;
    color: var(--th-ink);
    background: var(--th-highlight);
    border: 0;
    border-left: 4px solid var(--th-blue);
    border-radius: 0 var(--th-radius) var(--th-radius) 0;
    box-shadow: 0 24px 48px -32px rgba(1, 118, 211, 0.6);
}
.page--blog.th-midnight section#tldr:has(.tldr-box) { margin: 0; padding: 0; background: none; border: 0; }
.page--blog.th-midnight #tldr h2 { margin-top: 0; font-size: 1.25rem; }

/* Author: a team card */
.page--blog.th-midnight .author-box {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--th-white);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    box-shadow: var(--th-soft-shadow);
}
.page--blog.th-midnight .author-photo { flex: none; width: 4.5rem; height: 5.5rem; object-fit: cover; border-radius: 10px; }
.page--blog.th-midnight .author-info strong { font-family: var(--ed-font); font-size: 1.0625rem; color: var(--th-ink); }
.page--blog.th-midnight .author-role { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--th-blue); }
.page--blog.th-midnight .author-bio { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--th-muted); }
.page--blog.th-midnight .share-links { margin-left: auto; display: flex; gap: 0.5rem; }

/* Table of contents: a card in the flow; a sticky sidebar on wide screens */
.page--blog.th-midnight .toc {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--th-pale);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
}
.page--blog.th-midnight .toc strong { display: block; margin-bottom: 0.5rem; font-family: var(--ed-font); color: var(--th-ink); }
.page--blog.th-midnight .toc ul { margin: 0; padding: 0; list-style: none; }
.page--blog.th-midnight .toc li { margin: 0; padding: 0.25rem 0; font-size: 0.9375rem; line-height: 1.4; }
.ed-page.th-midnight.page--blog .toc a { color: var(--th-ink) !important; text-decoration: none !important; }
.ed-page.th-midnight.page--blog .toc a:hover,
.ed-page.th-midnight.page--blog .toc a.is-current { color: var(--th-blue) !important; }
.page--blog.th-midnight .toc a.is-current { font-weight: 700; }

.post-side { display: none; }
@media (min-width: 1200px) {
    .page--blog.th-midnight .post-grid {
        display: grid;
        grid-template-columns: minmax(0, 46rem) 16rem;
        justify-content: center;
        gap: 4rem;
    }
    .page--blog.th-midnight .post-main { margin: 0; }
    .page--blog.th-midnight .post-main .toc { display: none; }
    .post-side { display: block; }
    .page--blog.th-midnight .post-side .toc {
        position: sticky;
        top: 6.5rem;
        margin: 0;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        background: var(--th-white);
        box-shadow: var(--th-soft-shadow);
    }
}

/* FAQ items as cards */
.page--blog.th-midnight .faq-item {
    margin: 0 0 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--th-white);
    border: 1px solid var(--th-line);
    border-radius: calc(var(--th-radius) * 0.75);
    box-shadow: var(--th-soft-shadow);
}
.page--blog.th-midnight .faq-item h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; }
.page--blog.th-midnight .faq-item p { margin: 0; color: var(--th-muted); }
.page--blog.th-midnight .faq-item__question { font-family: var(--ed-font); font-weight: 700; color: var(--th-ink); background: none; }
.page--blog.th-midnight #faq.section { padding: 0; background: none; }
.page--blog.th-midnight #faq .container { padding: 0; max-width: none; }

/* Related resources as link cards */
.page--blog.th-midnight #internal-links ul,
.page--blog.th-midnight .related-articles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.page--blog.th-midnight #internal-links li { margin: 0; }
.ed-page.th-midnight.page--blog #internal-links li a,
.ed-page.th-midnight.page--blog .related-article-link {
    display: block;
    height: 100%;
    padding: 1rem 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--th-ink) !important;
    text-decoration: none !important;
    background: var(--th-white);
    border: 1px solid var(--th-line);
    border-radius: calc(var(--th-radius) * 0.75);
    box-shadow: var(--th-soft-shadow);
    transition: transform 200ms var(--ed-ease), box-shadow 200ms ease;
}
.ed-page.th-midnight.page--blog #internal-links li a:hover,
.ed-page.th-midnight.page--blog .related-article-link:hover {
    color: var(--th-blue) !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(11, 19, 43, 0.06), 0 20px 40px -20px rgba(1, 118, 211, 0.45);
}
.page--blog.th-midnight .related-article-link span { color: inherit; }
.page--blog.th-midnight .related-article-icon { display: none; }
@media (max-width: 640px) {
    .page--blog.th-midnight #internal-links ul,
    .page--blog.th-midnight .related-articles { grid-template-columns: 1fr; }
}

/* CTA card in the article (js/blog.js) and the posts' own CTA sections */
.post-cta,
.page--blog.th-midnight .blog-article__cta {
    margin: 2.5rem 0;
    padding: clamp(1.5rem, 3vw, 2rem);
    color: #FFFFFF;
    background:
        radial-gradient(60% 80% at 90% 0%, rgba(27, 150, 255, 0.45), transparent 70%),
        var(--th-ink);
    border: 0;
    border-radius: var(--th-radius);
    box-shadow: 0 30px 70px -30px rgba(1, 118, 211, 0.7);
}
.ed-page.th-midnight .post-cta p,
.page--blog.th-midnight .blog-article__cta :is(h2, p) { color: #FFFFFF; }
.page--blog.th-midnight .blog-article__cta h2 { margin-top: 0; }
.page--blog.th-midnight .blog-article__cta p { color: rgba(255, 255, 255, 0.82); }
.post-cta .post-cta__title { margin: 0 0 0.25rem; font-family: var(--ed-font); font-size: 1.375rem; font-weight: 800; letter-spacing: -0.015em; }
.ed-page.th-midnight .post-cta p:not([class]) { margin: 0; color: rgba(255, 255, 255, 0.8); }
.post-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; }
.ed-page.th-midnight .post-cta__link {
    font-weight: 700;
    color: #FFFFFF !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
    text-underline-offset: 0.3em;
}

/* Lead buttons outside .ed-page sections keep navy text */
.ed-page.th-midnight main article a.ed-cta,
.ed-page.th-midnight .post-close a.ed-cta { color: var(--th-on-cta) !important; text-decoration: none !important; }

/* The posts' own sign-off */
.page--blog.th-midnight main article > footer,
.page--blog.th-midnight .post-main > footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--th-line);
    font-size: 0.9375rem;
}

/* Legacy post template (.blog-post-page) caps main at 860px; open it up */
.page--blog.th-midnight.blog-post-page main { max-width: none; margin: 0; padding: 0; }
.page--blog.th-midnight.blog-post-page article { border-radius: 0; }
.page--blog.th-midnight section[id] { scroll-margin-top: 6.5rem; }

/* A feature image that is still a placeholder file is hidden, not shown as a grey box */
.page--blog .blog-feature-image:has(img[src*="placeholder"]) { display: none; }

/* ==========================================================================
   Thank you, 404, privacy policy
   ========================================================================== */

/* Thank you: a tick that draws itself */
.ty-tick { grid-column: 1 / -1; width: 3.5rem; height: 3.5rem; margin-bottom: 1.5rem; }
.ty-tick circle { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; }
.ty-tick path {
    fill: none;
    stroke: var(--th-blue-light, #1B96FF);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    animation: ty-draw 700ms var(--ed-ease) 300ms both;
}
@keyframes ty-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
.ty-hero .ed-actions { gap: 1.5rem; }

/* Card part: a step still pending (three pulsing dots) */
.fx__rows .is-pending b { display: inline-flex; gap: 0.25rem; }
.fx__rows .is-pending b i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--hv-faint);
    animation: fx-wait 1.2s ease-in-out infinite;
}
.fx__rows .is-pending b i:nth-child(2) { animation-delay: 150ms; }
.fx__rows .is-pending b i:nth-child(3) { animation-delay: 300ms; }
@keyframes fx-wait { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* 404: the broken-link card */
.nf-card {
    padding: 1.5rem;
    color: var(--th-ink);
    background: var(--th-white);
    border-radius: var(--th-radius);
    box-shadow: 0 40px 100px -24px rgba(1, 118, 211, 0.65), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.nf-card__head {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--th-line);
    font-size: 0.875rem;
}
.nf-card__head span { color: var(--th-muted); }
.nf-card__url {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    color: var(--th-muted);
    background: color-mix(in srgb, var(--th-leak) 7%, #FFFFFF);
    border-radius: 8px;
    overflow-wrap: anywhere;
}
.nf-card__url s { text-decoration-color: var(--th-leak); text-decoration-thickness: 2px; animation: fx-strike 500ms ease 700ms both; }
.nf-card .fx__rows li { animation: fx-up 420ms var(--hv-ease) both; }
.nf-card .fx__rows li:nth-child(1) { animation-delay: 1200ms; }
.nf-card .fx__rows li:nth-child(2) { animation-delay: 1450ms; }
.nf-card .fx__rows li:nth-child(3) { animation-delay: 1700ms; }

@media (prefers-reduced-motion: reduce) {
    .ty-tick path, .fx__rows .is-pending b i, .nf-card__url s, .nf-card .fx__rows li { animation: none !important; }
}

/* Privacy policy: the blog reading column, headings closer together */
.page--legal.th-midnight main article h2 { margin-top: 2.5rem; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.page--legal.th-midnight main article h3 { font-size: 1.0625rem; }
.page--legal.th-midnight main article hr { margin: 3rem 0 1.5rem; border: 0; border-top: 1px solid var(--th-line); }
.legal-help {
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    background: var(--th-highlight);
    border-left: 4px solid var(--th-blue);
    border-radius: 0 var(--th-radius) var(--th-radius) 0;
}
.page--legal.th-midnight main article .legal-help h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.legal-help p { margin: 0; }

.cov-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .cov-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .cov-cards--4 { grid-template-columns: 1fr; } }

/* Legacy list markers (styles.css) on top of the contents card and legal lists */
.page--blog.th-midnight .toc li::before,
.page--blog.th-midnight .toc li::marker { content: none; display: none; }
.page--legal.th-midnight .privacy-content li::before { content: none; display: none; }
.page--legal.th-midnight .privacy-content ul { padding-left: 1.25rem; list-style: disc; }
.page--legal.th-midnight .privacy-content { max-width: 72rem; }
.page--legal.th-midnight .privacy-content .toc ul { padding-left: 0; list-style: none; }
.page--legal.th-midnight .privacy-content .toc li { padding-left: 0; }
.page--legal.th-midnight .privacy-content h2 { border-top: 0; padding-top: 0; }

/* Reserve the author photo slot (js/blog.js inserts the image after first paint),
   so inserting it does not reflow the article: no layout shift */
.page--blog.th-midnight .author-box { position: relative; padding-left: 7.25rem; min-height: 8rem; }
.page--blog.th-midnight .author-photo { position: absolute; top: 1.25rem; left: 1.5rem; }

/* ---------- Accessible contrast (WCAG AA 4.5:1) ----------
   theme-soro colours links and small text with --primary-accent (#00a1e0,
   2.9:1 on white); under Midnight it becomes a darker Salesforce blue.
   Small blue labels on the pale blue panels use the same darker blue. */
.th-midnight {
    --primary-accent: #0B5CAB;
    --accent-cyan:    #0B5CAB;
    --medium-gray:    #64748B;
    --th-blue-text:   #0B5CAB;
}
.fx__after span,
.fx__rows .is-tag b,
.th-midnight .ed-versus thead th:last-child,
.th-midnight .blog-card__tag { color: var(--th-blue-text, #0B5CAB); }
.page--blog.th-midnight .blog-article__tag { background: var(--th-blue-text); color: #FFFFFF; }

/* Footer column headings are h2 for heading order; keep their original look */
.th-midnight .footer .footer__heading {
    margin: 0 0 1.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

/* ---------- Touch targets: at least 48px tall on phones and tablets ---------- */
@media (max-width: 1024px) {
    .fx__btn { min-height: 48px; }
    .ed-page.th-midnight .ed-chips a,
    .th-midnight .nav a.nav__link,
    .th-midnight .blog-card__link,
    .ed-page.th-midnight .ed-close__alt,
    .th-midnight :is(div, li) > a.ed-link {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
    }
    .th-midnight .nav :is(.nav__mega-trigger, .nav__dropdown-trigger) { min-height: 48px; }
    .th-midnight form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 48px; }
    .ed-consent input { width: 20px; height: 20px; flex-shrink: 0; }
}

/* ---------- Sticky mobile bar: Call button beside the main action ---------- */
@media (max-width: 768px) {
    .th-midnight .mobile-cta { display: flex; align-items: center; gap: 0.75rem; }
    .th-midnight .mobile-cta > :not(.mobile-cta__call) { flex: 1 1 auto; min-width: 0; }
    .th-midnight .mobile-cta__call {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 48px;
        padding: 0 1.1rem;
        border: 2px solid var(--th-ink);
        border-radius: 999px;
        color: var(--th-ink);
        font-weight: 800;
        text-decoration: none;
    }
}

/* ==========================================================================
   SECTION 6: Homepage visuals (was home-visuals.css)
   ========================================================================== */

/* ==========================================================================
   Homepage visuals (homepage only; the hero is untouched)
   Sections: credentials (.tr), problems / pricing / what we build (.fx
   explorers), people (.hc), FAQ, close (.bp). Driven by js/home-visuals.js.
   Without JS or with reduced motion, every visual shows its final state.

   Colours are ROLE tokens, so a palette is just a set of values:
     ink / muted / faint / line / grid   type, frames, hairlines
     system      Salesforce, architecture, structure
     connect     integrations, data paths, automation
     event       commerce, customer actions, transactions (rare, strong)
     transform   transformation, editorial details (rarer still)
     highlight   one soft highlight surface per visual
     bg-*        section backgrounds (the page rhythm)
   Defaults below are Wada #39 × #85; css/home-theme.css maps the live
   Midnight palette onto these tokens.
   ========================================================================== */

.hv {
    /* Wada #39 × #85 */
    --hv-ink:       #111314;
    --hv-muted:     #53636B;
    --hv-faint:     rgba(17, 19, 20, 0.42);
    --hv-line:      #C9D8DE;
    --hv-grid:      rgba(0, 91, 141, 0.08);
    --hv-white:     #FFFFFF;
    --hv-system:    #005B8D;
    --hv-connect:   #005B8D;
    --hv-on-connect:#FFFFFF;
    --hv-event:     #CC1236;
    --hv-on-event:  #FFFFFF;
    --hv-transform: #C56127;
    --hv-highlight: #F3E5D8;
    --hv-shadow:    #005B8D;
    --hv-cta:       #CC1236;
    --hv-on-cta:    #FFFFFF;
    --hv-cta-hover: #005B8D;
    --hv-on-cta-hover: #FFFFFF;
    --hv-store-bg:  #CC1236;
    --hv-store-ink: #FFFFFF;
    --hv-store-muted: rgba(255, 255, 255, 0.82);
    --hv-now-bg:    #C56127;
    --hv-now-ink:   #111314;
    --hv-bg-film:     #FFFFFF;
    --hv-bg-problems: #EDF5F7;
    --hv-bg-pricing:  #FFFFFF;
    --hv-bg-build:    #F8E2E6;
    --hv-bg-people:   #FAF5EE;
    --hv-bg-faq:      #FFFFFF;
    --hv-bg-close:    #DCECF2;
    --hv-ease: cubic-bezier(0.16, 1, 0.3, 1);

    color: var(--hv-ink);
}

/* ---------- Section themes ---------- */
.hv-film     { background: var(--hv-bg-film); }
.hv-problems { background: var(--hv-bg-problems); }
.hv-pricing  { background: var(--hv-bg-pricing); }
.hv-build    { background: var(--hv-bg-build); }
.hv-people   { background: var(--hv-bg-people); }
.hv-faq      { background: var(--hv-bg-faq); }
.hv-close    { background: var(--hv-bg-close); }
.hv-faq .ed-faq summary { color: var(--hv-ink); }

.hv .ed-h2 { color: var(--hv-ink); }
.hv .ed-lede,
.hv .ed-muted { color: var(--hv-muted); }
.hv .ed-link { text-decoration-color: var(--hv-connect); }
.hv p a:not(.ed-cta):not(.ed-link) { text-decoration-color: var(--hv-connect); }

.hv .ed-cta { background: var(--hv-cta); color: var(--hv-on-cta); }
.ed-page .hv a.ed-cta { color: var(--hv-on-cta) !important; }
.hv .ed-cta:hover { background: var(--hv-cta-hover); color: var(--hv-on-cta-hover); }
.ed-page .hv a.ed-cta:hover { color: var(--hv-on-cta-hover) !important; }

/* Shared panel: white, ink frame, hard offset in the system colour (no blur) */
.hc__rows,
.bp {
    background: var(--hv-white);
    border: 2px solid var(--hv-ink);
    box-shadow: 10px 10px 0 0 var(--hv-shadow);
}

.hc, .bp { grid-column: 1 / 13; margin: var(--ed-block) 0 0; }


.bp__legend,
.bp__kicker {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==========================================================================
   3. Handover chain (.hc)
   ========================================================================== */
.hc__row {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
}

.hc__row--direct { background: var(--hv-highlight); border-top: 2px solid var(--hv-ink); }

.hc__label { margin: 0; font-size: 1rem; font-weight: 800; }
.hc__label small { display: block; font-size: 0.75rem; font-weight: 600; color: var(--hv-muted); }

.hc__path {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hc__node {
    flex: none;
    padding: 0.45rem 0.7rem;
    border: 2px solid var(--hv-ink);
    background: var(--hv-white);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: box-shadow 400ms ease;
}

.hc__node--you { background: var(--hv-ink); color: var(--hv-white); }

.hc__node--person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
    white-space: normal;
    box-shadow: 0 0 0 3px var(--hv-connect);
}
.hc__node--person img { width: 2.5rem; height: 2.5rem; object-fit: cover; filter: grayscale(1); }
.hc__node--person b { display: block; font-size: 0.8125rem; }
.hc__node--person span { font-size: 0.75rem; font-weight: 600; color: var(--hv-muted); }

.hc__link {
    position: relative;
    flex: 1 1 0;
    min-width: 0.75rem;
    height: 2px;
    background: var(--hv-faint);
    transform-origin: left center;
}
.hc__link--long { height: 3px; background: var(--hv-connect); }
.hc__link i { position: absolute; inset: 0; opacity: 0; }
.hc__link i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    background: var(--hv-event);
}

/* ==========================================================================
   4. Bottleneck picker (.bp)
   ========================================================================== */
.bp {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.bp__options {
    margin: 0;
    padding: 1.5rem;
    border: 0;
    border-right: 2px solid var(--hv-ink);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.bp__legend { float: left; width: 100%; margin: 0 0 0.75rem; padding: 0; color: var(--hv-muted); }

.bp__option { display: block; cursor: pointer; }
.bp__option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp__option span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--hv-line);
    font-weight: 800;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.bp__option span::after { content: "→"; color: var(--hv-event); opacity: 0; transition: opacity 200ms ease; }
.bp__option:hover span { border-color: var(--hv-ink); }
.bp__option input:checked + span { background: var(--hv-system); border-color: var(--hv-system); color: var(--hv-white); }
.bp__option input:checked + span::after { opacity: 1; color: var(--hv-white); }
.bp__option input:focus-visible + span { outline: 3px solid var(--hv-connect); outline-offset: 2px; }

.bp__results { padding: 1.75rem 2rem 2rem; }
.bp__result[hidden] { display: none; }
.bp__result { animation: hv-result 450ms var(--hv-ease) both; }
.bp__kicker { margin: 0; color: var(--hv-muted); }
.bp__first {
    margin: 0.5rem 0 1rem;
    max-width: 28ch;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.bp__why { margin: 0 0 0.75rem; max-width: 52ch; color: var(--hv-muted); }
.bp__note {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: 0.3rem 0.6rem;
    background: var(--hv-highlight);
    font-size: 0.8125rem;
    font-weight: 700;
}

@keyframes hv-result {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Animation states
   ========================================================================== */
/* Panels rise */
.is-armed.hc .hc__rows { opacity: 0; transform: translate3d(0, 32px, 0); }
.is-in.hc .hc__rows { opacity: 1; transform: none; transition: opacity 800ms ease, transform 900ms var(--hv-ease); }

/* -- Handovers: the chain builds as the request is passed on -- */
.hc.is-armed .hc__node:not(.hc__node--you) { opacity: 0; transform: translate3d(0, 8px, 0); }
.hc.is-armed .hc__link { transform: scaleX(0); }
.hc.is-armed .hc__node--person { box-shadow: 0 0 0 3px transparent; }

.hc.is-in .hc__node:not(.hc__node--you) { opacity: 1; transform: none; transition: opacity 350ms ease var(--d), transform 450ms var(--hv-ease) var(--d), box-shadow 400ms ease var(--d); }
.hc.is-in .hc__node--person { box-shadow: 0 0 0 3px var(--hv-connect); }
.hc.is-in .hc__link { transform: none; transition: transform 450ms var(--hv-ease) var(--d); }
.hc.is-in .hc__link i { animation: hv-hop-x 600ms cubic-bezier(0.45, 0, 0.55, 1) var(--d) 1; }

@keyframes hv-hop-x {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to   { transform: translate3d(100%, 0, 0); opacity: 1; }
}

@keyframes hv-hop-y {
    from { transform: translate3d(0, 0, 0); opacity: 1; }
    to   { transform: translate3d(0, 100%, 0); opacity: 1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .hc__row { grid-template-columns: 1fr; gap: 1rem; }
    .hc__node { font-size: 0.75rem; padding: 0.4rem 0.5rem; }
}

@media (max-width: 768px) {
    .hc__rows, .bp { box-shadow: 6px 6px 0 0 var(--hv-shadow); }

    /* Handover rows become vertical chains */
    .hc__row { padding: 1.25rem; }
    .hc__path { flex-direction: column; align-items: flex-start; }
    .hc__link { flex: none; width: 2px; height: 1.25rem; margin-left: 1.25rem; transform-origin: top center; }
    .hc__link--long { width: 3px; height: 2.5rem; }
    .hc.is-armed .hc__link { transform: scaleY(0); }
    .hc.is-in .hc__link { transform: none; }
    .hc__link i::after { top: 0; left: 50%; }
    .hc.is-in .hc__link i { animation-name: hv-hop-y; }

    .bp { grid-template-columns: 1fr; }
    .bp__options { border-right: 0; border-bottom: 2px solid var(--hv-ink); }
    .bp__results { padding: 1.5rem 1.25rem; }
}

/* ==========================================================================
   Reduced motion: final state, no movement, no pulses
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hv *, .hv *::before, .hv *::after { transition: none !important; animation: none !important; }
    .hc__link i { display: none; }
}

/* ---------- Team: one owner, specialists on cue ---------- */
.hc__node--owner { padding: 0.5rem 0.875rem; }
.hc__node--team {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
}
.hc__node--team span {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hv-ink);
    background: var(--hv-white);
    border: 1px solid var(--hv-line);
    border-radius: 999px;
    white-space: nowrap;
}

/* ==========================================================================
   SECTION 7: Homepage theme (was home-theme.css)
   ========================================================================== */

/* ==========================================================================
   Homepage theme (body.th-midnight on index.html only)
   The site-wide Midnight theme lives in css/midnight.css; this file maps it
   onto the homepage sections (.hv-*) and styles the homepage-only visuals.
   ========================================================================== */

/* Section rhythm */
.th-midnight .hv {
    --hv-bg-trust:    var(--th-white);
    --hv-bg-problems: linear-gradient(180deg, #EAF2FB 0, var(--th-pale) 320px);
    --hv-bg-pricing:  var(--th-white);
    --hv-bg-film:     var(--th-ink);
    --hv-bg-build:    var(--th-pale);
    --hv-bg-people:   var(--th-ink);
    --hv-bg-faq:      linear-gradient(180deg, #EAF2FB 0, var(--th-pale) 320px);
    --hv-bg-close:    linear-gradient(135deg, #0176D3 0%, #0B5CAB 55%, #032D60 100%);
}

/* Text on the dark and blue blocks */
.th-midnight .hv-close .ed-h2,
.th-midnight .hv-people .ed-h2,
.th-midnight .hv-people .ed-person,
.ed-page.th-midnight .hv-people .ed-person h3 { color: #FFFFFF; }
.th-midnight .hv-people .ed-lede,
.th-midnight .hv-people .ed-person .ed-muted { color: rgba(255, 255, 255, 0.74); }

/* Homepage-only panels: handover comparison and bottleneck picker */
.th-midnight .hc__rows,
.th-midnight .bp {
    border: 0;
    border-radius: var(--th-radius);
    overflow: hidden;
}
.th-midnight .hv-people .hc__rows { box-shadow: 0 40px 100px -30px rgba(1, 118, 211, 0.6); }
.th-midnight .hv-close .bp { box-shadow: 0 40px 90px -30px rgba(3, 13, 40, 0.7); }
.th-midnight .bp__option span { border-radius: 10px; }
.th-midnight .bp__option span::after { color: var(--th-ink); }
.th-midnight .hc__link i::after { background: var(--th-ink); }

/* Brand film */
.th-midnight .ed-film__video {
    border-radius: var(--th-radius);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 50px 140px -40px rgba(1, 118, 211, 0.75);
}

/* Hero: who we work with (under the subheadline) */
.th-midnight .ed-hero__fit {
    margin: 0.75rem 0 0;
    max-width: 34rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.62);
}

/* Inquiry card: phone line */
.th-midnight .ed-inquiry__call { margin-top: 0.5rem; color: var(--th-muted); }


/* Case study (homepage) */
.th-midnight .hv-case { background: var(--th-white); }
.th-midnight .cs {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0.5rem 0 2rem;
}
.th-midnight .cs__col {
    padding: 1.5rem;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    background: var(--th-pale);
}
.th-midnight .cs__col--win { border-color: var(--th-blue); box-shadow: 0 24px 60px -36px rgba(1, 118, 211, 0.55); }
.th-midnight .cs__title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 800; color: var(--th-ink); }
.th-midnight .cs__list { margin: 0; padding-left: 1.1rem; color: var(--th-ink); }
.th-midnight .cs__list li { margin: 0.4rem 0; line-height: 1.5; }
.th-midnight .hv-case .ed-cta { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) {
    .th-midnight .cs { grid-template-columns: 1fr; }
}

/* Keyword line at the top of the home H1: small eyebrow above the display slogan */
.ed-page .ed-hero__kicker {
    display: block;
    margin-bottom: 1rem;
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6FC1FF;
}