/* ===========================================================
   ENTIOVI TECHNOLOGIES — AI FIRST. ENTERPRISE READY.
   Premium Apple-style design system
   =========================================================== */

:root {
    --brand: #b10f1a;
    --brand-dark: #8b0b13;
    --brand-soft: #fdf1f2;
    --ink: #111113;
    --ink-2: #1d1d1f;
    --muted: #6e6e73;
    --muted-2: #86868b;
    --line: #e6e6e8;
    --surface: #f5f5f7;
    --white: #ffffff;
    --shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.04), 0 2px 6px rgba(17, 17, 19, 0.03);
    --shadow-md: 0 12px 32px rgba(17, 17, 19, 0.06), 0 2px 6px rgba(17, 17, 19, 0.04);
    --shadow-lg: 0 30px 60px -20px rgba(17, 17, 19, 0.18), 0 12px 30px rgba(17, 17, 19, 0.06);
    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
    line-height: 1.5;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--brand); }

::selection {
    background: var(--brand);
    color: #fff;
}

.container-xl { max-width: 1280px; padding-left: 28px; padding-right: 28px; }

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    z-index: 2000;
    pointer-events: none;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--brand);
    transition: width 0.08s linear;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar-custom {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1500;
    padding: 18px 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid transparent;
    transition: padding 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.navbar-custom.scrolled {
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--line);
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
}
.logo-img {
    display: block;
    height: 50px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: opacity 0.3s var(--ease);
}
.nav-logo:hover .logo-img { opacity: 0.85; }

/* Navbar shrinks when scrolled — logo scales down with it */
.navbar-custom.scrolled .logo-img { height: 50px; }

@media (max-width: 575px) {
    .logo-img { height: 34px; max-width: 160px; }
    .navbar-custom.scrolled .logo-img { height: 54px; }
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
}
.nav-links > li { position: static; }
.nav-links .nav-link {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink-2);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 18px 0;
    cursor: pointer;
}
.nav-links .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    height: 1.5px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}
.nav-links .nav-item:hover .nav-link::after,
.nav-links .nav-item.open .nav-link::after { transform: scaleX(1); }

.nav-chev {
    font-size: 9px;
    transition: transform 0.3s var(--ease);
    opacity: 0.65;
}
.nav-item:hover .nav-chev,
.nav-item.open .nav-chev { transform: rotate(180deg); opacity: 1; }

/* ===== MEGA MENU ===== */
.mega-menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -20px rgba(17, 17, 19, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
    z-index: 1400;
}
.nav-item:hover .mega-menu,
.nav-item.open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}
.mega-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 28px 40px;
    display: flex;
    gap: 48px;
}
.mega-col {
    flex: 1 1 0;
    min-width: 0;
}
/* Insights menu has only one column with side-by-side items inside —
   cap it so the single col doesn't stretch absurdly wide. Keep it
   left-aligned with the other mega menus. */
.mega-inner:has(> .mega-col:only-child) > .mega-col {
    flex: 0 1 720px;
}
.mega-col h6 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 18px;
}
.mega-col a {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 12px;
    margin: 0 -12px 2px;
    border-radius: 10px;
    transition: background 0.25s var(--ease), transform 0.25s var(--ease);
    color: var(--ink);
}
.mega-col a > .mega-icon {
    grid-row: 1 / 3;
    grid-column: 1;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 14px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.mega-col a > strong {
    grid-column: 2;
    grid-row: 1;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}
.mega-col a > span {
    grid-column: 2;
    grid-row: 2;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.3;
}
.mega-col a:hover {
    background: var(--brand-soft);
}
.mega-col a:hover > strong { color: var(--brand); }
.mega-col a:hover > .mega-icon {
    background: var(--brand);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 6px 14px -6px rgba(177, 15, 26, 0.55);
}
.mega-col a.active > .mega-icon {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(177, 15, 26, 0.55);
}
.mega-col a.active > strong { color: var(--brand); }

.mega-col .mega-row-items {
    display: flex;
    gap: 8px;
}
.mega-col .mega-row-items > a {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.mega-feature {
    background: linear-gradient(160deg, #0f0f11 0%, #1d1d1f 55%, #2a0708 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 26px;
    margin: -8px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mega-tag {
    display: inline-block;
    width: max-content;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
    background: rgba(177, 15, 26, 0.12);
    padding: 5px 10px;
    border-radius: 100px;
    margin-bottom: 16px;
}
.mega-feature h5 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: #fff;
}
.mega-feature p {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    margin: 0 0 20px;
    line-height: 1.55;
}
.mega-cta {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
}
.mega-cta i { transition: transform 0.3s var(--ease); }
.mega-cta:hover { color: #fff; }
.mega-cta:hover i { transform: translateX(4px); }

/* Mobile menu — collapsible groups */
.mobile-menu .m-group {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.mobile-menu .m-group summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-menu .m-group summary::-webkit-details-marker { display: none; }
.mobile-menu .m-group[open] summary i { transform: rotate(180deg); }
.mobile-menu .m-group summary i {
    font-size: 11px;
    transition: transform 0.3s var(--ease);
    opacity: 0.6;
}
.mobile-menu .m-group a {
    display: block;
    padding: 10px 2px;
    font-size: 15px;
    color: var(--muted);
    font-weight: 500;
}
.mobile-menu .m-group a:hover { color: var(--brand); }

.nav-actions { gap: 14px; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid var(--ink);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    transition: all 0.3s var(--ease);
}
.btn-ghost:hover {
    background: var(--ink);
    color: #fff;
}

/* Navbar primary CTA — sits next to the ghost Login button */
.btn-contact {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid var(--brand);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    box-shadow: 0 8px 18px -8px rgba(177, 15, 26, 0.45);
    transition: all 0.3s var(--ease);
}
.btn-contact:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px -10px rgba(177, 15, 26, 0.55);
}
.btn-contact i { transition: transform 0.3s var(--ease); }
.btn-contact:hover i { transform: translateX(2px); }

.nav-toggle {
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.nav-toggle span {
    width: 16px; height: 1.5px; background: var(--ink);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
    display: none;
    flex-direction: column;
    padding: 20px 28px calc(40px + env(safe-area-inset-bottom));
    gap: 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    /* The mobile menu sits inside the fixed navbar. When an accordion
       group is expanded the content gets taller than the viewport, so
       cap it to the visible viewport below the navbar and enable
       native momentum scrolling. `dvh` (where supported) accounts for
       the mobile URL bar so the bottom button is never clipped by it. */
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
}

/* =========================================================
   UTILITY — REVEAL ANIMATIONS
   ========================================================= */
/* Reveals are visible by default. JS adds .is-hidden ONLY to
   elements below the initial viewport, then removes it on scroll.
   This guarantees content is always visible for screenshot tools,
   no-JS clients, search engines, and slow-JS scenarios. */
.reveal { opacity: 1; transform: none; }
.reveal.is-hidden {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.is-hidden.reveal-left { transform: translateX(-48px) translateY(0); }
.reveal.is-hidden.reveal-right { transform: translateX(48px) translateY(0); }
.reveal.is-hidden.in {
    opacity: 1;
    transform: translate(0, 0);
}

/* Hero — cinematic fade-up on page load (always runs,
   no IntersectionObserver dependency). */
@keyframes heroFadeUp {
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: translateY(0); }
}
html.js .hero .hero-eyebrow,
html.js .hero .hero-sub,
html.js .hero .hero-cta,
html.js .hero .hero-meta,
html.js .hero .hero-scroll,
html.js .hero .hero-visual {
    animation: heroFadeUp 1s var(--ease-out) both;
}
html.js .hero .hero-eyebrow { animation-delay: 0.10s; }
html.js .hero .hero-sub     { animation-delay: 0.44s; }
html.js .hero .hero-cta     { animation-delay: 0.62s; }
html.js .hero .hero-meta    { animation-delay: 0.78s; }
html.js .hero .hero-scroll  { animation-delay: 0.96s; }
html.js .hero .hero-visual  { animation-delay: 0.32s; animation-duration: 1.4s; }

/* =========================================================
   WORD-BY-WORD REVEAL (Apple Mac Studio signature)
   Each word lives in an overflow:hidden wrapper; an inner
   span translates up from below the baseline + fades in.
   ========================================================= */
.word-reveal .word {
    display: inline-block;
    vertical-align: baseline;
    line-height: inherit;
    /* Ample room for descenders (g, p, y, j, q). We use overflow-y
       on the inline-block box while keeping the visual line-height
       tight via a matching negative margin-bottom.
       padding-top extends the box above as well, so ascenders that
       peek above cap-height (like accented capitals) aren't clipped
       while the word slides up from below. */
    padding-top: 0.1em;
    padding-bottom: 0.45em;
    margin-top: -0.1em;
    margin-bottom: -0.45em;
    overflow: hidden;
}
.word-reveal .word-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.word-reveal.in-view .word-inner {
    transform: translateY(0);
    opacity: 1;
}

/* Gradient-text fix: when a `.accent` span wraps a word, the
   background-clip:text + transparent fill-color chain breaks because
   the inner .word-inner inherits only the transparent fill (not the
   gradient). Restore the gradient on the inner span explicitly.

   Padding-bottom extends the background paint box below the baseline
   so descender glyphs (the tail of "g", "p", "y", "j", "q") have
   gradient pixels to clip against. Without it, background-clip: text
   has nothing to paint below the baseline and the descender vanishes. */
.hero-title .accent .word-inner,
.hero-title.word-reveal .accent .word-inner {
    background: linear-gradient(120deg, var(--ink) 0%, var(--brand) 60%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.35em;
    margin-bottom: -0.35em;
}


/* =========================================================
   SCROLL-SCRUBBED TRANSFORMS (data-scrub elements)
   CSS uses var(--p) (0..1) set by JS to drive transforms.
   ========================================================= */
[data-scrub] { --p: 0; }

/* Cards/panels — rise, scale, and fade based on scroll progress */
.scrub-rise {
    transform:
        translate3d(0, calc((1 - var(--p)) * 60px), 0)
        scale(calc(0.94 + var(--p) * 0.06));
    opacity: calc(0.4 + var(--p) * 0.6);
    transition: none;
}

/* Full-bleed section — dramatic scale-in (Apple product cinematic) */
.scrub-zoom {
    transform: scale(calc(0.88 + var(--p) * 0.12));
    opacity: calc(0.5 + var(--p) * 0.5);
    transform-origin: center center;
    transition: none;
}

/* Numbers — pop in with scale */
.scrub-pop {
    transform: scale(calc(0.8 + var(--p) * 0.2));
    opacity: var(--p);
    transition: none;
}

/* =========================================================
   CINEMATIC SECTION TRANSITIONS
   Subtle background shifts + fade-in section titles to
   mimic Apple's chapter-by-chapter storytelling.
   ========================================================= */
.impact, .capabilities, .platforms, .services, .insights {
    background: #ffffff;
    position: relative;
}
.case-study, .industries { background: #fafafa; }

/* Section edges: gentle gradient fade so sections bleed into
   each other instead of hard-cutting. */
.capabilities::before,
.platforms::before,
.services::before,
.insights::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250,250,250,0.6), transparent);
    pointer-events: none;
    z-index: 0;
}
.impact::after,
.capabilities::after,
.services::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(to top, rgba(250,250,250,0.5), transparent);
    pointer-events: none;
    z-index: 0;
}
.impact .container-xl,
.capabilities .container-xl,
.platforms .container-xl,
.services .container-xl,
.insights .container-xl { position: relative; z-index: 1; }

/* Section title: bump spacing for cinematic breathing room */
.section-title { line-height: 1.02; }

.section-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 18px;
}

.section-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(38px, 5.2vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 20px;
}
.section-title .muted { color: var(--muted); font-weight: 500; }

.section-lead {
    font-size: clamp(17px, 1.4vw, 21px);
    color: var(--muted);
    max-width: 720px;
    margin: 0 0 40px;
    line-height: 1.55;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: auto;
    /* 120px top clears the fixed navbar; bottom 0 keeps the hero
       flush against the next section. Adjacent sections supply their
       own 96px top padding so the visible gap is consistent across
       the page. */
    padding: 120px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    will-change: transform;
}

/* ===== HERO BACKGROUND VIDEO (full-bleed) =====
   Video fills the whole hero with no overlay so it stays vivid. The
   source MP4 has a near-white background so the dark headline copy
   remains readable on the left. */
.hero-video { min-height: 86vh; }
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 5%;
    z-index: 0;
    pointer-events: none;
}
@media (max-width: 991px) {
    .hero-video { min-height: 0; }
    /* Mobile: drop a soft white halo into the background on the right
       side of the copy column, where the headline + sub-copy overlap
       the red brain artwork. Subtle enough that the video stays
       prominent, strong enough that the text lifts off the busy area. */
    .hero-video .hero-copy {
        position: relative;
        isolation: isolate;
    }
    .hero-video .hero-copy::before {
        content: "";
        position: absolute;
        top: -8%;
        right: -8%;
        bottom: -8%;
        left: 18%;
        background: radial-gradient(ellipse 75% 65% at 60% 50%,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(255, 255, 255, 0.42) 45%,
            rgba(255, 255, 255, 0) 85%);
        filter: blur(22px);
        pointer-events: none;
        z-index: -1;
    }
    .hero-split.hero-video .hero-sub { color: #000; }
}

.hero-grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(17, 17, 19, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 19, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
}
.orb-1 {
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.35), transparent 70%);
    top: -20%; left: -10%;
    will-change: transform;
}
.orb-2 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.18), transparent 70%);
    bottom: -20%; right: -8%;
    will-change: transform;
}
.hero-grid { will-change: transform; }
.hero-inner { will-change: transform, opacity; }

/* Fallback ambient float when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .orb-1, .orb-2, .hero-grid, .hero-inner {
        will-change: auto;
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* ===== SPLIT HERO (two-column) ===== */
.hero-split .hero-inner { text-align: left; }
.hero-split .hero-row { min-height: 0; }
.hero-copy { max-width: 560px; }
.hero-split .hero-eyebrow { margin-bottom: 28px; }
.hero-split .hero-title {
    font-size: clamp(56px, 7.6vw, 112px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    margin: 0 0 24px;
}
.hero-split .hero-sub {
    font-size: clamp(17px, 1.4vw, 20px);
    color: var(--muted);
    max-width: 520px;
    margin: 0;
    line-height: 1.55;
}
.hero-split .hero-cta {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 24px;
}
.hero-meta-item {
    display: flex;
    flex-direction: column;
}
.hero-meta-item strong {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
}
.hero-meta-item span {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
    letter-spacing: 0.02em;
}
.hero-meta-divider {
    width: 1px;
    height: 32px;
    background: var(--line);
}

.hero-split .hero-scroll {
    margin-top: 8px;
    align-self: flex-start;
    display: inline-flex;
}

/* ===== HERO VISUAL (right side) ===== */
.hero-visual-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.hero-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== SVG WIREFRAME LAYER ===== */
.hv-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

/* Backdrop glow pulses softly */
.hv-bg-glow {
    transform-origin: 300px 300px;
    animation: hvBgPulse 6s ease-in-out infinite;
}
@keyframes hvBgPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.75; transform: scale(1.06); }
}

/* Middle orbit rotates clockwise */
.hv-orbit-rotate {
    transform-origin: 300px 300px;
    transform-box: fill-box;
    animation: hvSpinCw 42s linear infinite;
}
/* Outer orbit rotates counter-clockwise (slower) */
.hv-orbit-rotate-rev {
    transform-origin: 300px 300px;
    transform-box: fill-box;
    animation: hvSpinCcw 60s linear infinite;
}
@keyframes hvSpinCw  { to { transform: rotate(360deg); } }
@keyframes hvSpinCcw { to { transform: rotate(-360deg); } }

/* Connection lines — dashed stroke flows outward, creating the
   "data streaming from the core" illusion */
.hv-lines line {
    animation: hvDashFlow 1.6s linear infinite;
}
@keyframes hvDashFlow {
    to { stroke-dashoffset: -16; }
}

/* Core */
.hv-core {
    position: relative;
    z-index: 5;
    width: 28%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(145deg, #14141a 0%, #1d1d1f 55%, #2a0708 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 30px 60px -20px rgba(177, 15, 26, 0.5),
        0 0 0 1px rgba(255,255,255,0.06) inset,
        0 40px 80px -30px rgba(0,0,0,0.4);
}
.hv-core::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--brand) 90deg, transparent 180deg, transparent 360deg);
    opacity: 0.5;
    animation: spinSlow 8s linear infinite;
    z-index: -1;
    filter: blur(6px);
}
.hv-core-eye {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 4.2vw, 64px);
    color: #fff;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hv-core-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--brand);
    opacity: 0;
    animation: hvRing 2.8s ease-out infinite;
}
@keyframes hvRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Floating nodes around the core — aligned to the SVG connection endpoints */
.hv-node {
    position: absolute;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--ink);
    box-shadow: var(--shadow-md);
    z-index: 3;
    /* translate(-50%,-50%) centers the box on its anchor point; the
       float animation layers a tiny Y offset on top of that. */
    animation: hvFloat 5s ease-in-out infinite;
}
.hv-node i { transition: color 0.3s var(--ease); }
.hv-node:hover i { color: var(--brand); }

@keyframes hvFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 6px)); }
}

/* Anchors correspond to SVG coords (600x600 viewBox):
   N1 (300,72), N2 (497,186), N3 (497,414), N4 (300,528), N5 (103,414), N6 (103,186) */
.hv-node.n1 { top: 12%;   left: 50%;   animation-delay: 0s;    }
.hv-node.n2 { top: 31%;   left: 82.8%; animation-delay: 0.5s;  }
.hv-node.n3 { top: 69%;   left: 82.8%; animation-delay: 1s;    }
.hv-node.n4 { top: 88%;   left: 50%;   animation-delay: 1.5s;  }
.hv-node.n5 { top: 69%;   left: 17.2%; animation-delay: 2s;    }
.hv-node.n6 { top: 31%;   left: 17.2%; animation-delay: 2.5s;  }

/* Subtle highlight on each node — a tiny red dot hinting at activity */
.hv-node::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 6px rgba(177, 15, 26, 0.6);
    opacity: 0.7;
    animation: hvDotBlink 2s ease-in-out infinite;
}
.hv-node.n2::after { animation-delay: 0.3s; }
.hv-node.n3::after { animation-delay: 0.6s; }
.hv-node.n4::after { animation-delay: 0.9s; }
.hv-node.n5::after { animation-delay: 1.2s; }
.hv-node.n6::after { animation-delay: 1.5s; }
@keyframes hvDotBlink {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* Floating status chips */
.hv-chip {
    position: absolute;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 6;
    font-size: 12.5px;
}
.hv-chip strong {
    display: block;
    font-weight: 700;
    color: var(--ink);
}
.hv-chip em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}
.chip-top {
    top: 4%;
    left: 4%;
    animation: hvChipFloat 4.5s ease-in-out infinite;
}
.chip-bottom {
    bottom: 4%;
    right: 4%;
    animation: hvChipFloat 4.5s ease-in-out infinite;
    animation-delay: 2s;
}
@keyframes hvChipFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 12px rgba(177,15,26,0.7);
}
.chip-dot.green {
    background: #11a764;
    box-shadow: 0 0 12px rgba(17, 167, 100, 0.55);
}

/* Hero visual — responsive shrink */
@media (max-width: 1199px) {
    .hero-visual-col { min-height: 560px; }
    .hero-visual { max-width: 560px; }
    .hv-node { width: 46px; height: 46px; font-size: 17px; border-radius: 14px; }
    .hv-node.n1, .hv-node.n4 { margin-left: -23px; }
}
@media (max-width: 991px) {
    /* The hero is `display: flex; align-items: center` on desktop, so
       the inner content vertically centres against the full hero
       height — that pushes the headline (and the eyebrow chip) up
       behind the fixed navbar on mobile where there's no longer a
       tall visual filling space. Switch to a block layout with a
       generous top padding that clears the ~70-90px navbar. */
    .hero {
        padding: 160px 0 72px;
        min-height: 0;
        display: block;
        align-items: initial;
    }
    /* Hide the brain image / video on mobile — show only the headline
       text column. Desktop (≥ 992px) still renders the visual. */
    .hero-visual-col { display: none !important; }
    .hero-split .hero-title { font-size: clamp(44px, 10vw, 72px); }
    .hero-copy { max-width: 100%; padding-top: 0; }
    .hero-split .hero-row { row-gap: 0; --bs-gutter-y: 0; }
    /* The "SCROLL" cue makes sense beneath a hero visual on desktop —
       on mobile it just floats below the headline in empty space, so
       hide it. !important needed to beat the higher-specificity
       `.hero-split .hero-scroll` rule. */
    .hero-split .hero-scroll,
    .hero-scroll { display: none !important; }
}
@media (max-width: 575px) {
    .hero { padding: 72px 0 8px; }
    .hero-visual-col { min-height: 240px; }
    .hero-visual { max-width: 340px; }
    .hv-node { width: 40px; height: 40px; font-size: 15px; }
    .hv-node.n1, .hv-node.n4 { margin-left: -20px; }
    .hv-chip { font-size: 11px; padding: 8px 10px; }
    .hero-meta { flex-wrap: wrap; gap: 16px; }
    .hero-meta-divider { display: none; }
    .hero-split .hero-eyebrow { margin-bottom: 16px; }
    .hero-split .hero-sub { margin-bottom: 20px; }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 32px;
}
.pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    position: relative;
    box-shadow: 0 0 0 0 rgba(177, 15, 26, 0.6);
    animation: pulse 1.8s infinite;
}
.pulse-dot.white { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(177, 15, 26, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(177, 15, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(177, 15, 26, 0); }
}

.hero-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(52px, 8.8vw, 136px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    margin: 0 0 28px;
    color: var(--ink);
}
.hero-title .accent {
    background: linear-gradient(120deg, var(--ink) 0%, var(--brand) 60%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-sub {
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--muted);
    max-width: 720px;
    margin: 0 auto 44px;
    line-height: 1.55;
}

.hero-cta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: center;
}

.btn-primary-xl {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    background: var(--brand);
    color: #fff;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: 0 20px 40px -12px rgba(177, 15, 26, 0.4);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.btn-primary-xl:hover {
    background: var(--brand-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 28px 50px -12px rgba(177, 15, 26, 0.55);
}
.btn-primary-xl i {
    transition: transform 0.35s var(--ease);
}
.btn-primary-xl:hover i { transform: translateX(4px); }

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    position: relative;
}
.btn-text::after {
    content: "→";
    transition: transform 0.35s var(--ease);
}
.btn-text:hover::after { transform: translateX(4px); }
.btn-text:hover { color: var(--brand); }

.hero-scroll {
    margin-top: 80px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--muted-2);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 40%, transparent 100%);
    position: relative;
    overflow: hidden;
}
.scroll-line::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--brand);
    animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown {
    0% { top: -20px; }
    100% { top: 48px; }
}

/* =========================================================
   IMPACT NUMBERS
   ========================================================= */
.impact {
    padding: 88px 0;
    background: var(--white);
    border-top: 1px solid var(--line);
}
.impact .section-title { text-align: center; margin-bottom: 72px; }
.impact .section-eyebrow { display: block; text-align: center; }

.impact-grid { row-gap: 40px; }

.impact-card {
    text-align: center;
    padding: 20px 10px;
    position: relative;
}
.impact-num {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 6vw, 96px);
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 12px;
    background: linear-gradient(180deg, var(--ink) 0%, var(--brand) 140%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.impact-label {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
}

/* =========================================================
   CAPABILITIES
   ========================================================= */
.capabilities {
    padding: 56px 0 96px;
    background: var(--white);
    position: relative;
}
.capabilities::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--line);
}

.cap-grid { margin-top: 24px; }

.cap-card.scrub-rise {
    transform: none;
    opacity: 1;
}
.cap-card {
    position: relative;
    padding: 36px 30px 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    height: 100%;
    transition:
        transform 0.5s var(--ease),
        background 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.5s var(--ease);
    overflow: hidden;
}
.cap-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.10), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}
.cap-card:hover,
.cap-card:active,
.cap-card:focus-visible {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.cap-card:hover::before,
.cap-card:active::before,
.cap-card:focus-visible::before { opacity: 1; }

.cap-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 24px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.cap-card:hover .cap-icon,
.cap-card:active .cap-icon,
.cap-card:focus-visible .cap-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.cap-card h3 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--ink);
    transition: color 0.4s var(--ease);
}
.cap-card:hover h3,
.cap-card:active h3,
.cap-card:focus-visible h3 { color: #ffffff; }
/* "En" prefix highlight — brand-soft pill with brand-red text behind the
   shared "En" prefix in every capability name (EnGen / EnAct / EnLearn /
   EnMetrics / EnWise / EnTrust). Restrained, distinctive, and immediately
   reinforces the En-* naming system. */
.cap-card h3 .cap-en {
    display: inline-block;
    background: var(--brand);
    color: #ffffff;
    padding: 0 6px;
    margin-right: 1px;
    border-radius: 6px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.cap-card:hover h3 .cap-en,
.cap-card:active h3 .cap-en,
.cap-card:focus-visible h3 .cap-en {
    background: #ffffff;
    color: var(--brand);
}
.cap-tag {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    transition: color 0.4s var(--ease);
}
.cap-card:hover .cap-tag,
.cap-card:active .cap-tag,
.cap-card:focus-visible .cap-tag { color: rgba(255, 255, 255, 0.86); }
.cap-card p {
    font-size: 15.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 28px;
    min-height: 72px;
    transition: color 0.4s var(--ease);
}
.cap-card:hover p,
.cap-card:active p,
.cap-card:focus-visible p { color: rgba(255, 255, 255, 0.92); }
.cap-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #f3f3f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.cap-card:hover .cap-arrow,
.cap-card:active .cap-arrow,
.cap-card:focus-visible .cap-arrow {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: rotate(-45deg);
}

/* iOS / touch devices: the 0.5s transition meant the brand-red state
   barely started fading in before the link navigated. Trigger via
   both :active/:focus AND a JS-set `.is-tapped` class on touchstart
   so the red commits instantly on tap. Snap the transition to 0.08s
   under (hover: none) so the colour appears immediately. */
@media (hover: none) {
    .cap-card { transition-duration: 0.08s !important; }
    .cap-card .cap-icon,
    .cap-card h3,
    .cap-card h3 .cap-en,
    .cap-card .cap-tag,
    .cap-card p,
    .cap-card .cap-arrow { transition-duration: 0.08s !important; }
    .cap-link.is-tapped .cap-card,
    .cap-link:active .cap-card,
    .cap-link:focus .cap-card,
    .cap-link:focus-visible .cap-card {
        transform: translateY(-6px);
        background: var(--brand, #b10f1a);
        border-color: var(--brand, #b10f1a);
        box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
    }
    .cap-link.is-tapped .cap-card::before,
    .cap-link:active .cap-card::before,
    .cap-link:focus .cap-card::before { opacity: 1; }
    .cap-link.is-tapped .cap-card .cap-icon,
    .cap-link:active .cap-card .cap-icon,
    .cap-link:focus .cap-card .cap-icon { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
    .cap-link.is-tapped .cap-card h3,
    .cap-link:active .cap-card h3,
    .cap-link:focus .cap-card h3 { color: #ffffff; }
    .cap-link.is-tapped .cap-card h3 .cap-en,
    .cap-link:active .cap-card h3 .cap-en,
    .cap-link:focus .cap-card h3 .cap-en { background: #ffffff; color: var(--brand); }
    .cap-link.is-tapped .cap-card .cap-tag,
    .cap-link:active .cap-card .cap-tag,
    .cap-link:focus .cap-card .cap-tag { color: rgba(255, 255, 255, 0.86); }
    .cap-link.is-tapped .cap-card p,
    .cap-link:active .cap-card p,
    .cap-link:focus .cap-card p { color: rgba(255, 255, 255, 0.92); }
    .cap-link.is-tapped .cap-card .cap-arrow,
    .cap-link:active .cap-card .cap-arrow,
    .cap-link:focus .cap-card .cap-arrow {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
        transform: rotate(-45deg);
    }
    /* iOS needs explicit -webkit-tap-highlight-color override so it
       doesn't briefly paint a default gray box over our transition. */
    .cap-link { -webkit-tap-highlight-color: transparent; }
}

/* =========================================================
   CASE STUDY
   ========================================================= */
.case-study {
    padding: 96px 0;
    background: #fafafa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

/* Apple Mac Studio-style pin: visual stays in place while text scrolls past. */
@media (min-width: 992px) {
    .case-study .row { align-items: flex-start; }
    .case-study .row > .col-lg-6:first-child {
        position: sticky;
        top: 0;
    }
    .case-study .case-desc,
    .case-study .case-points,
    .case-study .btn-link {
        margin-top: 6px;
    }
    /* Extra vertical runway so the pin has room to breathe */
    .case-study { padding-top: 120px; padding-bottom: 140px; }
}

.case-visual {
    position: relative;
    padding-top: 100%;
    max-width: 560px;
    margin: 0 auto;
}
.case-frame {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background:
        radial-gradient(420px 320px at 30% 20%, #c8202d 0%, transparent 60%),
        radial-gradient(380px 300px at 80% 90%, #8a0a14 0%, transparent 60%),
        linear-gradient(160deg, #b10f1a 0%, #960c16 100%);
    overflow: hidden;
    box-shadow:
        0 36px 90px -42px rgba(177, 15, 26, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.10) inset;
}
.case-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 85%);
}
.case-frame::after {
    /* Subtle highlight gloss for premium depth. */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 200px at 50% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
    pointer-events: none;
}

.case-emblem {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    z-index: 2;
    text-align: center;
}
.case-emblem span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 12px;
}
.case-emblem strong {
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: #ffffff;
}

.case-chip {
    position: absolute;
    padding: 9px 15px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.30);
}
.case-chip.top { top: 28px; left: 28px; }
.case-chip.bottom { bottom: 28px; right: 28px; }
.case-chip i { color: #ffffff; }

.case-title {
    font-size: clamp(34px, 3.6vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 20px 0 22px;
    color: var(--ink);
}
.case-desc {
    font-size: 17.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 28px;
}
.case-points {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}
.case-points li {
    font-size: 16px;
    color: var(--ink-2);
    padding: 10px 0;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 14px;
}
.case-points li:last-child { border-bottom: 1px solid var(--line); }
.case-points i {
    color: var(--brand);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--brand);
    padding-bottom: 4px;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.35s var(--ease);
}
.btn-link:hover {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-link i { transition: transform 0.35s var(--ease); }
.btn-link:hover i { transform: translateX(4px); }

/* =========================================================
   PLATFORMS RAIL
   ========================================================= */
/* ---------- Platforms — pinned cinematic horizontal scroll (Apple-style) ----------
   Section is 460vh tall. Inner .plt-stage is position:sticky at 100vh so the
   whole thing pins for the full scroll runway. The rail translates horizontally
   based on scroll progress, bringing each card into center focus one at a time. */
.platforms-pin {
    position: relative;
    height: 460vh;                /* ~5 cards × 92vh runway */
    background: #ffffff;
    --plt-prog: 0;
}

.plt-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.plt-header {
    padding-top: 88px;
    padding-bottom: 12px;
    flex-shrink: 0;
}
.plt-header .section-eyebrow { display: inline-block; margin-bottom: 8px; }
.plt-header .section-title {
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.08;
    margin-bottom: 8px;
}
.plt-header .section-lead {
    margin-bottom: 0;
    max-width: 640px;
    font-size: clamp(14.5px, 1.1vw, 16.5px);
}

/* Rail viewport — fills remaining vertical space */
.plt-rail-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    display: flex;
    align-items: center;
}

/* The rail: flex row of cards, translated horizontally by scroll progress.
   Total travel = (total cards - 1) * (card + gap), so the last card lands
   at center at progress=1, first card at progress=0. */
.plt-rail {
    display: flex;
    align-items: center;    /* keep scale-up centered in the rail */
    gap: 36px;
    padding: 56px 0 56px;   /* generous vertical room for the active scale-up */
    will-change: transform;
    transition: none;
    /* Card slot width (CSS var used by cards below) */
    --plt-card-w: min(500px, 58vw);
    --plt-card-step: calc(var(--plt-card-w) + 36px);
    /* Center first card: offset half viewport minus half card width */
    transform: translate3d(
        calc(50vw - var(--plt-card-w) / 2 - var(--plt-prog) * 4 * var(--plt-card-step)),
        0, 0
    );
}

.plt-rail .platform-card {
    flex: 0 0 var(--plt-card-w);
    width: var(--plt-card-w);
    /* Card base height is conservative: base × 1.06 (active scale) +
       rail padding must fit inside the rail-wrap's height (100vh - header).
       With 56px padding each side and a 1.06 max scale, 100vh - 420 gives
       a safe ceiling on any viewport. */
    height: clamp(360px, calc(100vh - 420px), 500px);
    transform-origin: center center;
    /* Transform & opacity set inline by JS (scroll-driven focus effect) */
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

/* Red progress bar at the bottom of the pinned stage */
.plt-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(17, 17, 19, 0.08);
    z-index: 5;
    overflow: hidden;
}
#pltProgressBar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--brand);
    box-shadow: 0 0 10px rgba(177, 15, 26, 0.55);
    transition: width 0.12s linear;
}

/* Mobile: flatten to a native horizontal swipe slider */
@media (max-width: 767px) {
    .platforms-pin {
        height: auto;
        padding: 36px 0 64px;
    }
    .plt-stage {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
    }
    .plt-header {
        padding: 0 20px;
        margin-bottom: 18px;
    }
    .plt-header .section-title { font-size: clamp(26px, 7vw, 32px); }
    .plt-header .section-lead { font-size: 14.5px; }

    .plt-rail-wrap { overflow: visible; flex: none; }
    .plt-rail {
        transform: none !important;
        padding: 12px 20px 24px;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .plt-rail::-webkit-scrollbar { display: none; }

    .plt-rail .platform-card {
        transform: none !important;
        opacity: 1 !important;
        scroll-snap-align: start;
        flex: 0 0 min(86vw, 360px);
        width: min(86vw, 360px);
        height: 440px;
        padding: 26px 24px;
    }
    /* The centered card in the mobile swipe rail is flagged .active by
       JS so it pops in brand-red — same affordance as the desktop
       pinned-scroll focus state, but driven by horizontal swipe. */
    .plt-rail .platform-card.active {
        background: var(--brand);
        box-shadow: var(--shadow-lg), 0 24px 48px -16px rgba(177, 15, 26, 0.5);
    }
    .plt-rail .platform-card h3 {
        font-size: 34px;
        margin: 16px 0 10px;
    }
    .plt-rail .platform-card p {
        font-size: 14.5px;
        line-height: 1.5;
    }
    .platform-visual { height: 88px; }
    .platform-visual i { font-size: 56px; }

    .plt-progress { display: none; }
}

/* Reduced motion: plain stacked list */
@media (prefers-reduced-motion: reduce) {
    .platforms-pin { height: auto; padding: 96px 0; }
    .plt-stage { position: static; height: auto; overflow: visible; }
    .plt-rail {
        transform: none !important;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }
    .plt-rail .platform-card {
        transform: none !important;
        opacity: 1 !important;
        flex: 0 0 360px;
        height: 480px;
    }
    .plt-progress { display: none; }
}

.platform-card {
    flex: 0 0 360px;
    height: 480px;
    scroll-snap-align: start;
    position: relative;
    padding: 34px 32px;
    border-radius: var(--radius-lg);
    background: #000;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease);
    box-shadow: var(--shadow-md);
}
.platform-card::before {
    /* Pure-black card surface — red radial overlay disabled. */
    display: none;
}
.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
/* Focused card in the rail (added by JS when |distance from center| < 0.5)
   — switches surface to brand primary so the in-focus card pops. */
.platform-card.active {
    background: var(--brand);
    box-shadow: var(--shadow-lg), 0 30px 60px -20px rgba(177, 15, 26, 0.55);
}

.platform-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.platform-kind {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.platform-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 16px rgba(177, 15, 26, 0.9);
    transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* When the card surface flips to brand red (focused/active in the rail),
   switch the dot to white so it remains visible against the red. */
.platform-card.active .platform-dot {
    background: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}

.platform-card h3 {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.04em;
    margin: 20px 0 12px;
    position: relative;
    z-index: 1;
    display: inline-block;
    /* Highlight — gradient shimmer from pure white into a soft pink tint,
       with a subtle white glow so the platform name pops on brand red. */
    background: linear-gradient(180deg, #ffffff 0%, rgba(255, 222, 224, 0.95) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.28));
    /* Underline accent — a short white marker-style bar beneath the name */
    padding-bottom: 8px;
}
.platform-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
    transition: width 0.45s var(--ease);
}
.platform-card:hover h3::after { width: 64px; }
.platform-card p {
    font-size: 15.5px;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    position: relative;
    z-index: 1;
    max-width: 280px;
}

.platform-visual {
    position: absolute;
    right: -20px;
    bottom: 40px;
    font-size: 180px;
    color: rgba(255,255,255,0.05);
    line-height: 1;
    pointer-events: none;
    transition: transform 0.6s var(--ease), color 0.6s var(--ease);
}
.platform-card:hover .platform-visual {
    transform: scale(1.08) rotate(-4deg);
    color: rgba(255, 255, 255, 0.08);
}

.platform-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 100px;
    position: relative;
    z-index: 1;
    width: max-content;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.platform-cta:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}
.platform-cta i { transition: transform 0.35s var(--ease); }
.platform-cta:hover i { transform: translateX(4px); }

.rail-controls {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 8px;
}
.rail-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.rail-btn:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* =========================================================
   INDUSTRIES — PINNED CINEMATIC STAGE (Apple Mac Studio pattern)
   Outer section is 500vh tall. Inner .ind-stage is position:sticky
   at 100vh, so it pins for the whole scroll of the section.
   Panels crossfade based on scroll progress, driven by JS.
   ========================================================= */
.industries-pin {
    position: relative;
    background: #f5f5f7;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    height: 500vh;                 /* scroll runway — 6 panels × ~67vh */
}

.ind-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}
/* .ind-stage is the containing block for the dots + progress bar,
   which anchor to the true viewport bottom (not .ind-shell's bottom). */

.ind-shell {
    width: 100%;
    position: relative;
    padding-top: 88px;
    padding-bottom: 56px;
}

.ind-header {
    text-align: left;
    margin-bottom: 24px;
    max-width: 640px;
}
.ind-header .section-eyebrow { display: inline-block; margin: 0 0 14px; }
.ind-header .section-title {
    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-align: left;
    letter-spacing: -0.025em;
}
.ind-header .section-title .muted { font-weight: 500; }

.ind-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;          /* header aligns at the TOP of both columns */
    gap: 80px;
    position: relative;
}

/* -------- Left: smooth 3D flip (Apple-style card rotation) --------
   Inactive cards sit flipped edge-on (rotateY -90°) and invisible.
   Active card flips into place (rotateY 0°) with a smooth cubic
   bezier. backface-visibility hides any text mirroring during flip. */
.ind-visual-col {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* card hugs the left — aligns with header */
    perspective: 1600px;
    perspective-origin: 50% 50%;
    align-self: stretch;
    min-height: 420px;
}

.ind-rotator {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    /* Subtle parallax drift as user scrolls the whole section */
    transform: translateY(calc((var(--ind-rot, 0.5) - 0.5) * -30px));
    transition: none;
    will-change: transform;
}

/* .ind-v transform & opacity set inline every scroll frame by JS —
   smooth 3D flip with CSS easing so the card rotates slowly and
   gracefully toward the scroll target rather than snapping 1:1. */
.ind-v {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0;
    transform: perspective(1400px) rotateY(90deg) scale(0.9);
    transform-origin: center center;
    will-change: opacity, transform;
    pointer-events: none;
    backface-visibility: hidden;
    /* Slow, silky easing — the card eases toward scroll position rather
       than following pixel-for-pixel. Cubic-bezier(0.22, 1, 0.36, 1)
       is a deceleration curve — fast start, smooth settle. */
    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ind-v.active {
    pointer-events: auto;
}

/* Surface: richer shadow stack + animated red aura so the card
   feels alive, not static */
.ind-v-surface {
    position: relative;
    box-shadow:
        0 40px 80px -30px rgba(17, 17, 19, 0.55),
        0 60px 120px -50px rgba(177, 15, 26, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
}
/* Soft red glow that slowly pulses behind the card */
.ind-v.active .ind-v-surface::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.32) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    animation: indAura 5s ease-in-out infinite;
    z-index: 0;
}
@keyframes indAura {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.08); }
}

/* The icon gets a gentle pulse when its card is active — reinforces
   the "live / thinking" feel without any rotation. */
.ind-v.active .ind-v-icon {
    animation: indIconPulse 3.5s ease-in-out infinite 1.2s;
}
@keyframes indIconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 30px 50px rgba(177, 15, 26, 0.45)); }
}

/* Reduced motion: kill all animations, show a clean static card */
@media (prefers-reduced-motion: reduce) {
    .ind-rotator { transform: none; }
    .ind-v { transform: none; opacity: 0; animation: none; }
    .ind-v.active { opacity: 1; animation: none; }
    .ind-v.active .ind-v-surface::after,
    .ind-v.active .ind-v-icon { animation: none; }
}

.ind-v-surface {
    position: relative;
    width: min(420px, 100%);
    max-width: 420px;
    flex: 0 0 auto;               /* prevent flex from stretching to fill parent */
    aspect-ratio: 5 / 6;
    background: var(--brand);
    border-radius: 28px;
    padding: 32px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow:
        0 40px 80px -30px rgba(17, 17, 19, 0.35),
        0 0 0 1px rgba(255,255,255,0.04) inset;
    margin-left: 0;               /* hug left edge of its column */
}
/* Pure-brand surface — gradient overlays disabled. */
.ind-v-surface::before,
.ind-v-surface::after,
.ind-v.active .ind-v-surface::after { display: none !important; }

/* Image-based industry card variant */
.ind-v-surface.iv-img {
    aspect-ratio: 1 / 1;
    padding: 0;
    background: #fff;
    box-shadow:
        0 40px 80px -30px rgba(17, 17, 19, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}
.ind-v-surface.iv-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.ind-v-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ind-v-meta span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.ind-v-meta strong {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #fff;
}

.ind-v-icon {
    position: relative;
    z-index: 1;
    font-size: clamp(80px, 9vw, 128px);
    color: #fff;
    align-self: center;
    opacity: 0.95;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.4));
}

.ind-v-stat {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.ind-v-stat span {
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}
.ind-v-stat strong {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

/* -------- Right: editorial content -------- */
.ind-content-col {
    position: relative;
    min-height: 440px;
}
.ind-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ind-item.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ind-counter {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 22px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    width: max-content;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
}
.ind-counter strong {
    color: var(--ink);
    font-weight: 700;
    font-size: 15px;
}
.ind-counter em {
    font-style: normal;
    color: var(--muted-2);
    padding: 0 4px;
}

.ind-item h3 {
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.06;
    margin: 0 0 20px;
    color: var(--ink);
}
.ind-item p {
    font-size: clamp(15.5px, 1.1vw, 17.5px);
    color: var(--muted);
    line-height: 1.65;
    margin: 0 0 36px;
    max-width: 520px;
}

.ind-rule {
    height: 1px;
    background: var(--line);
    margin: 0 0 24px;
    max-width: 520px;
}

.ind-spec-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
}

.ind-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    max-width: 520px;
}
.ind-spec {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 16px;
    border-left: 2px solid var(--line);
    transition: border-color 0.3s var(--ease);
}
.ind-spec:hover { border-left-color: var(--brand); }
.ind-spec strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.ind-spec span {
    font-size: 13px;
    color: var(--muted);
}

/* -------- Progress dots -------- */
.ind-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.ind-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(17, 17, 19, 0.18);
    transition: background 0.4s var(--ease), width 0.4s var(--ease);
    cursor: pointer;
}
.ind-dot.active {
    background: var(--brand);
    width: 24px;
    border-radius: 100px;
}

/* -------- Horizontal progress bar (red — Entiovi accent) -------- */
.ind-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(17, 17, 19, 0.08);
    overflow: hidden;
}
#indProgressBar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--brand);
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.45);
    transition: width 0.12s linear;
}

/* -------- Responsive -------- */
@media (max-width: 991px) {
    .industries-pin { height: 460vh; }
    .ind-header {
        margin-bottom: 32px;
    }
    .ind-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ind-visual-col {
        height: 280px;
    }
    .ind-v-surface {
        max-width: 320px;
        padding: 24px;
    }
    .ind-v-icon { font-size: 72px; }
    .ind-content-col { min-height: 320px; }
    .ind-specs { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
}

@media (max-width: 575px) {
    .industries-pin { height: 420vh; }
    .ind-stage { height: 100vh; padding: 40px 0; }
    .ind-shell { padding-top: 20px; }
    .ind-visual-col { height: 200px; }
    .ind-v-surface {
        max-width: 220px;
        padding: 18px;
        border-radius: 22px;
    }
    .ind-v-icon { font-size: 52px; }
    .ind-v-meta strong { font-size: 14px; }
    .ind-v-meta span { font-size: 10px; }
    .ind-v-stat strong { font-size: 22px; }
    .ind-item h3 { font-size: 24px; }
    .ind-item p { font-size: 14.5px; margin-bottom: 22px; }
    .ind-specs { grid-template-columns: 1fr; }
    .ind-spec-label { margin-bottom: 14px; }
}

/* Mobile (≤767px): convert pinned cinematic to a 6-slide horizontal
   swipe slider. Visuals + content stay paired by placing them in the
   same grid column (visual = row 1, content = row 2). scroll-snap
   handles pagination natively; JS-set inline styles are overridden. */
@media (max-width: 767px) {
    .industries-pin { height: auto; padding: 36px 0 64px; }
    .ind-stage {
        position: static;
        height: auto;
        display: block;
        overflow: visible;
        padding: 0;
    }
    .ind-shell {
        padding-top: 0;
        padding-bottom: 16px;
        max-width: 100%;
    }
    .ind-header {
        margin-bottom: 24px;
        max-width: 100%;
        padding: 0 20px;
    }
    .ind-header .section-title { font-size: clamp(26px, 7vw, 32px); }

    /* Slider container — horizontal scroller with snap */
    .ind-layout {
        display: grid;
        grid-template-columns: repeat(6, 100%);
        grid-template-rows: auto auto;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-behavior: smooth;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .ind-layout::-webkit-scrollbar { display: none; }

    /* Flatten parent wrappers so .ind-v and .ind-item become direct
       grid children of .ind-layout. */
    .ind-visual-col,
    .ind-content-col,
    .ind-rotator {
        display: contents;
    }

    /* Visuals occupy row 1 in their respective column */
    .ind-v {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        grid-row: 1;
        height: auto;
        margin: 0;
        padding: 16px 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .ind-v[data-idx="0"] { grid-column: 1; }
    .ind-v[data-idx="1"] { grid-column: 2; }
    .ind-v[data-idx="2"] { grid-column: 3; }
    .ind-v[data-idx="3"] { grid-column: 4; }
    .ind-v[data-idx="4"] { grid-column: 5; }
    .ind-v[data-idx="5"] { grid-column: 6; }
    .ind-v-surface {
        max-width: 100%;
        padding: 16px;
        border-radius: 22px;
    }

    /* Content occupies row 2 in the same column */
    .ind-item {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        grid-row: 2;
        margin: 0;
        padding: 16px 20px 24px;
        min-height: 0;
        min-width: 0;
    }
    .ind-item[data-idx="0"] { grid-column: 1; }
    .ind-item[data-idx="1"] { grid-column: 2; }
    .ind-item[data-idx="2"] { grid-column: 3; }
    .ind-item[data-idx="3"] { grid-column: 4; }
    .ind-item[data-idx="4"] { grid-column: 5; }
    .ind-item[data-idx="5"] { grid-column: 6; }

    .ind-content-col { min-height: 0; }
    .ind-specs { grid-template-columns: 1fr 1fr; gap: 12px 16px; }

    /* Pagination dots — show as slider indicators (clickable via JS) */
    .ind-dots {
        display: flex;
        position: static;
        transform: none;
        margin: 20px auto 0;
        justify-content: center;
        gap: 8px;
    }
    .ind-progress { display: none; }
}

/* Reduced motion: collapse the scroll runway to normal section height
   and just stack panels statically. */
@media (prefers-reduced-motion: reduce) {
    .industries-pin { height: auto; padding: 96px 0; }
    .ind-stage { position: static; height: auto; }
    .ind-item {
        position: static;
        opacity: 1;
        transform: none;
        margin-bottom: 64px;
    }
    .ind-v { opacity: 1; transform: none; position: static; margin: 24px auto; }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services {
    padding: 56px 0 96px;
    background: #fff;
}

.services-grid { margin-top: 32px; }

.service-card {
    padding: 36px 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.5s var(--ease),
        box-shadow 0.5s var(--ease),
        border-color 0.5s var(--ease),
        background 0.5s var(--ease);
}
.service-card::before { display: none; }
.service-card:hover,
.service-card:active,
.service-card:focus-visible {
    transform: translateY(-5px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}

.service-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand);
    letter-spacing: 0.18em;
    margin-bottom: 18px;
    transition: color 0.4s var(--ease);
}
.service-card h3 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--ink);
    transition: color 0.4s var(--ease);
}
.service-card p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
    transition: color 0.4s var(--ease);
}

/* Hover (+ touch active / keyboard focus): text turns white on the red surface */
.service-card:hover .service-num,
.service-card:active .service-num,
.service-card:focus-visible .service-num { color: rgba(255, 255, 255, 0.85); }
.service-card:hover h3,
.service-card:active h3,
.service-card:focus-visible h3 { color: #ffffff; }
.service-card:hover p,
.service-card:active p,
.service-card:focus-visible p { color: rgba(255, 255, 255, 0.92); }

/* =========================================================
   INSIGHTS & RESEARCH — PINNED CINEMATIC STAGE
   Dark, immersive, scroll-driven — Apple Mac Studio video section
   pattern (section pins for 3× viewport, 3 chapters crossfade).
   ========================================================= */
.insights-pin {
    position: relative;
    height: 280vh;           /* 3 chapters × ~60vh scroll runway */
    background: #ffffff;     /* page bg shows around the contracted card on exit */
    color: #fff;
    /* --ins-contract: 0 while pinned (full-bleed), 1 when approaching exit
       (contracts to a rounded inset card — Apple Mac Studio effect). */
    --ins-contract: 0;
}

.ins-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

/* -------- Immersive backdrop (dark + parallax glows) + contract effect --------
   Side inset matches the container-xl (1280px) edge on wide screens, so the
   contracted card's left/right edges line up with every other section's
   content above and below. */
.ins-backdrop {
    position: absolute;
    top:    calc(var(--ins-contract) * 28px);
    right:  calc(var(--ins-contract) * max(24px, (100vw - 1280px) / 2));
    bottom: calc(var(--ins-contract) * 28px);
    left:   calc(var(--ins-contract) * max(24px, (100vw - 1280px) / 2));
    border-radius: calc(var(--ins-contract) * 36px);
    z-index: 0;
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 80px -30px rgba(177, 15, 26, 0.25);
}
/* Pure-black backdrop — every red/grid overlay disabled. */
.ins-bg-grid,
.ins-bg-orb,
.ins-bg-scanline { display: none !important; }
.ins-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    opacity: 0.8;
}

.ins-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity   1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.ins-bg-orb.orb-a {
    width: 780px; height: 780px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.55), transparent 70%);
    top: -20%; left: -12%;
}
.ins-bg-orb.orb-b {
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.35), transparent 70%);
    bottom: -18%; right: -10%;
}
.ins-bg-orb.orb-c {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(90, 20, 30, 0.4), transparent 70%);
    top: 30%; right: 20%;
}

/* Per-chapter background shift — orbs reposition for each chapter */
.insights-pin[data-active="0"] .orb-a { transform: translate(0, 0); opacity: 1; }
.insights-pin[data-active="0"] .orb-b { transform: translate(0, 0); opacity: 1; }
.insights-pin[data-active="0"] .orb-c { transform: translate(0, 0); opacity: 0.8; }

.insights-pin[data-active="1"] .orb-a { transform: translate(30%, 20%); opacity: 0.7; }
.insights-pin[data-active="1"] .orb-b { transform: translate(-20%, -30%); opacity: 1; }
.insights-pin[data-active="1"] .orb-c { transform: translate(-40%, 10%); opacity: 0.5; }

.insights-pin[data-active="2"] .orb-a { transform: translate(60%, 60%); opacity: 0.4; }
.insights-pin[data-active="2"] .orb-b { transform: translate(-40%, -50%); opacity: 0.7; }
.insights-pin[data-active="2"] .orb-c { transform: translate(-10%, -30%); opacity: 1; }

.ins-bg-scanline {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(177, 15, 26, 0.6), transparent);
    animation: insScan 8s linear infinite;
}
@keyframes insScan {
    0%   { top: -5%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 105%;  opacity: 0; }
}

/* -------- Content shell — header fixed on top, chapters below with runway
   Extra top padding clears the fixed navbar (~80px) so the eyebrow isn't
   clipped by it while the section is pinned. Wider inner side padding
   gives the content a proper breathing gap from the rounded-card edges. */
.ins-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 88px 72px 8px;
    display: flex;
    flex-direction: column;
}

.ins-header {
    max-width: 720px;
    margin-bottom: 56px;
    flex-shrink: 0;
}
.ins-eyebrow {
    color: var(--brand);
    margin: 0 0 14px;
    display: inline-block;
}
.ins-title {
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0;
    color: #fff;
}
.ins-title .muted { color: rgba(255, 255, 255, 0.4); font-weight: 500; }

/* -------- Chapters area — chapters absolute-stacked inside this runway -------- */
.ins-chapters {
    position: relative;
    flex: 1;
    min-height: 420px;
}
.ins-chapter {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: start;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.ins-chapter.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Left column: counter + big title + hero stat */
.ins-chapter-main {
    display: flex;
    flex-direction: column;
}

/* Right column: red-bar callouts list */
.ins-chapter-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
}

.ins-meta {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    width: max-content;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.ins-meta strong {
    color: var(--brand);
    font-weight: 700;
    font-size: 15px;
}
.ins-meta em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 4px;
}

.ins-head {
    font-size: clamp(30px, 3.6vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.02;
    margin: 0 0 28px;
    color: #fff;
}

/* Big hero stat — Apple "Up to X of Y" pattern */
.ins-stat {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-top: auto;           /* push stat to bottom of left column */
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ins-stat-num {
    font-size: clamp(46px, 5.6vw, 80px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: #fff;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.55) 120%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ins-stat-num span {
    color: var(--brand);
    -webkit-text-fill-color: var(--brand);
    font-weight: 700;
}
.ins-stat-label {
    font-size: clamp(14px, 1vw, 16px);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
    max-width: 300px;
    padding-bottom: 10px;
}

/* Red-bar callout list — Apple "ProRes video playback" pattern */
.ins-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 720px;
}
.ins-points li {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ins-chapter.active .ins-points li { opacity: 1; transform: translateY(0); }
.ins-chapter.active .ins-points li:nth-child(1) { transition-delay: 0.20s; }
.ins-chapter.active .ins-points li:nth-child(2) { transition-delay: 0.35s; }
.ins-chapter.active .ins-points li:nth-child(3) { transition-delay: 0.50s; }

.ins-bar {
    width: 3px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 44px;
    background: var(--brand);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.5);
}
.ins-points strong {
    display: block;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.ins-points em {
    display: block;
    font-style: normal;
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}


/* -------- Responsive -------- */
@media (max-width: 991px) {
    .insights-pin { height: 340vh; }
    .ins-shell { padding: 96px 40px 8px; }
    .ins-header { margin-bottom: 32px; }
    .ins-chapter {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ins-chapters { min-height: 380px; }
    .ins-head { font-size: 28px; margin-bottom: 20px; }
    .ins-stat { padding-top: 16px; gap: 16px; }
    .ins-stat-num { font-size: 54px; }
    .ins-points { gap: 24px; }
    .ins-chapter-aside { padding-top: 0; }
}

@media (max-width: 575px) {
    .insights-pin { height: 300vh; }
    .ins-shell { padding: 88px 24px 8px; }
    .ins-head { font-size: 24px; margin-bottom: 16px; }
    .ins-stat-num { font-size: 44px; }
    .ins-stat-label { font-size: 13px; max-width: 200px; }
    .ins-points strong { font-size: 15.5px; }
    .ins-points em { font-size: 13px; }
}

/* Mobile (≤767px): drop the pinned cinematic, show all chapters
   stacked normally so the section is readable on phones. */
@media (max-width: 767px) {
    .insights-pin {
        height: auto;
        padding: 36px 0 64px;
        /* Force the "contract-to-card" effect off so the dark backdrop
           stays full-bleed and covers every stacked chapter. The desktop
           JS sets this inline based on scroll progress, so !important
           wins against the inline style. */
        --ins-contract: 0 !important;
    }
    .ins-stage {
        position: static;
        height: auto;
        display: block;
        overflow: visible;
    }
    .ins-backdrop {
        /* Stretch backdrop across the whole section (no border-radius,
           no inset). On desktop this is computed from --ins-contract. */
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }
    .ins-shell { padding: 0 20px; }
    .ins-header { margin-bottom: 28px; }
    .ins-header .section-title { font-size: clamp(26px, 7vw, 32px); }

    .ins-chapters {
        display: flex;
        flex-direction: column;
        gap: 56px;
        min-height: 0;
    }
    .ins-chapter {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ins-chapter .ins-points li {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Backdrop motion is wasted when we're not pinning */
    .ins-bg-scanline { display: none; }
}

/* Reduced motion: stack chapters statically */
@media (prefers-reduced-motion: reduce) {
    .insights-pin { height: auto; padding: 96px 0; }
    .ins-stage { position: static; height: auto; }
    .ins-chapter {
        position: static;
        opacity: 1;
        transform: none;
        margin-bottom: 80px;
    }
    .ins-chapter .ins-points li { opacity: 1; transform: none; }
    .ins-bg-orb { display: none; }
}

/* =========================================================
   CTA BAND — contractable card (Apple Mac Studio pattern)
   Outer section is page-white; the red panel lives on .cta-card
   and pulls into a rounded inset card on enter/exit.
   ========================================================= */
.cta-band {
    position: relative;
    background: #ffffff;        /* page bg shows around the contracted card */
    color: #fff;
    padding: 0;
    /* --cta-contract: 0 when the band is fully bled (centered in viewport);
       ramps 0 → 1 at the top/bottom of the section's scroll life so the
       red card pulls in from the edges on enter and exit. */
    --cta-contract: 1;
}

.cta-card {
    position: relative;
    background: var(--brand);
    padding: 96px 72px;     /* extra L/R = breathing room inside the card */
    overflow: hidden;
    margin-top:    calc(var(--cta-contract) * 28px);
    margin-bottom: calc(var(--cta-contract) * 28px);
    /* Contract to container-xl (1280px) edges — lines up with every other
       section's content above and below. */
    margin-left:   calc(var(--cta-contract) * max(32px, (100vw - 1280px) / 2));
    margin-right:  calc(var(--cta-contract) * max(32px, (100vw - 1280px) / 2));
    border-radius: calc(var(--cta-contract) * 36px);
    box-shadow:
        0 40px 80px -30px rgba(177, 15, 26, 0.45),
        0 60px 120px -50px rgba(0, 0, 0, 0.25);
    /* GPU hint + layout containment so re-computing the four margins on
       scroll doesn't reflow the entire footer/page below the card. */
    will-change: margin, border-radius;
    contain: layout paint;
}
/* Mobile: the four-margin contraction was the most visible source of
   scroll jerking on touch devices. Lock the card to full-bleed (no
   contraction) on phones — the Apple-style "pull in" effect doesn't
   carry value at narrow widths where the margins are already small. */
@media (max-width: 767px) {
    .cta-card {
        margin: 0 !important;
        border-radius: 0 !important;
        will-change: auto;
    }
}

.cta-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px circle at 20% 20%, rgba(255,255,255,0.15), transparent 50%),
        radial-gradient(700px circle at 80% 80%, rgba(0,0,0,0.25), transparent 50%);
    pointer-events: none;
}
.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%);
    pointer-events: none;
}

.cta-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 30px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
}
.cta-title {
    font-size: clamp(42px, 6vw, 92px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0 0 26px;
}
.cta-sub {
    font-size: clamp(17px, 1.4vw, 21px);
    color: rgba(255,255,255,0.8);
    max-width: 680px;
    margin: 0 auto 40px;
    line-height: 1.55;
}
.cta-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.btn-white-xl {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    background: #fff;
    color: var(--brand);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.2);
}
.btn-white-xl:hover {
    color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 28px 50px -12px rgba(0,0,0,0.35);
}
.btn-white-xl i { transition: transform 0.35s var(--ease); }
.btn-white-xl:hover i { transform: translateX(4px); }

.btn-outline-white {
    display: inline-flex;
    align-items: center;
    padding: 18px 28px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-outline-white:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    color: #fff;
}

/* =========================================================
   FOOTER
   ========================================================= */
/* ============================================================
   FOOTER · Apple-style structure on a dark background
   - small disclaimer note at top
   - 5 evenly-distributed link columns
   - region/globe selector + social row
   - copyright + pipe-separated legal at the bottom
   ============================================================ */
.footer {
    background: #0b0b0c;
    color: rgba(255, 255, 255, 0.65);
    padding: 56px 0 14px;
    font-family: 'Inter', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Brand column: logo + short tagline (sits as the first cell in
   the link grid so it lines up with the column heads). */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-brand-logo {
    display: inline-block;
    line-height: 0;
    margin-bottom: 4px;
}
.footer-logo-img {
    height: 50px;
}
.footer-brand-tag {
    font: 400 13px/1.6 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.62);
    margin: 0;
    max-width: 260px;
    letter-spacing: 0.005em;
}

/* Brand column + 5 link columns */
.footer-cols {
    display: grid;
    grid-template-columns: 1.4fr repeat(6, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Desktop: hide the mobile-only Locations column (its addresses live
   in the dedicated .footer-offices-strip below the columns). */
@media (min-width: 768px) {
    .footer-col.footer-col-locations { display: none !important; }
}

/* Mobile: hide the dedicated offices strip and convert each footer
   column into a JS-driven accordion. h4 becomes a tappable header
   with a chevron; .footer-col.is-open expands the link list. */
@media (max-width: 767px) {
    .footer-offices-strip { display: none !important; }
    .footer-cols {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 12px;
    }
    .footer-brand { padding-bottom: 16px; }
    .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    /* Add a matching top border to the first column so the top of the
       accordion stack mirrors the bottom — symmetric framing. */
    .footer-col:first-of-type {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-col > h4 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        margin: 0 0 0px !important;
        cursor: pointer;
        font: 700 14px/1.2 'Inter', sans-serif;
        letter-spacing: 0.005em;
        color: rgba(255, 255, 255, 0.96);
        -webkit-tap-highlight-color: transparent;
    }
    .footer-col > h4::after {
        content: "\f078";  /* fa-chevron-down */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 11px;
        opacity: 0.65;
        transition: transform 0.3s var(--ease, cubic-bezier(.2,.7,.2,1));
    }
    .footer-col.is-open > h4::after { transform: rotate(180deg); }
    .footer-col > ul {
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        transition: max-height 0.35s var(--ease, cubic-bezier(.2,.7,.2,1)),
                    padding 0.35s var(--ease, cubic-bezier(.2,.7,.2,1));
    }
    .footer-col.is-open > ul {
        max-height: 600px;  /* large enough for the longest list */
        padding: 2px 0 14px;
    }
}
@media (max-width: 1199px) {
    .footer-cols {
        grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
    }
}
.footer-col h4 {
    font: 700 13px/1.2 'Inter', sans-serif;
    letter-spacing: 0.005em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 14px;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
}
.footer-col ul a {
    font: 400 13px/1.5 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    transition: color 0.25s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-col ul a:hover {
    color: #ffffff;
}

/* Locations accordion — multi-line entries (city + address). Each
   <li> renders as a stacked block: city title on top, address below. */
.footer-locations li {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.footer-loc-city {
    font: 600 12.5px/1.3 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.005em;
}
.footer-loc-addr {
    font: 400 12px/1.5 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.55);
}

/* Global offices strip — compact 3-col grid of all 6 addresses */
.footer-offices-strip {
    padding: 22px 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-offices-strip-title {
    font: 700 13px/1 'Inter', sans-serif;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.96);
    margin: 0 0 20px;
}
.footer-offices-strip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 32px;
}
.footer-office-mini {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 13px;
    border-left: 1.5px solid rgba(255, 255, 255, 0.10);
    transition:
        border-left-color 0.35s var(--ease, cubic-bezier(.2,.7,.2,1)),
        transform 0.35s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-office-mini:hover {
    border-left-color: var(--brand, #b10f1a);
    transform: translateX(2px);
}
.footer-office-mini-tag {
    display: inline-flex;
    align-items: center;
    font: 600 11px/1.3 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.60);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: color 0.35s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-office-mini:hover .footer-office-mini-tag {
    color: rgba(255, 255, 255, 0.95);
}
.footer-office-mini-tag::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    margin-right: 9px;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(177, 15, 26, 0.20);
}
.footer-office-mini-addr {
    font: 400 13px/1.55 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    transition: color 0.35s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-office-mini:hover .footer-office-mini-addr {
    color: rgba(255, 255, 255, 0.92);
}

.footer-office-mini-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font: 600 12.5px/1 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    letter-spacing: 0.005em;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-office-mini-phone i {
    font-size: 10.5px;
    color: var(--brand, #b10f1a);
    transition: color 0.3s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-office-mini-phone:hover { color: #ffffff; }
.footer-office-mini-phone:hover i { color: #ffffff; }

@media (max-width: 991px) {
    .footer-offices-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
}
@media (max-width: 520px) {
    .footer-offices-strip-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Region selector + social icons row */
.footer-region-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-region a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font: 500 14px/1 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.25s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-region a i {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.60);
    transition: color 0.25s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-region a:hover { color: #ffffff; }
.footer-region a:hover i { color: var(--brand, #b10f1a); }

.footer-social {
    display: flex;
    gap: 8px;
}
.footer-social a {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    transition:
        background 0.3s var(--ease, cubic-bezier(.2,.7,.2,1)),
        border-color 0.3s var(--ease, cubic-bezier(.2,.7,.2,1)),
        color 0.3s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-social a:hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    color: #ffffff;
}

/* Bottom strip: copyright + pipe-separated legal links */
.footer-bottom {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.footer-bottom small {
    color: rgba(255, 255, 255, 0.50);
    font-size: 12.5px;
}
.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.footer-legal a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    text-decoration: none;
    transition: color 0.25s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.footer-legal a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.footer-legal .sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 12.5px;
    user-select: none;
}

/* Mobile: centre the region / social / legal / copyright strips so
   the bottom of the footer reads as a clean, intentional block
   instead of a left-aligned ragged list. */
@media (max-width: 767px) {
    .footer-region-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 16px 0;
        text-align: center;
    }
    .footer-region a {
        justify-content: center;
        font-size: 13.5px;
    }
    .footer-region a i { font-size: 14px; }
    .footer-social { justify-content: center; }
    .footer-bottom {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 10px;
        margin-top: 14px;
    }
    .footer-legal { justify-content: center; }
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 991px) {
    .footer { padding: 28px 0 14px; }
    .footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        padding-bottom: 20px;
    }
    /* Brand column spans both columns at the top of the grid */
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand-tag { max-width: 480px; }
    .footer-region-row { padding: 14px 0; }
}
@media (max-width: 520px) {
    .footer-cols { grid-template-columns: 1fr; gap: 3px; }
    .footer-brand { grid-column: auto; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .hero { padding-top: 172px; min-height: auto; }
    .hero-scroll { margin-top: 48px; }
    /* Mobile: every section uses a uniform 36px top padding so the
       page reads as a clean vertical rhythm. Bottom kept larger for
       breathing room before the next section. */
    .capabilities, .case-study, .platforms, .industries, .services, .insights { padding: 36px 0 64px; }
    .impact { padding: 36px 0 64px; }
    /* Inner headers of pinned sections: zero out top padding since the
       section element itself now supplies the 36px top gap — otherwise
       both would stack and produce 72px. */
    .plt-header { padding-top: 0; }
    .ind-shell { padding-top: 0; }
    .ins-shell { padding-top: 0; }
    /* CTA card and footer also follow the 36px top rhythm. */
    .cta-card { padding: 36px 28px; }
    .footer { padding-top: 36px; }
    .cap-card p { min-height: auto; }
    .platform-card { flex: 0 0 300px; height: 440px; }
    .case-visual { margin: 0 auto 30px; }
    .case-chip.top { top: 20px; left: 20px; }
    .case-chip.bottom { bottom: 20px; right: 20px; }
}

@media (max-width: 575px) {
    .container-xl { padding-left: 20px; padding-right: 20px; }
    .hero-title { font-size: 56px; }
    .hero-sub { font-size: 16px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .btn-primary-xl, .btn-text { justify-content: center; }
    .section-title { font-size: 40px; }
    .cta-title { font-size: 44px; }
    .platform-card { flex: 0 0 280px; height: 420px; padding: 26px 24px; }
    .platform-card h3 { font-size: 36px; }
    .footer-legal { flex-wrap: wrap; gap: 14px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  PRODUCT ENGINEERING PAGE  ▼                         |
   |   File: product-engineering.html                         |
   |   All rules below are scoped under .pe-page or pe-*      |
   |   prefixes — safe to delete as a block.                  |
   |   Theme: white surface, brand red (#b10f1a), Apple-grade |
   |   typography, scroll-driven reveals & cinematic trans.   |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- PE · Shared tokens (page-local) ---------- */
.pe-page { background: var(--white); }

.pe-section-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 24px;
}
.pe-section-title .muted { color: var(--muted); font-weight: 500; }

.pe-section-lead {
    font-size: clamp(16px, 1.25vw, 19px);
    color: var(--muted);
    max-width: 720px;
    margin: 0 0 40px;
    line-height: 1.6;
}

.pe-lead {
    font-size: clamp(17px, 1.3vw, 20px);
    color: var(--ink);
    line-height: 1.55;
    letter-spacing: -0.005em;
    margin: 0 0 22px;
    font-weight: 500;
}
.pe-body {
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 16px;
}

/* PE buttons */
.pe-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border: 1px solid var(--brand);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.3s var(--ease);
    box-shadow: 0 14px 30px -12px rgba(177, 15, 26, 0.45);
}
.pe-btn-primary:hover {
    color: #fff;
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -14px rgba(177, 15, 26, 0.55);
}
.pe-btn-primary i { transition: transform 0.4s var(--ease); }
.pe-btn-primary:hover i { transform: translateX(4px); }

.pe-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 24px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.pe-btn-ghost:hover {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* Reveal initial state for PE page (in case body uses .reveal but main.js
   only hides those below initial viewport — keep PE consistent). */
.pe-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.pe-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.pe-page .reveal.in { opacity: 1; transform: none; }

/* =========================================================
   PE · 1. HERO
   ========================================================= */
/* Default .pe-hero now matches the DKT warm-gradient look so every
   sub-page that uses this hero pattern gets the same treatment
   without needing per-page inline overrides. */
.pe-hero {
    position: relative;
    padding: 120px 0 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(900px 540px at 8% 0%, rgba(177, 15, 26, 0.07), transparent 60%),
        radial-gradient(700px 420px at 100% 100%, rgba(177, 15, 26, 0.045), transparent 60%),
        linear-gradient(160deg, #fdf3f4 0%, #ffffff 45%, #fef9f5 100%);
}
.pe-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.pe-hero-grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(177, 15, 26, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177, 15, 26, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 75%);
}
.pe-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
}
.pe-orb-a {
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.30), transparent 70%);
    top: -22%; right: -12%;
    opacity: 0.7;
}
.pe-orb-b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255, 220, 200, 0.55), transparent 70%);
    bottom: -18%; left: -10%;
    opacity: 0.85;
}

.pe-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    text-align: left;
}

.pe-crumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 28px;
    letter-spacing: 0.02em;
}
.pe-crumbs a {
    color: var(--muted);
    transition: color 0.25s var(--ease);
}
.pe-crumbs a:hover { color: var(--brand); }
.pe-crumb-sep i { font-size: 9px; color: var(--muted-2); }
.pe-crumb-current {
    color: var(--ink);
    font-weight: 600;
}

/* Mobile: 3-level Industries breadcrumbs (Home › Industries › Healthcare
   & Life Sciences › Patient Data Management) used to break because the
   inline-flex container forced "Healthcare & Life Sciences" to wrap
   *inside* its anchor, creating a staircase look. Switch to a regular
   flex with row wrap + no internal wrap on each segment so the whole
   trail wraps cleanly across one-or-two rows. */
@media (max-width: 767px) {
    .pe-crumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        font-size: 12.5px;
        margin-bottom: 20px;
    }
    .pe-crumbs a,
    .pe-crumb-current {
        white-space: nowrap;
    }
}

.pe-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.pe-hero-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(48px, 7.4vw, 104px);
    line-height: 0.96;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin: 0 0 32px;
    max-width: 980px;
}
.pe-hero-title .accent {
    background: linear-gradient(120deg, var(--ink) 0%, var(--brand) 55%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.pe-hero-sub {
    font-size: clamp(17px, 1.4vw, 21px);
    color: var(--muted);
    max-width: 720px;
    margin: 0 0 40px;
    line-height: 1.55;
}

.pe-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

.pe-hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    padding: 18px 28px;
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--line);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.pe-meta-item { display: flex; flex-direction: column; }
.pe-meta-item strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.pe-meta-item span {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 4px;
}
.pe-meta-divider {
    width: 1px;
    height: 30px;
    background: var(--line);
}

/* =========================================================
   PE · 2. NARRATIVE (intro split)
   ========================================================= */
.pe-narrative {
    padding: 120px 0;
    background: #fff;
    position: relative;
    border-top: 1px solid var(--line);
}
.pe-narrative::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250,250,250,0.6), transparent);
    pointer-events: none;
}
.pe-narrative .container-xl { position: relative; z-index: 1; }

/* =========================================================
   PE · 3. AGILE — visual + copy
   Cinematic effect on scroll — visual sticky-pins on desktop
   while text scrolls past, scaled with .pe-scrub-cinematic
   (Apple Mac Studio "Featured Case Study" pattern, enhanced).
   ========================================================= */
.pe-agile {
    padding: 120px 0;
    background: #fafafa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

/* Sticky pin on desktop — visual stays in viewport while copy scrolls past */
@media (min-width: 992px) {
    .pe-agile { padding: 140px 0 160px; }
    .pe-agile .row { align-items: flex-start; }
    .pe-agile .row > .col-lg-6:first-child {
        position: sticky;
        top: 120px;
    }
}

/* =========================================================
   PE · CINEMATIC SCRUB EFFECT (Apple-grade)
   Used on .pe-agile-visual and .pe-method-board.
   Drives translate + scale + 3D rotateX + opacity from --p
   (set on the data-scrub parent). Richer than home-page
   scrub-zoom: adds Y-translate and X-rotation for depth.
   ========================================================= */
.pe-scrub-cinematic {
    transform-origin: center center;
    transform:
        perspective(1200px)
        translate3d(0, calc((1 - var(--p, 0)) * 40px), 0)
        rotateX(calc((1 - var(--p, 0)) * -4deg))
        scale(calc(0.84 + var(--p, 0) * 0.16));
    opacity: calc(0.4 + var(--p, 0) * 0.6);
    transition: none;
    will-change: transform, opacity;
}

.pe-agile-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 540px;
    margin: 0 auto;
    border-radius: 32px;
    background: linear-gradient(150deg, #ffffff 0%, #f3f3f5 100%);
    border: 1px solid var(--line);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.pe-agile-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17,17,19,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17,17,19,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 85%);
}
.pe-agile-orbit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pe-agile-orbit::before,
.pe-agile-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(177, 15, 26, 0.25);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: pe-spin 28s linear infinite;
}
.pe-agile-orbit::before { width: 64%; height: 64%; }
.pe-agile-orbit::after {
    width: 86%; height: 86%;
    border-color: rgba(17, 17, 19, 0.12);
    border-style: dotted;
    animation-direction: reverse;
    animation-duration: 36s;
}
@keyframes pe-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.pe-agile-core {
    position: relative;
    z-index: 2;
    width: 38%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: linear-gradient(155deg, #1a1a1c 0%, #2a0708 60%, var(--brand) 130%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 20px 50px -10px rgba(177, 15, 26, 0.45),
        inset 0 0 30px rgba(255, 255, 255, 0.06);
}
.pe-agile-core span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}
.pe-agile-core strong {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pe-agile-pip {
    position: absolute;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    z-index: 3;
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.pe-agile-pip:hover {
    transform: scale(1.1);
    background: var(--brand);
    color: #fff;
    box-shadow: 0 14px 30px -8px rgba(177, 15, 26, 0.5);
}
/* 6 pips placed evenly around the inner circle */
.pe-agile-pip.pip-1 { top: 8%;  left: 50%; transform: translateX(-50%); }
.pe-agile-pip.pip-2 { top: 23%; right: 10%; }
.pe-agile-pip.pip-3 { bottom: 23%; right: 10%; }
.pe-agile-pip.pip-4 { bottom: 8%; left: 50%; transform: translateX(-50%); }
.pe-agile-pip.pip-5 { bottom: 23%; left: 10%; }
.pe-agile-pip.pip-6 { top: 23%;  left: 10%; }

.pe-agile-chip {
    position: absolute;
    display: inline-flex;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 12.5px;
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    z-index: 4;
}
.pe-agile-chip strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.pe-agile-chip em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}
.pe-agile-chip .chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(177,15,26,0.15);
    animation: pe-blink 2.4s ease-in-out infinite;
}
.pe-agile-chip .chip-dot.green {
    background: #2ecf6f;
    box-shadow: 0 0 0 4px rgba(46,207,111,0.15);
}
@keyframes pe-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.pe-agile-chip.top    { top: 22px;    left: 22px; }
.pe-agile-chip.bottom { bottom: 22px; right: 22px; }

/* Mobile: the Agile-orbit visual shrinks, so chip.bottom (bottom-
   right) collides with pip-4 (the bottom-centre flask icon) and
   chip.top can crowd pip-1 (top-centre). Hide the top- and bottom-
   centre pips so the chips have clear space, and tighten chip
   positions and sizes so they fit comfortably inside the smaller
   visual container. */
@media (max-width: 767px) {
    .pe-agile-visual { max-width: 360px; border-radius: 24px; }
    .pe-agile-pip.pip-1,
    .pe-agile-pip.pip-4 { display: none; }
    .pe-agile-chip {
        padding: 8px 12px;
        gap: 9px;
        border-radius: 12px;
    }
    .pe-agile-chip strong { font-size: 12px; }
    .pe-agile-chip em { font-size: 10.5px; }
    .pe-agile-chip.top    { top: 14px; left: 14px; }
    .pe-agile-chip.bottom { bottom: 14px; right: 14px; }
    .pe-agile-pip { width: 36px; height: 36px; font-size: 14px; }
}

/* =========================================================
   PE · 4. HOW WE BUILD — PINNED FILMSTRIP STAGE
   ---------------------------------------------------------
   Cinematic, minimal alternative to grid cards. Section pins
   for ~4 viewports of scroll runway. Inside, 4 chapters are
   absolute-stacked — only one is .active at a time. Scrolling
   doesn't move the section past — it swaps the active pillar
   in place. Local --p (0..1 within each slot) drives the
   number-fill / tick / accent reveal of the active chapter.
   White, minimal, big-typography, distinct from home-page
   pinned sections (which are dark or use 3D rotators).
   ========================================================= */
.pe-pillars-pin {
    position: relative;
    height: 420vh;        /* 4 chapters × ~vh runway each */
    background: #fff;
}
.pe-pillars-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: stretch;
}
/* Subtle ambient glow follows the active chapter — barely there */
.pe-pillars-stage::before {
    content: "";
    position: absolute;
    width: 760px; height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.07), transparent 70%);
    top: 50%; left: -10%;
    transform: translateY(-50%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.pe-pillars-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding-top: 88px;           /* clear fixed navbar */
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
}

.pe-pillars-head {
    max-width: 760px;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.pe-pillars-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 8px 0 0;
}
.pe-pillars-title .muted { color: var(--muted); font-weight: 500; }
.pe-pillars-title .accent { color: var(--brand, #b10f1a); }

/* Stage holding the 4 chapters absolute-stacked */
.pe-pillar-chapters {
    position: relative;
    flex: 1;
    min-height: 320px;
}

.pe-pillar-chapter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    --p: 0;
}
.pe-pillar-chapter.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.pe-pillar-row {
    display: grid;
    grid-template-columns: minmax(260px, 40%) 1fr;
    gap: 56px;
    align-items: start;
    width: 100%;
}

/* ---- LEFT: number + tick + counter ---- */
.pe-pillar-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pe-pillar-num {
    position: relative;
    display: inline-block;
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: clamp(120px, 16vw, 240px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.045em;
    /* Subtle scale-in tied to scroll progress */
    transform: scale(calc(0.92 + var(--p, 0) * 0.08));
    transform-origin: left center;
    transition: transform 0.05s linear;
    user-select: none;
}
/* Outline layer — always visible */
.pe-pillar-num-outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(177, 15, 26, 0.35);
}
/* Filled layer — clip-path reveals from bottom-up tied to --p
   so the number "pours in" with brand red as the row scrolls in. */
.pe-pillar-num-fill {
    position: absolute;
    inset: 0;
    color: var(--brand);
    /* clip = inset(top right bottom left) — start fully clipped from top
       (revealing 0%), end fully visible. */
    clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0);
    -webkit-clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0);
    transition: clip-path 0.05s linear, -webkit-clip-path 0.05s linear;
    text-shadow: 0 14px 40px rgba(177, 15, 26, 0.25);
}

/* Thin animated tick line below the number — grows with --p */
.pe-pillar-tick {
    margin-top: 28px;
    width: 100%;
    max-width: 220px;
    height: 1px;
    background: var(--line);
    overflow: hidden;
    position: relative;
}
.pe-pillar-tick span {
    display: block;
    height: 100%;
    width: calc(var(--p, 0) * 100%);
    background: var(--brand);
    transition: width 0.05s linear;
}

.pe-pillar-counter {
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-2);
    /* Fades in late in the scrub */
    opacity: calc(var(--p, 0) * 1);
    transform: translateY(calc((1 - var(--p, 0)) * 8px));
    transition: opacity 0.05s linear, transform 0.05s linear;
}

/* ---- RIGHT: content slides in ---- */
.pe-pillar-main {
    /* Slide-in tied to --p (same scrub progress) */
    transform: translate3d(calc((1 - var(--p, 0)) * 30px), 0, 0);
    opacity: calc(0.35 + var(--p, 0) * 0.65);
    transition: transform 0.05s linear, opacity 0.05s linear;
    max-width: 640px;
}

.pe-pillar-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 12px;
    transform: scale(calc(0.85 + var(--p, 0) * 0.15));
    transition: transform 0.05s linear;
}

.pe-pillar-h3 {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 8px;
    line-height: 1.1;
}

.pe-pillar-tag {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 0.02em;
    margin: 0 0 12px;
    /* Subtle red rule under the tag */
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.pe-pillar-tag::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: calc(var(--p, 0) * 60px);
    background: var(--brand);
    transition: width 0.05s linear;
}

.pe-pillar-body {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 8px;
    max-width: 600px;
}
.pe-pillar-body:last-child { margin-bottom: 0; }

/* ---- Bottom progress nav: 4 dots only ---- */
.pe-pillar-nav {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.pe-pillar-dots {
    display: flex;
    gap: 12px;
    align-items: center;
}
.pe-pillar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease), width 0.4s var(--ease);
}
.pe-pillar-dot:hover { background: var(--muted); }
.pe-pillar-dot.active {
    background: var(--brand);
    width: 28px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.12);
}

/* =========================================================
   PE · 5. METHODS (chip board)
   Same cinematic pattern as Agile: sticky pin on desktop +
   scrub-driven scale/translate/rotate via .pe-scrub-cinematic.
   ========================================================= */
.pe-methods {
    padding: 120px 0;
    background: #fafafa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

/* Sticky pin on desktop — visual is on the RIGHT in this section */
@media (min-width: 992px) {
    .pe-methods { padding: 140px 0 160px; }
    .pe-methods .row { align-items: flex-start; }
    .pe-methods .row > .col-lg-6:last-child {
        position: sticky;
        top: 120px;
    }
}

.pe-method-board {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 32px;
    background:
        radial-gradient(700px circle at 50% 50%, rgba(177, 15, 26, 0.06), transparent 60%),
        #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

.pe-method-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.pe-method-link line {
    stroke: rgba(177, 15, 26, 0.18);
    stroke-width: 0.4;
    stroke-dasharray: 1.5 1.5;
}

.pe-method-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
    z-index: 2;
    width: 230px;
    max-width: 46%;
}
.pe-method-chip:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: 0 18px 36px -14px rgba(177, 15, 26, 0.25);
}
.pe-method-chip i {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.pe-method-chip strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.pe-method-chip em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
    line-height: 1.4;
}

.pe-mc-1 { top: 8%;  left: 6%;  }
.pe-mc-2 { top: 8%;  right: 6%; }
.pe-mc-3 { bottom: 8%; left: 6%; }
.pe-mc-4 { bottom: 8%; right: 6%; }

.pe-method-board::after {
    content: "Methodologies";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 8px 14px;
    border-radius: 999px;
    z-index: 3;
    white-space: nowrap;
}

/* =========================================================
   PE · 6. PROCESS TIMELINE
   ========================================================= */
.pe-process {
    padding: 120px 0;
    background: #fff;
    position: relative;
}
.pe-process::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(to top, rgba(250,250,250,0.5), transparent);
    pointer-events: none;
    z-index: 0;
}
.pe-process .container-xl { position: relative; z-index: 1; }
.pe-process-head { max-width: 760px; margin-bottom: 72px; }

.pe-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.pe-timeline-line {
    position: absolute;
    top: 12px;
    bottom: 12px;
    /* Centred on the marker column: column is 60px wide, line is 2px wide,
       so left = 30 - 1 = 29px puts the line's centre exactly at 30px,
       which matches the centre of the 60px marker. */
    left: 29px;
    width: 2px;
    background: linear-gradient(to bottom, var(--line) 0%, var(--brand-soft) 50%, var(--line) 100%);
    border-radius: 2px;
    z-index: 0;
}

.pe-step {
    position: relative;
    display: grid;
    /* First column matches marker width exactly so the marker centre
       lines up with the connector line. */
    grid-template-columns: 60px 1fr;
    gap: 28px;
    align-items: stretch;
    z-index: 1;
}

.pe-step-marker {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 0 0 6px #fff, 0 12px 28px -10px rgba(177,15,26,0.4);
    transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pe-step-marker span {
    line-height: 1;
}
.pe-step:hover .pe-step-marker {
    background: var(--brand);
    color: #fff;
    transform: scale(1.05);
}

.pe-step-card {
    padding: 24px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pe-step:hover .pe-step-card {
    transform: translateX(4px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.pe-step-card h4 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 8px;
}
.pe-step-card p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

/* =========================================================
   PE · 7. BENEFITS
   ========================================================= */
.pe-benefits {
    padding: 120px 0;
    background: #fafafa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.pe-benefit-grid { margin-top: 56px; }

.pe-benefit-card {
    height: 100%;
    padding: 36px 32px 34px;
    background: #ffffff;
    border: 0;
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease),
                background-color 0.5s var(--ease),
                box-shadow 0.5s var(--ease);
}
.pe-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.pe-benefit-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
}

/* Three distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. The cards
   are nested inside Bootstrap col wrappers, so the colour is applied
   per col position. */

/* Card 01 · Peach */
.pe-benefit-grid > div:nth-child(1) .pe-benefit-card {
    background: #ffe8dc;
}
.pe-benefit-grid > div:nth-child(1) .pe-benefit-card:hover {
    background: #fdd6c0;
}
.pe-benefit-grid > div:nth-child(1) .pe-benefit-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.pe-benefit-grid > div:nth-child(2) .pe-benefit-card {
    background: #ece5fb;
}
.pe-benefit-grid > div:nth-child(2) .pe-benefit-card:hover {
    background: #dccff5;
}
.pe-benefit-grid > div:nth-child(2) .pe-benefit-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.pe-benefit-grid > div:nth-child(3) .pe-benefit-card {
    background: #e3f0d6;
}
.pe-benefit-grid > div:nth-child(3) .pe-benefit-card:hover {
    background: #cee5b5;
}
.pe-benefit-grid > div:nth-child(3) .pe-benefit-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}
.pe-benefit-card h4 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.2;
}
.pe-benefit-card p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

/* =========================================================
   PE · 6b. PROCESS SECTION — creative right-side visual
   Layout: text-left (col-lg-7) + visual-right (col-lg-5).
   Visual = 4 stacked process tiles connected by a vertical
   brand-red flow line, with floating "Sprint cycle" chip.
   ========================================================= */
.pe-process-section {
    padding: 120px 0;
    background: #fff;
    position: relative;
}
.pe-process-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0.5), transparent);
    pointer-events: none;
    z-index: 0;
}
.pe-process-section .container-xl { position: relative; z-index: 1; }

.pe-process-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin: 0 auto;
    border-radius: 32px;
    background: linear-gradient(155deg, #ffffff 0%, #f6f6f8 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 28px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    overflow: hidden;
}

.pe-process-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 17, 19, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 19, 0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 90%);
    pointer-events: none;
}

/* Vertical brand-red flow line connecting all tiles */
.pe-process-flow-line {
    position: absolute;
    top: 56px;
    bottom: 56px;
    left: 64px;
    width: 2px;
    background: linear-gradient(to bottom,
        var(--brand-soft) 0%,
        var(--brand) 25%,
        var(--brand) 75%,
        var(--brand-soft) 100%);
    border-radius: 2px;
    z-index: 1;
}

/* Each phase tile — horizontal pill with number + icon + label */
.pe-process-tile {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.pe-process-tile:hover {
    transform: translateX(4px);
    border-color: var(--brand);
    box-shadow: 0 12px 26px -10px rgba(177, 15, 26, 0.3);
}

.pe-process-tile-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.pe-process-tile i {
    font-size: 16px;
    color: var(--brand);
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.pe-process-tile strong {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Active state — current iteration highlighted */
.pe-process-tile.pe-pt-active {
    background: linear-gradient(135deg, #fff 0%, var(--brand-soft) 100%);
    border-color: var(--brand);
    transform: translateX(8px);
    box-shadow: 0 16px 32px -10px rgba(177, 15, 26, 0.35);
}
.pe-process-tile.pe-pt-active .pe-process-tile-num {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.18);
}

/* Subtle entry stagger — tiles drift in slightly when section reveals */
.pe-pt-1 { animation: peProcessIn 0.7s 0.05s var(--ease) backwards; }
.pe-pt-2 { animation: peProcessIn 0.7s 0.15s var(--ease) backwards; }
.pe-pt-3 { animation: peProcessIn 0.7s 0.25s var(--ease) backwards; }
.pe-pt-4 { animation: peProcessIn 0.7s 0.35s var(--ease) backwards; }
@keyframes peProcessIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Floating "Sprint cycle" chip in the corner */
.pe-process-chip {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
}
.pe-process-chip .chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.15);
    animation: pe-blink 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
.pe-process-chip strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.pe-process-chip em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px;
}

/* Responsive — narrow tablets stack normally, mobile downsizes the visual */
@media (max-width: 991px) {
    .pe-process-section { padding: 80px 0; }
    .pe-process-visual { max-width: 420px; aspect-ratio: 4 / 5; }
    .pe-process-flow-line { left: 60px; }
    /* The Sprint-cycle chip is absolutely positioned over the
       Discover tile — at narrow widths the full-width tile collides
       with it. Hide the chip on mobile so the 4-step flow reads
       cleanly without overlap. */
    .pe-process-chip { display: none; }
}
@media (max-width: 575px) {
    .pe-process-visual { padding: 22px 20px; }
    .pe-process-flow-line { left: 56px; top: 46px; bottom: 46px; }
    .pe-process-tile { padding: 8px 14px 8px 10px; }
    .pe-process-tile-num { width: 32px; height: 32px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .pe-pt-1, .pe-pt-2, .pe-pt-3, .pe-pt-4 { animation: none; }
    .pe-process-chip .chip-dot { animation: none; }
}

/* =========================================================
   PE · 8. ENTIOVI ADVANTAGE — PINNED CINEMATIC STAGE
   Mirrors the home page Insights pin: outer section is taller
   than the viewport, inner stage pins via position: sticky,
   dark backdrop contracts to a rounded card on enter/exit.
   Inner content stays as a single panel (original copy preserved).
   ========================================================= */
.pe-adv-pin {
    position: relative;
    height: 260vh;             /* runway for the pin (single panel) — extended
                                  to give longer narrative content more
                                  comfortable scroll-in / scroll-out time */
    background: #ffffff;        /* page bg shows around the contracted card on exit */
    color: #fff;
    /* --pe-adv-contract: 0 while pinned (full-bleed), 1 when approaching exit
       (contracts to a rounded inset card — Apple Mac Studio effect). */
    --pe-adv-contract: 0;
    --pe-adv-prog: 0;
}

.pe-adv-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

/* -------- Brand-red backdrop (matches home page "Ready when you are" CTA)
   Solid brand red with subtle white+dark radial accents for cinematic depth.
   Side inset matches the container-xl (1280px) edge on wide screens, so the
   contract-to-card effect lines up cleanly with content above and below. */
.pe-adv-backdrop {
    position: absolute;
    top:    calc(var(--pe-adv-contract) * 28px);
    right:  calc(var(--pe-adv-contract) * max(24px, (100vw - 1280px) / 2));
    bottom: calc(var(--pe-adv-contract) * 28px);
    left:   calc(var(--pe-adv-contract) * max(24px, (100vw - 1280px) / 2));
    border-radius: calc(var(--pe-adv-contract) * 36px);
    z-index: 0;
    overflow: hidden;
    background: var(--brand);
    box-shadow:
        0 40px 80px -30px rgba(177, 15, 26, 0.45),
        0 60px 120px -50px rgba(0, 0, 0, 0.25);
}
/* Subtle accent radials (top-left soft white glow, bottom-right soft shadow) */
.pe-adv-bg-grid {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 50%),
        radial-gradient(700px circle at 80% 80%, rgba(0, 0, 0, 0.25), transparent 50%);
    pointer-events: none;
}

/* Orbs hidden — would clash with the new solid brand-red background.
   Kept selectors so HTML structure can stay unchanged. */
.pe-adv-bg-orb,
.pe-adv-bg-scanline {
    display: none;
}

/* -------- Content shell — single panel, original content preserved
   Top padding clears the fixed navbar (~80px) so content isn't clipped
   while pinned. Wider side padding gives breathing room from the
   rounded-card edges when the backdrop is contracted. */
.pe-adv-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 108px 72px 64px;
    display: flex;
    align-items: center;
}

.pe-adv-panel {
    width: 100%;
}

.pe-adv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
}
.pe-adv-eyebrow .pulse-dot.white {
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
}

.pe-adv-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 3.8vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #fff;
    margin: 0 0 20px;
}
.pe-adv-sub {
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 580px;
    margin: 0 0 14px;
}
.pe-adv-sub:first-of-type { color: rgba(255, 255, 255, 0.88); font-weight: 500; }
.pe-adv-sub:last-of-type { margin-bottom: 0; }
.pe-adv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pe-adv-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
.pe-adv-list i {
    width: 24px; height: 24px;
    border-radius: 50%;
    /* White-on-red highlight — readable on the brand-red backdrop. */
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 3px;
}

.pe-adv-stat-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    padding: 36px 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
}
.pe-adv-stat-item strong {
    display: block;
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 6px;
}
.pe-adv-stat-item span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
}

/* =========================================================
   PE · 9. CTA ENGAGE — INTERACTIVE HERO
   ---------------------------------------------------------
   Innovative Apple-style centered CTA:
     - Subtle dot-grid background
     - Mouse-tracking radial spotlight (set via JS --mx/--my)
     - Massive centered headline with gradient accent line
     - Magnetic primary CTA button with pulsing aurora behind it
     - Secondary chip-style action links
     - Decorative bottom signature
   No card, no flex-row — just space, type, and micro-interactions.
   ========================================================= */
.pe-cta {
    position: relative;
    padding: 140px 0 160px;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* ---- Background layers ---- */
.pe-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.pe-cta-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(17, 17, 19, 0.07) 1px, transparent 1.2px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    opacity: 0.7;
}
/* Mouse-tracking radial spotlight — JS sets --mx / --my on hover */
.pe-cta-spotlight {
    position: absolute;
    inset: 0;
    --mx: 50%;
    --my: 50%;
    background: radial-gradient(
        500px circle at var(--mx) var(--my),
        rgba(177, 15, 26, 0.14),
        transparent 60%
    );
    transition: background 0.18s linear;
}

.pe-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 920px;
}

/* ---- Eyebrow ---- */
.pe-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 32px;
}
.pe-cta-eyebrow .pulse-dot {
    width: 8px; height: 8px;
    background: var(--brand);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(177, 15, 26, 0.18);
    animation: pe-blink 2.4s ease-in-out infinite;
}

/* ---- Title ---- */
.pe-cta-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 6.4vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: var(--ink);
    margin: 0 0 28px;
    max-width: 880px;
}
.pe-cta-title-accent {
    display: inline-block;
    background: linear-gradient(120deg, var(--ink) 0%, var(--brand) 55%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-bottom: 0.1em;
}

.pe-cta-sub {
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 620px;
}

/* ---- Magnetic primary CTA + aurora ---- */
.pe-cta-hero-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    /* Roomy hit area for magnetic effect */
    padding: 20px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 0;
}
/* Pulsing aurora glow behind the button */
.pe-cta-aurora {
    position: absolute;
    width: 320px;
    height: 180px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(177, 15, 26, 0.55), transparent 70%);
    filter: blur(50px);
    opacity: 0.7;
    z-index: 0;
    animation: peCtaAurora 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes peCtaAurora {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%      { transform: scale(1.12); opacity: 0.85; }
}

.pe-cta-hero-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 16px 30px;
    color: #fff;
    border-radius: 999px;
    font-size: clamp(15px, 1.15vw, 17px);
    font-weight: 600;
    letter-spacing: 0.005em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: var(--ink);
    background-image:
        linear-gradient(135deg, #1d1d1f 0%, #0a0a0a 55%, #2a0709 130%);
    box-shadow:
        0 18px 40px -18px rgba(177, 15, 26, 0.50),
        0 10px 24px -10px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.35s var(--ease),
        box-shadow 0.45s var(--ease),
        border-color 0.35s var(--ease);
    overflow: hidden;
}
.pe-cta-hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.pe-cta-hero-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.14);
    background-image:
        linear-gradient(135deg, #1d1d1f 0%, var(--brand) 70%, var(--brand-dark) 130%);
    box-shadow:
        0 24px 50px -18px rgba(177, 15, 26, 0.70),
        0 14px 32px -10px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.pe-cta-hero-btn:hover::before { transform: translateX(100%); }

.pe-cta-hero-label {
    position: relative;
    z-index: 1;
    padding-left: 2px;
}
.pe-cta-hero-arrow {
    position: relative;
    z-index: 1;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    box-shadow:
        0 6px 14px -6px rgba(177, 15, 26, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition: transform 0.45s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.pe-cta-hero-btn:hover .pe-cta-hero-arrow {
    background: #fff;
    color: var(--brand);
    transform: rotate(-45deg);
}

/* ---- Secondary chip actions ---- */
.pe-cta-secondary {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 64px;
}
.pe-cta-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 500;
    transition:
        transform 0.3s var(--ease),
        border-color 0.3s var(--ease),
        background 0.3s var(--ease),
        color 0.3s var(--ease),
        box-shadow 0.3s var(--ease);
}
.pe-cta-chip i {
    font-size: 14px;
    color: var(--brand);
    transition: color 0.3s var(--ease);
}
.pe-cta-chip-tail {
    font-size: 11px !important;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.pe-cta-chip:hover {
    color: var(--brand);
    transform: translateY(-2px);
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 14px 28px -12px rgba(177, 15, 26, 0.25);
}
.pe-cta-chip:hover .pe-cta-chip-tail {
    opacity: 1;
    transform: translateX(0);
    color: var(--brand);
}

/* ---- Bottom decorative signature line ---- */
.pe-cta-signature {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 460px;
    color: var(--muted-2);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
}
.pe-cta-signature span {
    flex: 1;
    height: 1px;
    background: var(--line);
}
.pe-cta-signature em {
    font-style: normal;
    color: var(--muted-2);
    white-space: nowrap;
}

/* Mobile: stack the signature, center the label, drop the side rules
   so long page-specific labels (e.g. "ENGEN PRACTICE · DISCIPLINE 01")
   wrap inside the viewport instead of overflowing to the right. */
@media (max-width: 575px) {
    .pe-cta-signature {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        max-width: 100%;
        padding: 0 16px;
        text-align: center;
    }
    .pe-cta-signature span { display: none; }
    .pe-cta-signature em {
        white-space: normal;
        line-height: 1.5;
        letter-spacing: 0.18em;
        font-size: 11.5px;
    }
}

/* =========================================================
   PE · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .pe-hero { padding: 100px 0 50px; min-height: auto; }
    .pe-hero-title { font-size: clamp(44px, 8vw, 72px); }
    .pe-narrative,
    .pe-agile,
    .pe-methods,
    .pe-process,
    .pe-benefits { padding: 80px 0; }
    .pe-pillars-head,
    .pe-process-head { margin-bottom: 48px; }
    .pe-method-board { aspect-ratio: 5 / 4; max-width: 520px; }
    .pe-method-chip { width: 200px; padding: 14px 18px; }
    .pe-cta { padding: 100px 0 120px; }
    .pe-cta-hero-wrap { padding: 20px; margin-left: -20px; margin-right: -20px; }
    .pe-cta-aurora { width: 280px; height: 160px; }

    /* Pinned filmstrip → horizontal swipe slider on tablet/phone.
       JS still writes inline `style.setProperty('--p', ...)` per chapter
       based on window scroll — that would cause the number fill / tick /
       accent animations to flicker. Force the static fully-filled state
       with !important so JS values are visually neutralised. */
    .pe-pillars-pin { height: auto !important; }
    .pe-pillars-stage {
        position: static !important;
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }
    .pe-pillars-stage::before { display: none !important; }
    .pe-pillars-shell {
        /* IMPORTANT: only set vertical padding here — `.pe-pillars-shell`
           also carries the Bootstrap `.container-xl` class which supplies
           the horizontal gutter padding. The shorthand `padding: 80px 0 56px`
           would zero those gutters and push content to the viewport edges. */
        padding-top: 72px;
        padding-bottom: 32px;
        height: auto;
    }

    /* Slider container — each chapter is a 100% wide snap slide.
       `grid-auto-flow: column` + `grid-auto-columns: 100%` adapts to
       any pillar count (Services pages have 4–6 chapters each). */
    .pe-pillar-chapters {
        position: relative !important;
        display: grid !important;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        gap: 0 !important;
        flex: none !important;
        min-height: 0 !important;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pe-pillar-chapters::-webkit-scrollbar { display: none; }

    .pe-pillar-chapter {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        padding: 16px 16px 8px !important;
        margin: 0 !important;
        border-top: 0 !important;
        --p: 1 !important;       /* fully filled — number / tick / accents stay solid */
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 0;
        align-items: flex-start;
    }
    .pe-pillar-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .pe-pillar-aside { align-items: flex-start; }
    .pe-pillar-num {
        font-size: clamp(88px, 18vw, 140px);
        transform: none !important;     /* JS sets a scrub-tied scale; lock it */
    }
    .pe-pillar-num-fill {
        clip-path: inset(0 0 0 0) !important;
        -webkit-clip-path: inset(0 0 0 0) !important;
    }
    .pe-pillar-tick { max-width: 140px; margin-top: 16px; }
    .pe-pillar-tick span { width: 100% !important; background: var(--brand); }
    .pe-pillar-counter {
        opacity: 1 !important;
        transform: none !important;
        margin-top: 10px;
    }
    .pe-pillar-main {
        transform: none !important;
        opacity: 1 !important;
        max-width: 100%;
    }
    .pe-pillar-icon { transform: none !important; }

    /* Show dots as slider pagination indicators */
    .pe-pillar-nav {
        display: flex !important;
        justify-content: center;
        margin-top: 20px !important;
    }
    .pe-pillar-dots {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }
    .pe-pillar-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(17, 17, 19, 0.18);
        cursor: pointer;
        transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .pe-pillar-dot.active {
        background: var(--brand, #b10f1a);
        width: 24px;
        border-radius: 100px;
    }
    .pe-pillar-progress { display: none !important; }

    /* Advantage pinned stage on tablet */
    .pe-adv-pin { height: 200vh; }
    .pe-adv-shell { padding: 96px 40px 48px; }
    .pe-adv-stat-card { padding: 28px 24px; gap: 22px 24px; }
    .pe-adv-title { font-size: 38px; margin-bottom: 18px; }
}

@media (max-width: 767px) {
    .pe-hero-meta {
        gap: 16px;
        padding: 14px 18px;
    }
    .pe-meta-divider { display: none; }
    .pe-hero-title { font-size: clamp(40px, 11vw, 60px); }
    /* Marker shrinks to 44px on mobile — keep column width matched and
       line centred at marker centre (44/2 = 22, line half-width = 1). */
    .pe-step { grid-template-columns: 44px 1fr; gap: 18px; }
    .pe-timeline-line { left: 21px; }
    .pe-step-marker { width: 44px; height: 44px; font-size: 11px; }
    .pe-method-board {
        aspect-ratio: auto;
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        overflow: hidden;
    }
    .pe-method-chip {
        position: static;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 14px 16px;
        gap: 12px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Allow the text column to shrink — flex items default to min-width:auto
       which would otherwise force the chip wider than its grid cell when
       a long em like "Intelligence woven through every cycle" can't wrap. */
    .pe-method-chip > div { min-width: 0; flex: 1 1 0; }
    .pe-method-chip i { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
    .pe-method-chip strong { font-size: 14.5px; }
    .pe-method-chip em { font-size: 12px; }
    .pe-method-link { display: none; }
    .pe-method-board::after {
        position: static;
        transform: none;
        grid-column: 1 / -1;
        order: -1;
        margin: 0 auto 4px;
    }
    .pe-btn-primary, .pe-btn-ghost { justify-content: center; flex: 1 1 200px; }
    .pe-cta { padding: 80px 0 96px; }
    .pe-cta-title { font-size: clamp(36px, 9vw, 56px); margin-bottom: 22px; }
    .pe-cta-sub { margin-bottom: 12px; }
    .pe-cta-hero-wrap { margin-bottom: 28px; padding: 18px; margin-left: -18px; margin-right: -18px; }
    .pe-cta-hero-btn { padding: 14px 18px 14px 24px; gap: 12px; }
    .pe-cta-hero-arrow { width: 30px; height: 30px; }
    .pe-cta-secondary { gap: 10px; margin-bottom: 48px; }
    .pe-cta-chip { padding: 12px 18px; font-size: 13.5px; }
    /* On touch devices the magnetic effect doesn't help — disable it visually */
    .pe-cta-hero-btn { transform: none !important; }

    .pe-pillar-chapter { padding: 40px 0; }
    .pe-pillar-num { font-size: clamp(96px, 28vw, 160px); }
    .pe-pillar-h3 { font-size: clamp(24px, 5.5vw, 32px); }
}

/* On the smallest viewports the 2-column methodology grid still
   squeezes "AI-Augmented" / "Intelligence woven through every cycle"
   too tight — drop to a single column so each chip reads cleanly. */
@media (max-width: 480px) {
    .pe-method-board {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px;
    }
    .pe-method-chip { padding: 12px 14px; }
}

@media (max-width: 767px) {
    /* Entiovi Advantage — drop the pinned cinematic on phones so the
       section reads as a normal block without the long scroll runway.
       The desktop JS still sets --pe-adv-contract on scroll, so the inset
       overrides need !important to keep the brand-red panel full-bleed. */
    .pe-adv-pin {
        height: auto !important;
        --pe-adv-contract: 0 !important;
        --pe-adv-prog: 0 !important;
        padding: 0;
    }
    .pe-adv-stage {
        position: static !important;
        height: auto !important;
        display: block;
        overflow: visible;
    }
    .pe-adv-backdrop {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }
    .pe-adv-shell {
        height: auto;
        padding: 72px 24px 64px;
    }
}

@media (max-width: 575px) {
    .pe-hero-title { font-size: 44px; line-height: 1; }
    .pe-section-title { font-size: 32px; }
    .pe-cta-title { font-size: 36px; line-height: 1; }
    /* The desktop 999px-radius pill turns into a stretched lozenge
       once the sentence wraps to 2-3 lines on mobile. Drop to a normal
       rounded-rectangle and align the pulse-dot to the first line. */
    .pe-cta-eyebrow {
        display: inline-flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 14px;
        font-size: 11px;
        line-height: 1.55;
        text-align: left;
        max-width: 100%;
        margin-bottom: 24px;
    }
    .pe-cta-eyebrow .pulse-dot { flex-shrink: 0; margin-top: 4px; }
    /* Long labels like "Start with an orchestration scoping engagement"
       wrap to 2 lines on mobile. Tighten button padding + gap so the
       arrow sits closer to the wrapped label, keep arrow from shrinking,
       and center the label text inside its flex cell. */
    .pe-cta-hero-btn {
        padding: 14px 16px 14px 22px;
        gap: 12px;
        font-size: 14px;
        max-width: 100%;
    }
    .pe-cta-hero-label {
        text-align: center;
        line-height: 1.35;
        flex: 1 1 auto;
        min-width: 0;
    }
    .pe-cta-hero-arrow {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    .pe-cta-secondary { flex-direction: column; align-items: stretch; }
    .pe-cta-chip { justify-content: center; }
    .pe-step-card { padding: 18px 20px; }
    .pe-pillar-num { font-size: 92px; }

    .pe-adv-shell { padding: 56px 20px 48px; }
    .pe-adv-title { font-size: 30px; }
    .pe-adv-stat-card { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
}

/* Reduced motion: unpin pillars, force final-state visibility */
@media (prefers-reduced-motion: reduce) {
    .pe-agile-chip .chip-dot,
    .pe-cta-eyebrow .pulse-dot,
    .pe-agile-orbit::before,
    .pe-agile-orbit::after { animation: none; }

    .pe-scrub-cinematic {
        transform: none !important;
        opacity: 1 !important;
    }

    .pe-pillars-pin { height: auto; }
    .pe-pillars-stage { position: static; height: auto; display: block; }
    .pe-pillars-shell { padding: 96px 0 64px; height: auto; }
    .pe-pillar-chapters { display: flex; flex-direction: column; }
    .pe-pillar-chapter {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        padding: 56px 0;
        --p: 1;
    }
    .pe-pillar-num { transform: none; }
    .pe-pillar-num-fill { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
    .pe-pillar-tick span { width: 100%; }
    .pe-pillar-counter { opacity: 1; transform: none; }
    .pe-pillar-main { transform: none; opacity: 1; }
    .pe-pillar-icon { transform: none; }
    .pe-pillar-tag::after { width: 60px; }
    .pe-pillar-nav { display: none; }

    .pe-adv-pin { height: auto; padding: 100px 0; }
    .pe-adv-stage { position: static; height: auto; }
    .pe-adv-bg-orb { display: none; }
    .pe-adv-bg-scanline { animation: none; }

    .pe-cta-aurora { animation: none; opacity: 0.5; }
    .pe-cta-hero-btn { transform: none !important; }
    .pe-cta-spotlight { display: none; }
}

/* =========================================================
   PE · CENTERED EDITORIAL VARIANTS
   Used on PE-3 (Agile), PE-5 (Methodologies), PE-6 (Process)
   when the right-side visual is removed and the section is
   reflowed as a single-column editorial layout with a body
   grid and a horizontal stages/cards row.
   ========================================================= */
.pe-agile-centered .pe-agile-inner,
.pe-methods-centered .pe-methods-inner,
.pe-process-centered .pe-process-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.pe-agile-centered .section-eyebrow,
.pe-methods-centered .section-eyebrow,
.pe-process-centered .section-eyebrow {
    display: inline-block;
}
.pe-agile-centered .pe-section-title,
.pe-methods-centered .pe-section-title,
.pe-process-centered .pe-section-title { text-align: center; }
.pe-agile-centered .pe-lead,
.pe-methods-centered .pe-lead,
.pe-process-centered .pe-lead {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* Body grids — 2 or 3 columns of supporting paragraphs */
.pe-agile-body-grid,
.pe-methods-body-grid,
.pe-process-body-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 40px;
    max-width: 1180px;
    margin: 44px auto 64px;
    padding-top: 36px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.pe-agile-body-grid .pe-body,
.pe-methods-body-grid .pe-body,
.pe-process-body-grid .pe-body { margin: 0; }

/* Shared pill badge label */
.pe-agile-cycle-tag,
.pe-methods-options-tag,
.pe-process-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pe-agile-cycle,
.pe-methods-options,
.pe-process-flow {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* PE-3 — Agile cycle 6-step row with connecting brand-red line */
.pe-agile-cycle-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    position: relative;
}
.pe-agile-cycle-steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(177, 15, 26, .22) 12%,
        rgba(177, 15, 26, .22) 88%,
        transparent 100%);
    z-index: 0;
}
.pe-agile-cycle-steps li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 6px;
}
.pe-agile-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 6px #fff, 0 6px 14px rgba(177, 15, 26, .12);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pe-agile-cycle-steps li:hover .pe-agile-step-num {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: translateY(-3px);
}
.pe-agile-cycle-steps li i {
    font-size: 16px;
    color: rgba(29, 29, 31, .55);
    transition: color .3s ease;
}
.pe-agile-cycle-steps li:hover i { color: var(--brand, #b10f1a); }
.pe-agile-cycle-steps li strong {
    font: 600 13.5px/1.35 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.008em;
    text-align: center;
}

/* PE-5 — Methodologies 4-card row in pastel solid-fill style
   (matches the rp-reco-card pattern: tinted fill, icon chip
   inline with name, divider, body paragraph below). */
.pe-methods-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.pe-method-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    padding: 32px 28px 28px;
    text-align: left;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.pe-method-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.pe-method-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pe-method-card-head i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 17px;
    flex-shrink: 0;
}
.pe-method-card-head span {
    font: 700 16px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}
.pe-method-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}

/* Per-card pastel palettes — solid fill, no border, deeper hover */
.pe-method-card:nth-child(1) {                          /* Agile — sky blue */
    background: #dbeafe;
}
.pe-method-card:nth-child(1):hover {
    background: #bfdbfe;
}
.pe-method-card:nth-child(1) .pe-method-card-head i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.pe-method-card:nth-child(2) {                          /* Waterfall — peach */
    background: #ffe8dc;
}
.pe-method-card:nth-child(2):hover {
    background: #fdd6c0;
}
.pe-method-card:nth-child(2) .pe-method-card-head i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}

.pe-method-card:nth-child(3) {                          /* Hybrid — lavender */
    background: #ece5fb;
}
.pe-method-card:nth-child(3):hover {
    background: #dccff5;
}
.pe-method-card:nth-child(3) .pe-method-card-head i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}

.pe-method-card:nth-child(4) {                          /* AI-Augmented — rose */
    background: #fde2e4;
}
.pe-method-card:nth-child(4):hover {
    background: #fbcfd2;
}
.pe-method-card:nth-child(4) .pe-method-card-head i {
    background: rgba(177, 15, 26, 0.18);
    color: #b10f1a;
}

/* PE-6 — Process 4-step row with connecting line + descriptions */
.pe-process-flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
}
.pe-process-flow-steps::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(177, 15, 26, .22) 12%,
        rgba(177, 15, 26, .22) 88%,
        transparent 100%);
    z-index: 0;
}
.pe-process-flow-steps li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
}
.pe-process-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 14px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 6px #fff, 0 6px 14px rgba(177, 15, 26, .12);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pe-process-flow-steps li:hover .pe-process-step-num {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: translateY(-3px);
}
.pe-process-flow-steps li i {
    font-size: 18px;
    color: rgba(29, 29, 31, .55);
    transition: color .3s ease;
}
.pe-process-flow-steps li:hover i { color: var(--brand, #b10f1a); }
.pe-process-flow-steps li strong {
    font: 700 16px/1.3 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}
.pe-process-flow-steps li em {
    font: 500 13.5px/1.4 "Inter", sans-serif;
    color: rgba(29, 29, 31, .58);
    font-style: normal;
    letter-spacing: -.005em;
    text-align: center;
}

@media (max-width: 991px) {
    .pe-agile-body-grid,
    .pe-methods-body-grid,
    .pe-process-body-grid { grid-template-columns: 1fr; gap: 24px; }

    .pe-agile-cycle-steps { grid-template-columns: repeat(3, 1fr); gap: 24px 14px; }
    .pe-agile-cycle-steps::before { display: none; }

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

    .pe-process-flow-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .pe-process-flow-steps::before { display: none; }
}
@media (max-width: 540px) {
    .pe-agile-cycle-steps { grid-template-columns: repeat(2, 1fr); }
    .pe-methods-options-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ▲  END · PRODUCT ENGINEERING PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  PLATFORM DEVELOPMENT PAGE  ▼                        |
   |   File: platform-development.html                        |
   |   All rules below are scoped under .pd-page or pd-*      |
   |   prefixes — safe to delete as a block.                  |
   |   Theme: white surface, brand red (#b10f1a), Apple-grade |
   |   typography, scroll-driven reveals & cinematic trans.   |
   |                                                          |
   |   NOTE: Reuses the .pe-* utility classes (hero, narrative,|
   |   buttons, scrub-cinematic, advantage pin, CTA) for brand|
   |   consistency across all Service sub-pages. PD-specific   |
   |   rules below cover the unique sections only:            |
   |     · pd-stack       — tech & cloud constellation        |
   |     · pd-pillars     — 2x2 cinematic pillar grid          |
   |     · pd-advantages  — 5-step zig-zag advantage flow     |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- PD · Foundational page rules (mirror .pe-page) ---------- */
.pd-page { background: var(--white); }
.pd-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.pd-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.pd-page .reveal.in { opacity: 1; transform: none; }


/* =========================================================
   PD · 1. TECH STACK CONSTELLATION
   Distinctive layered showcase of cloud + frameworks +
   architecture — three rows of glass-pill badges floating
   on a soft grid backdrop, with a subtle pulse animation.
   ========================================================= */
.pd-stack {
    padding: 120px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.pd-stack::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250,250,250,0.5), transparent);
    pointer-events: none;
    z-index: 0;
}
.pd-stack .container-xl { position: relative; z-index: 1; }

.pd-stack-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 540px;
    margin: 0 auto;
    border-radius: 32px;
    background: linear-gradient(150deg, #ffffff 0%, #f7f7f9 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 18px;
}
.pd-stack-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 17, 19, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 19, 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 85%);
    pointer-events: none;
}

.pd-stack-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pd-stack-row-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
    padding-left: 4px;
}
.pd-stack-row-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-stack-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        transform 0.4s var(--ease),
        border-color 0.4s var(--ease),
        background 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.pd-stack-badge i {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pd-stack-badge em {
    font-style: normal;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.pd-stack-badge:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 16px 32px -12px rgba(177, 15, 26, 0.25);
}
.pd-stack-badge:hover i {
    background: var(--brand);
    color: #fff;
}

/* Subtle pulse decoration in the corner */
.pd-stack-pulse {
    position: absolute;
    bottom: 16px; right: 16px;
    display: inline-flex;
    gap: 4px;
    z-index: 1;
}
.pd-stack-pulse span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.3;
    animation: pdStackPulse 1.6s ease-in-out infinite;
}
.pd-stack-pulse span:nth-child(2) { animation-delay: 0.2s; }
.pd-stack-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pdStackPulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}


/* PD · 2. PILLARS — Reuses the PE page's pinned filmstrip
   (.pe-pillars-pin / .pe-pillar-chapter / etc.) so the
   "How we build" section behaves identically on this page.
   No PD-specific styles needed for that block. */


/* =========================================================
   PD · 1b. EXPERT TEAM — creative right-side visual
   "Expertise Mosaic": floating chip + avatar cluster + caption +
   skill tags + quality bar. Distinct from the Cloud Technologies
   stack visual that sits below it.
   ========================================================= */
.pd-expert {
    padding: 120px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.pd-expert::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250,250,250,0.5), transparent);
    pointer-events: none;
    z-index: 0;
}
.pd-expert .container-xl { position: relative; z-index: 1; }

.pd-expert-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 32px;
    background: linear-gradient(155deg, #ffffff 0%, #f7f7f9 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    overflow: hidden;
}

.pd-expert-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 17, 19, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 19, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 90%);
    pointer-events: none;
}

/* Floating chip in the corner — "Expert team" indicator */
.pd-expert-chip {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    align-self: flex-start;
}
.pd-expert-chip .chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.18);
    animation: pe-blink 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
.pd-expert-chip strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.pd-expert-chip em {
    display: block;
    font-style: normal;
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
}

/* Avatar cluster — 5 overlapping role circles, brand-red gradient */
.pd-expert-avatars {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0;
    height: 96px;
}
.pd-expert-avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: linear-gradient(155deg, #fff 0%, #f3f3f5 100%);
    border: 1.5px solid var(--line);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-left: -22px;
    box-shadow: 0 12px 24px -10px rgba(17, 17, 19, 0.18);
    transition: transform 0.45s var(--ease), background 0.45s var(--ease), color 0.45s var(--ease);
    position: relative;
}
.pd-expert-avatar:first-child { margin-left: 0; }
.pd-expert-avatar:hover {
    transform: translateY(-6px) scale(1.06);
    z-index: 5;
}

/* Active center avatar — brand-red gradient, lifted */
.pd-expert-avatar.pd-ea-active {
    background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-color: var(--brand-dark);
    color: #fff;
    transform: translateY(-10px) scale(1.1);
    box-shadow: 0 18px 36px -10px rgba(177, 15, 26, 0.55);
    z-index: 4;
}

/* Stagger entry animation */
.pd-ea-1 { animation: pdExpAvatarIn 0.6s 0.05s var(--ease) backwards; }
.pd-ea-2 { animation: pdExpAvatarIn 0.6s 0.15s var(--ease) backwards; }
.pd-ea-3 { animation: pdExpAvatarIn 0.6s 0.25s var(--ease) backwards; }
.pd-ea-4 { animation: pdExpAvatarIn 0.6s 0.35s var(--ease) backwards; }
.pd-ea-5 { animation: pdExpAvatarIn 0.6s 0.45s var(--ease) backwards; }
@keyframes pdExpAvatarIn {
    from { opacity: 0; transform: translateY(20px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pd-ea-3.pd-ea-active {
    animation: pdExpAvatarInActive 0.7s 0.25s var(--ease) backwards;
}
@keyframes pdExpAvatarInActive {
    from { opacity: 0; transform: translateY(20px) scale(0.85); }
    to   { opacity: 1; transform: translateY(-10px) scale(1.1); }
}

/* Caption beneath avatars — big number + label */
.pd-expert-caption {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.pd-expert-cap-num {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(180deg, var(--ink) 0%, var(--brand) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.pd-expert-cap-label {
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Skill tags — 4 small pills */
.pd-expert-tags {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.pd-expert-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.005em;
    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.pd-expert-tag i {
    font-size: 10.5px;
}
.pd-expert-tag:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px);
}

/* Quality bar at the bottom — A+ rating indicator */
.pd-expert-bar {
    position: relative;
    z-index: 2;
    height: 4px;
    background: rgba(17, 17, 19, 0.06);
    border-radius: 4px;
    overflow: visible;
    margin-top: 4px;
}
.pd-expert-bar-fill {
    display: block;
    height: 100%;
    width: 92%;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.45);
    animation: pdExpBarFill 1.4s 0.5s var(--ease) backwards;
}
@keyframes pdExpBarFill {
    from { width: 0%; }
    to   { width: 92%; }
}
.pd-expert-bar em {
    position: absolute;
    right: 0;
    top: 12px;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Responsive */
@media (max-width: 991px) {
    .pd-expert { padding: 80px 0; }
    .pd-expert-visual { max-width: 460px; padding: 28px 28px 24px; }
    .pd-expert-avatar { width: 72px; height: 72px; font-size: 22px; margin-left: -18px; }
    .pd-expert-cap-num { font-size: 36px; }
    /* The active centre avatar lifts -10px + scales 1.1 — on the
       smaller mobile visual that lift puts its top edge right under
       the "Expert team" chip above. Tame the lift on mobile so they
       have clear breathing room. */
    .pd-expert-avatar.pd-ea-active { transform: translateY(-4px) scale(1.05); }
    /* The 4-tag row wraps awkwardly to 3+1 on phone widths — let it
       wrap as 2+2 by capping each tag's flex basis. */
    .pd-expert-tags { gap: 8px 10px; }
    .pd-expert-tag { flex: 0 1 auto; }
}
@media (max-width: 575px) {
    .pd-expert-visual { aspect-ratio: 5 / 6; padding: 24px 20px 20px; }
    .pd-expert-avatar { width: 60px; height: 60px; font-size: 19px; margin-left: -14px; }
    .pd-expert-avatar.pd-ea-active { transform: translateY(-3px) scale(1.04); }
    .pd-expert-cap-num { font-size: 32px; }
    .pd-expert-tag { font-size: 11.5px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .pd-ea-1, .pd-ea-2, .pd-ea-3, .pd-ea-4, .pd-ea-5,
    .pd-expert-bar-fill,
    .pd-expert-chip .chip-dot { animation: none; }
}


/* =========================================================
   PD · 3. ADVANTAGES — 5-step zig-zag flow
   ---------------------------------------------------------
   Distinct from PE page's vertical timeline: here we use an
   alternating L-R layout where each step has a large numbered
   visual side and a content card. A vertical brand-gradient
   guide line runs through the centre, anchoring the flow.
   ========================================================= */
.pd-advantages {
    padding: 140px 0 160px;
    background: #fff;
    position: relative;
}
.pd-advantages::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(250,250,250,0.4), transparent);
    pointer-events: none;
    z-index: 0;
}
.pd-advantages .container-xl { position: relative; z-index: 1; }

.pd-advantages-head {
    max-width: 760px;
    margin-bottom: 80px;
}

.pd-adv-flow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 0;
}
/* Central guide line on desktop */
.pd-adv-flow-line {
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(to bottom,
        transparent 0%,
        var(--brand-soft) 6%,
        var(--brand-soft) 94%,
        transparent 100%);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
}
.pd-adv-flow-line::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.18);
}
.pd-adv-flow-line::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.18);
}

.pd-adv-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;     /* both halves hug the centre line */
    gap: 80px;
}
/* Default: number/icon side on the left of centre, content card on the right.
   text-align is for the card content; flex order keeps placement reliable. */
.pd-adv-step .pd-adv-step-side {
    order: 0;
    flex-shrink: 0;
}
.pd-adv-step .pd-adv-step-card {
    order: 1;
    flex: 0 1 480px;             /* up to 480px wide, can shrink */
}
/* Flipped: card on the left of centre, side on the right.
   Using `order` keeps both items in the same flex row — guaranteed
   to mirror the default layout cleanly, hugging the centre line. */
.pd-adv-step.pd-adv-step-flip .pd-adv-step-card { order: 0; }
.pd-adv-step.pd-adv-step-flip .pd-adv-step-side { order: 1; }

.pd-adv-step-side {
    position: relative;
    width: 220px;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    background: linear-gradient(155deg, #ffffff 0%, #f7f7f9 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    overflow: hidden;
}
.pd-adv-step-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(177, 15, 26, 0.1), transparent 60%);
    pointer-events: none;
}
.pd-adv-step-num {
    position: relative;
    font-size: clamp(64px, 8vw, 100px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(177, 15, 26, 0.45);
    background: linear-gradient(180deg, rgba(177, 15, 26, 0.65), var(--brand));
    -webkit-background-clip: text;
    background-clip: text;
}
.pd-adv-step-icon {
    position: relative;
    font-size: 24px;
    color: var(--brand);
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(177, 15, 26, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pd-adv-step-card {
    max-width: 480px;
    padding: 32px 32px 30px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    transition:
        transform 0.4s var(--ease),
        background-color 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
}
.pd-adv-step:hover .pd-adv-step-card {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

/* Five distinct soft sweet pastel fills for the content cards — solid
   colors, no border. On hover the bg deepens to a richer pastel of
   the same hue family. The numbered side panel keeps its existing
   ornamental treatment. */

/* Card 01 · Peach */
.pd-adv-flow .pd-adv-step:nth-of-type(1) .pd-adv-step-card {
    background: #ffe8dc;
}
.pd-adv-flow .pd-adv-step:nth-of-type(1):hover .pd-adv-step-card {
    background: #fdd6c0;
}

/* Card 02 · Lavender */
.pd-adv-flow .pd-adv-step:nth-of-type(2) .pd-adv-step-card {
    background: #ece5fb;
}
.pd-adv-flow .pd-adv-step:nth-of-type(2):hover .pd-adv-step-card {
    background: #dccff5;
}

/* Card 03 · Pistachio */
.pd-adv-flow .pd-adv-step:nth-of-type(3) .pd-adv-step-card {
    background: #e3f0d6;
}
.pd-adv-flow .pd-adv-step:nth-of-type(3):hover .pd-adv-step-card {
    background: #cee5b5;
}

/* Card 04 · Sky */
.pd-adv-flow .pd-adv-step:nth-of-type(4) .pd-adv-step-card {
    background: #dceffa;
}
.pd-adv-flow .pd-adv-step:nth-of-type(4):hover .pd-adv-step-card {
    background: #b8dcf2;
}

/* Card 05 · Rose */
.pd-adv-flow .pd-adv-step:nth-of-type(5) .pd-adv-step-card {
    background: #fde0ec;
}
.pd-adv-flow .pd-adv-step:nth-of-type(5):hover .pd-adv-step-card {
    background: #fbcad8;
}
.pd-adv-step-card h4 {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.2;
}
.pd-adv-step-card p {
    font-size: 15.5px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}


/* =========================================================
   PD · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .pd-stack { padding: 80px 0; }
    .pd-stack-visual { aspect-ratio: 5 / 4; max-width: 520px; padding: 28px 22px; }

    .pd-advantages { padding: 96px 0 100px; }
    .pd-advantages-head { margin-bottom: 56px; }
    .pd-adv-flow { gap: 44px; }
    .pd-adv-flow-line { display: none; }    /* line gets in the way on stacked layout */
    /* Stack each step: image side above, card below; reset flex direction
       and order so flipped steps also stack uniformly. */
    .pd-adv-step,
    .pd-adv-step.pd-adv-step-flip {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .pd-adv-step .pd-adv-step-side,
    .pd-adv-step.pd-adv-step-flip .pd-adv-step-side {
        order: 0;
        align-self: flex-start;
    }
    .pd-adv-step .pd-adv-step-card,
    .pd-adv-step.pd-adv-step-flip .pd-adv-step-card {
        order: 1;
        flex-basis: auto;
    }
    .pd-adv-step-side { width: 160px; }
}

@media (max-width: 767px) {
    .pd-adv-step-side { width: 140px; border-radius: 22px; }
    .pd-adv-step-num { font-size: 56px; }
    .pd-adv-step-card { padding: 26px 24px; }
    .pd-adv-step-card h4 { font-size: 19px; }
    .pd-stack-row-label { font-size: 10.5px; }
    .pd-stack-badge { padding: 8px 14px; }
    .pd-stack-badge em { font-size: 13px; }
}

@media (max-width: 575px) {
    .pd-stack-visual { aspect-ratio: auto; min-height: 380px; }
    .pd-adv-step-side { width: 120px; padding: 16px; }
    .pd-adv-step-num { font-size: 48px; }
    .pd-adv-step-icon { width: 38px; height: 38px; font-size: 18px; }
}

/* Reduced motion: disable pulse + cinematic transforms */
@media (prefers-reduced-motion: reduce) {
    .pd-stack-pulse span { animation: none; opacity: 0.6; }
}

/* =========================================================
   PD · CENTERED EDITORIAL VARIANTS
   Used on PD-3 (Expert Team) and PD-4 (Cloud Technologies)
   when the right-side visual is removed and the section is
   reflowed as a single-column editorial layout.
   ========================================================= */
.pd-expert-centered .pd-expert-inner,
.pd-stack-centered .pd-stack-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.pd-expert-centered .section-eyebrow,
.pd-stack-centered .section-eyebrow { display: inline-block; }
.pd-expert-centered .pe-section-title,
.pd-stack-centered .pe-section-title { text-align: center; }
.pd-expert-centered .pe-lead,
.pd-stack-centered .pe-lead {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.pd-expert-body,
.pd-stack-body {
    max-width: 920px;
    margin: 24px auto 56px;
    padding-top: 28px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

/* Shared pill badge */
.pd-expert-disciplines-tag,
.pd-expert-capabilities-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* PD-3 · Disciplines 5-card row */
.pd-expert-disciplines {
    max-width: 1200px;
    margin: 0 auto 56px;
    text-align: center;
}
.pd-expert-disciplines-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.pd-expert-disciplines-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px 26px;
    background: #ffffff;
    border-radius: 20px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.pd-expert-disciplines-grid li:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.pd-expert-disciplines-grid li i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 14px;
    margin-bottom: 6px;
    transition: background .3s ease, color .3s ease;
}
.pd-expert-disciplines-grid li strong {
    font: 700 16px/1.25 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}
.pd-expert-disciplines-grid li em {
    font: 500 13px/1.4 "Inter", sans-serif;
    color: rgba(29, 29, 31, .58);
    font-style: normal;
    letter-spacing: -.005em;
    text-align: center;
}

/* Per-card pastel palettes — solid fill, deeper on hover */
.pd-expert-disciplines-grid li:nth-child(1) {           /* Engineering — sky blue */
    background: #dbeafe;
}
.pd-expert-disciplines-grid li:nth-child(1):hover {
    background: #bfdbfe;
}
.pd-expert-disciplines-grid li:nth-child(1) i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.pd-expert-disciplines-grid li:nth-child(2) {           /* Design — peach */
    background: #ffe8dc;
}
.pd-expert-disciplines-grid li:nth-child(2):hover {
    background: #fdd6c0;
}
.pd-expert-disciplines-grid li:nth-child(2) i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}

.pd-expert-disciplines-grid li:nth-child(3) {           /* Architecture — lavender */
    background: #ece5fb;
}
.pd-expert-disciplines-grid li:nth-child(3):hover {
    background: #dccff5;
}
.pd-expert-disciplines-grid li:nth-child(3) i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}

.pd-expert-disciplines-grid li:nth-child(4) {           /* Quality — mint green */
    background: #d1fae5;
}
.pd-expert-disciplines-grid li:nth-child(4):hover {
    background: #a7f3d0;
}
.pd-expert-disciplines-grid li:nth-child(4) i {
    background: rgba(4, 120, 87, 0.18);
    color: #047857;
}

.pd-expert-disciplines-grid li:nth-child(5) {           /* AI / ML — rose */
    background: #fde2e4;
}
.pd-expert-disciplines-grid li:nth-child(5):hover {
    background: #fbcfd2;
}
.pd-expert-disciplines-grid li:nth-child(5) i {
    background: rgba(177, 15, 26, 0.18);
    color: #b10f1a;
}

/* PD-3 · Capabilities chips */
.pd-expert-capabilities {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.pd-expert-capabilities-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.pd-expert-capabilities-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;
    font: 600 14px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.pd-expert-capabilities-chips span:hover {
    border-color: rgba(177, 15, 26, .35);
    background: rgba(177, 15, 26, .04);
    transform: translateY(-2px);
}
.pd-expert-capabilities-chips i {
    font-size: 13px;
    color: var(--brand, #b10f1a);
}

/* PD-4 · Tech stack 3-card grid — pastel solid-fill cards
   with brand-colored icon circles and flush list rows. */
.pd-stack-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 56px auto 0;
}
.pd-stack-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 34px 30px 28px;
    text-align: left;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.pd-stack-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.pd-stack-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pd-stack-card-head i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    font-size: 19px;
    border-radius: 14px;
    flex-shrink: 0;
}
.pd-stack-card-head span {
    font: 700 19px/1.2 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.018em;
}
.pd-stack-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pd-stack-card-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 10px;
    border-radius: 12px;
    font: 600 15px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.008em;
    transition: background .25s ease, transform .25s ease;
}
.pd-stack-card-list li:hover {
    background: rgba(255, 255, 255, .55);
    transform: translateX(2px);
}
.pd-stack-card-list li i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .03);
    flex-shrink: 0;
    transition: background .25s ease;
}

/* Per-card pastel palettes — solid fill, deeper hover */
.pd-stack-card:nth-child(1) {                           /* Cloud — sky blue */
    background: #dbeafe;
}
.pd-stack-card:nth-child(1):hover {
    background: #bfdbfe;
}
.pd-stack-card:nth-child(1) .pd-stack-card-head i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.pd-stack-card:nth-child(2) {                           /* Frameworks — lavender */
    background: #ece5fb;
}
.pd-stack-card:nth-child(2):hover {
    background: #dccff5;
}
.pd-stack-card:nth-child(2) .pd-stack-card-head i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}

.pd-stack-card:nth-child(3) {                           /* Architecture — mint */
    background: #d1fae5;
}
.pd-stack-card:nth-child(3):hover {
    background: #a7f3d0;
}
.pd-stack-card:nth-child(3) .pd-stack-card-head i {
    background: rgba(4, 120, 87, 0.18);
    color: #047857;
}

/* Brand-colored icons per tech — actual brand identity colors,
   each wrapped in a soft tinted circle. */
.pd-stack-card-list li .fa-aws         { background: rgba(255, 153,   0, .12); color: #ff9900; }
.pd-stack-card-list li .fa-microsoft   { background: rgba(  0, 120, 212, .12); color: #0078d4; }
.pd-stack-card-list li .fa-google      { background: rgba( 66, 133, 244, .12); color: #4285f4; }
.pd-stack-card-list li .fa-react       { background: rgba( 97, 218, 251, .14); color: #1e9fc9; }
.pd-stack-card-list li .fa-angular     { background: rgba(221,   0,  49, .12); color: #dd0031; }
.pd-stack-card-list li .fa-node-js     { background: rgba( 51, 153,  51, .12); color: #339933; }
.pd-stack-card-list li .fa-java        { background: rgba(  0, 115, 150, .12); color: #007396; }
.pd-stack-card-list li .fa-cubes       { background: rgba( 15, 122,  58, .12); color: #0f7a3a; }
.pd-stack-card-list li .fa-plug        { background: rgba(217, 119,   6, .12); color: #d97706; }
.pd-stack-card-list li .fa-cloud-arrow-up { background: rgba( 37,  99, 235, .12); color: #2563eb; }

@media (max-width: 991px) {
    .pd-expert-disciplines-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .pd-stack-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
    .pd-expert-disciplines-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ▲  END · PLATFORM DEVELOPMENT PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  SERVICES PAGE  ▼                                    |
   |   File: services.html                                    |
   |   All rules below are scoped under .srv-page or srv-*    |
   |   prefixes — safe to delete as a block.                  |
   |                                                          |
   |   Design: Apple iPad-page lineup pattern.                |
   |     · Big bold hero title with gradient accent           |
   |     · Service cards in a 4-column row (lineup)           |
   |     · Each card: tag, visual icon, name, sub, "+" CTA    |
   |     · Hover: card lifts, "+" rotates to brand red        |
   |     · Featured case-study spotlight card                 |
   |     · Reuses the .pe-cta CTA block at the bottom         |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- SRV · Foundational page rules ---------- */
.srv-page { background: var(--white); }
.srv-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.srv-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.srv-page .reveal.in { opacity: 1; transform: none; }


/* SRV · 1. HERO — Reuses the .pe-hero pattern (animated bg, breadcrumbs,
   eyebrow with pulse, gradient title, meta badges). No SRV-specific
   hero styles needed — kept the section structure consistent across all
   service pages (Product Engineering, Platform Development, Services). */


/* =========================================================
   SRV · 2. LINEUP — Apple iPad-style product cards
   Two rows of four cards each. Each card shows the service
   identity (icon + name + sub) and a "+" CTA that lifts the
   user into the dedicated service page.
   ========================================================= */
.srv-lineup {
    padding: 60px 0 120px;
    background: #fff;
}

.srv-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}
.srv-row:last-child { margin-bottom: 0; }

/* Apple iPad-style product card — clean, spacious, single icon + "+" CTA. */
.srv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    padding: 32px 32px 28px;
    min-height: 420px;
    overflow: hidden;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s var(--ease),
        background 0.55s var(--ease),
        border-color 0.55s var(--ease);
    border: 1px solid transparent;
}
.srv-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at 50% 0%, rgba(177, 15, 26, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.55s var(--ease);
    pointer-events: none;
}
.srv-card:hover {
    transform: translateY(-10px);
    background: #fff;
    border-color: rgba(177, 15, 26, 0.14);
    box-shadow:
        0 32px 64px -24px rgba(17, 17, 19, 0.18),
        0 12px 30px -10px rgba(177, 15, 26, 0.15);
}
.srv-card:hover::before { opacity: 1; }
.srv-card > * { position: relative; z-index: 1; }

/* Card head — tag + small number counter */
.srv-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36px;
}
.srv-card-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
    padding: 5px 12px;
    background: var(--brand-soft);
    border-radius: 999px;
}
.srv-card-num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--muted-2);
    font-feature-settings: "tnum";
}

/* Single icon — clean minimal box, brand-soft → brand on hover */
.srv-card-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 32px;
    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
    align-self: flex-start;
}
.srv-card:hover .srv-card-icon {
    background: var(--brand);
    color: #fff;
    transform: rotate(-4deg) scale(1.05);
    box-shadow: 0 14px 28px -10px rgba(177, 15, 26, 0.5);
}

/* Title — bigger, tighter, Apple-style */
.srv-card-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.06;
    color: var(--ink);
    margin: 0 0 12px;
}

.srv-card-sub {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 24px;
    flex: 1;
    max-width: 92%;
}

/* "+" CTA at bottom-right — Apple iPad-style explore button */
.srv-card-plus {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition:
        background 0.4s var(--ease),
        color 0.4s var(--ease),
        border-color 0.4s var(--ease),
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease);
    z-index: 2;
}
.srv-card:hover .srv-card-plus {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: rotate(90deg) scale(1.06);
    box-shadow: 0 14px 30px -10px rgba(177, 15, 26, 0.5);
}


/* =========================================================
   SRV · 3. CASE STUDY SPOTLIGHT
   A wide hero card showing how services combine into measurable
   outcomes. Clean, restrained, with stat readout.
   ========================================================= */
.srv-case {
    padding: 80px 0 120px;
    background: #fafafa;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.srv-case-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 36px;
    padding: 64px 56px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.srv-case-card::before {
    content: "";
    position: absolute;
    top: -30%; right: -10%;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.08), transparent 70%);
    pointer-events: none;
}
.srv-case-card > * { position: relative; z-index: 1; }

.srv-case-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.srv-case-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 6px 14px;
    border-radius: 999px;
}
.srv-case-tagline {
    font-size: 14px;
    color: var(--muted);
    font-style: italic;
}

.srv-case-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: var(--ink);
    margin: 0 0 20px;
    max-width: 800px;
}

.srv-case-sub {
    font-size: clamp(15px, 1.2vw, 18px);
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 40px;
    max-width: 720px;
}

.srv-case-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 40px;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.srv-case-stat strong {
    display: block;
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--brand);
    margin-bottom: 8px;
}
.srv-case-stat strong span {
    font-size: 0.6em;
    font-weight: 700;
    color: var(--brand);
    margin-left: 2px;
}
.srv-case-stat em {
    font-style: normal;
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.srv-case-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand);
    transition: gap 0.3s var(--ease);
}
.srv-case-cta:hover { gap: 14px; color: var(--brand-dark); }


/* =========================================================
   SRV · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .srv-row { grid-template-columns: repeat(2, 1fr); }
    .srv-case-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 991px) {
    .srv-hero { padding: 130px 0 60px; }
    .srv-lineup { padding: 40px 0 80px; }
    .srv-case { padding: 60px 0 80px; }
    .srv-case-card { padding: 48px 36px; border-radius: 28px; }
    .srv-card { min-height: 380px; padding: 28px 26px 24px; }
    .srv-card-icon { width: 56px; height: 56px; font-size: 22px; margin-bottom: 24px; }
    .srv-card-head { margin-bottom: 28px; }
}

@media (max-width: 575px) {
    .srv-hero { padding: 120px 0 48px; }
    .srv-row { grid-template-columns: 1fr; }
    .srv-case-stats { grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0; }
    .srv-case-card { padding: 36px 24px; }
    .srv-card { min-height: 320px; }
    .srv-card-plus { width: 40px; height: 40px; right: 20px; bottom: 20px; }
}

/* ============================================================
   ▲  END · SERVICES PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  AI CONSULTING & STRATEGY PAGE  ▼                    |
   |                                                          |
   |   All styles below are scoped under .aic-page so the     |
   |   home / services / PE / PD pages remain unaffected.     |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .pe-pillars-pin,       |
   |   .pe-cta from the Product Engineering block above.      |
   |   The only page-specific block is .aic-advantage —       |
   |   the closing "Entiovi Advantage" recap section.         |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   AIC · PILLAR FRAME — compaction overrides so the 4
   long-body chapters fit cleanly inside the pinned 100vh
   stage (parent has overflow:hidden). Strategy:
     1. anchor chapter to top (was vertically centred — caused
        top of content to spill into the head area)
     2. slim the giant "02" left column → more width for body
     3. trim icon / h3 / tag / body density
     4. tighten shell padding + head margin so chapters get
        more vertical runway
   ========================================================= */
/* AIC's consulting framework now uses the default .pe-pillars-pin
   scale (matches platform-development.html's "How we build" section).
   Each chapter has been trimmed to 3 paragraphs so the content fits
   inside the 100vh runway without the previous compaction. */


/* =========================================================
   AIC-4 · THE ENTIOVI ADVANTAGE
   Two-column closing recap. Right column carries the three
   synthesis paragraphs; left column is a creative consulting
   flow visual — four numbered tiles connected by a vertical
   brand-red flow line that ends in a "to deployment" arrow.
   ========================================================= */
.aic-advantage {
    position: relative;
    padding: 140px 0 160px;
    background: #ffffff;
    overflow: hidden;
}

.aic-advantage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 90% 0%, rgba(177, 15, 26, .045), transparent 70%),
        radial-gradient(700px 400px at 5% 100%, rgba(0, 0, 0, .03), transparent 70%);
    pointer-events: none;
}

.aic-adv-head {
    position: relative;
    text-align: center;
    max-width: 880px;
    margin: 0 auto 80px;
}

.aic-adv-head .pe-section-title { margin-top: 18px; }

.aic-adv-body { position: relative; }

.aic-adv-body .pe-lead {
    font-size: 19.5px;
    line-height: 1.6;
    color: #111;
    font-weight: 500;
    margin-bottom: 22px;
}

.aic-adv-body .pe-body {
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 22px;
}

.aic-adv-body .pe-body:last-child { margin-bottom: 0; }


/* ---- Visual tile column ---- */
.aic-adv-visual {
    position: relative;
    padding: 56px 36px 72px 36px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
}

.aic-adv-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    z-index: 0;
}

/* Vertical brand-red flow line connecting the four tiles */
.aic-adv-flowline {
    position: absolute;
    left: 78px;
    top: 80px;
    bottom: 110px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .65) 8%,
        rgba(177, 15, 26, .9) 50%,
        rgba(177, 15, 26, .65) 92%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 1;
    border-radius: 2px;
}

/* Stacked tiles */
.aic-adv-tile {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    align-items: center;
    margin-bottom: 22px;
    padding: 18px 22px 18px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 16px;
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .18);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.aic-adv-tile:last-of-type { margin-bottom: 0; }

.aic-adv-tile:hover {
    transform: translateX(4px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 20px 50px -22px rgba(177, 15, 26, .28);
}

.aic-adv-tile-num {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 14px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(177, 15, 26, .12);
}

.aic-adv-tile:hover .aic-adv-tile-num {
    background: var(--brand, #b10f1a);
    color: #fff;
}

.aic-adv-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    padding-left: 30px;
}

.aic-adv-tile-body i {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--brand, #b10f1a);
    font-size: 16px;
}

.aic-adv-tile-body strong {
    font: 700 17px/1.25 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.01em;
}

.aic-adv-tile-body em {
    font-style: normal;
    font: 500 13.5px/1.4 "Inter", sans-serif;
    color: #6a6a6a;
}

/* Bottom arrow */
.aic-adv-arrow {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    text-align: center;
    padding-left: 4px;
}

.aic-adv-arrow i {
    display: block;
    color: var(--brand, #b10f1a);
    font-size: 22px;
    margin-bottom: 6px;
    animation: aic-adv-arrow-bob 2.4s ease-in-out infinite;
}

.aic-adv-arrow em {
    font-style: normal;
    font: 600 12.5px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #555;
}

@keyframes aic-adv-arrow-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Optional scrub-driven subtle scale on the visual block (data-scrub) */
.aic-page .aic-adv-visual {
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transform-origin: center;
    transition: transform .15s linear;
}


/* =========================================================
   AIC · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .aic-advantage { padding: 120px 0 130px; }
    .aic-adv-flowline { left: 64px; }
    .aic-adv-tile { grid-template-columns: 52px 1fr; gap: 16px; }
    .aic-adv-tile-num { width: 48px; height: 48px; font-size: 13px; }
}

@media (max-width: 991px) {
    .aic-advantage { padding: 100px 0 110px; }
    .aic-adv-head { margin-bottom: 56px; }
    .aic-adv-visual { padding: 44px 24px 56px; margin-bottom: 48px; }
    .aic-adv-flowline { left: 56px; }
    .aic-adv-body .pe-lead { font-size: 18px; }
    .aic-adv-body .pe-body { font-size: 16px; }
    /* On tablet and below the pinned filmstrip is unpinned by the
       global breakpoint at line ~4525 — the chapters then stack
       naturally and content can't be clipped. Restore comfortable
       reading sizes for that layout. */
    .aic-page .pe-pillar-body { font-size: 16px; line-height: 1.7; }
    .aic-page .pe-pillar-h3 { font-size: clamp(26px, 3.4vw, 34px); }
}

@media (max-width: 575px) {
    .aic-advantage { padding: 80px 0 90px; }
    .aic-adv-visual { padding: 36px 18px 48px; border-radius: 22px; }
    .aic-adv-flowline { left: 48px; }
    .aic-adv-tile {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 14px;
    }
    .aic-adv-tile-num { width: 40px; height: 40px; font-size: 12px; }
    .aic-adv-tile-body { padding-left: 26px; }
    .aic-adv-tile-body strong { font-size: 16px; }
    .aic-page .pe-pillar-body { font-size: 15.5px; }
}

/* =========================================================
   AIC-4 · CENTERED EDITORIAL VARIANT
   Used when the left-side consulting-flow tiles visual is
   removed and the section is reflowed as a centered
   editorial block with a 4-stage pastel flow row.
   ========================================================= */
.aic-advantage-centered .aic-adv-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.aic-advantage-centered .section-eyebrow { display: inline-block; }
.aic-advantage-centered .pe-section-title { text-align: center; }
.aic-adv-lead {
    max-width: 920px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.aic-adv-body-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 40px;
    max-width: 1180px;
    margin: 40px auto 64px;
    padding-top: 32px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.aic-adv-body-grid .pe-body { margin: 0; }

.aic-adv-flow {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.aic-adv-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.aic-adv-flow-steps {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.aic-adv-flow-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 22px 26px;
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.aic-adv-flow-steps li:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.aic-adv-step-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    display: grid;
    place-items: center;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 4px 14px rgba(15, 30, 60, .12);
}
.aic-adv-flow-steps li i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 14px;
    margin-bottom: 6px;
    margin-top: 8px;
    transition: background .3s ease, color .3s ease;
}
.aic-adv-flow-steps li strong {
    font: 700 16px/1.25 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}
.aic-adv-flow-steps li em {
    font: 500 13px/1.45 "Inter", sans-serif;
    color: rgba(29, 29, 31, .60);
    font-style: normal;
    letter-spacing: -.005em;
    text-align: center;
}

/* Per-stage pastel palette + matching number circle color */
.aic-adv-flow-steps li:nth-child(1) {           /* Readiness — sky blue */
    background: #dbeafe;
}
.aic-adv-flow-steps li:nth-child(1):hover { background: #bfdbfe; }
.aic-adv-flow-steps li:nth-child(1) i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}
.aic-adv-flow-steps li:nth-child(1) .aic-adv-step-num { color: #2563eb; }

.aic-adv-flow-steps li:nth-child(2) {           /* Use cases — peach */
    background: #ffe8dc;
}
.aic-adv-flow-steps li:nth-child(2):hover { background: #fdd6c0; }
.aic-adv-flow-steps li:nth-child(2) i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}
.aic-adv-flow-steps li:nth-child(2) .aic-adv-step-num { color: #c85f32; }

.aic-adv-flow-steps li:nth-child(3) {           /* Roadmap — lavender */
    background: #ece5fb;
}
.aic-adv-flow-steps li:nth-child(3):hover { background: #dccff5; }
.aic-adv-flow-steps li:nth-child(3) i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}
.aic-adv-flow-steps li:nth-child(3) .aic-adv-step-num { color: #6e50c8; }

.aic-adv-flow-steps li:nth-child(4) {           /* Pilot — mint */
    background: #d1fae5;
}
.aic-adv-flow-steps li:nth-child(4):hover { background: #a7f3d0; }
.aic-adv-flow-steps li:nth-child(4) i {
    background: rgba(4, 120, 87, 0.18);
    color: #047857;
}
.aic-adv-flow-steps li:nth-child(4) .aic-adv-step-num { color: #047857; }

.aic-adv-flow-end {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: rgba(177, 15, 26, .06);
    border: 1px dashed rgba(177, 15, 26, .25);
    border-radius: 999px;
    font: 700 13px/1 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.aic-adv-flow-end i {
    font-size: 16px;
    color: var(--brand, #b10f1a);
}

@media (max-width: 991px) {
    .aic-adv-body-grid { grid-template-columns: 1fr; gap: 20px; }
    .aic-adv-flow-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
@media (max-width: 540px) {
    .aic-adv-flow-steps { grid-template-columns: 1fr; }
}

/* ============================================================
   ▲  END · AI CONSULTING & STRATEGY PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  OFFSHORE DELIVERY PAGE  ▼                           |
   |                                                          |
   |   All styles below are scoped under .od-page so the      |
   |   home / services / PE / PD / AIC pages remain           |
   |   unaffected.                                            |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .pe-pillars-pin,       |
   |   .pe-cta from the Product Engineering block.            |
   |   Page-specific blocks: .od-value (8-card value          |
   |   proposition grid) and .od-coes (6 Centres of           |
   |   Excellence horizontal lineup).                         |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   OD · PILLAR FRAME — same compaction strategy as the AIC
   page so the four delivery disciplines fit cleanly inside
   the pinned 100vh stage.
   ========================================================= */
.od-page .pe-pillars-pin { height: 360vh; }

/* Shorter sticky stage so the pinned section doesn't reserve a
   full 100vh viewport — content is short on OD chapters and the
   excess top + bottom whitespace looked bad. */
.od-page .pe-pillars-stage { height: 72vh; min-height: 560px; }

.od-page .pe-pillars-shell {
    padding-top: 50px;
    padding-bottom: 30px;
    /* Centre head + chapters + nav as a single block inside the
       100vh sticky stage so the empty space is split top + bottom
       rather than dumped at the bottom only. */
    justify-content: center;
}
.od-page .pe-pillars-head { margin-bottom: 12px; }
.od-page .pe-pillars-title {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.08;
}
.od-page .pe-pillars-head .section-eyebrow { margin-bottom: 6px; }

.od-page .pe-pillar-chapter { align-items: flex-start; }

.od-page .pe-pillar-row {
    grid-template-columns: minmax(260px, 40%) 1fr;
    gap: 56px;
    align-items: flex-start;
}

/* Aside aligns to the top of the row so its overall height matches
   the right column's content (which is short on the OD page). The
   giant "01" therefore sits aligned with the chapter title — no
   excess top / bottom padding. */
.od-page .pe-pillar-aside { align-self: start; }

.od-page .pe-pillar-num { font-size: clamp(120px, 16vw, 240px); }
.od-page .pe-pillar-tick { margin-top: 28px; max-width: 220px; }
.od-page .pe-pillar-counter { margin-top: 16px; font-size: 12px; }

/* Stop the chapter container from stretching to fill the remaining
   shell height — collapse to roughly the chapter's content height
   so the dot navigation sits directly under the right column body
   instead of being pushed to the bottom of the 100vh stage. */
.od-page .pe-pillar-chapters {
    flex: 0 0 auto;
    min-height: 290px;
}

.od-page .pe-pillar-main { max-width: 760px; padding-right: 4px; }
.od-page .pe-pillar-icon {
    width: 42px; height: 42px; font-size: 16px;
    margin-bottom: 12px; border-radius: 11px;
}
.od-page .pe-pillar-h3 {
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.12;
    margin-bottom: 6px;
}
.od-page .pe-pillar-tag {
    font-size: 12.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
}
.od-page .pe-pillar-body {
    font-size: 14.2px;
    line-height: 1.55;
    margin-bottom: 7px;
    max-width: 720px;
}
.od-page .pe-pillar-nav { margin-top: 28px; }

/* Reduce the CTA's top padding on the OD page so it sits closer to
   the pinned filmstrip above without the heavy 140px gap. */
.od-page .pe-cta { padding-top: 70px; }


/* =========================================================
   OD-3 · VALUE PROPOSITION GRID
   8 cards in a responsive grid — ordinal "01..08" + icon
   + short label. Hover lifts and tints brand red.
   ========================================================= */
.od-value {
    position: relative;
    padding: 130px 0 140px;
    background: #fff;
    overflow: hidden;
}

.od-value::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px 460px at 92% -10%, rgba(177, 15, 26, .045), transparent 70%),
        radial-gradient(600px 360px at 6% 110%, rgba(0, 0, 0, .03), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.od-value-head {
    position: relative;
    text-align: center;
    max-width: 880px;
    margin: 0 auto 70px;
    z-index: 1;
}

.od-value-head .pe-section-title { margin-top: 18px; }
.od-value-head .pe-section-lead {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.6;
    color: #555;
}

.od-value-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.od-value-card {
    position: relative;
    padding: 36px 28px 32px;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.od-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.od-value-num {
    position: absolute;
    top: 18px;
    right: 22px;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
    z-index: 1;
}

.od-value-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 24px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.od-value-card:hover .od-value-icon {
    transform: scale(1.06);
}

/* Eight distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.od-value-card:nth-child(1) {
    background: #ffe8dc;
}
.od-value-card:nth-child(1):hover {
    background: #fdd6c0;
}
.od-value-card:nth-child(1) .od-value-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.od-value-card:nth-child(2) {
    background: #ece5fb;
}
.od-value-card:nth-child(2):hover {
    background: #dccff5;
}
.od-value-card:nth-child(2) .od-value-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.od-value-card:nth-child(3) {
    background: #e3f0d6;
}
.od-value-card:nth-child(3):hover {
    background: #cee5b5;
}
.od-value-card:nth-child(3) .od-value-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.od-value-card:nth-child(4) {
    background: #dceffa;
}
.od-value-card:nth-child(4):hover {
    background: #b8dcf2;
}
.od-value-card:nth-child(4) .od-value-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose */
.od-value-card:nth-child(5) {
    background: #fde0ec;
}
.od-value-card:nth-child(5):hover {
    background: #fbcad8;
}
.od-value-card:nth-child(5) .od-value-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

/* Card 06 · Butter */
.od-value-card:nth-child(6) {
    background: #fdf2c4;
}
.od-value-card:nth-child(6):hover {
    background: #f9e695;
}
.od-value-card:nth-child(6) .od-value-icon {
    background: rgba(170, 130, 30, 0.14);
    color: #8a6a1f;
}

/* Card 07 · Mint */
.od-value-card:nth-child(7) {
    background: #d6f0e2;
}
.od-value-card:nth-child(7):hover {
    background: #b8e3cd;
}
.od-value-card:nth-child(7) .od-value-icon {
    background: rgba(45, 140, 100, 0.14);
    color: #2f8c63;
}

/* Card 08 · Lilac */
.od-value-card:nth-child(8) {
    background: #f1e3f6;
}
.od-value-card:nth-child(8):hover {
    background: #e3cdee;
}
.od-value-card:nth-child(8) .od-value-icon {
    background: rgba(140, 70, 165, 0.14);
    color: #8a45a3;
}

.od-value-card h4 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: #0a0a0a;
    letter-spacing: -.01em;
}


/* =========================================================
   OD-4 · CUSTOMER MODEL NARRATIVE
   Side-by-side: left column is the AI-enabled line styled as
   a large quote (acts as the "title"-equivalent without
   inventing copy). Right column carries the Customer body.
   ========================================================= */
.od-page .od-lead-quote {
    margin-top: 18px;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: #0a0a0a;
    position: relative;
    padding-left: 22px;
}
.od-page .od-lead-quote::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand, #b10f1a);
}

/* Pillar lead paragraph (the AI sentence at the top of each
   chapter) gets a slightly stronger weight so it reads as a
   tag-line replacement without inventing copy. */
.od-page .pe-pillar-lead {
    color: var(--brand, #b10f1a);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: 0;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    max-width: 720px;
}


/* =========================================================
   OD-5 · WORKING MODELS · CINEMATIC HORIZONTAL GALLERY
   Apple Mac Studio-style: outer wrapper has tall vertical
   runway; inner stage is sticky 100vh; the horizontal track
   inside translates left as the user scrolls vertically.
   Each card scales + fades based on its distance from the
   viewport centre (set as --p by JS).
   ========================================================= */
.od-cinema {
    position: relative;
    /* Vertical runway — 6 slides with comfortable cadence */
    height: 360vh;
    background: #fff;
}

.od-cinema-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 50% 0%, rgba(177, 15, 26, .045), transparent 75%),
        linear-gradient(180deg, #fff 0%, #f6f6f7 100%);
    display: flex;
    flex-direction: column;
}

.od-cinema-head {
    flex-shrink: 0;
    padding: 80px 0 22px;
    text-align: center;
}

.od-cinema-head .section-eyebrow { margin-bottom: 14px; }

.od-cinema-lead {
    max-width: 760px;
    margin: 0 auto;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.018em;
    color: #0a0a0a;
}

/* Horizontal track wrapper takes remaining vertical room */
.od-cinema-track-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 12px 0;
    min-height: 0;
}

.od-cinema-track {
    display: flex;
    align-items: center;
    gap: 32px;
    /* leading + trailing padding so the first slide enters from the
       right edge and the last slide ends near the left edge */
    padding: 0 12vw;
    will-change: transform;
    transition: transform .05s linear;
}

/* Individual slide — bounded so it always fits inside track-wrap.
   max-height uses the stage height minus head + foot so the card
   never overflows the sticky 100vh viewport on shorter screens. */
.od-cinema-slide {
    position: relative;
    flex: 0 0 clamp(340px, 36vw, 480px);
    height: 44vh;
    min-height: 300px;
    max-height: min(400px, calc(100vh - 280px));
    padding: 36px 36px 32px;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow:
        0 30px 70px -30px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(0, 0, 0, .02);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    --p: 0;
    transform:
        scale(calc(.86 + var(--p, 0) * .14))
        translateY(calc((1 - var(--p, 0)) * 14px));
    opacity: calc(.4 + var(--p, 0) * .6);
    transition: transform .12s linear, opacity .12s linear, box-shadow .35s ease, border-color .35s ease;
}

.od-cinema-slide:hover {
    border-color: rgba(177, 15, 26, .35);
    box-shadow:
        0 40px 90px -30px rgba(177, 15, 26, .35),
        0 0 0 1px rgba(177, 15, 26, .08);
}

.od-cinema-slide-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(177, 15, 26, .07), transparent 70%),
        radial-gradient(360px 220px at 0% 100%, rgba(0, 0, 0, .025), transparent 70%);
    z-index: 0;
    opacity: calc(.4 + var(--p, 0) * .6);
    pointer-events: none;
}

.od-cinema-num {
    position: absolute;
    top: 32px;
    right: 36px;
    z-index: 2;
    font-family: "Inter", sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    background: rgba(177, 15, 26, .08);
    padding: 7px 11px;
    border-radius: 999px;
}

.od-cinema-icon {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .14), rgba(177, 15, 26, .04));
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 18px;
    /* Subtle entry: scales with --p */
    transform: scale(calc(.85 + var(--p, 0) * .15));
    transition: transform .12s linear;
}

.od-cinema-slide h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.18;
    letter-spacing: -.02em;
    color: #0a0a0a;
}

.od-cinema-slide p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    /* Stays fully visible only when card is centred */
    opacity: calc(.5 + var(--p, 0) * .5);
    transition: opacity .12s linear;
}

/* Bottom dock: progress rail + counter */
.od-cinema-foot {
    flex-shrink: 0;
    padding: 20px 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.od-cinema-progress {
    flex: 1;
    height: 2px;
    background: rgba(0, 0, 0, .08);
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.od-cinema-progress-fill {
    position: absolute;
    inset: 0;
    background: var(--brand, #b10f1a);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .12s linear;
}

.od-cinema-counter {
    flex-shrink: 0;
    font-family: "Inter", sans-serif;
    color: #6a6a6a;
    font-size: 13px;
    letter-spacing: .12em;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.od-cinema-counter span {
    font-weight: 700;
    color: #0a0a0a;
    font-size: 15px;
    letter-spacing: .06em;
}

.od-cinema-counter em {
    font-style: normal;
    color: #999;
}

/* Reduced-motion fallback: stack slides vertically, no transforms */
@media (prefers-reduced-motion: reduce) {
    .od-cinema { height: auto; }
    .od-cinema-stage { position: static; height: auto; }
    .od-cinema-track-wrap { overflow: visible; padding: 16px; }
    .od-cinema-track {
        flex-direction: column;
        gap: 18px;
        padding: 0;
        transform: none !important;
    }
    .od-cinema-slide {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        max-height: none;
        transform: none;
        opacity: 1;
    }
    .od-cinema-foot { display: none; }
}


/* =========================================================
   OD · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .od-value-grid { grid-template-columns: repeat(3, 1fr); }
    .od-cinema-slide { flex-basis: clamp(340px, 46vw, 480px); }
}

@media (max-width: 991px) {
    .od-value { padding: 100px 0 110px; }
    .od-value-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .od-value-card { padding: 32px 24px 28px; min-height: 200px; }
    .od-page .pe-narrative-centred .pe-lead { font-size: 19px; }
    .od-page .pe-narrative-centred .pe-body { font-size: 16px; }

    /* Cinematic falls back to stacked vertical cards on tablet/phone.
       The JS keeps writing --p per slide based on viewport-centre distance
       (and the base CSS computes transform/opacity from that), so we force
       the static state with !important to neutralise any visual flicker. */
    .od-cinema { height: auto !important; }
    .od-cinema-stage {
        position: static !important;
        height: auto !important;
        padding-bottom: 56px;
        display: block;
        overflow: visible;
    }
    .od-cinema-head { padding: 72px 0 20px; }
    .od-cinema-track-wrap {
        padding: 0 20px;
        overflow: visible !important;
        min-height: 0;
        flex: none;
    }
    .od-cinema-track {
        flex-direction: column !important;
        gap: 16px;
        padding: 0 !important;
        transform: none !important;
        align-items: stretch !important;
    }
    .od-cinema-slide {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 32px 24px 28px;
        --p: 1 !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .od-cinema-slide p { opacity: 1 !important; }
    .od-cinema-icon {
        transform: none !important;
        opacity: 1 !important;
    }
    .od-cinema-num { opacity: 1 !important; }
    .od-cinema-foot { display: none !important; }

    /* Staff Augmentation — collapse the 2-column pillar row to 1 column
       on mobile so each Proposed Model phase becomes a clean single-
       column slide (big number on top, content below). The SA-specific
       desktop rules have higher specificity than the generic mobile
       block, so we re-state the overrides under .sa-page here. */
    .sa-page .pe-pillars-pin { height: auto !important; }
    .sa-page .pe-pillars-stage {
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        overflow: visible !important;
        display: block !important;
    }
    .sa-page .pe-pillars-shell {
        padding-top: 64px;
        padding-bottom: 24px;
        justify-content: flex-start;
    }
    .sa-page .pe-pillar-chapters {
        flex: none !important;
        min-height: 0 !important;
    }
    .sa-page .pe-pillar-chapter { align-items: flex-start; }
    .sa-page .pe-pillar-row {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        align-items: flex-start !important;
    }
    .sa-page .pe-pillar-num { font-size: clamp(88px, 18vw, 140px); }
    .sa-page .pe-pillar-tick { margin-top: 16px; max-width: 140px; }
    .sa-page .pe-pillar-counter { margin-top: 10px; }
    .sa-page .pe-pillar-main { max-width: 100%; padding-right: 0; }
    .sa-page .pe-pillar-h3 { font-size: clamp(24px, 5.4vw, 30px); }
    .sa-page .pe-pillar-body { font-size: 15.5px; line-height: 1.65; }
    .sa-page .pe-pillar-lead { font-size: 14.5px; }

    /* OD page — convert the four-discipline filmstrip into a native
       horizontal swipe slider on tablet/phone. Each chapter becomes
       a 100%-wide slide with scroll-snap; the pillar dots act as
       pagination indicators (clickable in JS). */
    .od-page .pe-pillars-pin { height: auto !important; }
    .od-page .pe-pillars-stage {
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        overflow: visible !important;
        display: block !important;
    }
    .od-page .pe-pillars-shell {
        padding-top: 64px;
        padding-bottom: 24px;
        justify-content: flex-start;
    }
    .od-page .pe-pillars-head { margin-bottom: 18px; }

    /* Slider container — horizontal scroll with snap */
    .od-page .pe-pillar-chapters {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(4, 100%);
        grid-auto-rows: auto;
        gap: 0 !important;
        flex: none !important;
        min-height: 0 !important;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .od-page .pe-pillar-chapters::-webkit-scrollbar { display: none; }

    /* Each discipline = one slide */
    .od-page .pe-pillar-chapter {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        padding: 0 16px !important;
        margin: 0 !important;
        border-top: 0 !important;
        --p: 1 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-width: 0;
        align-items: flex-start;
    }
    .od-page .pe-pillar-chapter:first-of-type { margin-top: 0 !important; }
    .od-page .pe-pillar-chapter[data-idx="0"] { grid-column: 1; }
    .od-page .pe-pillar-chapter[data-idx="1"] { grid-column: 2; }
    .od-page .pe-pillar-chapter[data-idx="2"] { grid-column: 3; }
    .od-page .pe-pillar-chapter[data-idx="3"] { grid-column: 4; }

    .od-page .pe-pillar-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        align-items: flex-start !important;
    }
    .od-page .pe-pillar-aside { align-self: flex-start; }
    .od-page .pe-pillar-num { font-size: clamp(88px, 18vw, 140px); }
    .od-page .pe-pillar-tick { margin-top: 14px; max-width: 120px; }
    .od-page .pe-pillar-counter { margin-top: 10px; }
    .od-page .pe-pillar-main { max-width: 100%; padding-right: 0; }
    .od-page .pe-pillar-body { font-size: 15.5px; line-height: 1.65; }
    .od-page .pe-pillar-h3 { font-size: clamp(24px, 5.4vw, 30px); }
    .od-page .pe-pillar-lead { font-size: 14.5px; }

    /* Show the dots as slider pagination indicators */
    .od-page .pe-pillar-nav {
        display: flex !important;
        justify-content: center;
        margin-top: 22px !important;
    }
    .od-page .pe-pillar-dots {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }
    .od-page .pe-pillar-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(17, 17, 19, 0.18);
        cursor: pointer;
        transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .od-page .pe-pillar-dot.active {
        background: var(--brand, #b10f1a);
        width: 24px;
        border-radius: 100px;
    }
    .od-page .pe-pillar-progress { display: none !important; }
}

@media (max-width: 575px) {
    .od-value { padding: 80px 0 90px; }
    .od-value-grid { grid-template-columns: 1fr; }
    .od-value-card { padding: 28px 22px 24px; min-height: 180px; }
    .od-value-icon { width: 46px; height: 46px; font-size: 19px; margin-bottom: 18px; }
    .od-cinema-slide { padding: 36px 26px; border-radius: 22px; }
    .od-cinema-icon { width: 56px; height: 56px; font-size: 24px; margin-bottom: 24px; }
    .od-cinema-slide h3 { font-size: 22px; margin-bottom: 14px; }
    .od-cinema-num { top: 22px; right: 24px; font-size: 12px; padding: 6px 10px; }
}


/* ============================================================
   ▲  END · OFFSHORE DELIVERY PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  STAFF AUGMENTATION PAGE  ▼                          |
   |                                                          |
   |   All styles below are scoped under .sa-page so the      |
   |   home / services / PE / PD / AIC / OD pages remain      |
   |   unaffected.                                            |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .pe-pillars-pin,       |
   |   .pe-cta from the Product Engineering block.            |
   |   Page-specific blocks: .sa-step-list (BOT bullet steps  |
   |   inside the pinned filmstrip) and .sa-advantage         |
   |   (9-card Entiovi Advantage grid).                       |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   SA · ALTERNATING NARRATIVE BACKGROUND
   For the still-pe-narrative SA-2 intro section. Other
   sections (SA-3..SA-7) get distinct Apple-style layouts
   below — each one visually different from the others.
   ========================================================= */
.sa-page .pe-narrative-alt {
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   SA-3 · SPLIT WITH VISUAL  (AI / ML Engineer Supply)
   Content LEFT (tag + title + lead + body). RIGHT side is
   a creative CSS visual: a brand-red core "AI / ML Engineer"
   node connected by rays to four skill nodes (data, model,
   integration, deploy) inside a soft framed canvas.
   ========================================================= */
.sa-split {
    position: relative;
    padding: 140px 0 150px;
    background: #fff;
    overflow: hidden;
}

.sa-split::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.sa-split .container-xl { position: relative; }

.sa-split-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sa-split-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #0a0a0a;
}

.sa-split-title .accent { color: var(--brand, #b10f1a); }

.sa-split-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
}

.sa-split-body {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 580px;
}

.sa-split-body:last-child { margin-bottom: 0; }


/* ---- Visual canvas ---- */
.sa-split-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin: 0 0 0 auto;
    padding: 36px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    /* subtle scrub zoom */
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transition: transform .15s linear;
}

.sa-split-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    z-index: 0;
}

.sa-split-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
}

.sa-split-orb-a {
    width: 220px;
    height: 220px;
    top: -40px;
    right: -30px;
    background: rgba(177, 15, 26, .25);
}

.sa-split-orb-b {
    width: 200px;
    height: 200px;
    bottom: -40px;
    left: -30px;
    background: rgba(177, 15, 26, .12);
}

/* Connecting rays */
.sa-split-rays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.sa-split-rays line {
    stroke: rgba(177, 15, 26, .35);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
    fill: none;
}

/* Centre core node */
.sa-split-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: linear-gradient(160deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 24px 60px -20px rgba(177, 15, 26, .55);
}

.sa-split-core i {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: .92;
}

.sa-split-core strong {
    font: 700 14.5px/1.2 "Inter", sans-serif;
    letter-spacing: -.01em;
    margin-bottom: 4px;
    padding: 0 16px;
}

.sa-split-core em {
    font: 600 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-style: normal;
}

/* Outer skill nodes */
.sa-split-node {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .25);
    min-width: 180px;
    transition: transform .4s ease, border-color .35s ease, box-shadow .35s ease;
}

.sa-split-node:hover {
    transform: scale(1.04);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 20px 40px -16px rgba(177, 15, 26, .35);
}

.sa-split-node i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sa-split-node span {
    font: 600 13px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.01em;
}

.sa-split-node-1 { top: 6%;    left: 0%;   }
.sa-split-node-2 { top: 6%;    right: 0%;  }
.sa-split-node-3 { bottom: 14%; left: 0%;  }
.sa-split-node-4 { bottom: 14%; right: 0%; }

/* Bottom badge */
.sa-split-badge {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 999px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sa-split-badge em {
    font-style: normal;
    font: 600 11.5px/1 "Inter", sans-serif;
    color: #555;
    letter-spacing: .04em;
}

.sa-split-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, .15);
    animation: sa-split-pulse 2s ease-in-out infinite;
}

@keyframes sa-split-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(177, 15, 26, .15); }
    50%      { box-shadow: 0 0 0 7px rgba(177, 15, 26, .05); }
}


/* =========================================================
   SA-4 · MIRROR LAYOUT  (Data Scientists & ML Ops)
   Body LEFT, title RIGHT — flipped from the normal narrative.
   Sits on a darker neutral band so the mirror layout reads
   as a different visual chapter.
   ========================================================= */
.sa-mirror {
    position: relative;
    padding: 130px 0 140px;
    background: linear-gradient(180deg, #f4f4f5 0%, #ececef 100%);
    overflow: hidden;
}

.sa-mirror::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 420px at 95% 10%, rgba(177, 15, 26, .055), transparent 70%);
    pointer-events: none;
}

.sa-mirror .container-xl { position: relative; }

.sa-mirror-title {
    margin: 0;
    text-align: left;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.8vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.sa-mirror-title .accent { color: var(--brand, #b10f1a); }

.sa-mirror-lead {
    margin: 0 0 22px;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.015em;
    color: #0a0a0a;
    padding-left: 22px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.sa-mirror-body {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 640px;
}

.sa-mirror-body:last-child { margin-bottom: 0; }


/* =========================================================
   SA-6 · BIG-QUOTE  (Short-Term, Long-Term Engagements)
   The AI line is displayed as a giant pulled quote. Title
   sits below it, then body in a narrower centered column.
   ========================================================= */
.sa-quote {
    position: relative;
    padding: 150px 0 70px;
    background: #fff;
    overflow: hidden;
}

.sa-quote::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 4%;
    width: 220px;
    height: 220px;
    background: rgba(177, 15, 26, .05);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.sa-quote-lead {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 0 40px;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.03em;
    color: #0a0a0a;
    text-align: center;
    quotes: none;
    border: 0;
}

.sa-quote-lead::before,
.sa-quote-lead::after { content: ""; }

.sa-quote-title {
    position: relative;
    text-align: center;
    margin: 0 auto 56px;
    max-width: 1000px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--muted, #6a6a6a);
}

.sa-quote-title .accent { color: var(--brand, #b10f1a); }

.sa-quote-body {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.sa-quote-body p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.7;
    color: #444;
}

.sa-quote-body p:last-child { margin: 0; }


/* =========================================================
   SA-7 · STACKED FRAME CARD  (Talent Screening & Onboarding)
   The whole section sits inside a single elegant card with
   a soft brand-red background bloom. Asymmetric inner grid
   with a small "AI-Assisted" tag (derived from source AI line).
   ========================================================= */
.sa-frame {
    position: relative;
    padding: 60px 0 140px;
    background: linear-gradient(180deg, #fff 0%, #fafafb 100%);
    overflow: hidden;
}

.sa-frame-card {
    position: relative;
    padding: 72px 64px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
}

.sa-frame-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(640px 380px at 100% 0%, rgba(177, 15, 26, .07), transparent 70%),
        radial-gradient(420px 260px at 0% 100%, rgba(177, 15, 26, .04), transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.sa-frame-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 38%) 1fr;
    gap: 56px;
    align-items: center;
}

.sa-frame-aside { position: relative; }

.sa-frame-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sa-frame-title {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #0a0a0a;
}

.sa-frame-title .accent { color: var(--brand, #b10f1a); }

.sa-frame-main { position: relative; }

.sa-frame-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
}

.sa-frame-main p {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
}

.sa-frame-main p:last-child { margin: 0; }


/* =========================================================
   SA · BOT FILMSTRIP — same compaction strategy as OD so
   the 3 phases (Build / Operate / Transfer) fit cleanly
   inside the pinned 72vh stage.
   ========================================================= */
.sa-page .pe-pillars-pin { height: 300vh; }
/* Stage height tuned so content fits with minimal slack — no top
   clipping under the fixed navbar, no excess empty space below. */
.sa-page .pe-pillars-stage { height: 64vh; min-height: 600px; }

.sa-page .pe-pillars-shell {
    /* padding-top clears the fixed navbar (~80px) so the
       "PROPOSED MODEL" eyebrow isn't hidden behind it. */
    padding-top: 90px;
    padding-bottom: 24px;
    justify-content: flex-start;
}
.sa-page .pe-pillars-head { margin-bottom: 14px; }
.sa-page .pe-pillars-head .section-eyebrow { margin-bottom: 4px; }

.sa-page .pe-pillar-chapter { align-items: flex-start; }

.sa-page .pe-pillar-row {
    grid-template-columns: minmax(260px, 40%) 1fr;
    gap: 56px;
    align-items: flex-start;
}

.sa-page .pe-pillar-aside { align-self: start; }

.sa-page .pe-pillar-num { font-size: clamp(120px, 16vw, 240px); }
.sa-page .pe-pillar-tick { margin-top: 28px; max-width: 220px; }
.sa-page .pe-pillar-counter { margin-top: 16px; font-size: 12px; }

.sa-page .pe-pillar-chapters {
    flex: 0 0 auto;
    /* Tall enough to hold chapter 1 (Build) which has the longest
       step list — prevents content overlapping the dot navigation. */
    min-height: 380px;
}

.sa-page .pe-pillar-main { max-width: 760px; padding-right: 4px; }
.sa-page .pe-pillar-icon {
    width: 42px; height: 42px; font-size: 16px;
    margin-bottom: 12px; border-radius: 11px;
}
.sa-page .pe-pillar-h3 {
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.12;
    margin-bottom: 6px;
}
.sa-page .pe-pillar-body {
    font-size: 14.4px;
    line-height: 1.55;
    margin-bottom: 8px;
    max-width: 720px;
}

/* Lead paragraph (the AI sentence at the top of each phase) */
.sa-page .pe-pillar-lead {
    color: var(--brand, #b10f1a);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    max-width: 720px;
}

.sa-page .pe-pillar-nav { margin-top: 16px; }


/* =========================================================
   SA · STEP LIST (inside BOT chapters)
   Compact bulleted list with a small brand-red dot — used
   for the "Steps:" content under each phase.
   ========================================================= */
.sa-step-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    max-width: 700px;
}

.sa-step-list li {
    position: relative;
    padding: 3px 0 3px 22px;
    font-size: 13.5px;
    line-height: 1.45;
    color: #444;
}

.sa-step-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
}


/* =========================================================
   SA-8 · ENTIOVI ADVANTAGE — 9-card grid (3×3 desktop)
   ========================================================= */
.sa-advantage {
    position: relative;
    padding: 130px 0 140px;
    background: #fff;
    overflow: hidden;
}

.sa-advantage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 90% -10%, rgba(177, 15, 26, .045), transparent 70%),
        radial-gradient(700px 400px at 5% 110%, rgba(0, 0, 0, .03), transparent 70%);
    pointer-events: none;
}

.sa-advantage-head {
    position: relative;
    text-align: center;
    max-width: 880px;
    margin: 0 auto 70px;
    z-index: 1;
}

.sa-advantage-head .pe-section-lead {
    /* Override base .pe-section-lead which has 0 auto margins —
       force horizontal centring and tighten the gap below the
       "Entiovi Advantage" eyebrow. */
    margin: 6px auto 0;
    max-width: 760px;
    font-size: 17px;
    line-height: 1.6;
    color: #555;
}

.sa-advantage-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sa-advantage-card {
    position: relative;
    padding: 36px 30px 32px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 36px -24px rgba(0, 0, 0, .18);
    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .45s ease,
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    flex-direction: column;
}

.sa-advantage-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .035), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Primary-color hover: the entire card fills with brand red and the
   icon, heading, body, and number all flip to white for a dramatic
   premium hover state. */
.sa-advantage-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}
.sa-advantage-card:hover::before { opacity: 0; }

.sa-advantage-num {
    position: absolute;
    top: 18px;
    right: 22px;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
    z-index: 1;
    transition: color .35s ease;
}
.sa-advantage-card:hover .sa-advantage-num {
    color: rgba(255, 255, 255, 0.55);
}

.sa-advantage-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.sa-advantage-card:hover .sa-advantage-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.06);
}

.sa-advantage-card h4 {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.25;
    color: #0a0a0a;
    letter-spacing: -.01em;
    transition: color .35s ease;
}
.sa-advantage-card:hover h4 {
    color: #ffffff;
}

.sa-advantage-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #555;
    transition: color .35s ease;
}
.sa-advantage-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}


/* CTA top padding tightened to match OD page */
.sa-page .pe-cta { padding-top: 70px; }


/* =========================================================
   SA · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .sa-advantage-grid { grid-template-columns: repeat(2, 1fr); }
    .sa-frame-card { padding: 56px 44px; }
    .sa-frame-row { gap: 40px; }
}

@media (max-width: 991px) {
    .sa-advantage { padding: 100px 0 110px; }
    .sa-advantage-head { margin-bottom: 56px; }
    .sa-advantage-card { padding: 30px 26px 28px; }

    /* SA-3 split with visual */
    .sa-split { padding: 100px 0 110px; }
    .sa-split-visual { margin: 40px auto 0; max-width: 480px; }
    .sa-split-title { font-size: clamp(32px, 6vw, 44px); margin-bottom: 22px; }
    .sa-split-lead { font-size: 18px; }

    /* SA-4 mirror — stack: title on top, body below (regardless of order class) */
    .sa-mirror { padding: 100px 0 110px; }
    .sa-mirror-title { text-align: left; }
    .sa-mirror-lead { font-size: 19px; }

    /* SA-6 quote */
    .sa-quote { padding: 100px 0 110px; }
    .sa-quote-lead { padding: 0 16px; margin-bottom: 36px; }
    .sa-quote-title { margin-bottom: 40px; }

    /* SA-7 frame card */
    .sa-frame { padding: 90px 0 100px; }
    .sa-frame-card { padding: 48px 32px; border-radius: 24px; }
    .sa-frame-row { grid-template-columns: 1fr; gap: 28px; align-items: flex-start; }
    .sa-frame-title { font-size: clamp(28px, 6vw, 40px); }

    /* On tablet the pinned filmstrip is unpinned globally — restore
       comfortable reading sizes for the stacked layout. */
    .sa-page .pe-pillar-body { font-size: 16px; line-height: 1.7; }
    .sa-page .pe-pillar-h3 { font-size: clamp(26px, 3.4vw, 34px); }
    .sa-page .pe-pillar-lead { font-size: 14.5px; }
    .sa-step-list li { font-size: 15px; padding: 5px 0 5px 22px; }
    .sa-step-list li::before { top: 14px; }
}

@media (max-width: 575px) {
    .sa-advantage { padding: 80px 0 90px; }
    .sa-advantage-grid { grid-template-columns: 1fr; }
    .sa-advantage-card { padding: 28px 22px 24px; }
    .sa-advantage-icon { width: 46px; height: 46px; font-size: 19px; margin-bottom: 18px; }

    .sa-split { padding: 70px 0 80px; }
    .sa-split-visual { padding: 24px; border-radius: 24px; max-width: 360px; }
    .sa-split-core { width: 132px; height: 132px; }
    .sa-split-core i { font-size: 28px; }
    .sa-split-core strong { font-size: 12.5px; padding: 0 12px; }
    .sa-split-node { min-width: 140px; padding: 10px 12px; }
    .sa-split-node span { font-size: 11.5px; }
    .sa-split-node i { width: 26px; height: 26px; font-size: 12px; }
    .sa-mirror { padding: 70px 0 80px; }
    .sa-quote { padding: 70px 0 80px; }
    .sa-frame { padding: 70px 0 80px; }
    .sa-frame-card { padding: 36px 22px; }
}

/* =========================================================
   SA-3 · CENTERED EDITORIAL VARIANT
   Used when the right-side AI/ML engineer hub visual is
   removed and the section is reflowed as a single-column
   editorial block with a 4-card pastel capabilities grid.
   ========================================================= */
.sa-split-centered .sa-split-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.sa-split-centered .sa-split-tag { display: inline-flex; }
.sa-split-centered .sa-split-title { text-align: center; }
.sa-split-centered .sa-split-lead {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.sa-split-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
    max-width: 1080px;
    margin: 40px auto 56px;
    padding-top: 32px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.sa-split-body-grid .sa-split-body { margin: 0; }

.sa-split-capabilities {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.sa-split-capabilities-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.sa-split-capabilities-grid {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sa-split-capabilities-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 22px 26px;
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.sa-split-capabilities-grid li:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.sa-split-capabilities-grid li i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 14px;
    margin-bottom: 6px;
    transition: background .3s ease, color .3s ease;
}
.sa-split-capabilities-grid li strong {
    font: 700 16px/1.25 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}
.sa-split-capabilities-grid li em {
    font: 500 13px/1.45 "Inter", sans-serif;
    color: rgba(29, 29, 31, .60);
    font-style: normal;
    letter-spacing: -.005em;
    text-align: center;
}

/* Per-card pastel palettes */
.sa-split-capabilities-grid li:nth-child(1) {            /* Data processing — sky blue */
    background: #dbeafe;
}
.sa-split-capabilities-grid li:nth-child(1):hover { background: #bfdbfe; }
.sa-split-capabilities-grid li:nth-child(1) i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.sa-split-capabilities-grid li:nth-child(2) {            /* Model development — peach */
    background: #ffe8dc;
}
.sa-split-capabilities-grid li:nth-child(2):hover { background: #fdd6c0; }
.sa-split-capabilities-grid li:nth-child(2) i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}

.sa-split-capabilities-grid li:nth-child(3) {            /* System integration — lavender */
    background: #ece5fb;
}
.sa-split-capabilities-grid li:nth-child(3):hover { background: #dccff5; }
.sa-split-capabilities-grid li:nth-child(3) i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}

.sa-split-capabilities-grid li:nth-child(4) {            /* Production deploy — mint */
    background: #d1fae5;
}
.sa-split-capabilities-grid li:nth-child(4):hover { background: #a7f3d0; }
.sa-split-capabilities-grid li:nth-child(4) i {
    background: rgba(4, 120, 87, 0.18);
    color: #047857;
}

.sa-split-tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .05);
    border: 1px solid rgba(177, 15, 26, .15);
}
.sa-split-tagline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, .12);
}
.sa-split-tagline em {
    font: 600 13px/1 "Inter", sans-serif;
    color: #0a0a0a;
    font-style: normal;
    letter-spacing: -.005em;
}

@media (max-width: 991px) {
    .sa-split-body-grid { grid-template-columns: 1fr; gap: 20px; }
    .sa-split-capabilities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .sa-split-capabilities-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ▲  END · STAFF AUGMENTATION PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  LAB INFORMATICS PAGE  ▼                             |
   |                                                          |
   |   All styles below are scoped under .li-page so the      |
   |   home / services / PE / PD / AIC / OD / SA pages        |
   |   remain unaffected.                                     |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .pe-pillars-pin,       |
   |   .pe-cta from the Product Engineering block.            |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   LI · COMMON SECTION HEADS — centred eyebrow + lead
   ========================================================= */
.li-page .section-eyebrow { margin-bottom: 6px; }

.li-services-lead,
.li-tech-lead,
.li-expertise-lead {
    margin: 6px auto 0;
    max-width: 820px;
    font-size: 17px;
    line-height: 1.6;
    color: #555;
    text-align: center;
}


/* =========================================================
   LI-3 · OUR EXPERTISE
   ========================================================= */
.li-expertise {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    overflow: hidden;
}

.li-expertise-head {
    position: relative;
    text-align: center;
    margin: 0 auto 60px;
    max-width: 880px;
}

.li-expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 70px;
}

.li-expertise-card {
    position: relative;
    padding: 36px 24px 32px;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                background-color .35s ease,
                box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.li-expertise-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.li-expertise-tag {
    position: absolute;
    top: 18px;
    right: 22px;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
}

.li-expertise-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.li-expertise-card:nth-child(1) {
    background: #ffe8dc;
}
.li-expertise-card:nth-child(1):hover {
    background: #fdd6c0;
}
.li-expertise-card:nth-child(1) .li-expertise-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.li-expertise-card:nth-child(2) {
    background: #ece5fb;
}
.li-expertise-card:nth-child(2):hover {
    background: #dccff5;
}
.li-expertise-card:nth-child(2) .li-expertise-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.li-expertise-card:nth-child(3) {
    background: #e3f0d6;
}
.li-expertise-card:nth-child(3):hover {
    background: #cee5b5;
}
.li-expertise-card:nth-child(3) .li-expertise-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.li-expertise-card:nth-child(4) {
    background: #dceffa;
}
.li-expertise-card:nth-child(4):hover {
    background: #b8dcf2;
}
.li-expertise-card:nth-child(4) .li-expertise-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.li-expertise-card h4 {
    margin: 0;
    font: 600 16px/1.4 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.01em;
}

/* Team showcase — Apple-style centred statement with role pills.
   Source-only content: AI line as eyebrow, the team sentence
   styled as a big headline (with one accent phrase), and four
   role pills extracted directly from the source sentence. */
.li-team-showcase {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 72px 56px 64px;
    background: #fff;
    border-radius: 32px;
    border: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.li-team-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(640px 380px at 100% 0%, rgba(177, 15, 26, .07), transparent 70%),
        radial-gradient(420px 260px at 0% 100%, rgba(177, 15, 26, .04), transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.li-team-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 auto 28px;
    max-width: 680px;
    font: 600 13.5px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .03em;
}

.li-team-statement {
    position: relative;
    z-index: 1;
    margin: 0 auto 44px;
    max-width: 920px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.32;
    letter-spacing: -.022em;
    color: #0a0a0a;
}

.li-team-statement .accent { color: var(--brand, #b10f1a); }

.li-team-roles {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.li-team-role {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.li-team-role:hover {
    transform: translateY(-2px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 14px 28px -16px rgba(177, 15, 26, .35);
}

.li-team-role i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.li-team-role span {
    font: 600 14.5px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}


/* =========================================================
   LI-5 · SPLIT WITH VISUAL  (AI for Laboratory Workflows)
   Same pattern as SA-3 split. Content left, visual right.
   ========================================================= */
.li-split {
    position: relative;
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.li-split::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.li-split .container-xl { position: relative; }

.li-split-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.li-split-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #0a0a0a;
}

.li-split-title .accent { color: var(--brand, #b10f1a); }

.li-split-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
}

.li-split-body {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 580px;
}

.li-split-body:last-child { margin-bottom: 0; }

/* Visual canvas with a centre core + 4 capability tiles */
.li-split-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 540px;
    margin: 0 0 0 auto;
    padding: 36px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transition: transform .15s linear;
}

.li-split-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    z-index: 0;
}

.li-split-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
}

.li-split-orb-a {
    width: 220px;
    height: 220px;
    top: -40px;
    right: -30px;
    background: rgba(177, 15, 26, .25);
    opacity: .55;
}

.li-split-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(160deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 24px 60px -20px rgba(177, 15, 26, .55);
}

.li-split-core i { font-size: 32px; margin-bottom: 8px; opacity: .92; }
.li-split-core strong {
    font: 700 14px/1.2 "Inter", sans-serif;
    margin-bottom: 4px;
    padding: 0 16px;
}
.li-split-core em {
    font: 600 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-style: normal;
}

.li-split-tile {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .25);
    min-width: 150px;
    transition: transform .4s ease, border-color .35s ease, box-shadow .35s ease;
}

.li-split-tile:hover {
    transform: scale(1.04);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 20px 40px -16px rgba(177, 15, 26, .35);
}

.li-split-tile i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.li-split-tile span {
    font: 600 13px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
}

.li-split-tile-1 { top: 8%;    left: 4%;   }
.li-split-tile-2 { top: 8%;    right: 4%;  }
.li-split-tile-3 { bottom: 14%; left: 4%;  }
.li-split-tile-4 { bottom: 14%; right: 4%; }


/* =========================================================
   LI-6 · MIRROR LAYOUT  (LIMS Integration & Automation)
   Title left, body right, on a soft neutral band.
   ========================================================= */
.li-mirror {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #f4f4f5 0%, #ececef 100%);
    overflow: hidden;
}

.li-mirror::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 420px at 5% 90%, rgba(177, 15, 26, .055), transparent 70%);
    pointer-events: none;
}

.li-mirror .container-xl { position: relative; }

.li-mirror-title {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.8vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.li-mirror-title .accent { color: var(--brand, #b10f1a); }

.li-mirror-lead {
    margin: 0 0 22px;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: clamp(20px, 1.9vw, 26px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.015em;
    color: #0a0a0a;
    padding-left: 22px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.li-mirror-body {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 640px;
}

.li-mirror-body:last-child { margin-bottom: 0; }


/* =========================================================
   LI-7 · PROFESSIONAL SERVICES FOR LABVANTAGE — 6 cards
   ========================================================= */
.li-services {
    position: relative;
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.li-services-head,
.li-ops-head,
.li-engagements-head,
.li-cases-head,
.li-ai-head,
.li-why-head {
    position: relative;
    text-align: center;
    margin: 0 auto 60px;
    max-width: 880px;
}

.li-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.li-service-card {
    padding: 30px 26px 28px;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                background-color .35s ease,
                box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 100px;
}

.li-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.li-service-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* Six distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.li-service-card:nth-child(1) {
    background: #ffe8dc;
}
.li-service-card:nth-child(1):hover {
    background: #fdd6c0;
}
.li-service-card:nth-child(1) .li-service-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.li-service-card:nth-child(2) {
    background: #ece5fb;
}
.li-service-card:nth-child(2):hover {
    background: #dccff5;
}
.li-service-card:nth-child(2) .li-service-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.li-service-card:nth-child(3) {
    background: #e3f0d6;
}
.li-service-card:nth-child(3):hover {
    background: #cee5b5;
}
.li-service-card:nth-child(3) .li-service-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.li-service-card:nth-child(4) {
    background: #dceffa;
}
.li-service-card:nth-child(4):hover {
    background: #b8dcf2;
}
.li-service-card:nth-child(4) .li-service-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose */
.li-service-card:nth-child(5) {
    background: #fde0ec;
}
.li-service-card:nth-child(5):hover {
    background: #fbcad8;
}
.li-service-card:nth-child(5) .li-service-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

/* Card 06 · Butter */
.li-service-card:nth-child(6) {
    background: #fdf2c4;
}
.li-service-card:nth-child(6):hover {
    background: #f9e695;
}
.li-service-card:nth-child(6) .li-service-icon {
    background: rgba(170, 130, 30, 0.14);
    color: #8a6a1f;
}

.li-service-card h4 {
    margin: 0;
    font: 600 15.5px/1.35 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.01em;
}

/* Delivery Model — uses the PE Advantage pinned cinematic shell
   (dark contract-to-card backdrop, scroll-driven scrub) but the
   inner content keeps the 3-pillar Apple-style design: pill
   eyebrow, big two-tone statement, three numbered glass cards. */
.li-delivery-panel { width: 100%; }

.li-delivery-head {
    text-align: center;
    margin: 0 auto 44px;
    max-width: 920px;
}

.li-delivery-eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font: 500 13.5px/1.5 "Inter", sans-serif;
    color: #ffffff;
    text-align: left;
    max-width: 760px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.li-delivery-eyebrow .pulse-dot {
    flex-shrink: 0;
    margin-top: 6px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .18);
}

.li-delivery-statement {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.18;
    letter-spacing: -.025em;
    color: #fff;
}

.li-delivery-statement .accent {
    color: #ffffff;
}

.li-delivery-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.li-delivery-pillar {
    position: relative;
    padding: 32px 28px 28px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, .5);
    overflow: hidden;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.li-delivery-pillar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .28), transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.li-delivery-pillar:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 120, 130, .7);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 22px 54px -18px rgba(177, 15, 26, .65);
}

.li-delivery-pillar:hover::before { opacity: 1; }

.li-delivery-num {
    position: absolute;
    top: 18px;
    right: 22px;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .6);
}

.li-delivery-icon {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 22px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.li-delivery-pillar:hover .li-delivery-icon {
    background: #b10f1a;
    color: #fff;
    transform: scale(1.06);
}

.li-delivery-pillar h4 {
    position: relative;
    z-index: 1;
    margin: 0;
    font: 600 18px/1.3 "Inter", sans-serif;
    color: #fff;
    letter-spacing: -.015em;
}

@media (max-width: 991px) {
    .li-delivery-head { margin-bottom: 32px; }
    .li-delivery-pillars { grid-template-columns: 1fr; gap: 14px; }
    .li-delivery-pillar { padding: 26px 22px 22px; }
}


/* =========================================================
   LI-8 · KEY LIMS OPERATIONS — 11-item compact grid
   ========================================================= */
.li-ops {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.li-ops-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.li-ops-grid li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    transition: transform .35s ease,
                background-color .35s ease,
                border-color .35s ease,
                box-shadow .35s ease;
}

/* Primary-color hover: the entire chip fills with brand red and the
   icon + label flip to white for a dramatic, premium hover state. */
.li-ops-grid li:hover {
    transform: translateY(-3px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 18px 36px -18px rgba(177, 15, 26, .35);
}

.li-ops-grid li i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .35s ease, color .35s ease;
}
.li-ops-grid li:hover i {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.li-ops-grid li span {
    font: 600 14px/1.35 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    transition: color .35s ease;
}
.li-ops-grid li:hover span {
    color: #ffffff;
}


/* =========================================================
   LI-9 · TECHNOLOGY LANDSCAPE
   Two-column: AI line on left, tech bullets on right.
   ========================================================= */
.li-tech {
    position: relative;
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.li-tech .section-eyebrow { margin-bottom: 14px; }

.li-tech-lead {
    margin: 0;
    text-align: left;
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
    max-width: 520px;
}

.li-tech-stack {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.li-tech-stack li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    transition: transform .35s ease, border-color .35s ease;
}

.li-tech-stack li:hover {
    transform: translateX(4px);
    border-color: rgba(177, 15, 26, .35);
}

.li-tech-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 0 4px rgba(177, 15, 26, .12);
    flex-shrink: 0;
}

.li-tech-stack strong {
    font: 600 16px/1.4 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

/* Compliance showcase — Apple-style centred card with a brand-red
   shield icon, AI-line eyebrow, statement headline (with the three
   compliance standards highlighted in brand red), and three badge
   chips for 21 CFR Part 11 / HIPAA / GxP. Source-only content. */
.li-compliance {
    position: relative;
    max-width: 1000px;
    margin: 60px auto 0;
    padding: 60px 56px 56px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 28px;
    box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
}

.li-compliance::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(540px 320px at 50% -20%, rgba(177, 15, 26, .07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.li-compliance-shield {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow:
        0 0 0 6px rgba(177, 15, 26, .08),
        0 0 0 12px rgba(177, 15, 26, .04),
        0 16px 36px -10px rgba(177, 15, 26, .45);
}

.li-compliance-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 auto 18px;
    max-width: 680px;
    font: 600 13.5px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .03em;
}

.li-compliance-statement {
    position: relative;
    z-index: 1;
    margin: 0 auto 36px;
    max-width: 820px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.32;
    letter-spacing: -.02em;
    color: #0a0a0a;
}

.li-compliance-statement .accent {
    color: var(--brand, #b10f1a);
    font-weight: 700;
    white-space: nowrap;
}

.li-compliance-badges {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.li-compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.li-compliance-badge:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 14px 30px -16px rgba(177, 15, 26, .35);
}

.li-compliance-badge i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(177, 15, 26, .1);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.li-compliance-badge strong {
    font: 700 14.5px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}


/* =========================================================
   LI-10 · END-TO-END LIMS IMPLEMENTATION (5-chapter pin)
   Uses the default .pe-pillars-pin scale (matches PD's "How
   we build"). Only override: bump the section height to give
   the 5 chapters one viewport of runway each (default is 4).
   ========================================================= */
.li-page .pe-pillars-pin { height: 520vh; }


/* =========================================================
   LI-11 · ENGAGEMENT MODELS (6-card grid)
   ========================================================= */
.li-engagements {
    position: relative;
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.li-engagements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.li-engagement-card {
    position: relative;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    box-shadow: 0 12px 32px -22px rgba(0, 0, 0, .15);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                background-color .45s ease,
                border-color .35s ease,
                box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 180px;
    text-decoration: none;
    color: inherit;
}

/* Primary-color hover: the entire card fills with brand red and the
   icon, heading, and CTA flip to white for a dramatic premium hover. */
.li-engagement-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .35);
    color: #ffffff;
}

.li-engagement-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .35s ease, color .35s ease;
}
.li-engagement-card:hover .li-engagement-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.li-engagement-card h4 {
    margin: 0;
    font: 600 18px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.015em;
    flex-grow: 1;
    transition: color .35s ease;
}
.li-engagement-card:hover h4 {
    color: #ffffff;
}

.li-engagement-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .02em;
    transition: gap .3s ease, color .35s ease;
}

.li-engagement-card:hover .li-engagement-cta {
    gap: 12px;
    color: #ffffff;
}


/* =========================================================
   LI-12 · CASE STUDIES (4 large cards)
   ========================================================= */
.li-cases {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    overflow: hidden;
}

.li-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.li-case-card {
    padding: 44px 36px 38px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
                background-color .45s ease,
                box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.li-case-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.li-case-tag {
    align-self: flex-start;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    margin-bottom: 22px;
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's tag pill and CTA arrow inherit a deeper
   shade of the card's own hue family; on hover the bg deepens to a
   richer pastel. */

/* Card 01 · Peach */
.li-case-card:nth-child(1) {
    background: #ffe8dc;
}
.li-case-card:nth-child(1):hover {
    background: #fdd6c0;
}
.li-case-card:nth-child(1) .li-case-tag {
    background: rgba(200, 95, 50, 0.16);
    color: #8c4a2b;
}
.li-case-card:nth-child(1) .li-case-cta {
    color: #c85f32;
}

/* Card 02 · Lavender */
.li-case-card:nth-child(2) {
    background: #ece5fb;
}
.li-case-card:nth-child(2):hover {
    background: #dccff5;
}
.li-case-card:nth-child(2) .li-case-tag {
    background: rgba(110, 80, 200, 0.16);
    color: #4f3d8a;
}
.li-case-card:nth-child(2) .li-case-cta {
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.li-case-card:nth-child(3) {
    background: #e3f0d6;
}
.li-case-card:nth-child(3):hover {
    background: #cee5b5;
}
.li-case-card:nth-child(3) .li-case-tag {
    background: rgba(95, 140, 55, 0.18);
    color: #4a6a32;
}
.li-case-card:nth-child(3) .li-case-cta {
    color: #5f8c37;
}

/* Card 04 · Sky */
.li-case-card:nth-child(4) {
    background: #dceffa;
}
.li-case-card:nth-child(4):hover {
    background: #b8dcf2;
}
.li-case-card:nth-child(4) .li-case-tag {
    background: rgba(50, 110, 180, 0.16);
    color: #355576;
}
.li-case-card:nth-child(4) .li-case-cta {
    color: #326eb4;
}

.li-case-card h3 {
    margin: 0 0 14px;
    font: 600 22px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.02em;
}

.li-case-card p {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.65;
    color: #555;
    flex-grow: 1;
}

.li-case-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13.5px/1 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .02em;
    transition: gap .3s ease;
}

.li-case-card:hover .li-case-cta { gap: 12px; }


/* =========================================================
   LI-13 · AI-POWERED INFORMATICS (4 feature cards)
   ========================================================= */
.li-ai-features {
    position: relative;
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.li-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.li-ai-card {
    padding: 36px 32px 32px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
                background .45s ease,
                border-color .35s ease,
                box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

/* Primary-color hover: the entire card fills with brand red and the
   icon, heading, body and CTA flip to white for a dramatic premium hover. */
.li-ai-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 30px 60px -28px rgba(177, 15, 26, .35);
    color: #ffffff;
}

.li-ai-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .14), rgba(177, 15, 26, .04));
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background .35s ease, color .35s ease;
}
.li-ai-card:hover .li-ai-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.li-ai-card h4 {
    margin: 0;
    font: 600 20px/1.25 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.018em;
    transition: color .35s ease;
}
.li-ai-card:hover h4 {
    color: #ffffff;
}

.li-ai-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
    transition: color .35s ease;
}
.li-ai-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

.li-ai-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .02em;
    transition: gap .3s ease, color .35s ease;
}

.li-ai-card:hover .li-ai-cta {
    gap: 12px;
    color: #ffffff;
}


/* =========================================================
   LI-14 · WHY CHOOSE ENTIOVI? (5-item check list)
   ========================================================= */
.li-why {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
}

.li-why-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 820px;
    display: grid;
    gap: 14px;
}

.li-why-list li {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 28px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.li-why-list li:hover {
    transform: translateX(6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 14px 30px -18px rgba(177, 15, 26, .3);
}

.li-why-list li i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.li-why-list li span {
    font: 500 16.5px/1.5 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}


/* Uniform vertical rhythm — all LI sections (including the
   shared .pe-narrative and .pe-cta) use the same 100px top
   and bottom padding. */
.li-page .pe-narrative { padding: 100px 0; }
.li-page .pe-cta { padding: 100px 0; }


/* =========================================================
   LI · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .li-expertise-grid { grid-template-columns: repeat(2, 1fr); }
    .li-services-grid { grid-template-columns: repeat(2, 1fr); }
    .li-ops-grid { grid-template-columns: repeat(3, 1fr); }
    .li-engagements-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .li-expertise { padding: 90px 0 100px; }
    .li-services { padding: 100px 0 110px; }
    .li-ops { padding: 90px 0 100px; }
    .li-tech { padding: 100px 0 110px; }
    .li-engagements { padding: 100px 0 110px; }
    .li-cases { padding: 100px 0 110px; }
    .li-ai-features { padding: 100px 0 110px; }
    .li-why { padding: 90px 0 110px; }

    .li-split { padding: 100px 0 110px; }
    .li-split-visual { margin: 40px auto 0; max-width: 460px; }
    .li-split-title { font-size: clamp(32px, 6vw, 44px); }

    .li-mirror { padding: 100px 0 110px; }
    .li-mirror-title { margin-bottom: 28px; }

    .li-tech-lead { text-align: left; max-width: 100%; }
    .li-ops-grid { grid-template-columns: repeat(2, 1fr); }
    .li-cases-grid { grid-template-columns: 1fr; }
    .li-ai-grid { grid-template-columns: 1fr; }

    /* On tablet the pinned filmstrip is unpinned globally — restore
       comfortable reading sizes for the stacked layout. */
    .li-page .pe-pillar-body { font-size: 16px; line-height: 1.7; }
    .li-page .pe-pillar-h3 { font-size: clamp(26px, 3.4vw, 34px); }
    .li-page .pe-pillar-lead { font-size: 14.5px; }
}

@media (max-width: 575px) {
    .li-expertise-grid { grid-template-columns: 1fr; }
    .li-services-grid { grid-template-columns: 1fr; }
    .li-ops-grid { grid-template-columns: 1fr; }
    .li-engagements-grid { grid-template-columns: 1fr; }

    .li-expertise { padding: 70px 0 80px; }
    .li-services { padding: 80px 0 90px; }
    .li-ops { padding: 70px 0 80px; }
    .li-tech { padding: 80px 0 90px; }
    .li-engagements { padding: 80px 0 90px; }
    .li-cases { padding: 80px 0 90px; }
    .li-ai-features { padding: 80px 0 90px; }
    .li-why { padding: 70px 0 90px; }

    .li-split { padding: 70px 0 80px; }
    .li-split-visual { padding: 24px; border-radius: 24px; max-width: 360px; }
    .li-split-core { width: 130px; height: 130px; }
    .li-split-tile { min-width: 130px; padding: 10px 12px; }
    .li-split-tile span { font-size: 12px; }

    .li-case-card { padding: 32px 24px 28px; }
    .li-ai-card { padding: 28px 22px 24px; }

    .li-compliance { padding: 44px 28px 40px; border-radius: 22px; }
    .li-compliance-shield { width: 56px; height: 56px; font-size: 22px; }
    .li-compliance-statement { font-size: clamp(20px, 5vw, 24px); }
    .li-compliance-badge { padding: 12px 18px; }
    .li-compliance-badge strong { font-size: 13.5px; }

    .li-delivery-pillars { grid-template-columns: 1fr; gap: 14px; }

    .li-team-showcase { padding: 48px 28px 44px; border-radius: 24px; }
    .li-team-statement { font-size: clamp(20px, 5.5vw, 24px); }
    .li-team-role { padding: 10px 14px; }
    .li-team-role span { font-size: 13px; }

    .li-delivery { padding: 44px 28px 40px; border-radius: 24px; }
    .li-delivery-statement { font-size: clamp(22px, 5.5vw, 28px); }
    /* On mobile the eyebrow holds a full sentence — the desktop 999px
       pill turns into a stretched-lozenge shape with curved ends that
       fight the text. Switch to a regular rounded rectangle so it
       reads as a callout block instead. */
    .li-delivery-eyebrow {
        display: flex;
        align-items: flex-start;
        padding: 12px 16px;
        font-size: 12.5px;
        line-height: 1.55;
        border-radius: 18px;
        max-width: 100%;
    }
    .li-delivery-eyebrow .pulse-dot { margin-top: 5px; }
    .li-delivery-pillar { padding: 26px 22px 22px; }
}

/* =========================================================
   LI-5 · CENTERED EDITORIAL VARIANT
   Used when the right-side AI-in-the-Lab visual is removed
   and the section is reflowed as a single-column editorial
   block with a 4-card capability grid below.
   ========================================================= */
.li-split-centered .li-split-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.li-split-centered .li-split-tag { display: inline-flex; }
.li-split-centered .li-split-title { text-align: center; }
.li-split-centered .li-split-lead {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.li-split-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
    max-width: 1080px;
    margin: 40px auto 56px;
    padding-top: 32px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.li-split-body-grid .li-split-body { margin: 0; }

.li-split-capabilities {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.li-split-capabilities-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.li-split-capabilities-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.li-split-capabilities-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 22px 26px;
    background: #ffffff;
    border-radius: 20px;
    text-align: center;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.li-split-capabilities-grid li:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.li-split-capabilities-grid li i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 14px;
    margin-bottom: 6px;
    transition: background .3s ease, color .3s ease;
}
.li-split-capabilities-grid li strong {
    font: 700 16px/1.25 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}
.li-split-capabilities-grid li em {
    font: 500 13px/1.45 "Inter", sans-serif;
    color: rgba(29, 29, 31, .60);
    font-style: normal;
    letter-spacing: -.005em;
    text-align: center;
}

/* Per-card pastel palettes — distinct color per capability */
.li-split-capabilities-grid li:nth-child(1) {           /* Automation — sky blue */
    background: #dbeafe;
}
.li-split-capabilities-grid li:nth-child(1):hover {
    background: #bfdbfe;
}
.li-split-capabilities-grid li:nth-child(1) i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.li-split-capabilities-grid li:nth-child(2) {           /* Analytics — peach */
    background: #ffe8dc;
}
.li-split-capabilities-grid li:nth-child(2):hover {
    background: #fdd6c0;
}
.li-split-capabilities-grid li:nth-child(2) i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}

.li-split-capabilities-grid li:nth-child(3) {           /* Adaptive — lavender */
    background: #ece5fb;
}
.li-split-capabilities-grid li:nth-child(3):hover {
    background: #dccff5;
}
.li-split-capabilities-grid li:nth-child(3) i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}

.li-split-capabilities-grid li:nth-child(4) {           /* Predictive — mint */
    background: #d1fae5;
}
.li-split-capabilities-grid li:nth-child(4):hover {
    background: #a7f3d0;
}
.li-split-capabilities-grid li:nth-child(4) i {
    background: rgba(4, 120, 87, 0.18);
    color: #047857;
}

@media (max-width: 991px) {
    .li-split-body-grid { grid-template-columns: 1fr; gap: 20px; }
    .li-split-capabilities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .li-split-capabilities-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ▲  END · LAB INFORMATICS PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  TECHNOLOGY SERVICES PAGE  ▼                         |
   |                                                          |
   |   All styles below are scoped under .ts-page so the      |
   |   home / services / PE / PD / AIC / OD / SA / LI pages   |
   |   remain unaffected.                                     |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .pe-cta from the       |
   |   Product Engineering block, plus the SA-page Apple      |
   |   layout variants for visual variety:                    |
   |     · TS-2 Data Engineering   → .pe-narrative            |
   |     · TS-3 Data Science       → .sa-mirror               |
   |     · TS-4 Application Dev    → .sa-split (with visual)  |
   |     · TS-5 Consulting         → .sa-quote                |
   |     · TS-6 Engineering        → .sa-frame                |
   |                                                          |
   |   Each section reads as a distinct beat without          |
   |   inventing any new copy.                                |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   TS · COMPACT 5-SERVICE CARD GRID
   Apple Mac Studio-style bento: 2-column grid where the 5th
   card spans full width, so all 5 services fit in a clean
   3-row layout (2 + 2 + 1 wide). Each card is uniform,
   compact, with brand-red number badge, icon, title,
   AI lead, and body. Hover = subtle lift + brand-red glow.
   ========================================================= */
.ts-grid-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    overflow: hidden;
}

.ts-grid-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.ts-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.ts-card-wide { grid-column: 1 / -1; }

.ts-card {
    position: relative;
    padding: 36px 34px 32px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    box-shadow: 0 14px 38px -26px rgba(0, 0, 0, .18);
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .45s ease,
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.ts-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .035), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Primary-color hover: the entire card fills with brand red and the
   icon, heading, lead, body, and number flip to white. */
.ts-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}

.ts-card:hover::before { opacity: 0; }

.ts-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.ts-card-num {
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
    transition: color .35s ease;
}
.ts-card:hover .ts-card-num {
    color: rgba(255, 255, 255, 0.55);
}

.ts-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.ts-card:hover .ts-card-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.06);
}

.ts-card-title {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 1.9vw, 26px);
    line-height: 1.2;
    letter-spacing: -.018em;
    color: #0a0a0a;
    transition: color .35s ease;
}
.ts-card:hover .ts-card-title {
    color: #ffffff;
}

.ts-card-lead {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font: 600 13.5px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    transition: color .35s ease, border-bottom-color .35s ease;
}
.ts-card:hover .ts-card-lead {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.ts-card-body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: #555;
    transition: color .35s ease;
}
.ts-card:hover .ts-card-body {
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   TS · UNIFORM VERTICAL RHYTHM (CTA spacing)
   ========================================================= */
.ts-page .pe-cta { padding: 100px 0; }


/* =========================================================
   TS · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .ts-grid-section { padding: 80px 0; }
    .ts-grid { grid-template-columns: 1fr; gap: 18px; }
    .ts-card-wide { grid-column: auto; }
    .ts-card { padding: 30px 26px 28px; }
    .ts-card-title { font-size: 22px; }
}

@media (max-width: 575px) {
    .ts-grid-section { padding: 60px 0; }
    .ts-card { padding: 26px 22px 24px; border-radius: 18px; }
    .ts-card-icon { width: 44px; height: 44px; font-size: 18px; }
    .ts-card-title { font-size: 20px; margin-bottom: 12px; }
    .ts-card-body { font-size: 15px; }
}


/* ============================================================
   ▲  END · TECHNOLOGY SERVICES PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  DATA CONVERSION SERVICES PAGE  ▼                    |
   |                                                          |
   |   All styles below are scoped under .dc-page so the      |
   |   home / services / PE / PD / AIC / OD / SA / LI / TS    |
   |   pages remain unaffected.                               |
   |                                                          |
   |   Reuses .pe-hero, .pe-cta from the Product Engineering  |
   |   block. Page-specific blocks: .dc-hero-chips (8         |
   |   conversion-type chips below the hero subtitle),        |
   |   .dc-intro (centred section intro), and .dc-grid /      |
   |   .dc-card (3-column compact card grid for the 6         |
   |   detailed conversion services).                         |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   DC · HERO CHIPS — 8 conversion types listed in source
   ========================================================= */
.dc-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
    max-width: 880px;
}

.dc-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    font: 600 13px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.dc-hero-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(177, 15, 26, .35);
    background: #fff;
    box-shadow: 0 10px 24px -14px rgba(177, 15, 26, .35);
}

.dc-hero-chip i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(177, 15, 26, .1);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}


/* =========================================================
   DC-2 · INTRO — centred section heading + AI lead
   ========================================================= */
.dc-intro {
    position: relative;
    padding: 100px 0 30px;
    background: #fff;
}

.dc-intro-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}

.dc-intro-head .section-eyebrow { margin-bottom: 16px; }

.dc-intro-lead {
    margin: 0 auto;
    max-width: 820px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 500;
    font-size: clamp(20px, 1.9vw, 28px);
    line-height: 1.32;
    letter-spacing: -.02em;
    color: #0a0a0a;
}


/* =========================================================
   DC-3 · 6 CONVERSION CARDS — compact 3×2 grid
   Same compact-card approach as the TS page but in 3 columns
   so the 6 services fit cleanly in a 3×2 layout. Each card
   has a number, brand-red icon, title, AI lead with rule,
   and source body paragraph.
   ========================================================= */
.dc-grid-section {
    position: relative;
    padding: 30px 0 100px;
    background: #fff;
    overflow: hidden;
}

.dc-grid-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 0% 100%, rgba(177, 15, 26, .04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.dc-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.dc-card {
    position: relative;
    padding: 32px 28px 28px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    box-shadow: 0 14px 38px -26px rgba(0, 0, 0, .18);
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .45s ease,
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.dc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .035), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Primary-color hover: the entire card fills with brand red and the
   icon, heading, lead, body, and number flip to white. */
.dc-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}

.dc-card:hover::before { opacity: 0; }

.dc-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.dc-card-num {
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
    transition: color .35s ease;
}
.dc-card:hover .dc-card-num {
    color: rgba(255, 255, 255, 0.55);
}

.dc-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.dc-card:hover .dc-card-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.06);
}

.dc-card-title {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.018em;
    color: #0a0a0a;
    transition: color .35s ease;
}
.dc-card:hover .dc-card-title {
    color: #ffffff;
}

.dc-card-lead {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font: 600 13px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    transition: color .35s ease, border-bottom-color .35s ease;
}
.dc-card:hover .dc-card-lead {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.dc-card-body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: #555;
    transition: color .35s ease;
}
.dc-card:hover .dc-card-body {
    color: rgba(255, 255, 255, 0.92);
}


/* CTA spacing tightened to match LI / TS rhythm */
.dc-page .pe-cta { padding: 100px 0; }


/* =========================================================
   DC · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .dc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .dc-intro { padding: 80px 0 24px; }
    .dc-grid-section { padding: 24px 0 80px; }
    .dc-grid { gap: 18px; }
    .dc-card { padding: 28px 24px 26px; }
    .dc-hero-chip { padding: 8px 14px; font-size: 12.5px; }
}

@media (max-width: 575px) {
    .dc-intro { padding: 60px 0 20px; }
    .dc-grid-section { padding: 20px 0 60px; }
    .dc-grid { grid-template-columns: 1fr; }
    .dc-card { padding: 26px 22px 24px; border-radius: 18px; }
    .dc-card-icon { width: 42px; height: 42px; font-size: 17px; }
    .dc-card-title { font-size: 19px; }
    .dc-hero-chips { gap: 8px; margin-top: 24px; }
    .dc-hero-chip { padding: 7px 12px; font-size: 12px; }
}


/* ============================================================
   ▲  END · DATA CONVERSION SERVICES PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  HEALTHCARE PLATFORM PAGE  ▼                         |
   |                                                          |
   |   All styles below are scoped under .hp-page so other    |
   |   pages remain unaffected.                               |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .sa-mirror, .pe-cta    |
   |   for the bulk of the page. Page-specific block:         |
   |   .hp-enheal — the EnHeal feature section with a         |
   |   centred brand-red core node connected by rays to       |
   |   five healthcare system tiles (EHR, lab, imaging,       |
   |   trial, external data) — all source phrases.            |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   HP · UNIFORM VERTICAL RHYTHM (matches LI / TS rhythm)
   ========================================================= */
.hp-page .pe-narrative,
.hp-page .sa-mirror,
.hp-page .hp-enheal,
.hp-page .hp-clinical {
    padding: 100px 0;
}
.hp-page .pe-cta { padding: 100px 0; }


/* =========================================================
   HP-2 · NARRATIVE — right-side visual with sticky scroll
   ========================================================= */
.hp-page .pe-narrative .row { align-items: flex-start; }

.hp-narrative-visual {
    max-width: 560px;
    margin: 0 0 0 auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .07);
    background: #f3f3f4;
}
.hp-narrative-visual img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 992px) {
    .hp-narrative-col-visual {
        position: sticky;
        top: 110px;
    }
}
@media (max-width: 991.98px) {
    .hp-narrative-visual { margin: 40px auto 0; max-width: 480px; }
}
@media (max-width: 575.98px) {
    .hp-narrative-visual { max-width: 360px; border-radius: 24px; }
}


/* =========================================================
   HP-4 · CLINICAL & DIAGNOSTIC — Apple feature page style
   Centered AI-line eyebrow + giant title at top, then a
   2×2 grid of premium pillar cards. Each card holds one
   source paragraph verbatim under a heading derived from
   that paragraph's own key phrase.
   ========================================================= */
.hp-clinical {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    overflow: hidden;
}

.hp-clinical::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 50% -10%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.hp-clinical .container-xl { position: relative; }

.hp-clinical-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}

.hp-clinical-eyebrow {
    margin: 0 auto 22px;
    max-width: 720px;
    font: 600 13.5px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .03em;
}

.hp-clinical-title {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.hp-clinical-title .accent { color: var(--brand, #b10f1a); }

.hp-clinical-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.hp-clinical-card {
    position: relative;
    padding: 36px 32px 32px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.hp-clinical-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.hp-clinical-num {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 1;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
}

.hp-clinical-icon {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 22px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.hp-clinical-card:hover .hp-clinical-icon {
    transform: scale(1.06);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of its own hue
   family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.hp-clinical-card:nth-child(1) {
    background: #ffe8dc;
}
.hp-clinical-card:nth-child(1):hover {
    background: #fdd6c0;
}
.hp-clinical-card:nth-child(1) .hp-clinical-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.hp-clinical-card:nth-child(2) {
    background: #ece5fb;
}
.hp-clinical-card:nth-child(2):hover {
    background: #dccff5;
}
.hp-clinical-card:nth-child(2) .hp-clinical-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.hp-clinical-card:nth-child(3) {
    background: #e3f0d6;
}
.hp-clinical-card:nth-child(3):hover {
    background: #cee5b5;
}
.hp-clinical-card:nth-child(3) .hp-clinical-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.hp-clinical-card:nth-child(4) {
    background: #dceffa;
}
.hp-clinical-card:nth-child(4):hover {
    background: #b8dcf2;
}
.hp-clinical-card:nth-child(4) .hp-clinical-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.hp-clinical-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.018em;
    color: #0a0a0a;
}

.hp-clinical-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #555;
}


/* =========================================================
   HP-6 · CARE COORDINATION — CTA-BAND CONTRACT-TO-CARD
   Same Apple Mac Studio pattern as the home page CTA band.
   Outer wrapper is page-white, the brand-red panel lives on
   .hp-care-card and pulls into a rounded inset card on
   enter/exit. White typography, glassmorphic stakeholder
   pills. Source content unchanged.
   ========================================================= */
.hp-care-band {
    position: relative;
    background: #ffffff;
    color: #fff;
    padding: 0;
    /* --hp-care-contract: 0 = full-bleed (centered),
       1 = contracted card (entry/exit). Driven by JS. */
    --hp-care-contract: 1;
}

.hp-care-card {
    position: relative;
    background: var(--brand, #b10f1a);
    padding: 100px 72px;
    overflow: hidden;
    margin-top:    calc(var(--hp-care-contract) * 28px);
    margin-bottom: calc(var(--hp-care-contract) * 28px);
    margin-left:   calc(var(--hp-care-contract) * max(32px, (100vw - 1280px) / 2));
    margin-right:  calc(var(--hp-care-contract) * max(32px, (100vw - 1280px) / 2));
    border-radius: calc(var(--hp-care-contract) * 36px);
    box-shadow:
        0 40px 80px -30px rgba(177, 15, 26, .45),
        0 60px 120px -50px rgba(0, 0, 0, .25);
    transition: margin .35s ease, border-radius .35s ease;
}

/* Soft brand-red bloom highlights inside the panel */
.hp-care-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px circle at 18% 18%, rgba(255, 255, 255, .14), transparent 50%),
        radial-gradient(800px circle at 82% 82%, rgba(0, 0, 0, .25), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.hp-care-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.hp-care-inner {
    position: relative;
    z-index: 1;
}

.hp-care-head {
    text-align: center;
    max-width: 1040px;
    margin: 0 auto 56px;
}

.hp-care-title {
    margin: 0 0 26px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #ffffff;
}

.hp-care-eyebrow {
    max-width: 820px;
    margin: 0 auto 36px;
    font: 500 18px/1.55 "Inter", sans-serif;
    color: rgba(255, 255, 255, .82);
    letter-spacing: -.005em;
}

/* Glassmorphic stakeholder pills on the brand-red card */
.hp-care-stakeholders {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hp-care-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: 600 14px/1 "Inter", sans-serif;
    color: #ffffff;
    letter-spacing: -.005em;
    transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.hp-care-pill:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
}

.hp-care-pill i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Single centred reading column — 4 source paragraphs in
   white on the brand-red panel. */
.hp-care-body {
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

.hp-care-body p {
    margin: 0 0 24px;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: 17.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .8);
    letter-spacing: -.005em;
}

.hp-care-body p:first-child {
    color: #ffffff;
    font-weight: 500;
    font-size: clamp(20px, 1.85vw, 24px);
    line-height: 1.5;
    letter-spacing: -.018em;
    padding-left: 22px;
    border-left: 3px solid rgba(255, 255, 255, .55);
    margin-bottom: 32px;
}

.hp-care-body p:last-child { margin-bottom: 0; }

.hp-care-head {
    text-align: center;
    max-width: 1040px;
    margin: 0 auto 64px;
}

.hp-care-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1.02;
    letter-spacing: -.04em;
    color: #ffffff;
}

.hp-care-title .accent {
    background: linear-gradient(90deg, #ff8189 0%, #b10f1a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hp-care-eyebrow {
    max-width: 820px;
    margin: 0 auto 40px;
    font: 500 18px/1.55 "Inter", sans-serif;
    color: rgba(255, 255, 255, .7);
    letter-spacing: -.005em;
}

/* Glassmorphic stakeholder pills on the dark background */
.hp-care-stakeholders {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.hp-care-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: 600 14px/1 "Inter", sans-serif;
    color: #ffffff;
    letter-spacing: -.005em;
    transition: transform .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

.hp-care-pill:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 120, 130, .55);
    box-shadow: 0 14px 28px -16px rgba(177, 15, 26, .55);
}

.hp-care-pill i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 90, 104, .2);
    color: #ff8189;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Refined editorial body — 4 paragraphs flowing as one
   reading column on the dark backdrop. */
.hp-care-body {
    max-width: 880px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}

.hp-care-body p {
    margin: 0 0 24px;
    font-family: "Inter", "Manrope", sans-serif;
    font-size: 17.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
    letter-spacing: -.005em;
}

.hp-care-body p:first-child {
    color: #ffffff;
    font-weight: 500;
    font-size: clamp(20px, 1.85vw, 24px);
    line-height: 1.5;
    letter-spacing: -.018em;
    padding-left: 22px;
    border-left: 3px solid var(--brand, #b10f1a);
    margin-bottom: 32px;
}

.hp-care-body p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HP · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .hp-page .pe-narrative,
    .hp-page .sa-mirror,
    .hp-page .hp-enheal,
    .hp-page .hp-clinical { padding: 80px 0; }

    .hp-care-card { padding: 80px 40px; }
    .hp-care-title { font-size: clamp(34px, 7vw, 52px); }
    .hp-care-eyebrow { font-size: 16px; }

    /* Tablet + phone: switch the EnHeal star layout to a vertical
       stack at 991px (was only 767px) — the screenshot showed the
       star still active at tablet portrait widths and overlapping
       the central core with the side nodes. */
    .hp-enheal-visual {
        margin: 40px auto 0;
        max-width: 480px;
        aspect-ratio: auto;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 26px 18px;
    }
    .hp-enheal-rays { display: none !important; }
    .hp-enheal-core {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 140px !important;
        height: 140px !important;
        border-radius: 50% !important;
        flex-shrink: 0;
        aspect-ratio: 1 / 1 !important;
        align-self: center;
        margin: 6px 0 16px;
    }
    .hp-enheal-core i { font-size: 24px !important; }
    .hp-enheal-core strong { font-size: 14px !important; }
    .hp-enheal-core em { font-size: 10px !important; }
    .hp-enheal-node,
    .hp-enheal-node-1,
    .hp-enheal-node-2,
    .hp-enheal-node-3,
    .hp-enheal-node-4,
    .hp-enheal-node-5 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 12px 14px;
    }
    .hp-enheal-title { font-size: clamp(36px, 7vw, 56px); }
    .hp-enheal-lead { font-size: 18px; }

    .hp-clinical-grid { grid-template-columns: 1fr; }
    .hp-clinical-card { padding: 30px 26px 28px; }

    .hp-care-body p { font-size: 16.5px; }
    .hp-care-body p:first-child { font-size: 18px; }
    .hp-care-pill { padding: 10px 16px; font-size: 13px; }
}

/* Tablet portrait + phone: the star arrangement (5 absolutely-
   positioned nodes around the central EnHeal core) overlapped at any
   width narrow enough that the side nodes couldn't fit beside the
   core. Switch to a clean vertical stack — core at top, 5 nodes as
   a single column of full-width rows beneath. Reads as a flat,
   scannable list instead of a cramped grid. */
@media (max-width: 767px) {
    .hp-enheal-visual {
        padding: 26px 18px;
        border-radius: 22px;
        max-width: 440px;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .hp-enheal-rays { display: none; }
    /* Core's default rule (further down in the file) uses
       `position: absolute; transform: translate(-50%,-50%)` to centre
       it inside the star — must be neutralised with !important here
       so the vertical-stack layout flows correctly on mobile. */
    .hp-enheal-core {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 140px;
        height: 140px;
        align-self: center;
        margin: 4px 0 14px;
    }
    .hp-enheal-core i { font-size: 28px; }
    .hp-enheal-core strong { font-size: 15px; }
    .hp-enheal-core em { font-size: 10.5px; }
    .hp-enheal-node,
    .hp-enheal-node-1,
    .hp-enheal-node-2,
    .hp-enheal-node-3,
    .hp-enheal-node-4,
    .hp-enheal-node-5 {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        min-width: 0;
        width: 100%;
        padding: 12px 14px;
    }
    .hp-enheal-node-5:hover { transform: translateX(2px); }
    .hp-enheal-node span { font-size: 13.5px; }
    .hp-enheal-node i { width: 30px; height: 30px; font-size: 13px; }
}

@media (max-width: 575px) {
    .hp-page .pe-narrative,
    .hp-page .sa-mirror,
    .hp-page .hp-enheal,
    .hp-page .hp-clinical { padding: 60px 0; }

    .hp-care-card { padding: 64px 28px; }
    .hp-care-title { font-size: clamp(28px, 8.5vw, 40px); }
    .hp-enheal-visual { max-width: 380px; padding: 22px 16px; }
    .hp-enheal-core { width: 124px; height: 124px; }
    .hp-enheal-core i { font-size: 24px; }
    .hp-enheal-core strong { font-size: 14px; }
    .hp-enheal-node span { font-size: 13px; }
    .hp-enheal-node i { width: 28px; height: 28px; font-size: 12px; }

    .hp-clinical-card { padding: 26px 22px 24px; border-radius: 18px; }

    .hp-care-body p { font-size: 16px; line-height: 1.7; }
    .hp-care-body p:first-child { font-size: 17px; }
    .hp-care-stakeholders { gap: 8px; }
    .hp-care-pill { padding: 9px 14px; font-size: 12.5px; }
}


/* =========================================================
   HP-3 · ENHEAL — SPLIT WITH VISUAL
   Content left (5 source paragraphs), creative visual right.
   The visual shows EnHeal as a brand-red core with 5
   connected healthcare-system tiles around it, joined by
   dashed rays — directly reflecting the source line about
   EnHeal connecting EHR, lab systems, imaging, trial systems,
   and external data sources.
   ========================================================= */
.hp-enheal {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.hp-enheal::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.hp-enheal .container-xl { position: relative; }

.hp-enheal-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hp-enheal-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 88px);
    line-height: 1;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.hp-enheal-title .accent { color: var(--brand, #b10f1a); }

.hp-enheal-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
    padding-left: 18px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.hp-enheal-body {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 580px;
}

.hp-enheal-body:last-child { margin-bottom: 0; }


/* ---- Visual canvas ---- */
.hp-enheal-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin: 0 0 0 auto;
    padding: 36px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transition: transform .15s linear;
}

.hp-enheal-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    z-index: 0;
}

.hp-enheal-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    z-index: 0;
    pointer-events: none;
}

.hp-enheal-orb-a {
    width: 220px;
    height: 220px;
    top: -40px;
    right: -30px;
    background: rgba(177, 15, 26, .25);
    opacity: .5;
}

.hp-enheal-orb-b {
    width: 200px;
    height: 200px;
    bottom: -40px;
    left: -30px;
    background: rgba(177, 15, 26, .12);
    opacity: .55;
}

.hp-enheal-rays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hp-enheal-rays line {
    stroke: rgba(177, 15, 26, .35);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
    fill: none;
}

.hp-enheal-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background: linear-gradient(160deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 24px 60px -20px rgba(177, 15, 26, .55);
}

.hp-enheal-core i {
    font-size: 36px;
    margin-bottom: 8px;
    opacity: .92;
}

.hp-enheal-core strong {
    font: 700 16px/1.2 "Inter", sans-serif;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}

.hp-enheal-core em {
    font: 600 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-style: normal;
}

/* 5 surrounding healthcare-system nodes */
.hp-enheal-node {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .25);
    min-width: 160px;
    transition: transform .4s ease, border-color .35s ease, box-shadow .35s ease;
}

.hp-enheal-node:hover {
    transform: scale(1.04);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 20px 40px -16px rgba(177, 15, 26, .35);
}

.hp-enheal-node i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.hp-enheal-node span {
    font: 600 12.5px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

/* 5-point star arrangement: top-left, top-right, mid-left, mid-right, bottom */
.hp-enheal-node-1 { top: 4%;    left: 0%;   }
.hp-enheal-node-2 { top: 4%;    right: 0%;  }
.hp-enheal-node-3 { top: 47%;   left: -2%;  }
.hp-enheal-node-4 { top: 47%;   right: -2%; }
.hp-enheal-node-5 { bottom: 4%; left: 50%; transform: translateX(-50%); }
.hp-enheal-node-5:hover { transform: translateX(-50%) scale(1.04); }

/* Centered editorial variant — used when the orchestration
   diagram is removed and the section reads as a single-column
   editorial block (title, lead, 2-column body, connected-
   systems row of 5 cards). */
.hp-enheal-centered .hp-enheal-inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.hp-enheal-centered .hp-enheal-tag { display: inline-flex; }
.hp-enheal-centered .hp-enheal-title { text-align: center; }
.hp-enheal-centered .hp-enheal-lead {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.hp-enheal-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 56px;
    max-width: 1080px;
    margin: 44px auto 64px;
    padding-top: 36px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.hp-enheal-body-grid .hp-enheal-body { margin: 0; }

.hp-enheal-ecosystem {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.hp-enheal-ecosystem-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.hp-enheal-ecosystem-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.hp-enheal-ecosystem-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.hp-enheal-ecosystem-grid li:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 14px 36px rgba(177, 15, 26, .08);
}
.hp-enheal-ecosystem-grid li i {
    font-size: 24px;
    color: var(--brand, #b10f1a);
}
.hp-enheal-ecosystem-grid li strong {
    font: 600 14.5px/1.35 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.008em;
    text-align: center;
}
@media (max-width: 991px) {
    .hp-enheal-body-grid { grid-template-columns: 1fr; gap: 24px; }
    .hp-enheal-ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .hp-enheal-ecosystem-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   ▲  END · HEALTHCARE PLATFORM PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  PRIVACY PLATFORM PAGE  ▼                            |
   |                                                          |
   |   All styles below are scoped under .pp-page so other    |
   |   pages remain unaffected.                               |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .sa-mirror, .pe-cta    |
   |   for the bulk of the page. Page-specific blocks:        |
   |     · .pp-data-list — 4 chips for "data can be:" bullets |
   |     · .pp-split / .pp-split-visual — Privacy-Preserving  |
   |       AI section with 4 PET nodes around a Xafe core     |
   |     · .pp-fed-list — federated layer bullets             |
   |     · .pp-compliance / .pp-compliance-grid — compliance  |
   |       capability cards                                   |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   PP · UNIFORM VERTICAL RHYTHM (matches LI / TS / HP rhythm)
   ========================================================= */
.pp-page .pp-intro,
.pp-page .pp-split,
.pp-page .pp-fed,
.pp-page .pp-compliance {
    padding: 100px 0;
}
.pp-page .pe-cta { padding: 100px 0; }


/* =========================================================
   PP-2 · INTRO — APPLE EDITORIAL MAGAZINE LAYOUT
   Massive title hero, body in 2-column magazine layout, then
   4 large floating capability cards for "data can be:" beats.
   Clean, Apple-confident, no dark boxes.
   ========================================================= */
.pp-intro {
    position: relative;
    background: #fff;
    overflow: clip;
}

.pp-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 540px at 92% -10%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.pp-intro .container-xl { position: relative; }


/* ---- Hero block — massive editorial title ---- */
.pp-intro-hero {
    max-width: 1100px;
    margin: 0 auto 72px;
}

.pp-intro-hero .section-eyebrow {
    margin-bottom: 22px;
}

/* ---- Magazine body with right-side visual ---- */
.pp-intro-magazine.pp-intro-magazine--with-visual {
    grid-template-columns: 1.25fr 1fr;
    align-items: start;
}
.pp-intro-magazine-visual {
    max-width: 560px;
    margin: 0 0 0 auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .07);
    background: #f3f3f4;
}
.pp-intro-magazine-visual img {
    display: block;
    width: 100%;
    height: auto;
}
/* Sticky on desktop — image stays in view while long left text scrolls past */
@media (min-width: 992px) {
    .pp-intro-col-visual {
        position: sticky;
        top: 110px;
    }
}
@media (max-width: 991.98px) {
    .pp-intro-magazine.pp-intro-magazine--with-visual { grid-template-columns: 1fr; }
    .pp-intro-magazine-visual { margin: 40px auto 0; max-width: 480px; }
}
@media (max-width: 575.98px) {
    .pp-intro-magazine-visual { max-width: 360px; border-radius: 24px; }
}

.pp-intro-title {
    margin: 0 0 32px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(44px, 6.4vw, 104px);
    line-height: .98;
    letter-spacing: -.05em;
    color: #0a0a0a;
}

.pp-intro-title .accent { color: var(--brand, #b10f1a); }

.pp-intro-deck {
    max-width: 820px;
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.32;
    letter-spacing: -.022em;
    color: #0a0a0a;
    padding-left: 24px;
    border-left: 3px solid var(--brand, #b10f1a);
}


/* ---- Magazine 2-column body ---- */
.pp-intro-magazine {
    max-width: 1180px;
    margin: 0 auto 80px;
    padding: 56px 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}

.pp-intro-col p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #444;
    letter-spacing: -.005em;
}

.pp-intro-col p:last-child { margin-bottom: 0; }

/* Pull-quote-style first paragraph in the second column */
.pp-intro-pull {
    position: relative;
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: clamp(19px, 1.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.014em !important;
    padding-left: 32px;
}

.pp-intro-pull::before {
    content: "“";
    position: absolute;
    left: -4px;
    top: -10px;
    font-family: "Manrope", "Inter", serif;
    font-size: 60px;
    line-height: 1;
    color: var(--brand, #b10f1a);
    opacity: .85;
    pointer-events: none;
}


/* ---- Capabilities: 4 large floating cards ---- */
.pp-intro-capabilities {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.pp-intro-cap-head {
    margin: 0 0 36px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.3;
    letter-spacing: -.022em;
    color: #0a0a0a;
}

.pp-intro-cap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 36px;
}

.pp-intro-cap-card {
    position: relative;
    padding: 36px 26px 30px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.pp-intro-cap-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.pp-intro-cap-num {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 1;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
}

.pp-intro-cap-card i {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.pp-intro-cap-card:hover i {
    transform: scale(1.06);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of its own hue
   family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.pp-intro-cap-card:nth-child(1) {
    background: #ffe8dc;
}
.pp-intro-cap-card:nth-child(1):hover {
    background: #fdd6c0;
}
.pp-intro-cap-card:nth-child(1) i {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.pp-intro-cap-card:nth-child(2) {
    background: #ece5fb;
}
.pp-intro-cap-card:nth-child(2):hover {
    background: #dccff5;
}
.pp-intro-cap-card:nth-child(2) i {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.pp-intro-cap-card:nth-child(3) {
    background: #e3f0d6;
}
.pp-intro-cap-card:nth-child(3):hover {
    background: #cee5b5;
}
.pp-intro-cap-card:nth-child(3) i {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.pp-intro-cap-card:nth-child(4) {
    background: #dceffa;
}
.pp-intro-cap-card:nth-child(4):hover {
    background: #b8dcf2;
}
.pp-intro-cap-card:nth-child(4) i {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.pp-intro-cap-card h4 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #0a0a0a;
}

.pp-intro-cap-foot {
    margin: 0 auto;
    max-width: 720px;
    font: 500 17px/1.5 "Inter", sans-serif;
    color: #444;
    letter-spacing: -.005em;
}


/* =========================================================
   PP-3 · PRIVACY-PRESERVING AI & ANALYTICS — split + visual
   Same proven SA-split/HP-EnHeal layout, content left,
   creative visual right with brand-red "Xafe" core node
   surrounded by 4 PET tiles (differential privacy,
   anonymization, obfuscation, confidential computing).
   ========================================================= */
.pp-split {
    position: relative;
    background: #fff;
    overflow: clip;
}

.pp-split::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.pp-split .container-xl { position: relative; }

.pp-split-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.pp-split-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #0a0a0a;
}

.pp-split-title .accent { color: var(--brand, #b10f1a); }

.pp-split-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
    padding-left: 18px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.pp-split-body {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    max-width: 580px;
}

.pp-split-body:last-child { margin-bottom: 0; }


/* ---- Visual canvas (4 PET nodes around Xafe core) ---- */
.pp-split-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 560px;
    margin: 0 0 0 auto;
    padding: 36px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transition: transform .15s linear;
}

/* ---- Image variant (replaces .pp-split-visual diagram) ---- */
.pp-split-image {
    max-width: 560px;
    margin: 0 0 0 auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .07);
    background: #f3f3f4;
}
.pp-split-image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Sticky on desktop — image stays in view while long left text scrolls past */
@media (min-width: 992px) {
    .pp-split-image {
        position: sticky;
        top: 110px;
    }
}
@media (max-width: 991.98px) {
    .pp-split-image { margin: 40px auto 0; max-width: 480px; }
}
@media (max-width: 575.98px) {
    .pp-split-image { max-width: 360px; border-radius: 24px; }
}

.pp-split-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    z-index: 0;
}

.pp-split-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    z-index: 0;
    pointer-events: none;
}

.pp-split-orb-a {
    width: 220px;
    height: 220px;
    top: -40px;
    right: -30px;
    background: rgba(177, 15, 26, .25);
    opacity: .55;
}

.pp-split-orb-b {
    width: 200px;
    height: 200px;
    bottom: -40px;
    left: -30px;
    background: rgba(177, 15, 26, .12);
    opacity: .5;
}

.pp-split-rays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pp-split-rays line {
    stroke: rgba(177, 15, 26, .35);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
    fill: none;
}

.pp-split-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 178px;
    height: 178px;
    border-radius: 50%;
    background: linear-gradient(160deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 24px 60px -20px rgba(177, 15, 26, .55);
}

.pp-split-core i { font-size: 36px; margin-bottom: 8px; opacity: .92; }
.pp-split-core strong {
    font: 700 18px/1.2 "Inter", sans-serif;
    margin-bottom: 4px;
}
.pp-split-core em {
    font: 600 10px/1.25 "Inter", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-style: normal;
    padding: 0 14px;
}

.pp-split-node {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .25);
    min-width: 170px;
    transition: transform .4s ease, border-color .35s ease, box-shadow .35s ease;
}

.pp-split-node:hover {
    transform: scale(1.04);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 20px 40px -16px rgba(177, 15, 26, .35);
}

.pp-split-node i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pp-split-node span {
    font: 600 13px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

.pp-split-node-1 { top: 6%;     left: 0%;   }
.pp-split-node-2 { top: 6%;     right: 0%;  }
.pp-split-node-3 { bottom: 14%; left: 0%;   }
.pp-split-node-4 { bottom: 14%; right: 0%;  }


/* =========================================================
   PP-4 · FEDERATED LEARNING — VISUAL FLOW + COMPARISON
   Asymmetric hero block, 3 horizontal flow steps with brand-
   red arrow connectors, "or"-style architecture comparison.
   Apple Mac Studio storytelling feel.
   ========================================================= */
.pp-fed {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.pp-fed::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(177, 15, 26, .04), transparent 70%),
        radial-gradient(700px 420px at 100% 100%, rgba(177, 15, 26, .03), transparent 70%);
    pointer-events: none;
}

.pp-fed .container-xl { position: relative; }


/* ---- Centered Apple-style hero ---- */
.pp-fed-hero {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 56px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.pp-fed-hero-mark {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 22px 44px -14px rgba(177, 15, 26, .55);
}

.pp-fed-hero-eyebrow {
    margin-bottom: 22px !important;
}

.pp-fed-title {
    margin: 0 0 26px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 5.6vw, 84px);
    line-height: 1;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.pp-fed-title .accent { color: var(--brand, #b10f1a); }

.pp-fed-deck {
    margin: 0 auto;
    max-width: 760px;
    font: 500 19px/1.5 "Inter", sans-serif;
    color: #444;
    letter-spacing: -.01em;
}


/* ---- Editorial intro and bridge ---- */
.pp-fed-intro,
.pp-fed-bridge,
.pp-fed-close {
    max-width: 880px;
    margin: 0 auto 64px;
}

.pp-fed-intro p,
.pp-fed-bridge p,
.pp-fed-close p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #444;
}

.pp-fed-intro p:last-child,
.pp-fed-bridge p:last-child,
.pp-fed-close p:last-child { margin-bottom: 0; }

.pp-fed-intro p strong {
    color: var(--brand, #b10f1a);
    font-weight: 600;
}

.pp-fed-bridge p {
    text-align: center;
    font-size: 17.5px;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.012em;
    line-height: 1.6;
}

.pp-fed-final {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: 17.5px !important;
    padding-left: 22px;
    border-left: 3px solid var(--brand, #b10f1a);
}


/* ---- Flow head (used for both flow + comparison) — only the
   source lead-in line, no invented pill tag. */
.pp-fed-flow-head {
    text-align: center;
    margin: 0 auto 36px;
    max-width: 760px;
}

.pp-fed-flow-head p {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.45;
    color: #0a0a0a;
    letter-spacing: -.012em;
}


/* ---- 3-step horizontal flow with arrow connectors ---- */
.pp-fed-flow-wrap {
    max-width: 1240px;
    margin: 0 auto 64px;
}

.pp-fed-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}

.pp-fed-flow-step {
    position: relative;
    padding: 36px 28px 30px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    box-shadow: 0 14px 38px -26px rgba(0, 0, 0, .18);
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.pp-fed-flow-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #b10f1a, #ff8189);
    opacity: .9;
}

/* Primary-color hover: the entire flow-step fills with brand red and
   the icon, heading, body, and number flip to white. */
.pp-fed-flow-step {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.pp-fed-flow-step:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}

.pp-fed-flow-num {
    display: block;
    margin-bottom: 18px;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
    transition: color .35s ease;
}
.pp-fed-flow-step:hover .pp-fed-flow-num {
    color: rgba(255, 255, 255, 0.55);
}

.pp-fed-flow-step > i {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .14), rgba(177, 15, 26, .04));
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
    transition: background .35s ease, color .35s ease;
}

.pp-fed-flow-step:hover > i {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.pp-fed-flow-step h4 {
    margin: 0 0 10px;
    font: 600 19px/1.25 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.018em;
    transition: color .35s ease;
}
.pp-fed-flow-step:hover h4 {
    color: #ffffff;
}

.pp-fed-flow-step p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #555;
    transition: color .35s ease;
}
.pp-fed-flow-step:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* Brand-red arrow connectors between the 3 flow steps —
   single arrow icon only, no extra horizontal lines. */
.pp-fed-flow-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    color: var(--brand, #b10f1a);
    font-size: 22px;
}


/* ---- VS architecture comparison ---- */
.pp-fed-vs-wrap {
    max-width: 1140px;
    margin: 0 auto 64px;
}

.pp-fed-vs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}

.pp-fed-vs-card {
    padding: 44px 38px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

/* Primary-color hover: the entire vs-card fills with brand red and
   the icon, heading, and body flip to white. */
.pp-fed-vs-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 30px 64px -28px rgba(177, 15, 26, .35);
}

.pp-fed-vs-card > i {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .14), rgba(177, 15, 26, .04));
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
    transition: background .35s ease, color .35s ease;
}

.pp-fed-vs-card:hover > i {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.pp-fed-vs-card h4 {
    margin: 0 0 14px;
    font: 600 22px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.02em;
    transition: color .35s ease;
}
.pp-fed-vs-card:hover h4 {
    color: #ffffff;
}

.pp-fed-vs-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: #555;
    transition: color .35s ease;
}
.pp-fed-vs-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* "or" pill divider between the two architecture cards */
.pp-fed-vs-divider {
    align-self: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 13px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow:
        0 0 0 6px rgba(177, 15, 26, .08),
        0 0 0 12px rgba(177, 15, 26, .04),
        0 14px 28px -10px rgba(177, 15, 26, .55);
    margin: 0 -12px;
    z-index: 2;
    position: relative;
}


/* =========================================================
   PP-5 · COMPLIANCE — centred head + 5-card capability grid
   ========================================================= */
.pp-compliance {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    overflow: hidden;
}

.pp-compliance::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(900px 500px at 50% -10%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.pp-compliance .container-xl { position: relative; }

.pp-compliance-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}

.pp-compliance-head .section-eyebrow { margin-bottom: 14px; }

.pp-compliance-title {
    margin: 0 0 26px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #0a0a0a;
}

.pp-compliance-title .accent { color: var(--brand, #b10f1a); }

.pp-compliance-eyebrow {
    max-width: 760px;
    margin: 0 auto;
    font: 500 17px/1.55 "Inter", sans-serif;
    color: #444;
    letter-spacing: -.005em;
}

/* Regulatory framework badges — 4 chips with shield icons */
.pp-compliance-frameworks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 880px;
    margin: 0 auto 56px;
}

.pp-compliance-fwk {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #fff;
    border: 1px solid rgba(177, 15, 26, .2);
    border-radius: 14px;
    box-shadow: 0 12px 28px -18px rgba(177, 15, 26, .25);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.pp-compliance-fwk:hover {
    transform: translateY(-3px);
    border-color: rgba(177, 15, 26, .55);
    background: linear-gradient(135deg, #fff 0%, rgba(177, 15, 26, .04) 100%);
    box-shadow: 0 18px 40px -16px rgba(177, 15, 26, .45);
}

.pp-compliance-fwk i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(177, 15, 26, .1);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pp-compliance-fwk strong {
    font: 700 16px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

.pp-compliance-fwk em {
    font-style: normal;
    font: 600 11px/1 "Inter", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .4);
    margin-left: -4px;
}

/* Refined body — 2-column magazine layout for variety */
.pp-compliance-body {
    max-width: 1080px;
    margin: 0 auto 48px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: start;
}

.pp-compliance-body > p {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
}

.pp-compliance-body > p:nth-child(2),
.pp-compliance-body > p:nth-child(3),
.pp-compliance-body > p:nth-child(4) {
    grid-column: 2;
}

/* Lead paragraph in left column — fills the column */
.pp-compliance-lead-p {
    grid-column: 1;
    grid-row: 1 / span 4;
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: clamp(18px, 1.55vw, 22px) !important;
    line-height: 1.55 !important;
    letter-spacing: -.01em !important;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .04), rgba(177, 15, 26, .01));
    border: 1px solid rgba(177, 15, 26, .14);
    border-radius: 18px;
    margin: 0 !important;
}

/* Pull-quote-style "Xafe operationalizes" line */
.pp-compliance-pull {
    color: var(--brand, #b10f1a) !important;
    font-weight: 600 !important;
    font-size: clamp(17px, 1.4vw, 20px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.012em !important;
    padding-left: 18px;
    border-left: 3px solid var(--brand, #b10f1a);
    margin-bottom: 22px !important;
}

.pp-compliance-mini-head {
    grid-column: 1 / -1;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    color: #0a0a0a !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    text-align: center;
}

.pp-compliance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.pp-compliance-card {
    padding: 28px 22px 24px;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 180px;
}

.pp-compliance-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.pp-compliance-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Five distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of its own hue
   family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.pp-compliance-card:nth-child(1) {
    background: #ffe8dc;
}
.pp-compliance-card:nth-child(1):hover {
    background: #fdd6c0;
}
.pp-compliance-card:nth-child(1) .pp-compliance-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.pp-compliance-card:nth-child(2) {
    background: #ece5fb;
}
.pp-compliance-card:nth-child(2):hover {
    background: #dccff5;
}
.pp-compliance-card:nth-child(2) .pp-compliance-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.pp-compliance-card:nth-child(3) {
    background: #e3f0d6;
}
.pp-compliance-card:nth-child(3):hover {
    background: #cee5b5;
}
.pp-compliance-card:nth-child(3) .pp-compliance-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.pp-compliance-card:nth-child(4) {
    background: #dceffa;
}
.pp-compliance-card:nth-child(4):hover {
    background: #b8dcf2;
}
.pp-compliance-card:nth-child(4) .pp-compliance-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose */
.pp-compliance-card:nth-child(5) {
    background: #fde0ec;
}
.pp-compliance-card:nth-child(5):hover {
    background: #fbcad8;
}
.pp-compliance-card:nth-child(5) .pp-compliance-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

.pp-compliance-card h4 {
    margin: 0;
    font: 600 14.5px/1.4 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

/* =========================================================
   PP-5 · CLOSING FINALE — cinematic statement with highlighted
   outcome phrases ("AI", "analytics", "innovation") and three
   outcome pills below. Apple-style confident close.
   ========================================================= */
.pp-compliance-finale {
    position: relative;
    max-width: 1040px;
    margin: 64px auto 0;
    padding: 72px 56px 56px;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    border: 1px solid rgba(177, 15, 26, .14);
    border-radius: 32px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 30px 80px -50px rgba(177, 15, 26, .35);
}

.pp-compliance-finale::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(640px 380px at 95% -10%, rgba(177, 15, 26, .07), transparent 70%),
        radial-gradient(420px 260px at 5% 110%, rgba(177, 15, 26, .04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Big brand-red opening quote mark */
.pp-compliance-finale-mark {
    position: relative;
    z-index: 1;
    display: block;
    font-family: "Manrope", "Inter", serif;
    font-size: clamp(96px, 12vw, 160px);
    font-weight: 800;
    line-height: .6;
    color: var(--brand, #b10f1a);
    letter-spacing: -.05em;
    text-align: center;
    margin-bottom: 8px;
    user-select: none;
    background: linear-gradient(180deg, #b10f1a 0%, #ff8189 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .85;
}

/* The closing statement — large confident type */
.pp-compliance-finale-statement {
    position: relative;
    z-index: 1;
    margin: 0 auto 40px;
    max-width: 900px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.35;
    letter-spacing: -.02em;
    color: #0a0a0a;
}

.pp-compliance-finale-statement em {
    font-style: italic;
    color: var(--brand, #b10f1a);
    font-weight: 600;
}

.pp-compliance-finale-statement .accent {
    color: var(--brand, #b10f1a);
    font-weight: 700;
    background: linear-gradient(120deg, rgba(177, 15, 26, .12) 0%, rgba(177, 15, 26, .12) 100%);
    background-repeat: no-repeat;
    background-size: 100% 38%;
    background-position: 0 88%;
    padding: 0 4px;
    border-radius: 4px;
}

/* Three outcome pills */
.pp-compliance-finale-tri {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.pp-compliance-finale-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: #fff;
    border: 1px solid rgba(177, 15, 26, .2);
    border-radius: 999px;
    box-shadow: 0 12px 28px -16px rgba(177, 15, 26, .35);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.pp-compliance-finale-pill:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #fff 0%, rgba(177, 15, 26, .04) 100%);
    border-color: rgba(177, 15, 26, .55);
    box-shadow: 0 18px 36px -14px rgba(177, 15, 26, .55);
}

.pp-compliance-finale-pill i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b10f1a, #ff8189);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pp-compliance-finale-pill strong {
    font: 700 15px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}


/* =========================================================
   PP · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .pp-compliance-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .pp-page .pp-intro,
    .pp-page .pp-split,
    .pp-page .pp-fed,
    .pp-page .pp-compliance { padding: 80px 0; }

    .pp-intro-title { font-size: clamp(38px, 7.4vw, 64px); }
    .pp-intro-deck { font-size: 20px; }
    .pp-intro-magazine { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
    .pp-intro-cap-grid { grid-template-columns: repeat(2, 1fr); }

    .pp-split-visual { margin: 40px auto 0; max-width: 480px; }
    .pp-split-title { font-size: clamp(32px, 6vw, 44px); }
    .pp-split-lead { font-size: 18px; }

    .pp-compliance-grid { grid-template-columns: repeat(2, 1fr); }
    .pp-compliance-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pp-compliance-body > p:nth-child(2),
    .pp-compliance-body > p:nth-child(3),
    .pp-compliance-body > p:nth-child(4) { grid-column: 1; }
    .pp-compliance-lead-p {
        grid-column: 1;
        grid-row: auto;
    }
    .pp-compliance-frameworks { gap: 10px; margin-bottom: 40px; }
    .pp-compliance-fwk { padding: 12px 18px; }
    .pp-compliance-fwk strong { font-size: 15px; }

    .pp-compliance-finale { padding: 56px 32px 44px; border-radius: 24px; }
    .pp-compliance-finale-mark { font-size: 100px; }
    .pp-compliance-finale-statement { font-size: clamp(20px, 4vw, 26px); }

    /* Federated learning — tablet adjustments */
    .pp-fed-hero { padding-bottom: 36px; margin-bottom: 40px; }
    .pp-fed-title { font-size: clamp(34px, 7vw, 56px); }
    .pp-fed-deck { font-size: 17px; }
    .pp-fed-hero-mark { width: 64px; height: 64px; font-size: 24px; }
    .pp-fed-flow {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .pp-fed-flow-arrow {
        width: 100%;
        height: 32px;
        transform: rotate(90deg);
    }
    .pp-fed-flow-arrow::before,
    .pp-fed-flow-arrow::after { display: none; }
    .pp-fed-vs { grid-template-columns: 1fr; gap: 20px; }
    .pp-fed-vs-divider { margin: -12px auto; }
}

@media (max-width: 575px) {
    .pp-page .pp-intro,
    .pp-page .pp-split,
    .pp-page .pp-fed,
    .pp-page .pp-compliance { padding: 60px 0; }

    .pp-intro-cap-grid { grid-template-columns: 1fr; }
    .pp-intro-cap-card { padding: 28px 22px 24px; border-radius: 18px; }
    .pp-intro-cap-card h4 { font-size: 16px; }
    .pp-intro-cap-head { font-size: 19px; }
    .pp-intro-pull::before { font-size: 48px; top: -8px; }

    .pp-split-visual { padding: 24px; border-radius: 24px; max-width: 360px; }
    .pp-split-core { width: 140px; height: 140px; }
    .pp-split-core i { font-size: 28px; }
    .pp-split-core strong { font-size: 16px; }
    .pp-split-node { min-width: 130px; padding: 10px 12px; }
    .pp-split-node span { font-size: 11.5px; }
    .pp-split-node i { width: 26px; height: 26px; font-size: 12px; }

    .pp-compliance-grid { grid-template-columns: 1fr; }
    .pp-compliance-card { padding: 24px 20px; min-height: 140px; }
    .pp-compliance-fwk { padding: 11px 16px; gap: 10px; }
    .pp-compliance-fwk strong { font-size: 14px; }
    .pp-compliance-fwk i { width: 28px; height: 28px; font-size: 12px; }
    .pp-compliance-lead-p { padding: 20px 22px; }

    .pp-compliance-finale { padding: 44px 22px 36px; border-radius: 20px; }
    .pp-compliance-finale-mark { font-size: 80px; margin-bottom: 0; }
    .pp-compliance-finale-pill { padding: 11px 18px; }
    .pp-compliance-finale-pill strong { font-size: 13.5px; }

    .pp-fed-flow-step { padding: 28px 22px 24px; }
    .pp-fed-flow-step h4 { font-size: 17px; }
    .pp-fed-vs-card { padding: 32px 24px 28px; border-radius: 20px; }
    .pp-fed-vs-card h4 { font-size: 19px; }
    .pp-fed-hero-mark { width: 52px; height: 52px; font-size: 20px; }
}


/* ============================================================
   ▲  END · PRIVACY PLATFORM PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  TRANSPORTATION PLATFORM PAGE  ▼                     |
   |                                                          |
   |   All styles below are scoped under .tp-page so other    |
   |   pages remain unaffected.                               |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .sa-mirror, .pe-cta    |
   |   for the bulk of the page. Page-specific blocks:        |
   |     · .tp-stakeholders / .tp-stake-pill — 4 stakeholder  |
   |       chips inside the intro narrative                   |
   |     · .tp-entran / .tp-entran-visual — Entran            |
   |       orchestration showcase with 4 system-component     |
   |       nodes around a centred brand-red "Entran" core     |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   TP · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.tp-page .pe-narrative,
.tp-page .sa-mirror,
.tp-page .tp-intro,
.tp-page .tp-mm,
.tp-page .tp-analytics,
.tp-page .tp-entran,
.tp-page .tp-its,
.tp-page .tp-tracking {
    padding: 100px 0;
}
.tp-page .pe-cta { padding: 100px 0; }

.tp-page .pe-narrative-alt {
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   TP-2 · INTRO — APPLE EDITORIAL MAGAZINE LAYOUT
   Massive title hero, 2-column magazine body, 4 floating
   premium stakeholder cards.
   ========================================================= */
.tp-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.tp-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 540px at 92% -10%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.tp-intro .container-xl { position: relative; }

.tp-intro-hero {
    max-width: 1100px;
    margin: 0 auto 72px;
}

.tp-intro-hero .section-eyebrow { margin-bottom: 22px; }

.tp-intro-title {
    margin: 0 0 32px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(44px, 6.4vw, 104px);
    line-height: .98;
    letter-spacing: -.05em;
    color: #0a0a0a;
}

.tp-intro-title .accent { color: var(--brand, #b10f1a); }

.tp-intro-deck {
    max-width: 820px;
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.32;
    letter-spacing: -.022em;
    color: #0a0a0a;
    padding-left: 24px;
    border-left: 3px solid var(--brand, #b10f1a);
}

/* Magazine 2-column body */
.tp-intro-magazine {
    max-width: 1180px;
    margin: 0 auto 80px;
    padding: 56px 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.tp-intro-col p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.75;
    color: #444;
    letter-spacing: -.005em;
}

.tp-intro-pull {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: clamp(19px, 1.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.014em !important;
    margin-top: 28px !important;
}

.tp-intro-pull::before {
    content: "“";
    font-family: "Manrope", "Inter", serif;
    font-size: 60px;
    line-height: 1;
    color: var(--brand, #b10f1a);
    float: left;
    margin: -2px 10px -8px 0;
    opacity: .85;
}

/* 4 stakeholder cards — Apple floating capability cards */
.tp-intro-stakeholders {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.tp-intro-stakeholders-head {
    margin: 0 0 36px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.3;
    letter-spacing: -.022em;
    color: #0a0a0a;
}

.tp-intro-stakeholders-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.tp-intro-stake-card {
    position: relative;
    padding: 36px 26px 30px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-intro-stake-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.tp-intro-stake-num {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 1;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
}

.tp-intro-stake-card i {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-intro-stake-card:hover i {
    transform: scale(1.06);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.tp-intro-stake-card:nth-child(1) {
    background: #ffe8dc;
}
.tp-intro-stake-card:nth-child(1):hover {
    background: #fdd6c0;
}
.tp-intro-stake-card:nth-child(1) i {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.tp-intro-stake-card:nth-child(2) {
    background: #ece5fb;
}
.tp-intro-stake-card:nth-child(2):hover {
    background: #dccff5;
}
.tp-intro-stake-card:nth-child(2) i {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.tp-intro-stake-card:nth-child(3) {
    background: #e3f0d6;
}
.tp-intro-stake-card:nth-child(3):hover {
    background: #cee5b5;
}
.tp-intro-stake-card:nth-child(3) i {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.tp-intro-stake-card:nth-child(4) {
    background: #dceffa;
}
.tp-intro-stake-card:nth-child(4):hover {
    background: #b8dcf2;
}
.tp-intro-stake-card:nth-child(4) i {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.tp-intro-stake-card h4 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -.012em;
    color: #0a0a0a;
}


/* =========================================================
   TP-7 · ANALYTICS-DRIVEN SMART TRANSPORT — CINEMATIC FRAMED
   Long source paragraph wrapped in a premium framed card
   with brand-red mark, eyebrow, deck and editorial body.
   ========================================================= */
.tp-analytics {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.tp-analytics::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(177, 15, 26, .04), transparent 70%);
    pointer-events: none;
}

.tp-analytics .container-xl { position: relative; }

.tp-analytics-card {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 72px 64px 64px;
    background: #fff;
    border: 1px solid rgba(177, 15, 26, .14);
    border-radius: 32px;
    box-shadow: 0 30px 80px -50px rgba(177, 15, 26, .35);
    overflow: hidden;
    isolation: isolate;
}

.tp-analytics-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(640px 380px at 100% 0%, rgba(177, 15, 26, .07), transparent 70%),
        radial-gradient(420px 260px at 0% 100%, rgba(177, 15, 26, .04), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.tp-analytics-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 auto 44px;
    max-width: 880px;
}

.tp-analytics-mark {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 22px 44px -14px rgba(177, 15, 26, .55);
}

.tp-analytics-eyebrow {
    margin-bottom: 18px !important;
}

.tp-analytics-deck {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.32;
    letter-spacing: -.022em;
    color: #0a0a0a;
}

.tp-analytics-body {
    position: relative;
    z-index: 1;
    max-width: 940px;
    margin: 0 auto;
    column-count: 2;
    column-gap: 48px;
}

.tp-analytics-body p {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    letter-spacing: -.005em;
}


/* =========================================================
   TP-8 · ENTRAN — split with creative visual (4 system
   components around brand-red core: listener servers,
   message queues, database persistence layers, application
   servers — all extracted directly from the source sentence)
   ========================================================= */
.tp-entran {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.tp-entran::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.tp-entran .container-xl { position: relative; }

.tp-entran-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.tp-entran-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 6.4vw, 96px);
    line-height: 1;
    letter-spacing: -.045em;
    color: #0a0a0a;
}

.tp-entran-title .accent { color: var(--brand, #b10f1a); }

.tp-entran-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
    padding-left: 18px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.tp-entran-body {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 580px;
}

.tp-entran-body:last-child { margin-bottom: 0; }


/* ---- Visual canvas ---- */
.tp-entran-visual {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 580px;
    margin: 0 0 0 auto;
    padding: 36px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transition: transform .15s linear;
}

.tp-entran-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
    z-index: 0;
}

.tp-entran-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    z-index: 0;
    pointer-events: none;
}

.tp-entran-orb-a {
    width: 220px;
    height: 220px;
    top: -40px;
    right: -30px;
    background: rgba(177, 15, 26, .25);
    opacity: .5;
}

.tp-entran-orb-b {
    width: 200px;
    height: 200px;
    bottom: -40px;
    left: -30px;
    background: rgba(177, 15, 26, .12);
    opacity: .55;
}

.tp-entran-rays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tp-entran-rays line {
    stroke: rgba(177, 15, 26, .35);
    stroke-width: 1.2;
    stroke-dasharray: 4 6;
    fill: none;
}

.tp-entran-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 178px;
    height: 178px;
    border-radius: 50%;
    background: linear-gradient(160deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 24px 60px -20px rgba(177, 15, 26, .55);
}

.tp-entran-core i { font-size: 36px; margin-bottom: 8px; opacity: .92; }
.tp-entran-core strong {
    font: 700 18px/1.2 "Inter", sans-serif;
    margin-bottom: 4px;
}
.tp-entran-core em {
    font: 600 10px/1.25 "Inter", sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    font-style: normal;
    padding: 0 14px;
}

.tp-entran-node {
    position: absolute;
    z-index: 2;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .25);
    min-width: 180px;
    transition: transform .4s ease, border-color .35s ease, box-shadow .35s ease;
}

.tp-entran-node:hover {
    transform: scale(1.04);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 20px 40px -16px rgba(177, 15, 26, .35);
}

.tp-entran-node i {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.tp-entran-node span {
    font: 600 12.5px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

.tp-entran-node-1 { top: 6%;     left: 0%;   }
.tp-entran-node-2 { top: 6%;     right: 0%;  }
.tp-entran-node-3 { bottom: 14%; left: 0%;   }
.tp-entran-node-4 { bottom: 14%; right: 0%;  }

/* Centered editorial variant — used when the visual diagram is
   removed and the section needs to read as a single-column
   editorial block (title, lead, two-column body, component row). */
.tp-entran-centered .tp-entran-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.tp-entran-centered .tp-entran-tag { display: inline-flex; }
.tp-entran-centered .tp-entran-title { text-align: center; }
.tp-entran-centered .tp-entran-lead {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}
.tp-entran-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 56px;
    max-width: 1040px;
    margin: 40px auto 56px;
    text-align: left;
    padding-top: 36px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.tp-entran-body-grid .tp-entran-body { margin: 0; }
.tp-entran-pillars {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1040px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.tp-entran-pillars li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 20px 28px;
    background: #ffffff;
    border-radius: 20px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.tp-entran-pillars li:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.tp-entran-pillars li i {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: 14px;
    transition: background .3s ease, color .3s ease;
}
.tp-entran-pillars li span {
    font: 600 15px/1.35 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.008em;
    text-align: center;
}

/* Per-card pastel palettes — distinct color per pillar */
.tp-entran-pillars li:nth-child(1) {                /* Listener servers — sky blue */
    background: #dbeafe;
}
.tp-entran-pillars li:nth-child(1):hover { background: #bfdbfe; }
.tp-entran-pillars li:nth-child(1) i {
    background: rgba(37, 99, 235, 0.18);
    color: #2563eb;
}

.tp-entran-pillars li:nth-child(2) {                /* Message queues — peach */
    background: #ffe8dc;
}
.tp-entran-pillars li:nth-child(2):hover { background: #fdd6c0; }
.tp-entran-pillars li:nth-child(2) i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}

.tp-entran-pillars li:nth-child(3) {                /* Database persistence — lavender */
    background: #ece5fb;
}
.tp-entran-pillars li:nth-child(3):hover { background: #dccff5; }
.tp-entran-pillars li:nth-child(3) i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}

.tp-entran-pillars li:nth-child(4) {                /* Application servers — mint */
    background: #d1fae5;
}
.tp-entran-pillars li:nth-child(4):hover { background: #a7f3d0; }
.tp-entran-pillars li:nth-child(4) i {
    background: rgba(4, 120, 87, 0.18);
    color: #047857;
}
@media (max-width: 900px) {
    .tp-entran-body-grid { grid-template-columns: 1fr; gap: 24px; }
    .tp-entran-pillars { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   TP-3 · MULTI-MODAL TRANSPORT — APPLE ARCHITECTURE FLOW
   Centered hero, 3 transport-mode chips (Buses/Taxis/Trains
   from source), first body paragraph, then a premium 5-step
   data flow visualisation (Ingestion → Validation →
   Enrichment → Message queues → Persistence — all extracted
   verbatim from the source's event-driven architecture
   paragraph), and the closing source paragraph below.
   ========================================================= */
.tp-mm {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.tp-mm::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .04), transparent 70%),
        radial-gradient(700px 420px at 0% 100%, rgba(177, 15, 26, .03), transparent 70%);
    pointer-events: none;
}

.tp-mm .container-xl { position: relative; }

.tp-mm-head {
    text-align: center;
    max-width: 1040px;
    margin: 0 auto 40px;
}

.tp-mm-title {
    margin: 0 0 26px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.tp-mm-title .accent { color: var(--brand, #b10f1a); }

.tp-mm-deck {
    max-width: 820px;
    margin: 0 auto;
    font: 500 18.5px/1.5 "Inter", sans-serif;
    color: #444;
    letter-spacing: -.005em;
}

/* 3 transport mode chips */
.tp-mm-modes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 auto 56px;
}

.tp-mm-modes-label {
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .35);
    margin-right: 4px;
}

.tp-mm-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    font: 600 14px/1 "Inter", sans-serif;
    color: #0a0a0a;
    transition: transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.tp-mm-mode-chip:hover {
    transform: translateY(-3px);
    background: #fff;
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 14px 28px -16px rgba(177, 15, 26, .35);
}

.tp-mm-mode-chip i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(177, 15, 26, .1);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* Body paragraphs in centred reading column */
.tp-mm-body {
    max-width: 880px;
    margin: 0 auto 64px;
}

.tp-mm-body p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.75;
    color: #444;
    letter-spacing: -.005em;
}

.tp-mm-body-close {
    margin-top: 48px;
    margin-bottom: 0;
}

.tp-mm-body-close p {
    color: #0a0a0a;
    font-weight: 500;
    font-size: 17px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .04), rgba(177, 15, 26, .01));
    border-left: 3px solid var(--brand, #b10f1a);
    border-radius: 0 14px 14px 0;
}

/* ---- Architecture flow ---- */
.tp-mm-arch {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 48px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 28px;
    box-shadow: 0 30px 80px -50px rgba(0, 0, 0, .25);
}

.tp-mm-arch-head {
    text-align: center;
    margin-bottom: 36px;
}

.tp-mm-arch-tag {
    display: inline-block;
    padding: 7px 16px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.tp-mm-arch-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 0;
    position: relative;
}

/* Insert arrow after each step except last */
.tp-mm-arch-step {
    position: relative;
    padding: 28px 18px 24px;
    background: #ffffff;
    border: 0;
    border-radius: 16px;
    text-align: center;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-mm-arch-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.tp-mm-arch-num {
    display: block;
    margin-bottom: 12px;
    font: 700 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
}

.tp-mm-arch-step > i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 12px;
    transition: transform .35s ease;
}

/* Five distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each step's icon uses a deeper shade of the step's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Step 01 · Peach */
.tp-mm-arch-step:nth-of-type(1) {
    background: #ffe8dc;
}
.tp-mm-arch-step:nth-of-type(1):hover {
    background: #fdd6c0;
}
.tp-mm-arch-step:nth-of-type(1) > i {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Step 02 · Lavender */
.tp-mm-arch-step:nth-of-type(2) {
    background: #ece5fb;
}
.tp-mm-arch-step:nth-of-type(2):hover {
    background: #dccff5;
}
.tp-mm-arch-step:nth-of-type(2) > i {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Step 03 · Pistachio */
.tp-mm-arch-step:nth-of-type(3) {
    background: #e3f0d6;
}
.tp-mm-arch-step:nth-of-type(3):hover {
    background: #cee5b5;
}
.tp-mm-arch-step:nth-of-type(3) > i {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Step 04 · Sky */
.tp-mm-arch-step:nth-of-type(4) {
    background: #dceffa;
}
.tp-mm-arch-step:nth-of-type(4):hover {
    background: #b8dcf2;
}
.tp-mm-arch-step:nth-of-type(4) > i {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Step 05 · Rose */
.tp-mm-arch-step:nth-of-type(5) {
    background: #fde0ec;
}
.tp-mm-arch-step:nth-of-type(5):hover {
    background: #fbcad8;
}
.tp-mm-arch-step:nth-of-type(5) > i {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

.tp-mm-arch-step h4 {
    margin: 0 0 6px;
    font: 600 15px/1.25 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}

.tp-mm-arch-step p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6a6a6a;
}

.tp-mm-arch-arrow {
    align-self: center;
    color: var(--brand, #b10f1a);
    font-size: 14px;
    padding: 0 6px;
    flex-shrink: 0;
}

/* When in CSS grid the arrow needs explicit positioning. Use a
   thin grid-template-columns pattern: cards take 1fr, arrows are
   thin slits. Implement via flex instead for simpler responsive. */
.tp-mm-arch-flow {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
}

.tp-mm-arch-step {
    flex: 1 1 0;
    min-width: 0;
}


/* =========================================================
   TP-9 · INTELLIGENT TRANSPORT SYSTEM — CENTERED + 3 PILLARS
   Apple feature page treatment. Centered title + AI deck,
   three capability pillar cards (Real-time monitoring /
   Control systems / Analytics — extracted directly from the
   source AI line), then the body paragraphs in an editorial
   centred reading column.
   ========================================================= */
.tp-its {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.tp-its::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.tp-its .container-xl { position: relative; }

.tp-its-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 56px;
}

.tp-its-title {
    margin: 0 0 26px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 80px);
    line-height: 1;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.tp-its-title .accent { color: var(--brand, #b10f1a); }

.tp-its-deck {
    max-width: 800px;
    margin: 0 auto;
    font: 500 19px/1.5 "Inter", sans-serif;
    color: #444;
    letter-spacing: -.005em;
}

/* 3 pillar cards */
.tp-its-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1140px;
    margin: 0 auto 56px;
}

.tp-its-pillar {
    position: relative;
    padding: 40px 32px 36px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-its-pillar:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.tp-its-pillar-num {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 1;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    color: rgba(0, 0, 0, .25);
}

.tp-its-pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 24px;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-its-pillar:hover .tp-its-pillar-icon {
    transform: scale(1.06);
}

/* Three distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each pillar's icon uses a deeper shade of its own
   hue family; on hover the bg deepens to a richer pastel. */

/* Pillar 01 · Peach */
.tp-its-pillar:nth-child(1) {
    background: #ffe8dc;
}
.tp-its-pillar:nth-child(1):hover {
    background: #fdd6c0;
}
.tp-its-pillar:nth-child(1) .tp-its-pillar-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Pillar 02 · Lavender */
.tp-its-pillar:nth-child(2) {
    background: #ece5fb;
}
.tp-its-pillar:nth-child(2):hover {
    background: #dccff5;
}
.tp-its-pillar:nth-child(2) .tp-its-pillar-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Pillar 03 · Pistachio */
.tp-its-pillar:nth-child(3) {
    background: #e3f0d6;
}
.tp-its-pillar:nth-child(3):hover {
    background: #cee5b5;
}
.tp-its-pillar:nth-child(3) .tp-its-pillar-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

.tp-its-pillar h4 {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.018em;
    color: #0a0a0a;
}

/* Editorial body */
.tp-its-body {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.tp-its-body p {
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.75;
    color: #444;
    text-align: left;
}

.tp-its-body p:last-child { margin-bottom: 0; }

/* Final paragraph styled as a confident pull-quote */
.tp-its-final {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: 18.5px !important;
    line-height: 1.55 !important;
    letter-spacing: -.012em !important;
    padding-left: 22px;
    border-left: 3px solid var(--brand, #b10f1a);
    margin-top: 24px;
    text-align: left !important;
}


/* =========================================================
   TP-11 · REAL-TIME TRACKING & PREDICTIVE MAINTENANCE
   Two-theme split — the section's title naturally has 2
   themes joined by "&", so we render them as two side-by-side
   premium cards with a brand-red "&" pill connecting them.
   ========================================================= */
.tp-tracking {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    overflow: hidden;
}

.tp-tracking::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(177, 15, 26, .04), transparent 70%),
        radial-gradient(700px 420px at 100% 100%, rgba(177, 15, 26, .04), transparent 70%);
    pointer-events: none;
}

.tp-tracking .container-xl { position: relative; }

.tp-tracking-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 56px;
}

.tp-tracking-title {
    margin: 0 0 26px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.tp-tracking-title .accent { color: var(--brand, #b10f1a); }

.tp-tracking-deck {
    max-width: 760px;
    margin: 0 auto;
    font: 500 18px/1.5 "Inter", sans-serif;
    color: #444;
    letter-spacing: -.005em;
}

/* 2 cards + ampersand divider */
.tp-tracking-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    max-width: 1140px;
    margin: 0 auto;
}

.tp-tracking-card {
    position: relative;
    padding: 48px 40px 40px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    box-shadow: 0 20px 50px -32px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}

.tp-tracking-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .04), transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}

.tp-tracking-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 36px 70px -28px rgba(177, 15, 26, .35);
}

.tp-tracking-card:hover::before { opacity: 1; }

.tp-tracking-tag {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 1;
    padding: 6px 12px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tp-tracking-icon {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .14), rgba(177, 15, 26, .04));
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 24px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-tracking-card:hover .tp-tracking-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.tp-tracking-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.18;
    letter-spacing: -.02em;
    color: #0a0a0a;
}

.tp-tracking-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

/* Brand-red "&" pill connecting the two themes */
.tp-tracking-amp {
    align-self: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b10f1a 0%, #8a0a14 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    margin: 0 -16px;
    z-index: 2;
    position: relative;
    box-shadow:
        0 0 0 8px rgba(177, 15, 26, .08),
        0 0 0 16px rgba(177, 15, 26, .04),
        0 18px 36px -12px rgba(177, 15, 26, .55);
}


/* =========================================================
   TP · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .tp-page .pe-narrative,
    .tp-page .sa-mirror,
    .tp-page .tp-intro,
    .tp-page .tp-mm,
    .tp-page .tp-analytics,
    .tp-page .tp-entran,
    .tp-page .tp-its,
    .tp-page .tp-tracking { padding: 80px 0; }

    /* Multi-modal Transport — flow becomes vertical */
    .tp-mm-title { font-size: clamp(30px, 6vw, 48px); }
    .tp-mm-arch { padding: 36px 24px; border-radius: 22px; }
    .tp-mm-arch-flow {
        flex-direction: column;
        gap: 12px;
    }
    .tp-mm-arch-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }

    /* Intelligent Transport System — pillars stack on tablet */
    .tp-its-pillars { grid-template-columns: 1fr; gap: 16px; }
    .tp-its-title { font-size: clamp(34px, 7vw, 56px); }
    .tp-its-deck { font-size: 17px; }

    /* Real-Time Tracking & Predictive Maintenance — vertical stack */
    .tp-tracking-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tp-tracking-amp {
        margin: -16px auto;
    }
    .tp-tracking-card { padding: 36px 28px 32px; }
    .tp-tracking-title { font-size: clamp(30px, 6vw, 48px); }

    .tp-intro-title { font-size: clamp(38px, 7.4vw, 64px); }
    .tp-intro-deck { font-size: 20px; }
    .tp-intro-magazine { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; }
    .tp-intro-stakeholders-grid { grid-template-columns: repeat(2, 1fr); }

    .tp-analytics-card { padding: 56px 36px 48px; border-radius: 24px; }
    .tp-analytics-deck { font-size: clamp(20px, 3vw, 26px); }
    .tp-analytics-body { column-count: 1; }

    .tp-entran-visual { margin: 40px auto 0; max-width: 480px; }
    .tp-entran-title { font-size: clamp(40px, 8vw, 64px); }
    .tp-entran-lead { font-size: 18px; }
}

@media (max-width: 575px) {
    .tp-page .pe-narrative,
    .tp-page .sa-mirror,
    .tp-page .tp-intro,
    .tp-page .tp-mm,
    .tp-page .tp-analytics,
    .tp-page .tp-entran,
    .tp-page .tp-its,
    .tp-page .tp-tracking { padding: 60px 0; }

    .tp-its-pillar { padding: 32px 26px 28px; }
    .tp-its-pillar h4 { font-size: 18px; }

    .tp-mm-modes-label { display: none; }
    .tp-mm-mode-chip { padding: 10px 16px; font-size: 13px; }
    .tp-mm-arch { padding: 28px 18px; }
    .tp-mm-arch-step { padding: 22px 16px 20px; }
    .tp-mm-body-close p { padding: 18px 22px; font-size: 16px; }

    .tp-tracking-card { padding: 28px 22px 24px; border-radius: 20px; }
    .tp-tracking-card h3 { font-size: 22px; }
    .tp-tracking-amp { width: 52px; height: 52px; font-size: 22px; }

    .tp-intro-stakeholders-grid { grid-template-columns: 1fr; }
    .tp-intro-stake-card { padding: 28px 22px 24px; border-radius: 18px; }
    .tp-intro-stake-card h4 { font-size: 16px; }
    .tp-intro-stakeholders-head { font-size: 19px; }
    .tp-intro-pull::before { font-size: 48px; margin: -2px 8px -6px 0; }

    .tp-analytics-card { padding: 44px 22px 36px; border-radius: 20px; }
    .tp-analytics-mark { width: 52px; height: 52px; font-size: 22px; }

    /* Mobile: the 4-node star around the central Entran core
       overlapped because the narrow container couldn't fit the nodes
       either side of the core. Switch to a 2-column grid — core
       centred at top spanning both columns, 4 nodes flow beneath as
       2-per-row. */
    .tp-entran-visual {
        padding: 28px 20px;
        border-radius: 24px;
        max-width: 420px;
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }
    .tp-entran-rays { display: none; }
    .tp-entran-core {
        position: static;
        transform: none;
        width: 150px;
        height: 150px;
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: 8px;
    }
    .tp-entran-core i { font-size: 28px; }
    .tp-entran-core strong { font-size: 16px; }
    .tp-entran-node,
    .tp-entran-node-1,
    .tp-entran-node-2,
    .tp-entran-node-3,
    .tp-entran-node-4 {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        min-width: 0;
        width: 100%;
        padding: 10px 12px;
    }
    .tp-entran-node span { font-size: 12px; }
    .tp-entran-node i { width: 26px; height: 26px; font-size: 12px; }
}


/* ============================================================
   ▲  END · TRANSPORTATION PLATFORM PAGE  ▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  LOGISTICS PLATFORM PAGE  ▼                          |
   |                                                          |
   |   All styles below are scoped under .lp-page so other    |
   |   pages remain unaffected.                               |
   |                                                          |
   |   Reuses .pe-hero, .pe-narrative, .sa-mirror, .pe-cta    |
   |   for the bulk of the page. Page-specific blocks:        |
   |     · .lp-intro / .lp-intro-magazine — Apple editorial   |
   |       magazine layout for the intro                      |
   |     · .lp-entrax / .lp-entrax-flow — EnTrax orchestration|
   |       showcase with a 5-stage lifecycle visual           |
   |       (Request intake → Validation → Route opt →         |
   |       Driver assignment → Execution — verbatim source)   |
   |                                                          |
   ============================================================
   ============================================================ */


/* =========================================================
   LP · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.lp-page .pe-narrative,
.lp-page .sa-mirror,
.lp-page .lp-intro,
.lp-page .lp-entrax,
.lp-page .lp-ai {
    padding: 100px 0;
}
.lp-page .pe-cta { padding: 100px 0; }

.lp-page .pe-narrative-alt {
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   LP-3 → LP-7 · 5 LaaS SOLUTIONS — PINNED FILMSTRIP
   Uses the default .pe-pillars-pin scale (matches PD's
   "How we build" section). Only override is the section
   height: 5 chapters × 100vh + buffer, vs the default 420vh
   that's sized for 4 chapters.
   ========================================================= */
.lp-page .pe-pillars-pin { height: 520vh; }


/* =========================================================
   LP-2 · INTRO — APPLE EDITORIAL MAGAZINE LAYOUT
   ========================================================= */
.lp-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.lp-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 540px at 92% -10%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.lp-intro .container-xl { position: relative; }

.lp-intro-hero {
    max-width: 1100px;
    margin: 0 auto 72px;
}

.lp-intro-hero .section-eyebrow { margin-bottom: 22px; }

.lp-intro-title {
    margin: 0 0 32px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(44px, 6.4vw, 104px);
    line-height: .98;
    letter-spacing: -.05em;
    color: #0a0a0a;
}

.lp-intro-title .accent { color: var(--brand, #b10f1a); }

.lp-intro-deck {
    max-width: 820px;
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.32;
    letter-spacing: -.022em;
    color: #0a0a0a;
    padding-left: 24px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.lp-intro-magazine {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 0 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.lp-intro-col p {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #444;
    letter-spacing: -.005em;
}

.lp-intro-col p:last-child { margin-bottom: 0; }

.lp-intro-pull {
    position: relative;
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: clamp(19px, 1.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.014em !important;
    padding-left: 32px;
}

.lp-intro-pull::before {
    content: "“";
    position: absolute;
    left: -4px;
    top: -10px;
    font-family: "Manrope", "Inter", serif;
    font-size: 60px;
    line-height: 1;
    color: var(--brand, #b10f1a);
    opacity: .85;
    pointer-events: none;
}


/* =========================================================
   LP-3 → LP-7 · FIVE LaaS SOLUTIONS — ASYMMETRIC ALTERNATING
   Each row alternates: number+icon side on one side, content
   on the other. Card 01/03/05 have number-left, 02/04 flip
   to number-right. Apple Mac Studio storytelling rhythm.
   ========================================================= */
.lp-laas {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    overflow: hidden;
}

.lp-laas::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .04), transparent 70%),
        radial-gradient(700px 420px at 0% 100%, rgba(177, 15, 26, .03), transparent 70%);
    pointer-events: none;
}

.lp-laas .container-xl { position: relative; }

.lp-laas-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 64px;
}

.lp-laas-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 16px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-laas-section-title {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.lp-laas-section-title .accent { color: var(--brand, #b10f1a); }


/* Each LaaS row — asymmetric grid */
.lp-laas-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 64px;
    align-items: start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    position: relative;
}

.lp-laas-row:last-of-type { border-bottom: 1px solid rgba(0, 0, 0, .08); }

/* Flip even rows: content left, number right */
.lp-laas-row-flip { grid-template-columns: 1fr 320px; }
.lp-laas-row-flip .lp-laas-side { order: 2; text-align: right; }
.lp-laas-row-flip .lp-laas-side-icon { margin-left: auto; margin-right: 0; }

/* Side block — big number + divider + icon + counter */
.lp-laas-side {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.lp-laas-bignum {
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 800;
    font-size: clamp(120px, 14vw, 200px);
    line-height: .85;
    letter-spacing: -.06em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 36px rgba(177, 15, 26, .28);
    user-select: none;
}

.lp-laas-side-divider {
    display: block;
    width: 80px;
    height: 2px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
}

.lp-laas-side-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .14), rgba(177, 15, 26, .04));
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.lp-laas-row:hover .lp-laas-side-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.lp-laas-side-counter {
    font: 700 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .35);
}

/* Content block */
.lp-laas-content {
    max-width: 760px;
}

.lp-laas-row-flip .lp-laas-content {
    margin-left: auto;
}

.lp-laas-row-title {
    margin: 0 0 22px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: #0a0a0a;
}

.lp-laas-row-title .accent { color: var(--brand, #b10f1a); }

.lp-laas-row-deck {
    margin: 0 0 26px;
    padding: 16px 0 16px 22px;
    border-left: 3px solid var(--brand, #b10f1a);
    font: 600 16.5px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: -.005em;
}

.lp-laas-row-body {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.75;
    color: #444;
    letter-spacing: -.005em;
}

.lp-laas-row-body:last-child { margin-bottom: 0; }


/* =========================================================
   LP-9 → LP-11 · THREE AI INTELLIGENCE LAYERS — PILLAR GRID
   Replaces three repetitive title-left/body-right narratives
   with one centred showcase containing 3 premium pillar
   cards. Each pillar: brand-red number + icon, source title,
   AI-line as deck, two source paragraphs.
   ========================================================= */
.lp-ai {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

.lp-ai::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 50% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.lp-ai .container-xl { position: relative; }

.lp-ai-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 56px;
}

.lp-ai-head .lp-laas-tag {
    margin-bottom: 24px;
}

.lp-ai-title {
    margin: 0;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #0a0a0a;
}

.lp-ai-title .accent { color: var(--brand, #b10f1a); }

.lp-ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.lp-ai-pillar {
    position: relative;
    padding: 40px 32px 36px;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.lp-ai-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.lp-ai-pillar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.lp-ai-pillar-num {
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: .9;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
}

.lp-ai-pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

/* Three distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each pillar's icon and number use a deeper shade of its
   own hue family; on hover the bg deepens to a richer pastel. */

/* Pillar 01 · Peach */
.lp-ai-pillar:nth-child(1) {
    background: #ffe8dc;
}
.lp-ai-pillar:nth-child(1):hover {
    background: #fdd6c0;
}
.lp-ai-pillar:nth-child(1) .lp-ai-pillar-num {
    color: #c85f32;
}
.lp-ai-pillar:nth-child(1) .lp-ai-pillar-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Pillar 02 · Lavender */
.lp-ai-pillar:nth-child(2) {
    background: #ece5fb;
}
.lp-ai-pillar:nth-child(2):hover {
    background: #dccff5;
}
.lp-ai-pillar:nth-child(2) .lp-ai-pillar-num {
    color: #6e50c8;
}
.lp-ai-pillar:nth-child(2) .lp-ai-pillar-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Pillar 03 · Pistachio */
.lp-ai-pillar:nth-child(3) {
    background: #e3f0d6;
}
.lp-ai-pillar:nth-child(3):hover {
    background: #cee5b5;
}
.lp-ai-pillar:nth-child(3) .lp-ai-pillar-num {
    color: #5f8c37;
}
.lp-ai-pillar:nth-child(3) .lp-ai-pillar-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

.lp-ai-pillar h3 {
    margin: 0 0 14px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 24px);
    line-height: 1.2;
    letter-spacing: -.018em;
    color: #0a0a0a;
}

.lp-ai-pillar-lead {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font: 600 14px/1.55 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0;
}

.lp-ai-pillar p {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.65;
    color: #555;
}

.lp-ai-pillar p:last-child { margin-bottom: 0; }


/* =========================================================
   LP-8 · ENTRAX — SPLIT WITH 5-STAGE LIFECYCLE FLOW VISUAL
   The 5 stages (Request intake → Validation → Route
   optimization → Driver assignment → Execution) are taken
   verbatim from the source's lifecycle sentence.
   ========================================================= */
.lp-entrax {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.lp-entrax::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(177, 15, 26, .045), transparent 70%);
    pointer-events: none;
}

.lp-entrax .container-xl { position: relative; }

.lp-entrax-tag {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11.5px/1 "Inter", sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.lp-entrax-title {
    margin: 0 0 28px;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 6.4vw, 96px);
    line-height: 1;
    letter-spacing: -.045em;
    color: #0a0a0a;
}

.lp-entrax-title .accent { color: var(--brand, #b10f1a); }

.lp-entrax-lead {
    margin: 0 0 22px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.5;
    color: #0a0a0a;
    font-weight: 500;
    letter-spacing: -.015em;
    padding-left: 18px;
    border-left: 3px solid var(--brand, #b10f1a);
}

.lp-entrax-body {
    margin: 0 0 16px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #444;
    max-width: 580px;
}

.lp-entrax-body:last-child { margin-bottom: 0; }


/* ---- Visual canvas — 5-stage vertical lifecycle flow ---- */
.lp-entrax-visual {
    position: relative;
    max-width: 540px;
    margin: 0 0 0 auto;
    padding: 44px 36px;
    background: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 32px;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    overflow: hidden;
    isolation: isolate;
    transform: scale(calc(.96 + (var(--p, 0) * .04)));
    transition: transform .15s linear;
}

.lp-entrax-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(420px 320px at 100% 0%, rgba(177, 15, 26, .07), transparent 70%),
        radial-gradient(360px 260px at 0% 100%, rgba(177, 15, 26, .04), transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.lp-entrax-flow-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 28px;
}

.lp-entrax-flow-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 999px;
    font: 700 11px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.lp-entrax-flow-head p {
    margin: 0;
    font: 600 16px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.012em;
}

/* 5 stage list — vertical flow with brand-red rail */
.lp-entrax-flow {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-entrax-flow::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 30px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .65) 8%,
        rgba(177, 15, 26, .9) 50%,
        rgba(177, 15, 26, .65) 92%,
        rgba(177, 15, 26, 0) 100%);
    border-radius: 2px;
    z-index: 0;
}

.lp-entrax-flow li {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .18);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    z-index: 1;
}

.lp-entrax-flow li:hover {
    transform: translateX(4px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 18px 36px -16px rgba(177, 15, 26, .35);
}

.lp-entrax-flow-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(177, 15, 26, .12);
}

.lp-entrax-flow li:hover .lp-entrax-flow-num {
    background: var(--brand, #b10f1a);
    color: #fff;
}

.lp-entrax-flow li i {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    /* Hidden — number circle is the visual */
    display: none;
}

.lp-entrax-flow li strong {
    grid-column: 2;
    font: 600 15.5px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

/* Centered editorial variant — used when the lifecycle visual
   is removed and the section reads as a single-column editorial
   block (title, lead, 3-column body, horizontal lifecycle row). */
.lp-entrax-centered .lp-entrax-inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.lp-entrax-centered .lp-entrax-tag { display: inline-flex; }
.lp-entrax-centered .lp-entrax-title { text-align: center; }
.lp-entrax-centered .lp-entrax-lead {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.lp-entrax-body-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 40px;
    max-width: 1180px;
    margin: 44px auto 64px;
    padding-top: 36px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.lp-entrax-body-grid .lp-entrax-body { margin: 0; }

.lp-entrax-lifecycle {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.lp-entrax-lifecycle-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.lp-entrax-lifecycle-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    position: relative;
}
.lp-entrax-lifecycle-steps::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(177, 15, 26, .22) 12%,
        rgba(177, 15, 26, .22) 88%,
        transparent 100%);
    z-index: 0;
}
.lp-entrax-lifecycle-steps li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
}
.lp-entrax-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 14px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 6px #fff, 0 6px 14px rgba(177, 15, 26, .12);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.lp-entrax-lifecycle-steps li:hover .lp-entrax-step-num {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: translateY(-3px);
}
.lp-entrax-lifecycle-steps li i {
    font-size: 18px;
    color: rgba(29, 29, 31, .55);
    transition: color .3s ease;
}
.lp-entrax-lifecycle-steps li:hover i { color: var(--brand, #b10f1a); }
.lp-entrax-lifecycle-steps li strong {
    font: 600 14.5px/1.35 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.008em;
    text-align: center;
}
@media (max-width: 991px) {
    .lp-entrax-body-grid { grid-template-columns: 1fr; gap: 24px; }
    .lp-entrax-lifecycle-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .lp-entrax-lifecycle-steps::before { display: none; }
}


/* =========================================================
   LP · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .lp-page .pe-narrative,
    .lp-page .sa-mirror,
    .lp-page .lp-intro,
    .lp-page .lp-laas,
    .lp-page .lp-entrax,
    .lp-page .lp-ai { padding: 80px 0; }

    .lp-intro-title { font-size: clamp(38px, 7.4vw, 64px); }
    .lp-intro-deck { font-size: 20px; }
    .lp-intro-magazine { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 0; }

    /* LaaS asymmetric rows — collapse to vertical stack on tablet */
    .lp-laas-row,
    .lp-laas-row-flip {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 48px 0;
    }
    .lp-laas-row-flip .lp-laas-side { order: 0; text-align: left; }
    .lp-laas-row-flip .lp-laas-side-icon { margin-left: 0; }
    .lp-laas-row-flip .lp-laas-content { margin-left: 0; }
    .lp-laas-side {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .lp-laas-side-divider { display: none; }
    .lp-laas-bignum { font-size: clamp(72px, 14vw, 100px); }
    .lp-laas-side-icon { width: 52px; height: 52px; font-size: 22px; }
    .lp-laas-side-counter { margin-left: auto; }
    .lp-laas-row-flip .lp-laas-side-counter { margin-left: auto; }
    .lp-laas-row-title { font-size: clamp(24px, 5vw, 36px); }
    .lp-laas-section-title { font-size: clamp(30px, 6vw, 48px); }

    .lp-ai-grid { grid-template-columns: 1fr; gap: 18px; }
    .lp-ai-title { font-size: clamp(30px, 6vw, 48px); }

    .lp-entrax-visual { margin: 40px auto 0; max-width: 480px; }
    .lp-entrax-title { font-size: clamp(40px, 8vw, 64px); }
    .lp-entrax-lead { font-size: 18px; }
}

@media (max-width: 575px) {
    .lp-page .pe-narrative,
    .lp-page .sa-mirror,
    .lp-page .lp-intro,
    .lp-page .lp-laas,
    .lp-page .lp-entrax,
    .lp-page .lp-ai { padding: 60px 0; }

    .lp-laas-row,
    .lp-laas-row-flip { padding: 36px 0; gap: 18px; }
    .lp-laas-bignum { font-size: 64px; }
    .lp-laas-side-icon { width: 44px; height: 44px; font-size: 18px; }
    .lp-laas-row-deck { font-size: 14.5px; padding: 12px 0 12px 16px; }

    .lp-ai-pillar { padding: 32px 24px 28px; border-radius: 18px; }
    .lp-ai-pillar h3 { font-size: 19px; }

    .lp-entrax-visual { padding: 32px 22px; border-radius: 24px; max-width: 360px; }
    .lp-entrax-flow li { padding: 12px 14px; grid-template-columns: 48px 1fr; gap: 12px; }
    .lp-entrax-flow-num { width: 38px; height: 38px; font-size: 11px; }
    .lp-entrax-flow li strong { font-size: 14px; }
    .lp-entrax-flow::before { left: 26px; }

    .lp-intro-pull::before { font-size: 48px; top: -8px; }
}


/* ============================================================
   ▲  END · LOGISTICS PLATFORM PAGE  ▲
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  RECRUITMENT PLATFORM PAGE  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: recruitment-platform.html
   Body class: .rp-page
   All styles below are scoped under .rp-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   RP · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.rp-page .rp-intro,
.rp-page .rp-enjoin,
.rp-page .rp-ai,
.rp-page .rp-reco,
.rp-page .rp-caps {
    padding: 100px 0;
}
.rp-page .pe-cta { padding: 100px 0; }


/* =========================================================
   RP-2 · INTRO — APPLE EDITORIAL MAGAZINE LAYOUT
   ========================================================= */
.rp-intro {
    position: relative;
    background: #fff;
    overflow: clip;
}

/* ---- Magazine body with right-side visual ---- */
.rp-intro-magazine.rp-intro-magazine--with-visual {
    grid-template-columns: 1.25fr 1fr;
    align-items: start;
}
.rp-intro-magazine-visual {
    max-width: 560px;
    margin: 0 0 0 auto;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25);
    border: 1px solid rgba(0, 0, 0, .07);
    background: #f3f3f4;
}
.rp-intro-magazine-visual img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 992px) {
    .rp-intro-col-visual {
        position: sticky;
        top: 110px;
    }
}
@media (max-width: 991.98px) {
    .rp-intro-magazine.rp-intro-magazine--with-visual { grid-template-columns: 1fr; }
    .rp-intro-magazine-visual { margin: 40px auto 0; max-width: 480px; }
}
@media (max-width: 575.98px) {
    .rp-intro-magazine-visual { max-width: 360px; border-radius: 24px; }
}

.rp-intro-hero {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}

.rp-intro-title {
    font: 800 clamp(44px, 6.6vw, 76px)/1.04 "Inter", sans-serif;
    letter-spacing: -.035em;
    color: #0a0a0a;
    margin: 12px 0 0;
}
.rp-intro-title .accent { color: var(--brand, #b10f1a); }

.rp-intro-magazine {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 36px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.rp-intro-col p {
    font: 400 17px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin-bottom: 18px;
}
.rp-intro-col p:last-child { margin-bottom: 0; }

.rp-intro-pull {
    font: 600 22px/1.4 "Inter", sans-serif !important;
    color: #0a0a0a !important;
    letter-spacing: -.012em;
    margin-bottom: 22px !important;
    position: relative;
    padding-left: 22px;
    border-left: 3px solid var(--brand, #b10f1a);
}


/* =========================================================
   RP-3 · ENJOIN — SPLIT WITH WORKFLOW ENGINE VISUAL
   ========================================================= */
.rp-enjoin {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}

.rp-enjoin-tag {
    display: inline-block;
    font: 700 11px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--brand, #b10f1a);
    padding: 8px 14px;
    border: 1px solid rgba(177, 15, 26, .25);
    border-radius: 999px;
    background: #fff;
    margin-bottom: 18px;
}

.rp-enjoin-title {
    font: 800 clamp(44px, 7vw, 80px)/1 "Inter", sans-serif;
    letter-spacing: -.035em;
    color: #0a0a0a;
    margin-bottom: 22px;
}
.rp-enjoin-title .accent { color: var(--brand, #b10f1a); }

.rp-enjoin-body {
    font: 400 16px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin-bottom: 14px;
    max-width: 560px;
}
.rp-enjoin-body:last-child { margin-bottom: 0; }

/* Visual: workflow engine card with 4 stages + role chips */
.rp-enjoin-visual {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: 40px 36px 36px;
    box-shadow:
        0 24px 60px -32px rgba(0, 0, 0, .25),
        0 0 0 1px rgba(0, 0, 0, .04) inset;
    overflow: hidden;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    transform: scale(calc(.96 + .04 * var(--p, 0)));
}
.rp-enjoin-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(177, 15, 26, .07) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(177, 15, 26, .04) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.rp-enjoin-flow-head {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.rp-enjoin-flow-tag {
    display: inline-block;
    font: 700 10px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brand, #b10f1a);
}

.rp-enjoin-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rp-enjoin-flow::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .65) 8%,
        rgba(177, 15, 26, .9) 50%,
        rgba(177, 15, 26, .65) 92%,
        rgba(177, 15, 26, 0) 100%);
    border-radius: 2px;
    z-index: 0;
}

.rp-enjoin-flow li {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .18);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
    z-index: 1;
}
.rp-enjoin-flow li:hover {
    transform: translateX(4px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 18px 36px -16px rgba(177, 15, 26, .35);
}

.rp-enjoin-flow-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(177, 15, 26, .12);
}
.rp-enjoin-flow li:hover .rp-enjoin-flow-num {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.rp-enjoin-flow li strong {
    font: 600 15.5px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

.rp-enjoin-roles {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.rp-enjoin-role-label {
    display: block;
    font: 700 10px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #6e6e73;
    margin-bottom: 12px;
}
.rp-enjoin-role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rp-enjoin-role-chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 999px;
    font: 600 12px/1 "Inter", sans-serif;
    color: #2a2a2a;
}
.rp-enjoin-role-chips i {
    font-size: 11px;
    color: var(--brand, #b10f1a);
}

/* Centered editorial variant — used when the workflow diagram
   is removed and the section reads as a single-column editorial
   block (title, lead, 2-column body, horizontal workflow row,
   role-based access chips row). */
.rp-enjoin-centered .rp-enjoin-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.rp-enjoin-centered .rp-enjoin-tag { display: inline-flex; }
.rp-enjoin-centered .rp-enjoin-title { text-align: center; }
.rp-enjoin-lead {
    max-width: 920px;
    margin: 0 auto;
    font-family: "Inter", "Manrope", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.55;
    letter-spacing: -.012em;
    color: #0a0a0a;
}
.rp-enjoin-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 56px;
    max-width: 1080px;
    margin: 44px auto 64px;
    padding-top: 36px;
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.rp-enjoin-body-grid .rp-enjoin-body { margin: 0; }

.rp-enjoin-workflow {
    max-width: 1180px;
    margin: 0 auto 56px;
    text-align: center;
}
.rp-enjoin-workflow-tag,
.rp-enjoin-access-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background: rgba(177, 15, 26, .07);
    color: var(--brand, #b10f1a);
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.rp-enjoin-workflow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    position: relative;
}
.rp-enjoin-workflow-steps::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(177, 15, 26, .22) 12%,
        rgba(177, 15, 26, .22) 88%,
        transparent 100%);
    z-index: 0;
}
.rp-enjoin-workflow-steps li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
}
.rp-enjoin-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 700 14px/1 "Inter", sans-serif;
    letter-spacing: .5px;
    box-shadow: 0 0 0 6px #fff, 0 6px 14px rgba(177, 15, 26, .12);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.rp-enjoin-workflow-steps li:hover .rp-enjoin-step-num {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: translateY(-3px);
}
.rp-enjoin-workflow-steps li i {
    font-size: 18px;
    color: rgba(29, 29, 31, .55);
    transition: color .3s ease;
}
.rp-enjoin-workflow-steps li:hover i { color: var(--brand, #b10f1a); }
.rp-enjoin-workflow-steps li strong {
    font: 600 14.5px/1.35 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.008em;
    text-align: center;
}

.rp-enjoin-access {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}
.rp-enjoin-access-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.rp-enjoin-access-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 999px;
    font: 600 14px/1 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.rp-enjoin-access-chips span:hover {
    border-color: rgba(177, 15, 26, .35);
    background: rgba(177, 15, 26, .04);
    transform: translateY(-2px);
}
.rp-enjoin-access-chips i {
    font-size: 13px;
    color: var(--brand, #b10f1a);
}

@media (max-width: 991px) {
    .rp-enjoin-body-grid { grid-template-columns: 1fr; gap: 24px; }
    .rp-enjoin-workflow-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .rp-enjoin-workflow-steps::before { display: none; }
}


/* =========================================================
   RP-4 · AI-DRIVEN RECRUITMENT MANAGEMENT — NUMBERED STORYBOARD
   Vertical numbered narrative — distinct from LP filmstrip.
   ========================================================= */
.rp-ai {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.rp-ai-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 64px;
}
.rp-ai-tag {
    display: inline-block;
    font: 700 11px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brand, #b10f1a);
    padding: 8px 14px;
    border: 1px solid rgba(177, 15, 26, .25);
    border-radius: 999px;
    background: #fff;
    margin-bottom: 16px;
}
.rp-ai-title {
    font: 800 clamp(38px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin-bottom: 18px;
}
.rp-ai-title .accent { color: var(--brand, #b10f1a); }

.rp-ai-deck {
    font: 500 19px/1.55 "Inter", sans-serif;
    color: #424245;
    max-width: 720px;
    margin: 0 auto;
}

.rp-ai-storyboard {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}
.rp-ai-storyboard::before {
    content: "";
    position: absolute;
    left: 49px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .35) 12%,
        rgba(177, 15, 26, .35) 88%,
        rgba(177, 15, 26, 0) 100%);
}

.rp-ai-story {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 32px;
    align-items: start;
    padding: 28px 0;
    position: relative;
}

.rp-ai-story-num {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
    display: grid;
    place-items: center;
    font: 800 28px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 8px #fff,
        0 0 0 9px rgba(177, 15, 26, .12),
        0 14px 30px -12px rgba(177, 15, 26, .35);
    position: relative;
    z-index: 1;
    transition: background .45s ease, color .45s ease, transform .45s ease;
}
.rp-ai-story:hover .rp-ai-story-num {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.rp-ai-story p {
    font: 400 16.5px/1.75 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 12px 0 0;
    max-width: 760px;
}


/* =========================================================
   RP-5 · RECOMMENDATION ENGINE — TWO-AUDIENCE SPLIT
   ========================================================= */
.rp-reco {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}

.rp-reco-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}
.rp-reco-tag {
    display: inline-block;
    font: 700 11px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brand, #b10f1a);
    padding: 8px 14px;
    border: 1px solid rgba(177, 15, 26, .25);
    border-radius: 999px;
    background: #fff;
    margin-bottom: 16px;
}
.rp-reco-title {
    font: 800 clamp(38px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin-bottom: 18px;
}
.rp-reco-title .accent { color: var(--brand, #b10f1a); }

.rp-reco-deck {
    font: 500 19px/1.55 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto 14px;
}
.rp-reco-sub {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.rp-reco-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.rp-reco-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.rp-reco-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.rp-reco-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.rp-reco-card-head i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 17px;
}

/* Two distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon picks up a deeper shade of its own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach — recruiters & hiring managers */
.rp-reco-card:nth-child(1) {
    background: #ffe8dc;
}
.rp-reco-card:nth-child(1):hover {
    background: #fdd6c0;
}
.rp-reco-card:nth-child(1) .rp-reco-card-head i {
    background: rgba(200, 95, 50, 0.18);
    color: #c85f32;
}

/* Card 02 · Lavender — candidates */
.rp-reco-card:nth-child(2) {
    background: #ece5fb;
}
.rp-reco-card:nth-child(2):hover {
    background: #dccff5;
}
.rp-reco-card:nth-child(2) .rp-reco-card-head i {
    background: rgba(110, 80, 200, 0.18);
    color: #6e50c8;
}
.rp-reco-card-head span {
    font: 700 16px/1.3 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
}

.rp-reco-card p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}

.rp-reco-closing {
    max-width: 920px;
    margin: 56px auto 0;
    padding-top: 36px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
}
.rp-reco-closing p {
    font: 400 16px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin-bottom: 16px;
}
.rp-reco-closing p:last-child { margin-bottom: 0; }


/* =========================================================
   RP-6 · ADVANCED RECRUITMENT CAPABILITIES — ICON GRID
   ========================================================= */
.rp-caps {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.rp-caps-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}
.rp-caps-tag {
    display: inline-block;
    font: 700 11px/1 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--brand, #b10f1a);
    padding: 8px 14px;
    border: 1px solid rgba(177, 15, 26, .25);
    border-radius: 999px;
    background: #fff;
    margin-bottom: 16px;
}
.rp-caps-title {
    font: 800 clamp(38px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
}
.rp-caps-title .accent { color: var(--brand, #b10f1a); }

/* Apple-style flat 2-column hairline list — no heavy boxes,
   small inline icons, subtle dividers, refined typography. */
.rp-caps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 72px;
    row-gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.rp-caps-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 22px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.rp-caps-card:hover {
    padding-left: 6px;
}

.rp-caps-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 15px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
    flex-shrink: 0;
}
.rp-caps-card:hover .rp-caps-icon {
    transform: scale(1.08);
}

/* Eight distinct icon hues — cycle through the 14 cards so each
   capability gets its own visual signature. */

/* 01, 09 · Peach */
.rp-caps-card:nth-child(8n+1) .rp-caps-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}
/* 02, 10 · Lavender */
.rp-caps-card:nth-child(8n+2) .rp-caps-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}
/* 03, 11 · Pistachio */
.rp-caps-card:nth-child(8n+3) .rp-caps-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}
/* 04, 12 · Sky */
.rp-caps-card:nth-child(8n+4) .rp-caps-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}
/* 05, 13 · Rose */
.rp-caps-card:nth-child(8n+5) .rp-caps-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}
/* 06, 14 · Butter */
.rp-caps-card:nth-child(8n+6) .rp-caps-icon {
    background: rgba(170, 130, 30, 0.14);
    color: #8a6a1f;
}
/* 07 · Mint */
.rp-caps-card:nth-child(8n+7) .rp-caps-icon {
    background: rgba(45, 140, 100, 0.14);
    color: #2f8c63;
}
/* 08 · Lilac */
.rp-caps-card:nth-child(8n+8) .rp-caps-icon {
    background: rgba(140, 70, 165, 0.14);
    color: #8a45a3;
}

.rp-caps-card p {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    letter-spacing: -.005em;
    padding-top: 8px;
    transition: color .45s ease;
}
.rp-caps-card:hover p {
    color: #0a0a0a;
}


/* =========================================================
   RP · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .rp-page .rp-intro,
    .rp-page .rp-enjoin,
    .rp-page .rp-ai,
    .rp-page .rp-reco,
    .rp-page .rp-caps { padding: 80px 0; }

    .rp-intro-title { font-size: clamp(36px, 7vw, 56px); }
    .rp-intro-magazine { grid-template-columns: 1fr; gap: 28px; padding-top: 32px; }

    .rp-enjoin-title { font-size: clamp(40px, 8vw, 64px); }
    .rp-enjoin-visual { margin-top: 40px; padding: 32px 26px 28px; }

    .rp-ai-storyboard::before { left: 35px; }
    .rp-ai-story { grid-template-columns: 72px 1fr; gap: 22px; padding: 22px 0; }
    .rp-ai-story-num { width: 72px; height: 72px; font-size: 22px; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(177, 15, 26, .12); }

    .rp-reco-split { grid-template-columns: 1fr; gap: 18px; }

    .rp-caps-grid { grid-template-columns: 1fr; column-gap: 0; }
    .rp-caps-title { font-size: clamp(30px, 6vw, 48px); }
}

@media (max-width: 575px) {
    .rp-page .rp-intro,
    .rp-page .rp-enjoin,
    .rp-page .rp-ai,
    .rp-page .rp-reco,
    .rp-page .rp-caps { padding: 60px 0; }

    .rp-caps-card { padding: 22px 0; gap: 16px; grid-template-columns: 36px 1fr; }
    .rp-caps-icon { width: 36px; height: 36px; font-size: 13px; }
    .rp-caps-card p { font-size: 14.5px; padding-top: 6px; }

    .rp-ai-storyboard::before { display: none; }
    .rp-ai-story { grid-template-columns: 60px 1fr; gap: 18px; }
    .rp-ai-story-num { width: 60px; height: 60px; font-size: 18px; }

    .rp-reco-card { padding: 28px 22px 24px; }
    .rp-reco-card-head i { width: 38px; height: 38px; font-size: 14px; }

    .rp-enjoin-flow li { padding: 12px 14px; grid-template-columns: 48px 1fr; gap: 12px; }
    .rp-enjoin-flow-num { width: 38px; height: 38px; font-size: 11px; }
    .rp-enjoin-visual { padding: 28px 20px 24px; border-radius: 22px; }

    .rp-intro-pull { font-size: 18px !important; padding-left: 18px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · RECRUITMENT PLATFORM PAGE  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  GENERATIVE AI PAGE (EnGen — 1.1)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: generative-ai.html
   Body class: .ga-page
   All styles below are scoped under .ga-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   GA · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.ga-page .ga-intro,
.ga-page .ga-changes,
.ga-page .ga-disc,
.ga-page .ga-hood,
.ga-page .ga-frontier,
.ga-page .ga-diff,
.ga-page .ga-process {
    padding: 110px 0;
}
.ga-page .pe-cta { padding: 110px 0; }

/* =========================================================
   GA · HERO — EnGen brand heading + smaller product subtitle
   The product name (EnGen) is the primary heading; "En" is
   highlighted in brand-red. The product category (Generative
   AI) sits beneath in a smaller, refined size.
   ========================================================= */
.ga-page .ga-hero-brand {
    font-size: 104px;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin-bottom: 18px;
}
.ga-page .ga-hero-brand .accent {
    color: var(--brand);
    background: none;
    -webkit-text-fill-color: var(--brand);
}
.ga-page .ga-hero-product {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 22px;
}
@media (max-width: 575px) {
    .ga-page .ga-hero-brand { font-size: clamp(56px, 18vw, 88px); margin-bottom: 12px; }
    .ga-page .ga-hero-product { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 16px; }
}


/* =========================================================
   GA-2 · INTRO NARRATIVE — APPLE EDITORIAL
   ========================================================= */
.ga-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ga-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}

.ga-intro-pull {
    font: 600 clamp(28px, 3.4vw, 40px)/1.32 "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 26px auto 24px;
    max-width: 880px;
}

.ga-intro-body {
    font: 400 19px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}


/* =========================================================
   GA-3 · WHAT'S UNDER THE HOOD — TECH SPEC SHEET
   Apple-style flat numbered rows with monospace labels.
   ========================================================= */
.ga-hood {
    position: relative;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}

.ga-hood-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.ga-hood-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.ga-hood-title .accent { color: var(--brand, #b10f1a); }
.ga-hood-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 720px;
    margin: 0 auto;
}

.ga-hood-list {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.ga-hood-row {
    display: grid;
    grid-template-columns: 80px 240px 1fr;
    column-gap: 40px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.ga-hood-row:hover { padding-left: 8px; }

.ga-hood-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .12em;
    color: var(--brand, #b10f1a);
    padding-top: 6px;
}

.ga-hood-label {
    font: 700 21px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    padding-top: 2px;
}

.ga-hood-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    max-width: 720px;
}


/* =========================================================
   GA-4 · THE FRONTIER — RESEARCH MAGAZINE GRID
   Clean editorial cards with subtle hover.
   ========================================================= */
.ga-frontier {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ga-frontier-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 60px;
}
.ga-frontier-title {
    font: 800 clamp(36px, 5vw, 56px)/1.08 "Inter", sans-serif;
    letter-spacing: -.028em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.ga-frontier-title .accent { color: var(--brand, #b10f1a); }
.ga-frontier-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 720px;
    margin: 0 auto;
}

.ga-frontier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.ga-frontier-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.ga-frontier-card::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.ga-frontier-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .18);
}
.ga-frontier-card:hover::after { width: 80px; }

.ga-frontier-wide { grid-column: 1 / -1; }

.ga-frontier-h3 {
    font: 700 22px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.ga-frontier-card p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   GA-5 · DEMO VS SYSTEM — EDITORIAL + DIFFERENTIATORS
   ========================================================= */
.ga-diff {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}

.ga-diff-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 72px;
}
.ga-diff-title {
    font: 800 clamp(40px, 5.8vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin-bottom: 24px;
}
.ga-diff-title .accent { color: var(--brand, #b10f1a); }

.ga-diff-deck {
    font: 500 19px/1.55 "Inter", sans-serif;
    color: #0a0a0a;
    max-width: 820px;
    margin: 0 auto 18px;
}
.ga-diff-body {
    font: 400 16.5px/1.7 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.ga-diff-pillars-head {
    text-align: center;
    margin-bottom: 32px;
}

.ga-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}

.ga-diff-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.ga-diff-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.ga-diff-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
    margin-bottom: 18px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ga-diff-card:hover .ga-diff-icon {
    transform: scale(1.05);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.ga-diff-card:nth-child(1) {
    background: #ffe8dc;
}
.ga-diff-card:nth-child(1):hover {
    background: #fdd6c0;
}
.ga-diff-card:nth-child(1) .ga-diff-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ga-diff-card:nth-child(2) {
    background: #ece5fb;
}
.ga-diff-card:nth-child(2):hover {
    background: #dccff5;
}
.ga-diff-card:nth-child(2) .ga-diff-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ga-diff-card:nth-child(3) {
    background: #e3f0d6;
}
.ga-diff-card:nth-child(3):hover {
    background: #cee5b5;
}
.ga-diff-card:nth-child(3) .ga-diff-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.ga-diff-card:nth-child(4) {
    background: #dceffa;
}
.ga-diff-card:nth-child(4):hover {
    background: #b8dcf2;
}
.ga-diff-card:nth-child(4) .ga-diff-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.ga-diff-h3 {
    font: 700 18.5px/1.3 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
}

.ga-diff-card p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   GA-6 · HOW WE WORK — STAGE TIMELINE
   Horizontal stages with brand-red connector rail.
   ========================================================= */
.ga-process {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ga-process-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.ga-process-title {
    font: 800 clamp(38px, 5.4vw, 60px)/1.04 "Inter", sans-serif;
    letter-spacing: -.028em;
    color: #0a0a0a;
    margin-top: 14px;
}
.ga-process-title .accent { color: var(--brand, #b10f1a); }

/* Unified horizontal panel — 4 chapters separated by hairline
   rules. No individual cards. Top dot rail shows progression. */
.ga-process-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
/* Brand-red progress rail running through the dots row.
   Sits behind the dots — never crosses any text. */
.ga-process-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.ga-process-col {
    position: relative;
    z-index: 1;
    padding: 36px 36px 40px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    background: transparent;
    transition: background .45s ease;
}
.ga-process-col:last-child { border-right: none; }
.ga-process-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

/* Dot row — sits on the rail, no text overlap */
.ga-process-col-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 22px;
    margin-bottom: 28px;
}
.ga-process-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ga-process-col:hover .ga-process-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

/* STAGE label moved into body — small monospace caption above numeral */
.ga-process-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 12px;
}

/* Body */
.ga-process-num {
    font: 800 clamp(56px, 5.4vw, 84px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.ga-process-col:hover .ga-process-num {
    color: var(--brand, #b10f1a);
}

.ga-process-duration {
    display: inline-block;
    font: 500 11.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ga-process-h3 {
    font: 700 clamp(20px, 1.9vw, 24px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.ga-process-col p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   GA · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .ga-page .ga-intro,
    .ga-page .ga-hood,
    .ga-page .ga-frontier,
    .ga-page .ga-diff,
    .ga-page .ga-process { padding: 80px 0; }

    .ga-intro-pull { font-size: clamp(24px, 5vw, 32px); }

    .ga-hood-row {
        grid-template-columns: 60px 1fr;
        column-gap: 22px;
        row-gap: 8px;
        padding: 28px 0;
    }
    .ga-hood-label { grid-column: 2; padding-top: 0; }
    .ga-hood-body { grid-column: 1 / -1; }
    .ga-hood-num { padding-top: 4px; }

    .ga-frontier-grid { grid-template-columns: 1fr; gap: 18px; }
    .ga-frontier-wide { grid-column: 1; }
    .ga-frontier-card { padding: 30px 26px 28px; }

    .ga-diff-grid { grid-template-columns: 1fr; gap: 18px; }
    .ga-diff-card { padding: 30px 26px 28px; }

    /* Process panel: collapse to 2x2 grid */
    .ga-process-panel { grid-template-columns: repeat(2, 1fr); border-radius: 22px; }
    .ga-process-panel::before { display: none; }
    .ga-process-col { padding: 32px 28px 32px; border-right: none; }
    .ga-process-col:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .ga-process-col:nth-child(1),
    .ga-process-col:nth-child(2) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .ga-page .ga-intro,
    .ga-page .ga-hood,
    .ga-page .ga-frontier,
    .ga-page .ga-diff,
    .ga-page .ga-process { padding: 60px 0; }

    .ga-hood-row { padding: 22px 0; }
    .ga-hood-label { font-size: 18px; }
    .ga-hood-body { font-size: 14.5px; }

    .ga-frontier-h3 { font-size: 19px; }
    .ga-diff-h3 { font-size: 17px; }

    /* Process panel: collapse to single column */
    .ga-process-panel { grid-template-columns: 1fr; }
    .ga-process-col { padding: 28px 24px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .ga-process-col:last-child { border-bottom: none; }
    .ga-process-col:nth-child(odd) { border-right: none; }
    .ga-process-num { font-size: 56px; }
    .ga-process-h3 { font-size: 19px; }
    .ga-process-col p { font-size: 14.5px; }
}


/* =========================================================
   GA-3 · FIVE DISCIPLINES — MODULAR EXPLORE CARDS
   Apple-style premium clickable cards with hover lift,
   brand-red rule that grows, and arrow CTA that slides.
   Last card spans full width.
   ========================================================= */
.ga-disc {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ga-disc-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}

.ga-disc-section-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 22px;
}
.ga-disc-section-title .accent { color: var(--brand, #b10f1a); }
.ga-disc-section-title .muted { color: #6e6e73; font-weight: 700; }

.ga-disc-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.ga-disc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
}

.ga-disc-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    padding: 44px 40px 36px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        border-color .45s ease,
        box-shadow .55s ease;
}
.ga-disc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(177, 15, 26, .045) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .55s ease;
    z-index: -1;
}
.ga-disc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
    text-decoration: none;
    color: inherit;
}
.ga-disc-card:hover::before { opacity: 1; }

.ga-disc-card-wide { grid-column: 1 / -1; }

.ga-disc-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    margin-bottom: 14px;
}

.ga-disc-rule {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    margin-bottom: 20px;
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.ga-disc-card:hover .ga-disc-rule { width: 96px; }

.ga-disc-title {
    font: 700 clamp(24px, 2.6vw, 30px)/1.18 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.ga-disc-tagline {
    font: 500 16.5px/1.5 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    letter-spacing: -.005em;
}

.ga-disc-body {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 14px;
}
.ga-disc-body:last-of-type { margin-bottom: 28px; }

.ga-disc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    width: 100%;
    transition: color .35s ease;
}
.ga-disc-cta i {
    font-size: 12px;
    color: var(--brand, #b10f1a);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ga-disc-card:hover .ga-disc-cta {
    color: var(--brand, #b10f1a);
}
.ga-disc-card:hover .ga-disc-cta i {
    transform: translateX(8px);
}

/* Wide card splits the 2 source paragraphs into a 2-column flex
   region with a subtle vertical rule for editorial polish. */
.ga-disc-card-wide {
    padding-bottom: 32px;
}
.ga-disc-card-wide .ga-disc-title {
    max-width: 720px;
}
.ga-disc-card-wide .ga-disc-tagline {
    max-width: 760px;
}
.ga-disc-body-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    margin-bottom: 28px;
}
.ga-disc-body-pair .ga-disc-body {
    margin-bottom: 0;
    padding-right: 0;
    border-right: none;
}
.ga-disc-body-pair .ga-disc-body:first-child {
    padding-right: 36px;
    border-right: 1px solid rgba(0, 0, 0, .08);
}

/* GA · DISCIPLINES RESPONSIVE */
@media (max-width: 991px) {
    .ga-page .ga-disc { padding: 80px 0; }
    .ga-disc-grid { grid-template-columns: 1fr; gap: 22px; }
    .ga-disc-card-wide { grid-column: 1; }
    .ga-disc-card { padding: 36px 30px 30px; border-radius: 22px; }
    .ga-disc-body-pair { grid-template-columns: 1fr; row-gap: 14px; }
    .ga-disc-body-pair .ga-disc-body:first-child {
        padding-right: 0;
        padding-bottom: 14px;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }
    .ga-disc-title { font-size: clamp(22px, 4.5vw, 28px); }
}

@media (max-width: 575px) {
    .ga-page .ga-disc { padding: 60px 0; }
    .ga-disc-card { padding: 30px 24px 26px; }
    .ga-disc-tagline { font-size: 15px; padding-bottom: 14px; margin-bottom: 16px; }
    .ga-disc-body { font-size: 14.5px; }
}


/* =========================================================
   GA-3 · WHAT GENERATIVE AI ACTUALLY CHANGES (Section 1)
   Apple cinematic editorial — pull-quote, body, 4 use cases,
   closing emphasis, and a 4-stat proof-points strip.
   ========================================================= */
.ga-changes {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ga-changes-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}
.ga-changes-title {
    font: 800 clamp(40px, 6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 0;
}
.ga-changes-title .accent { color: var(--brand, #b10f1a); }

/* Big editorial pull quote */
.ga-changes-pull {
    max-width: 940px;
    margin: 0 auto 40px;
    padding: 32px 40px;
    border-left: 4px solid var(--brand, #b10f1a);
    background: linear-gradient(90deg, rgba(177, 15, 26, .035) 0%, rgba(177, 15, 26, 0) 100%);
    border-radius: 0 16px 16px 0;
}
.ga-changes-pull p {
    font: 600 clamp(24px, 3vw, 34px)/1.32 "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 0;
}

.ga-changes-body {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}
.ga-changes-body p {
    font: 400 18px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* Transition lead-in */
.ga-changes-trans {
    text-align: center;
    margin-bottom: 36px;
}
.ga-changes-trans span {
    font: 700 clamp(22px, 2.6vw, 30px)/1.2 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
}
.ga-changes-trans .accent { color: var(--brand, #b10f1a); }

/* 4 use case cards — clean 2x2 with hairline frame */
.ga-changes-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 64px;
}

.ga-changes-case {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 22px;
    align-items: start;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 26px 28px 24px;
    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        background-color .45s ease,
        box-shadow .45s ease;
}
.ga-changes-case:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -22px rgba(15, 30, 60, 0.20);
}

.ga-changes-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 17px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ga-changes-case:hover .ga-changes-icon {
    transform: scale(1.05);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.ga-changes-case:nth-child(1) {
    background: #ffe8dc;
}
.ga-changes-case:nth-child(1):hover {
    background: #fdd6c0;
}
.ga-changes-case:nth-child(1) .ga-changes-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ga-changes-case:nth-child(2) {
    background: #ece5fb;
}
.ga-changes-case:nth-child(2):hover {
    background: #dccff5;
}
.ga-changes-case:nth-child(2) .ga-changes-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ga-changes-case:nth-child(3) {
    background: #e3f0d6;
}
.ga-changes-case:nth-child(3):hover {
    background: #cee5b5;
}
.ga-changes-case:nth-child(3) .ga-changes-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.ga-changes-case:nth-child(4) {
    background: #dceffa;
}
.ga-changes-case:nth-child(4):hover {
    background: #b8dcf2;
}
.ga-changes-case:nth-child(4) .ga-changes-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.ga-changes-case p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    padding-top: 4px;
}

/* Closing emphasis */
.ga-changes-close {
    max-width: 880px;
    margin: 0 auto 80px;
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.ga-changes-emphasis {
    font: 700 clamp(20px, 2.4vw, 28px)/1.32 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a);
    margin: 0 0 18px;
}
.ga-changes-close p:last-child {
    font: 400 17px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* PROOF POINTS — 4-tile stats strip with huge numerals */
.ga-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.ga-proof-head {
    text-align: center;
    margin-bottom: 36px;
}

.ga-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.ga-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.ga-proof-stat:first-child { border-left: none; padding-left: 0; }

.ga-proof-num {
    font: 800 clamp(48px, 6vw, 76px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}

.ga-proof-cap {
    font: 400 13.5px/1.55 "Inter", sans-serif;
    color: #424245;
}

/* GA · CHANGES RESPONSIVE */
@media (max-width: 991px) {
    .ga-page .ga-changes { padding: 80px 0; }
    .ga-changes-pull { padding: 26px 28px; }
    .ga-changes-cases { grid-template-columns: 1fr; gap: 18px; }
    .ga-proof { padding: 44px 28px; border-radius: 22px; }
    .ga-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .ga-proof-stat { padding: 0 0 0 18px; }
    .ga-proof-stat:first-child,
    .ga-proof-stat:nth-child(3) { border-left: none; padding-left: 0; }
}

@media (max-width: 575px) {
    .ga-page .ga-changes { padding: 60px 0; }
    .ga-changes-pull { padding: 22px 20px; }
    .ga-changes-pull p { font-size: 20px; }
    .ga-changes-case { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 22px 22px 20px; }
    .ga-changes-icon { width: 40px; height: 40px; font-size: 14px; }
    .ga-proof-grid { grid-template-columns: 1fr; gap: 26px; }
    .ga-proof-stat { border-left: none; padding-left: 0; }
    .ga-proof-num { font-size: 56px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · GENERATIVE AI PAGE (EnGen — 1.1)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  LLM DEVELOPMENT & FINE-TUNING PAGE (1.1.01)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: llm-fine-tuning.html
   Body class: .lt-page
   Parent: Generative AI (EnGen Practice) → Discipline 01
   All styles below are scoped under .lt-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   LT · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.lt-page .lt-intro,
.lt-page .lt-section,
.lt-page .lt-proof-section {
    padding: 110px 0;
}
.lt-page .pe-cta { padding: 110px 0; }

/* Alternating section backgrounds for cinematic rhythm */
.lt-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   LT-2 · INTRO NARRATIVE
   ========================================================= */
.lt-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.lt-intro-shell {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.lt-intro-body {
    font: 500 clamp(20px, 2.4vw, 26px)/1.55 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   LT · COMMON SECTION SCAFFOLDING
   ========================================================= */
.lt-section {
    position: relative;
    overflow: hidden;
}

.lt-section-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.lt-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.lt-section-title .accent { color: var(--brand, #b10f1a); }

.lt-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

/* Editorial prose blocks */
.lt-prose {
    max-width: 820px;
    margin: 0 auto;
}
.lt-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.lt-prose p:last-child { margin-bottom: 0; }
.lt-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}
.lt-prose-close {
    margin-top: 36px;
    text-align: center;
}


/* =========================================================
   LT-4 · PROMPTING vs FINE-TUNING — CHECKLIST
   ========================================================= */
.lt-checklist {
    list-style: none;
    margin: 32px auto;
    padding: 0;
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.lt-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.lt-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.lt-checklist li span {
    font: 400 15.5px/1.6 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   LT-5 · HOW ENTIOVI APPROACHES — NUMBERED VERTICAL LIST
   ========================================================= */
.lt-approach-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.lt-approach-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.lt-approach-row:hover { padding-left: 8px; }

.lt-approach-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.lt-approach-content { max-width: 760px; }
.lt-approach-h3 {
    font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.lt-approach-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   LT-6 · WHERE FINE-TUNING MAKES DIFFERENCE — INDUSTRY CARDS
   ========================================================= */
.lt-industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.lt-industry-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.lt-industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.lt-industry-wide { grid-column: 1 / -1; }

.lt-industry-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 20px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.lt-industry-card:hover .lt-industry-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.lt-industry-h3 {
    font: 700 22px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 6px;
}
.lt-industry-sub {
    font: 500 13.5px/1.4 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    letter-spacing: -.005em;
}
.lt-industry-card p:last-child {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   LT-7 · RESEARCH PERSPECTIVE — 2x2 RESEARCH GRID
   ========================================================= */
.lt-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.lt-research-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.lt-research-card::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.lt-research-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.lt-research-card:hover::before { width: 96px; }

.lt-research-h3 {
    font: 700 21px/1.28 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.lt-research-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   LT-8 · FIVE QUESTIONS — Q&A LIST
   ========================================================= */
.lt-questions-list {
    max-width: 980px;
    margin: 0 auto;
}
.lt-question-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 36px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.lt-question-row:first-child { border-top: 1px solid rgba(0, 0, 0, .08); }

.lt-question-num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--brand, #b10f1a);
    color: #fff;
    border-radius: 50%;
    font: 700 15px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 6px #fff,
        0 0 0 7px rgba(177, 15, 26, .14),
        0 12px 26px -12px rgba(177, 15, 26, .55);
}

.lt-question-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-top: 14px;
}
.lt-question-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   LT-9 · PROOF POINTS
   ========================================================= */
.lt-proof-section {
    background: #fff;
}
.lt-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.lt-proof-head { text-align: center; margin-bottom: 36px; }

.lt-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.lt-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 22px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.lt-proof-stat:first-child { border-left: none; padding-left: 0; }

.lt-proof-num {
    font: 800 clamp(48px, 6vw, 76px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.lt-proof-cap {
    font: 400 13.5px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   LT-10 · HOW ENTIOVI ENGAGES — HORIZONTAL PHASE PANEL
   Mirrors the GA process panel but scoped for LT.
   ========================================================= */
.lt-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.lt-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.lt-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 32px 36px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.lt-engage-col:last-child { border-right: none; }
.lt-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.lt-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.lt-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.lt-engage-col:hover .lt-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.lt-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.lt-engage-num {
    font: 800 clamp(48px, 4.6vw, 72px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.lt-engage-col:hover .lt-engage-num {
    color: var(--brand, #b10f1a);
}

.lt-engage-duration {
    display: inline-block;
    font: 500 11.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.lt-engage-h3 {
    font: 700 clamp(18px, 1.7vw, 22px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.lt-engage-col p {
    font: 400 14px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   LT · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .lt-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .lt-engage-panel::before { display: none; }
    .lt-engage-col { padding: 32px 28px; }
    .lt-engage-col:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .lt-engage-col:nth-child(even) { border-right: none; }
    .lt-engage-col:nth-child(1),
    .lt-engage-col:nth-child(2) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .lt-page .lt-intro,
    .lt-page .lt-section,
    .lt-page .lt-proof-section { padding: 80px 0; }

    .lt-checklist { grid-template-columns: 1fr; gap: 0; }

    .lt-approach-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .lt-approach-row:hover { padding-left: 0; }

    .lt-industry-grid { grid-template-columns: 1fr; gap: 18px; }
    .lt-industry-wide { grid-column: 1; }
    .lt-industry-card { padding: 30px 26px 28px; }

    .lt-research-grid { grid-template-columns: 1fr; gap: 18px; }
    .lt-research-card { padding: 30px 26px 28px; }

    .lt-question-row {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .lt-question-num { width: 44px; height: 44px; font-size: 13px; }
    .lt-question-h3 { padding-top: 8px; }

    .lt-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .lt-proof-stat { padding: 0; border-left: none; }
    .lt-proof { padding: 44px 28px; border-radius: 22px; }
}

@media (max-width: 575px) {
    .lt-page .lt-intro,
    .lt-page .lt-section,
    .lt-page .lt-proof-section { padding: 60px 0; }

    .lt-prose-emphasis { font-size: 18px !important; }

    .lt-engage-panel { grid-template-columns: 1fr; }
    .lt-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .lt-engage-col:last-child { border-bottom: none; }
    .lt-engage-col:nth-child(odd) { border-right: none; }
    .lt-engage-num { font-size: 56px; }
    .lt-engage-h3 { font-size: 18px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · LLM DEVELOPMENT & FINE-TUNING PAGE (1.1.01)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  RETRIEVAL-AUGMENTED GENERATION PAGE (1.1.02)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: retrieval-augmented-generation.html
   Body class: .rg-page
   Parent: Generative AI (EnGen Practice) → Discipline 02
   All styles below are scoped under .rg-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   RG · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.rg-page .rg-intro,
.rg-page .rg-section,
.rg-page .rg-proof-section {
    padding: 110px 0;
}
.rg-page .pe-cta { padding: 110px 0; }

.rg-page .rg-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   RG-2 · INTRO NARRATIVE
   ========================================================= */
.rg-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.rg-intro-shell {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.rg-intro-body {
    font: 500 clamp(20px, 2.4vw, 26px)/1.55 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   RG · COMMON SECTION SCAFFOLDING
   ========================================================= */
.rg-section { position: relative; overflow: hidden; }

.rg-section-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.rg-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.rg-section-title .accent { color: var(--brand, #b10f1a); }

.rg-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto 12px;
}
.rg-section-deck:last-of-type { margin-bottom: 0; }

/* Editorial prose */
.rg-prose {
    max-width: 820px;
    margin: 0 auto;
}
.rg-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.rg-prose p:last-child { margin-bottom: 0; }
.rg-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}


/* =========================================================
   RG-4 · WHAT RAG ACTUALLY IS — CHECKLIST
   ========================================================= */
.rg-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.rg-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.rg-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.rg-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   RG-5 · HOW ENTIOVI BUILDS — NUMBERED ARCHITECTURAL LIST
   ========================================================= */
.rg-build-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.rg-build-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.rg-build-row:hover { padding-left: 8px; }

.rg-build-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.rg-build-content { max-width: 760px; }
.rg-build-h3 {
    font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 4px;
}
.rg-build-sub {
    font: 500 14px/1.4 "Inter", sans-serif !important;
    color: var(--brand, #b10f1a);
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.rg-build-content p:last-of-type {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   RG-6 · EVOLUTION OF RAG — TIER LADDER
   Each row gradually intensifies in brand-red presence
   to suggest progression / sophistication.
   ========================================================= */
.rg-tier-list {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rg-tier-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    column-gap: 48px;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.rg-tier-row:hover {
    transform: translateX(6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 22px 44px -22px rgba(177, 15, 26, .22);
}

.rg-tier-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 28px;
    background: linear-gradient(135deg, rgba(177, 15, 26, .035) 0%, rgba(177, 15, 26, 0) 100%);
    border-right: 1px solid rgba(0, 0, 0, .07);
}
.rg-tier-row[data-tier="2"] .rg-tier-meta { background: linear-gradient(135deg, rgba(177, 15, 26, .055) 0%, rgba(177, 15, 26, 0) 100%); }
.rg-tier-row[data-tier="3"] .rg-tier-meta { background: linear-gradient(135deg, rgba(177, 15, 26, .085) 0%, rgba(177, 15, 26, 0) 100%); }
.rg-tier-row[data-tier="4"] .rg-tier-meta { background: linear-gradient(135deg, rgba(177, 15, 26, .12) 0%, rgba(177, 15, 26, 0) 100%); }
.rg-tier-row[data-tier="5"] .rg-tier-meta { background: linear-gradient(135deg, rgba(177, 15, 26, .18) 0%, rgba(177, 15, 26, 0) 100%); }

.rg-tier-num {
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: var(--brand, #b10f1a);
    margin-bottom: 8px;
}
.rg-tier-label {
    font: 800 clamp(22px, 2.4vw, 28px)/1.1 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
}

.rg-tier-content {
    padding: 32px 36px 32px 0;
    align-self: center;
}
.rg-tier-h3 {
    font: 700 19px/1.28 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: var(--brand, #b10f1a);
    margin: 0 0 12px;
}
.rg-tier-content p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   RG-7 · WHERE RAG MAKES DIFFERENCE — 3-COL INDUSTRY GRID
   ========================================================= */
.rg-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}
.rg-industry-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.rg-industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}

.rg-industry-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 17px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.rg-industry-card:hover .rg-industry-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.rg-industry-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 4px;
}
.rg-industry-sub {
    font: 500 13px/1.4 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    letter-spacing: -.005em;
}
.rg-industry-card p:last-child {
    font: 400 14.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   RG-8 · EVALUATION FRAMEWORK — 4-METRIC GRID
   ========================================================= */
.rg-eval-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
}
.rg-eval-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.rg-eval-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.rg-eval-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.rg-eval-card:hover::before { width: 96px; }

.rg-eval-mono {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: #6e6e73;
    margin-bottom: 14px;
}
.rg-eval-h3 {
    font: 800 clamp(24px, 2.6vw, 32px)/1.18 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.rg-eval-card p {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   RG-9 · SIX DECISIONS — Q&A LIST
   ========================================================= */
.rg-questions-list {
    max-width: 980px;
    margin: 0 auto;
}
.rg-question-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 36px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.rg-question-row:first-child { border-top: 1px solid rgba(0, 0, 0, .08); }

.rg-question-num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--brand, #b10f1a);
    color: #fff;
    border-radius: 50%;
    font: 700 15px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 6px #fafafa,
        0 0 0 7px rgba(177, 15, 26, .14),
        0 12px 26px -12px rgba(177, 15, 26, .55);
}

.rg-question-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-top: 14px;
}
.rg-question-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   RG-10 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.rg-proof-section { background: #fff; }
.rg-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.rg-proof-head { text-align: center; margin-bottom: 36px; }

.rg-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.rg-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.rg-proof-stat:first-child { border-left: none; padding-left: 0; }

.rg-proof-num {
    font: 800 clamp(40px, 4.8vw, 64px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.rg-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   RG-11 · HOW ENTIOVI ENGAGES — 5-PHASE PANEL
   ========================================================= */
.rg-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.rg-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.rg-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 26px 36px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.rg-engage-col:last-child { border-right: none; }
.rg-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.rg-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.rg-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.rg-engage-col:hover .rg-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.rg-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.rg-engage-num {
    font: 800 clamp(44px, 4vw, 60px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.rg-engage-col:hover .rg-engage-num {
    color: var(--brand, #b10f1a);
}

.rg-engage-duration {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.rg-engage-h3 {
    font: 700 clamp(16px, 1.5vw, 19px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.rg-engage-col p {
    font: 400 13.5px/1.62 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   RG · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .rg-industry-grid { grid-template-columns: repeat(2, 1fr); }
    .rg-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .rg-engage-panel::before { display: none; }
    .rg-engage-col { padding: 28px 24px; }
    .rg-engage-col:nth-child(3n) { border-right: none; }
    .rg-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .rg-page .rg-intro,
    .rg-page .rg-section,
    .rg-page .rg-proof-section { padding: 80px 0; }

    .rg-checklist { grid-template-columns: 1fr; gap: 0; }

    .rg-build-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .rg-build-row:hover { padding-left: 0; }

    .rg-tier-row { grid-template-columns: 1fr; }
    .rg-tier-meta { padding: 22px 24px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .rg-tier-content { padding: 22px 24px 24px; }
    .rg-tier-row:hover { transform: none; }

    .rg-industry-grid { grid-template-columns: 1fr; gap: 18px; }
    .rg-industry-card { padding: 28px 24px 26px; }

    .rg-eval-grid { grid-template-columns: 1fr; gap: 18px; }
    .rg-eval-card { padding: 30px 26px 28px; }

    .rg-question-row {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .rg-question-num { width: 44px; height: 44px; font-size: 13px; }
    .rg-question-h3 { padding-top: 8px; }

    .rg-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .rg-proof-stat { padding: 0 0 0 18px; }
    .rg-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .rg-proof { padding: 44px 28px; border-radius: 22px; }

    .rg-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .rg-engage-col { padding: 26px 22px; }
    .rg-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .rg-engage-col:nth-child(2n) { border-right: none; }
    .rg-engage-col:nth-child(-n+4) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .rg-page .rg-intro,
    .rg-page .rg-section,
    .rg-page .rg-proof-section { padding: 60px 0; }

    .rg-prose-emphasis { font-size: 18px !important; }

    .rg-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .rg-proof-stat { padding: 0; border-left: none; }

    .rg-engage-panel { grid-template-columns: 1fr; }
    .rg-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .rg-engage-col:last-child { border-bottom: none; }
    .rg-engage-num { font-size: 56px; }
    .rg-engage-h3 { font-size: 18px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · RETRIEVAL-AUGMENTED GENERATION PAGE (1.1.02)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  MULTIMODAL AI PAGE (1.1.03)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: multimodal-ai.html
   Body class: .mm-page
   Parent: Generative AI (EnGen Practice) → Discipline 03
   All styles below are scoped under .mm-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   MM · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.mm-page .mm-intro,
.mm-page .mm-section,
.mm-page .mm-proof-section {
    padding: 110px 0;
}
.mm-page .pe-cta { padding: 110px 0; }

.mm-page .mm-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   MM-2 · INTRO NARRATIVE
   ========================================================= */
.mm-intro { position: relative; background: #fff; overflow: hidden; }
.mm-intro-shell {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.mm-intro-body {
    font: 500 clamp(20px, 2.4vw, 26px)/1.55 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   MM · COMMON SECTION SCAFFOLDING
   ========================================================= */
.mm-section { position: relative; overflow: hidden; }

.mm-section-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}
.mm-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.mm-section-title .accent { color: var(--brand, #b10f1a); }

.mm-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

/* Editorial prose */
.mm-prose { max-width: 820px; margin: 0 auto; }
.mm-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.mm-prose p:last-child { margin-bottom: 0; }
.mm-prose-close { margin-top: 40px; text-align: center; }


/* =========================================================
   MM-3 · SCENARIO GRID — 3 callout cards with format icons
   Distinct from checklist style; each scenario gets a
   prominent icon + tag + body to emphasise the format.
   ========================================================= */
.mm-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 40px auto 0;
}

.mm-scenario {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 30px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.mm-scenario:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 24px 48px -22px rgba(177, 15, 26, .22);
}

.mm-scenario-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand, #b10f1a) 0%, #d4202d 100%);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 26px -12px rgba(177, 15, 26, .55);
    margin-bottom: 20px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mm-scenario:hover .mm-scenario-icon { transform: rotate(-6deg) scale(1.05); }

.mm-scenario-tag {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: var(--brand, #b10f1a);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.mm-scenario p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   MM-4 · CHECKLIST (2-col)
   ========================================================= */
.mm-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.mm-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mm-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.mm-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   MM-5 · HOW ENTIOVI BUILDS — NUMBERED ARCHITECTURAL LIST
   ========================================================= */
.mm-build-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.mm-build-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.mm-build-row:hover { padding-left: 8px; }

.mm-build-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.mm-build-content { max-width: 760px; }
.mm-build-h3 {
    font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 4px;
}
.mm-build-sub {
    font: 500 14px/1.4 "Inter", sans-serif !important;
    color: var(--brand, #b10f1a);
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mm-build-content p:last-of-type {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   MM-6 · WHERE MULTIMODAL — TWO-TIER (summary + detail)
   ========================================================= */
.mm-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto 64px;
}
.mm-summary-card {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    padding: 26px 24px;
    transition: border-color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mm-summary-card:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 15, 26, .25);
}
.mm-summary-h4 {
    font: 700 17px/1.2 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: var(--brand, #b10f1a);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mm-summary-card p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}

/* Detailed industries — 5 horizontal rows with icon + content */
.mm-industry-detail-list {
    max-width: 1080px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.mm-industry-detail {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 32px;
    align-items: start;
    padding: 34px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.mm-industry-detail:hover { padding-left: 8px; }

.mm-industry-detail-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 19px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
    margin-top: 4px;
}
.mm-industry-detail:hover .mm-industry-detail-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.mm-industry-detail-content { max-width: 820px; }
.mm-industry-detail-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 4px;
}
.mm-industry-detail-sub {
    font: 500 13.5px/1.4 "Inter", sans-serif !important;
    color: var(--brand, #b10f1a);
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.mm-industry-detail-content p:last-of-type {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   MM-7 · RESEARCH PERSPECTIVE — 2x2 GRID
   ========================================================= */
.mm-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.mm-research-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.mm-research-card::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.mm-research-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.mm-research-card:hover::before { width: 96px; }

.mm-research-h3 {
    font: 700 21px/1.28 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.mm-research-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   MM-8 · FIVE QUESTIONS — Q&A LIST
   ========================================================= */
.mm-questions-list { max-width: 980px; margin: 0 auto; }
.mm-question-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 36px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mm-question-row:first-child { border-top: 1px solid rgba(0, 0, 0, .08); }

.mm-question-num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--brand, #b10f1a);
    color: #fff;
    border-radius: 50%;
    font: 700 15px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 6px #fff,
        0 0 0 7px rgba(177, 15, 26, .14),
        0 12px 26px -12px rgba(177, 15, 26, .55);
}

.mm-question-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-top: 14px;
}
.mm-question-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   MM-9 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.mm-proof-section { background: #fff; }
.mm-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.mm-proof-head { text-align: center; margin-bottom: 36px; }

.mm-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.mm-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.mm-proof-stat:first-child { border-left: none; padding-left: 0; }

.mm-proof-num {
    font: 800 clamp(36px, 4.4vw, 60px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.mm-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   MM-10 · HOW ENTIOVI ENGAGES — 4-PHASE PANEL
   ========================================================= */
.mm-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.mm-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.mm-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.mm-engage-col:last-child { border-right: none; }
.mm-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.mm-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.mm-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mm-engage-col:hover .mm-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.mm-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.mm-engage-num {
    font: 800 clamp(48px, 4.6vw, 72px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.mm-engage-col:hover .mm-engage-num {
    color: var(--brand, #b10f1a);
}

.mm-engage-duration {
    display: inline-block;
    font: 500 11.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.mm-engage-h3 {
    font: 700 clamp(17px, 1.5vw, 20px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.mm-engage-col p {
    font: 400 13.8px/1.62 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   MM · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .mm-scenario-grid { grid-template-columns: 1fr; gap: 18px; }
    .mm-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .mm-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .mm-engage-panel::before { display: none; }
    .mm-engage-col:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .mm-engage-col:nth-child(even) { border-right: none; }
    .mm-engage-col:nth-child(-n+2) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .mm-page .mm-intro,
    .mm-page .mm-section,
    .mm-page .mm-proof-section { padding: 80px 0; }

    .mm-checklist { grid-template-columns: 1fr; gap: 0; }

    .mm-build-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .mm-build-row:hover { padding-left: 0; }

    .mm-summary-grid { grid-template-columns: 1fr; }
    .mm-industry-detail {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .mm-industry-detail:hover { padding-left: 0; }
    .mm-industry-detail-icon { width: 44px; height: 44px; font-size: 16px; }

    .mm-research-grid { grid-template-columns: 1fr; gap: 18px; }
    .mm-research-card { padding: 30px 26px 28px; }

    .mm-question-row {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .mm-question-num { width: 44px; height: 44px; font-size: 13px; }
    .mm-question-h3 { padding-top: 8px; }

    .mm-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .mm-proof-stat { padding: 0 0 0 18px; }
    .mm-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .mm-proof { padding: 44px 28px; border-radius: 22px; }
}

@media (max-width: 575px) {
    .mm-page .mm-intro,
    .mm-page .mm-section,
    .mm-page .mm-proof-section { padding: 60px 0; }

    .mm-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .mm-proof-stat { padding: 0; border-left: none; }

    .mm-engage-panel { grid-template-columns: 1fr; }
    .mm-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .mm-engage-col:last-child { border-bottom: none; }
    .mm-engage-col:nth-child(odd) { border-right: none; }
    .mm-engage-num { font-size: 56px; }
    .mm-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · MULTIMODAL AI PAGE (1.1.03)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  PROMPT ENGINEERING & EVALUATION PAGE (1.1.04)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: prompt-engineering.html
   Body class: .pq-page
   Parent: Generative AI (EnGen Practice) → Discipline 04
   All styles below are scoped under .pq-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   PQ · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.pq-page .pq-intro,
.pq-page .pq-section,
.pq-page .pq-proof-section {
    padding: 110px 0;
}
.pq-page .pe-cta { padding: 110px 0; }

.pq-page .pq-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   PQ-2 · INTRO NARRATIVE
   ========================================================= */
.pq-intro { position: relative; background: #fff; overflow: hidden; }
.pq-intro-shell {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.pq-intro-body {
    font: 500 clamp(20px, 2.4vw, 26px)/1.55 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   PQ · COMMON SECTION SCAFFOLDING
   ========================================================= */
.pq-section { position: relative; overflow: hidden; }

.pq-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.pq-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.pq-section-title .accent { color: var(--brand, #b10f1a); }

.pq-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.pq-prose { max-width: 820px; margin: 0 auto; }
.pq-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.pq-prose p:last-child { margin-bottom: 0; }
.pq-prose-close { margin-top: 40px; text-align: center; }


/* =========================================================
   PQ-3 · CONSEQUENCE GRID — 3 callout cards
   ========================================================= */
.pq-consequence-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 40px auto 0;
}
.pq-consequence-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 30px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.pq-consequence-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 24px 48px -22px rgba(177, 15, 26, .22);
}
.pq-consequence-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 19px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.pq-consequence-card:hover .pq-consequence-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.pq-consequence-card p {
    font: 400 14.8px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   PQ-4 · DISCIPLINE GRID — 6 cards in 2-col grid (3 rows)
   ========================================================= */
.pq-discipline-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.pq-discipline-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.pq-discipline-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.pq-discipline-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.pq-discipline-card:hover::before { width: 96px; }

.pq-discipline-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
    margin-top: 4px;
}
.pq-discipline-h3 {
    font: 700 21px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.pq-discipline-card p {
    font: 400 14.8px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   PQ-5 · DIMENSIONS — 5-card horizontal strip
   Spec-sheet style with monospace labels.
   ========================================================= */
.pq-dim-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    max-width: 1240px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    overflow: hidden;
}
.pq-dim-card {
    padding: 30px 22px 28px;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.pq-dim-card:last-child { border-right: none; }
.pq-dim-card:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .035) 0%, rgba(177, 15, 26, 0) 100%);
}

.pq-dim-mono {
    display: inline-block;
    font: 500 10.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: var(--brand, #b10f1a);
    margin-bottom: 14px;
}
.pq-dim-h3 {
    font: 700 17px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pq-dim-card p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   PQ-6 · APPROACH — NUMBERED VERTICAL LIST (5 rows)
   ========================================================= */
.pq-approach-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.pq-approach-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.pq-approach-row:hover { padding-left: 8px; }

.pq-approach-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.pq-approach-content { max-width: 760px; }
.pq-approach-h3 {
    font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.pq-approach-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   PQ-7 · RESEARCH PERSPECTIVE — 2-COL GRID with 5th wide
   ========================================================= */
.pq-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.pq-research-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.pq-research-card::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.pq-research-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.pq-research-card:hover::before { width: 96px; }

.pq-research-wide { grid-column: 1 / -1; }

.pq-research-h3 {
    font: 700 21px/1.28 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.pq-research-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   PQ-8 · SIX QUESTIONS — Q&A LIST
   ========================================================= */
.pq-questions-list { max-width: 980px; margin: 0 auto; }
.pq-question-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 36px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pq-question-row:first-child { border-top: 1px solid rgba(0, 0, 0, .08); }

.pq-question-num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--brand, #b10f1a);
    color: #fff;
    border-radius: 50%;
    font: 700 15px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 6px #fff,
        0 0 0 7px rgba(177, 15, 26, .14),
        0 12px 26px -12px rgba(177, 15, 26, .55);
}

.pq-question-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-top: 14px;
}
.pq-question-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   PQ-9 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.pq-proof-section { background: #fff; }
.pq-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.pq-proof-head { text-align: center; margin-bottom: 36px; }

.pq-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.pq-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.pq-proof-stat:first-child { border-left: none; padding-left: 0; }

.pq-proof-num {
    font: 800 clamp(34px, 4.2vw, 56px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.pq-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   PQ-10 · 5-PHASE PANEL
   ========================================================= */
.pq-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.pq-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.pq-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 26px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.pq-engage-col:last-child { border-right: none; }
.pq-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.pq-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.pq-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.pq-engage-col:hover .pq-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.pq-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.pq-engage-num {
    font: 800 clamp(44px, 4vw, 60px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.pq-engage-col:hover .pq-engage-num {
    color: var(--brand, #b10f1a);
}

.pq-engage-duration {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.pq-engage-h3 {
    font: 700 clamp(16px, 1.4vw, 18px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.pq-engage-col p {
    font: 400 13.5px/1.62 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   PQ · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .pq-consequence-grid { grid-template-columns: 1fr; gap: 18px; }
    .pq-discipline-grid { grid-template-columns: 1fr; gap: 18px; }

    /* Dimensions strip → 3+2 layout */
    .pq-dim-grid {
        grid-template-columns: repeat(3, 1fr);
        border-radius: 22px;
    }
    .pq-dim-card { border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .pq-dim-card:nth-child(3n) { border-right: none; }
    .pq-dim-card:nth-child(n+4) { border-bottom: none; }

    .pq-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .pq-engage-panel::before { display: none; }
    .pq-engage-col:nth-child(3n) { border-right: none; }
    .pq-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .pq-page .pq-intro,
    .pq-page .pq-section,
    .pq-page .pq-proof-section { padding: 80px 0; }

    .pq-approach-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .pq-approach-row:hover { padding-left: 0; }

    .pq-research-grid { grid-template-columns: 1fr; gap: 18px; }
    .pq-research-wide { grid-column: 1; }
    .pq-research-card { padding: 30px 26px 28px; }

    .pq-discipline-card { padding: 30px 26px 28px; }

    .pq-dim-grid { grid-template-columns: 1fr; }
    .pq-dim-card { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .pq-dim-card:last-child { border-bottom: none; }

    .pq-question-row {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .pq-question-num { width: 44px; height: 44px; font-size: 13px; }
    .pq-question-h3 { padding-top: 8px; }

    .pq-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .pq-proof-stat { padding: 0 0 0 18px; }
    .pq-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .pq-proof { padding: 44px 28px; border-radius: 22px; }

    .pq-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .pq-engage-col { padding: 26px 22px; }
    .pq-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .pq-engage-col:nth-child(2n) { border-right: none; }
    .pq-engage-col:nth-child(-n+4) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .pq-page .pq-intro,
    .pq-page .pq-section,
    .pq-page .pq-proof-section { padding: 60px 0; }

    .pq-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .pq-proof-stat { padding: 0; border-left: none; }

    .pq-engage-panel { grid-template-columns: 1fr; }
    .pq-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .pq-engage-col:last-child { border-bottom: none; }
    .pq-engage-num { font-size: 56px; }
    .pq-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · PROMPT ENGINEERING & EVALUATION PAGE (1.1.04)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  ENTERPRISE GENAI DEPLOYMENT PAGE (1.1.05)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: enterprise-genai-deployment.html
   Body class: .eg-page
   Parent: Generative AI (EnGen Practice) → Discipline 05
   All styles below are scoped under .eg-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   EG · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.eg-page .eg-intro,
.eg-page .eg-section {
    padding: 110px 0;
}
.eg-page .pe-cta { padding: 120px 0; }

.eg-page .eg-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   EG-2 · INTRO NARRATIVE
   ========================================================= */
.eg-intro { position: relative; background: #fff; overflow: hidden; }
.eg-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.eg-intro-body {
    font: 500 clamp(19px, 2.2vw, 24px)/1.6 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   EG · COMMON SECTION SCAFFOLDING
   ========================================================= */
.eg-section { position: relative; overflow: hidden; }

.eg-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.eg-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.eg-section-title .accent { color: var(--brand, #b10f1a); }

.eg-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.eg-prose { max-width: 920px; margin: 0 auto; }
.eg-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 24px;
}
.eg-prose p:last-child { margin-bottom: 0; }


/* =========================================================
   EG-5 · STACK ANATOMY — 7-ROW NUMBERED LIST
   ========================================================= */
.eg-stack-list {
    max-width: 1080px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.eg-stack-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.eg-stack-row:hover { padding-left: 8px; }

.eg-stack-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.eg-stack-content { max-width: 820px; }
.eg-stack-h3 {
    font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.eg-stack-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   EG-6 · DEPLOYMENT TOPOLOGIES — 2-COL GRID, 5th WIDE
   ========================================================= */
.eg-topology-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.eg-topology-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.eg-topology-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.eg-topology-wide { grid-column: 1 / -1; }

.eg-topology-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 19px;
    margin-bottom: 20px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.eg-topology-card:hover .eg-topology-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.eg-topology-h3 {
    font: 700 22px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.eg-topology-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   EG-7 · PAYBACK CHECKLIST — 7-ITEM, 2-COL
   ========================================================= */
.eg-payback-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 0;
}
.eg-payback-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.eg-payback-list li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.eg-payback-list li span {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   EG-8 · COMMITMENTS — NUMBERED VERTICAL LIST
   ========================================================= */
.eg-commit-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.eg-commit-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.eg-commit-row:hover { padding-left: 8px; }

.eg-commit-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.eg-commit-content { max-width: 760px; }
.eg-commit-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.eg-commit-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   EG · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .eg-page .eg-intro,
    .eg-page .eg-section { padding: 80px 0; }

    .eg-stack-row,
    .eg-commit-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .eg-stack-row:hover,
    .eg-commit-row:hover { padding-left: 0; }

    .eg-topology-grid { grid-template-columns: 1fr; gap: 18px; }
    .eg-topology-wide { grid-column: 1; }
    .eg-topology-card { padding: 30px 26px 28px; }

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

@media (max-width: 575px) {
    .eg-page .eg-intro,
    .eg-page .eg-section { padding: 60px 0; }

    .eg-prose p { font-size: 15.5px; line-height: 1.72; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · ENTERPRISE GENAI DEPLOYMENT PAGE (1.1.05)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  AGENTIC AI & AUTOMATION PAGE (EnAct — 1.2)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: agentic-ai-automation.html
   Body class: .aa-page
   Mirrors the generative-ai (EnGen) structure with 4
   disciplines instead of 5, plus an outcomes/proof section,
   industry use-cases, differentiators, and shortcut grid.
   All styles below are scoped under .aa-page.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   AA · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.aa-page .aa-intro,
.aa-page .aa-changes,
.aa-page .aa-disc,
.aa-page .aa-deliver,
.aa-page .aa-where,
.aa-page .aa-diff,
.aa-page .aa-process {
    padding: 110px 0;
}
.aa-page .pe-cta { padding: 110px 0; }

/* =========================================================
   AA · HERO — EnAct brand heading + smaller product subtitle
   ========================================================= */
.aa-page .aa-hero-brand {
    font-size: 104px;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin-bottom: 18px;
}
.aa-page .aa-hero-brand .accent {
    color: var(--brand);
    background: none;
    -webkit-text-fill-color: var(--brand);
}
.aa-page .aa-hero-product {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 22px;
}
@media (max-width: 575px) {
    .aa-page .aa-hero-brand { font-size: clamp(56px, 18vw, 88px); margin-bottom: 12px; }
    .aa-page .aa-hero-product { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 16px; }
}


/* =========================================================
   AA-2 · INTRO NARRATIVE — RIGEL CONTEXT
   ========================================================= */
.aa-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.aa-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.aa-intro-pull {
    font: 600 clamp(28px, 3.4vw, 40px)/1.32 "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 26px auto 24px;
    max-width: 880px;
}
.aa-intro-body {
    font: 400 19px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}


/* =========================================================
   AA-3 · WHERE GENERATIVE AI ENDS — EDITORIAL
   ========================================================= */
.aa-changes {
    position: relative;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.aa-changes-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 48px;
}
.aa-changes-title {
    font: 800 clamp(40px, 6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 0;
}
.aa-changes-title .accent { color: var(--brand, #b10f1a); }

.aa-changes-pull {
    max-width: 940px;
    margin: 0 auto 40px;
    padding: 32px 40px;
    border-left: 4px solid var(--brand, #b10f1a);
    background: linear-gradient(90deg, rgba(177, 15, 26, .045) 0%, rgba(177, 15, 26, 0) 100%);
    border-radius: 0 16px 16px 0;
}
.aa-changes-pull p {
    font: 700 clamp(24px, 3vw, 34px)/1.32 "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 0;
}

.aa-prose { max-width: 880px; margin: 0 auto; }
.aa-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.aa-prose p:last-child { margin-bottom: 0; }


/* =========================================================
   AA-4 · FOUR DISCIPLINES — MODULAR EXPLORE CARDS
   Mirrors the .ga-disc pattern but scoped for .aa-page.
   ========================================================= */
.aa-disc {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.aa-disc-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.aa-disc-section-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 22px;
}
.aa-disc-section-title .accent { color: var(--brand, #b10f1a); }
.aa-disc-section-title .muted { color: #6e6e73; font-weight: 700; }

.aa-disc-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.aa-disc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
}

.aa-disc-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    padding: 44px 40px 36px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        border-color .45s ease,
        box-shadow .55s ease;
}
.aa-disc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(177, 15, 26, .045) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .55s ease;
    z-index: -1;
}
.aa-disc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
    text-decoration: none;
    color: inherit;
}
.aa-disc-card:hover::before { opacity: 1; }

.aa-disc-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    margin-bottom: 14px;
}

.aa-disc-rule {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    margin-bottom: 20px;
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.aa-disc-card:hover .aa-disc-rule { width: 96px; }

.aa-disc-title {
    font: 700 clamp(22px, 2.4vw, 28px)/1.18 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.aa-disc-tagline {
    font: 500 16px/1.5 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    letter-spacing: -.005em;
}

.aa-disc-body {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 28px;
}

.aa-disc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    width: 100%;
    transition: color .35s ease;
}
.aa-disc-cta i {
    font-size: 12px;
    color: var(--brand, #b10f1a);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aa-disc-card:hover .aa-disc-cta { color: var(--brand, #b10f1a); }
.aa-disc-card:hover .aa-disc-cta i { transform: translateX(8px); }


/* =========================================================
   AA-5 · WHAT AGENTIC AI ACTUALLY DELIVERS
   5 numbered outcomes + 4-stat proof points.
   ========================================================= */
.aa-deliver {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.aa-deliver-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}
.aa-deliver-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.aa-deliver-title .accent { color: var(--brand, #b10f1a); }
.aa-deliver-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.aa-deliver-list {
    max-width: 1040px;
    margin: 0 auto 64px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.aa-deliver-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.aa-deliver-row:hover { padding-left: 8px; }

.aa-deliver-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.aa-deliver-content { max-width: 800px; }
.aa-deliver-h3 {
    font: 700 clamp(20px, 2.2vw, 24px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.aa-deliver-content p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* Proof points — 4-stat panel inside aa-deliver */
.aa-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.aa-proof-head { text-align: center; margin-bottom: 36px; }

.aa-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.aa-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.aa-proof-stat:first-child { border-left: none; padding-left: 0; }
.aa-proof-num {
    font: 800 clamp(36px, 4.4vw, 60px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.aa-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   AA-6 · WHERE AGENTS EARN THEIR PLACE — 7-CARD GRID
   3-col with 7th card spanning full width.
   ========================================================= */
.aa-where {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.aa-where-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.aa-where-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 0 0 18px;
}
.aa-where-title .accent { color: var(--brand, #b10f1a); }
.aa-where-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.aa-where-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}

.aa-where-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                border-color .45s ease,
                box-shadow .45s ease;
}
/* Primary-color hover: the entire card fills with brand red and the
   text/icon flip to white for a dramatic, premium hover state. */
.aa-where-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .35);
}
.aa-where-wide { grid-column: 1 / -1; }

.aa-where-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aa-where-card:hover .aa-where-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    transform: scale(1.05);
}
.aa-where-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    transition: color .45s ease, border-bottom-color .45s ease;
}
.aa-where-card:hover .aa-where-h3 {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.22);
}
.aa-where-card p {
    font: 400 14.5px/1.68 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    transition: color .45s ease;
}
.aa-where-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
   AA-7 · DEMO vs PRODUCTION — DIFFERENTIATORS
   2x2 grid with 5th card spanning full width.
   ========================================================= */
.aa-diff {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.aa-diff-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 56px;
}
.aa-diff-title {
    font: 800 clamp(40px, 5.8vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 0 0 22px;
}
.aa-diff-title .accent { color: var(--brand, #b10f1a); }
.aa-diff-deck {
    font: 400 16.5px/1.7 "Inter", sans-serif;
    color: #424245;
    max-width: 880px;
    margin: 0 auto;
}

.aa-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.aa-diff-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.aa-diff-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.aa-diff-wide { grid-column: 1 / -1; }

.aa-diff-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
    margin-bottom: 18px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aa-diff-card:hover .aa-diff-icon {
    transform: scale(1.05);
}

/* Five distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.aa-diff-card:nth-child(1) {
    background: #ffe8dc;
}
.aa-diff-card:nth-child(1):hover {
    background: #fdd6c0;
}
.aa-diff-card:nth-child(1) .aa-diff-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.aa-diff-card:nth-child(2) {
    background: #ece5fb;
}
.aa-diff-card:nth-child(2):hover {
    background: #dccff5;
}
.aa-diff-card:nth-child(2) .aa-diff-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.aa-diff-card:nth-child(3) {
    background: #e3f0d6;
}
.aa-diff-card:nth-child(3):hover {
    background: #cee5b5;
}
.aa-diff-card:nth-child(3) .aa-diff-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.aa-diff-card:nth-child(4) {
    background: #dceffa;
}
.aa-diff-card:nth-child(4):hover {
    background: #b8dcf2;
}
.aa-diff-card:nth-child(4) .aa-diff-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose (wide) */
.aa-diff-card:nth-child(5) {
    background: #fde0ec;
}
.aa-diff-card:nth-child(5):hover {
    background: #fbcad8;
}
.aa-diff-card:nth-child(5) .aa-diff-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}
.aa-diff-h3 {
    font: 700 18.5px/1.3 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.aa-diff-card p {
    font: 400 15px/1.68 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AA-8 · SHORTCUT GRID — 4 link cards to disciplines
   ========================================================= */
.aa-process {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.aa-process-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.aa-process-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 0 0 22px;
}
.aa-process-title .accent { color: var(--brand, #b10f1a); }
.aa-process-deck {
    font: 400 16.5px/1.72 "Inter", sans-serif;
    color: #424245;
    max-width: 880px;
    margin: 0 auto;
}

.aa-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
}

.aa-shortcut-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 26px 28px;
    text-decoration: none;
    color: inherit;
    transition: background-color .45s ease,
                transform .45s cubic-bezier(.2, .8, .2, 1),
                box-shadow .45s ease;
}
.aa-shortcut-card:hover {
    transform: translateX(6px);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.aa-shortcut-arrow {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aa-shortcut-card:hover .aa-shortcut-arrow {
    transform: translateX(4px);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's arrow uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.aa-shortcut-card:nth-child(1) {
    background: #ffe8dc;
}
.aa-shortcut-card:nth-child(1):hover {
    background: #fdd6c0;
}
.aa-shortcut-card:nth-child(1) .aa-shortcut-arrow {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.aa-shortcut-card:nth-child(2) {
    background: #ece5fb;
}
.aa-shortcut-card:nth-child(2):hover {
    background: #dccff5;
}
.aa-shortcut-card:nth-child(2) .aa-shortcut-arrow {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.aa-shortcut-card:nth-child(3) {
    background: #e3f0d6;
}
.aa-shortcut-card:nth-child(3):hover {
    background: #cee5b5;
}
.aa-shortcut-card:nth-child(3) .aa-shortcut-arrow {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.aa-shortcut-card:nth-child(4) {
    background: #dceffa;
}
.aa-shortcut-card:nth-child(4):hover {
    background: #b8dcf2;
}
.aa-shortcut-card:nth-child(4) .aa-shortcut-arrow {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.aa-shortcut-card h3 {
    font: 700 17px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
    padding-right: 48px;
}
.aa-shortcut-card p {
    font: 400 14px/1.5 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AA · RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .aa-page .aa-intro,
    .aa-page .aa-changes,
    .aa-page .aa-disc,
    .aa-page .aa-deliver,
    .aa-page .aa-where,
    .aa-page .aa-diff,
    .aa-page .aa-process { padding: 80px 0; }

    .aa-intro-pull { font-size: clamp(24px, 5vw, 32px); }
    .aa-changes-pull { padding: 26px 28px; }
    .aa-changes-pull p { font-size: 22px; }

    .aa-disc-grid { grid-template-columns: 1fr; gap: 22px; }
    .aa-disc-card { padding: 36px 30px 30px; border-radius: 22px; }

    .aa-deliver-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .aa-deliver-row:hover { padding-left: 0; }

    .aa-proof { padding: 44px 28px; border-radius: 22px; }
    .aa-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .aa-proof-stat { padding: 0 0 0 18px; }
    .aa-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }

    .aa-where-grid { grid-template-columns: 1fr; gap: 18px; }
    .aa-where-wide { grid-column: 1; }
    .aa-where-card { padding: 28px 24px 26px; }

    .aa-diff-grid { grid-template-columns: 1fr; gap: 18px; }
    .aa-diff-wide { grid-column: 1; }
    .aa-diff-card { padding: 30px 26px 28px; }

    .aa-shortcut-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .aa-page .aa-intro,
    .aa-page .aa-changes,
    .aa-page .aa-disc,
    .aa-page .aa-deliver,
    .aa-page .aa-where,
    .aa-page .aa-diff,
    .aa-page .aa-process { padding: 60px 0; }

    .aa-changes-pull { padding: 22px 20px; }
    .aa-changes-pull p { font-size: 19px; }

    .aa-disc-card { padding: 30px 24px 26px; }
    .aa-disc-tagline { font-size: 15px; padding-bottom: 14px; margin-bottom: 16px; }
    .aa-disc-body { font-size: 14.5px; }

    .aa-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .aa-proof-stat { padding: 0; border-left: none; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · AGENTIC AI & AUTOMATION PAGE (EnAct — 1.2)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  AI AGENT DESIGN PAGE (1.2.01)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: ai-agent-design.html
   Body class: .ad-page
   Parent: Agentic AI & Automation (EnAct Practice) → Discipline 01
   All styles below are scoped under .ad-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   AD · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.ad-page .ad-intro,
.ad-page .ad-section,
.ad-page .ad-proof-section {
    padding: 110px 0;
}
.ad-page .pe-cta { padding: 110px 0; }

.ad-page .ad-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   AD-2 · INTRO NARRATIVE
   ========================================================= */
.ad-intro { position: relative; background: #fff; overflow: hidden; }
.ad-intro-shell {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.ad-intro-body {
    font: 500 clamp(20px, 2.4vw, 26px)/1.55 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   AD · COMMON SECTION SCAFFOLDING
   ========================================================= */
.ad-section { position: relative; overflow: hidden; }

.ad-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.ad-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.ad-section-title .accent { color: var(--brand, #b10f1a); }

.ad-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.ad-prose { max-width: 820px; margin: 0 auto; }
.ad-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.ad-prose p:last-child { margin-bottom: 0; }
.ad-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}


/* =========================================================
   AD-5 · ANATOMY — 6-ROW NUMBERED LIST
   ========================================================= */
.ad-anatomy-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.ad-anatomy-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.ad-anatomy-row:hover { padding-left: 8px; }

.ad-anatomy-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.ad-anatomy-content { max-width: 760px; }
.ad-anatomy-h3 {
    font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 4px;
}
.ad-anatomy-sub {
    font: 500 14px/1.4 "Inter", sans-serif !important;
    color: var(--brand, #b10f1a);
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.ad-anatomy-content p:last-of-type {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AD-6 · ARCHITECTURE AXES — 5-card grid (5th wide)
   ========================================================= */
.ad-axes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.ad-axes-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.ad-axes-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.ad-axes-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.ad-axes-card:hover::before { width: 96px; }
.ad-axes-wide { grid-column: 1 / -1; }

.ad-axes-mono {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: #6e6e73;
    margin-bottom: 14px;
    margin-top: 4px;
}
.ad-axes-h3 {
    font: 700 21px/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.ad-axes-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   AD-7 · RESEARCH PERSPECTIVE — 2x2 GRID
   ========================================================= */
.ad-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.ad-research-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.ad-research-card::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.ad-research-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.ad-research-card:hover::before { width: 96px; }

.ad-research-h3 {
    font: 700 21px/1.28 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.ad-research-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   AD-8 · INDUSTRIES — 2x2 grid + 5th wide
   ========================================================= */
.ad-industry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.ad-industry-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.ad-industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.ad-industry-wide { grid-column: 1 / -1; }

.ad-industry-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 20px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ad-industry-card:hover .ad-industry-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.ad-industry-h3 {
    font: 700 22px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 6px;
}
.ad-industry-sub {
    font: 500 13.5px/1.4 "Inter", sans-serif !important;
    color: var(--brand, #b10f1a);
    margin: 0 0 16px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.ad-industry-card p:last-child {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   AD-9 · SIX DECISIONS — Q&A LIST
   ========================================================= */
.ad-questions-list { max-width: 980px; margin: 0 auto; }
.ad-question-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 36px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.ad-question-row:first-child { border-top: 1px solid rgba(0, 0, 0, .08); }

.ad-question-num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--brand, #b10f1a);
    color: #fff;
    border-radius: 50%;
    font: 700 15px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 6px #fafafa,
        0 0 0 7px rgba(177, 15, 26, .14),
        0 12px 26px -12px rgba(177, 15, 26, .55);
}

.ad-question-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-top: 14px;
}
.ad-question-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AD-10 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.ad-proof-section { background: #fff; }
.ad-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.ad-proof-head { text-align: center; margin-bottom: 36px; }

.ad-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.ad-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.ad-proof-stat:first-child { border-left: none; padding-left: 0; }

.ad-proof-num {
    font: 800 clamp(36px, 4.4vw, 60px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.ad-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   AD-11 · 5-PHASE PANEL
   ========================================================= */
.ad-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.ad-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.ad-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 26px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.ad-engage-col:last-child { border-right: none; }
.ad-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.ad-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.ad-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ad-engage-col:hover .ad-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.ad-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.ad-engage-num {
    font: 800 clamp(44px, 4vw, 60px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.ad-engage-col:hover .ad-engage-num {
    color: var(--brand, #b10f1a);
}

.ad-engage-duration {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ad-engage-h3 {
    font: 700 clamp(16px, 1.4vw, 19px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.ad-engage-col p {
    font: 400 13.5px/1.62 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AD · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .ad-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .ad-engage-panel::before { display: none; }
    .ad-engage-col:nth-child(3n) { border-right: none; }
    .ad-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .ad-page .ad-intro,
    .ad-page .ad-section,
    .ad-page .ad-proof-section { padding: 80px 0; }

    .ad-anatomy-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .ad-anatomy-row:hover { padding-left: 0; }

    .ad-axes-grid { grid-template-columns: 1fr; gap: 18px; }
    .ad-axes-wide { grid-column: 1; }
    .ad-axes-card { padding: 30px 26px 28px; }

    .ad-research-grid { grid-template-columns: 1fr; gap: 18px; }
    .ad-research-card { padding: 30px 26px 28px; }

    .ad-industry-grid { grid-template-columns: 1fr; gap: 18px; }
    .ad-industry-wide { grid-column: 1; }
    .ad-industry-card { padding: 30px 26px 28px; }

    .ad-question-row {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .ad-question-num { width: 44px; height: 44px; font-size: 13px; }
    .ad-question-h3 { padding-top: 8px; }

    .ad-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .ad-proof-stat { padding: 0 0 0 18px; }
    .ad-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .ad-proof { padding: 44px 28px; border-radius: 22px; }

    .ad-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .ad-engage-col { padding: 26px 22px; }
    .ad-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .ad-engage-col:nth-child(2n) { border-right: none; }
    .ad-engage-col:nth-child(-n+4) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .ad-page .ad-intro,
    .ad-page .ad-section,
    .ad-page .ad-proof-section { padding: 60px 0; }

    .ad-prose-emphasis { font-size: 18px !important; }

    .ad-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .ad-proof-stat { padding: 0; border-left: none; }

    .ad-engage-panel { grid-template-columns: 1fr; }
    .ad-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .ad-engage-col:last-child { border-bottom: none; }
    .ad-engage-num { font-size: 56px; }
    .ad-engage-h3 { font-size: 18px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · AI AGENT DESIGN PAGE (1.2.01)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  ORCHESTRATION & MULTI-AGENT SYSTEMS PAGE (1.2.02)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: orchestration-multi-agent.html
   Body class: .om-page
   Parent: Agentic AI & Automation (EnAct Practice) → Discipline 02
   All styles below are scoped under .om-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   OM · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.om-page .om-intro,
.om-page .om-section,
.om-page .om-proof-section {
    padding: 110px 0;
}
.om-page .pe-cta { padding: 110px 0; }

.om-page .om-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   OM-2 · INTRO NARRATIVE
   ========================================================= */
.om-intro { position: relative; background: #fff; overflow: hidden; }
.om-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.om-intro-body {
    font: 500 clamp(19px, 2.2vw, 24px)/1.6 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   OM · COMMON SECTION SCAFFOLDING
   ========================================================= */
.om-section { position: relative; overflow: hidden; }

.om-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.om-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.om-section-title .accent { color: var(--brand, #b10f1a); }

.om-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.om-prose { max-width: 880px; margin: 0 auto; }
.om-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.om-prose p:last-child { margin-bottom: 0; }
.om-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}


/* =========================================================
   OM-5 · COORDINATION PATTERNS — 7 NUMBERED ROWS
   ========================================================= */
.om-pattern-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.om-pattern-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.om-pattern-row:hover { padding-left: 8px; }

.om-pattern-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.om-pattern-content { max-width: 800px; }
.om-pattern-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.om-pattern-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   OM-6 · ORCHESTRATION ARCHITECTURE — 5 COMPONENT CARDS
   ========================================================= */
.om-arch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.om-arch-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.om-arch-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.om-arch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.om-arch-card:hover::before { width: 96px; }
.om-arch-wide { grid-column: 1 / -1; }

.om-arch-mono {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: #6e6e73;
    margin-bottom: 14px;
    margin-top: 4px;
}
.om-arch-h3 {
    font: 700 22px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.om-arch-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   OM-7 · RESEARCH PERSPECTIVE — 5 CARDS (5th wide)
   ========================================================= */
.om-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.om-research-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.om-research-card::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.om-research-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.om-research-card:hover::before { width: 96px; }
.om-research-wide { grid-column: 1 / -1; }

.om-research-h3 {
    font: 700 21px/1.28 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.om-research-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   OM-8 · INDUSTRIES — 3-COL GRID with 7th wide
   ========================================================= */
.om-industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.om-industry-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.om-industry-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.om-industry-wide { grid-column: 1 / -1; }

.om-industry-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 17px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.om-industry-card:hover .om-industry-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.om-industry-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 4px;
}
.om-industry-sub {
    font: 500 13px/1.4 "Inter", sans-serif !important;
    color: var(--brand, #b10f1a);
    margin: 0 0 14px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.om-industry-card p:last-child {
    font: 400 14.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   OM-9 · SIX DECISIONS — Q&A LIST
   ========================================================= */
.om-questions-list { max-width: 980px; margin: 0 auto; }
.om-question-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 36px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.om-question-row:first-child { border-top: 1px solid rgba(0, 0, 0, .08); }

.om-question-num {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--brand, #b10f1a);
    color: #fff;
    border-radius: 50%;
    font: 700 15px/1 "Inter", sans-serif;
    letter-spacing: -.01em;
    box-shadow:
        0 0 0 6px #fafafa,
        0 0 0 7px rgba(177, 15, 26, .14),
        0 12px 26px -12px rgba(177, 15, 26, .55);
}

.om-question-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-top: 14px;
}
.om-question-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   OM-10 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.om-proof-section { background: #fff; }
.om-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.om-proof-head { text-align: center; margin-bottom: 36px; }

.om-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.om-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.om-proof-stat:first-child { border-left: none; padding-left: 0; }

.om-proof-num {
    font: 800 clamp(34px, 4.2vw, 56px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.om-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   OM-11 · 5-PHASE PANEL
   ========================================================= */
.om-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.om-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.om-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 26px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.om-engage-col:last-child { border-right: none; }
.om-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.om-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.om-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.om-engage-col:hover .om-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.om-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.om-engage-num {
    font: 800 clamp(44px, 4vw, 60px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.om-engage-col:hover .om-engage-num {
    color: var(--brand, #b10f1a);
}

.om-engage-duration {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.om-engage-h3 {
    font: 700 clamp(15px, 1.3vw, 17px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.om-engage-col p {
    font: 400 13px/1.62 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   OM · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .om-industry-grid { grid-template-columns: repeat(2, 1fr); }
    .om-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .om-engage-panel::before { display: none; }
    .om-engage-col:nth-child(3n) { border-right: none; }
    .om-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .om-page .om-intro,
    .om-page .om-section,
    .om-page .om-proof-section { padding: 80px 0; }

    .om-pattern-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 28px 0;
    }
    .om-pattern-row:hover { padding-left: 0; }

    .om-arch-grid { grid-template-columns: 1fr; gap: 18px; }
    .om-arch-wide { grid-column: 1; }
    .om-arch-card { padding: 30px 26px 28px; }

    .om-research-grid { grid-template-columns: 1fr; gap: 18px; }
    .om-research-wide { grid-column: 1; }
    .om-research-card { padding: 30px 26px 28px; }

    .om-industry-grid { grid-template-columns: 1fr; gap: 18px; }
    .om-industry-wide { grid-column: 1; }
    .om-industry-card { padding: 28px 24px 26px; }

    .om-question-row {
        grid-template-columns: 48px 1fr;
        column-gap: 22px;
        padding: 28px 0;
    }
    .om-question-num { width: 44px; height: 44px; font-size: 13px; }
    .om-question-h3 { padding-top: 8px; }

    .om-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .om-proof-stat { padding: 0 0 0 18px; }
    .om-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .om-proof { padding: 44px 28px; border-radius: 22px; }

    .om-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .om-engage-col { padding: 26px 22px; }
    .om-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .om-engage-col:nth-child(2n) { border-right: none; }
    .om-engage-col:nth-child(-n+4) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .om-page .om-intro,
    .om-page .om-section,
    .om-page .om-proof-section { padding: 60px 0; }

    .om-prose-emphasis { font-size: 18px !important; }

    .om-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .om-proof-stat { padding: 0; border-left: none; }

    .om-engage-panel { grid-template-columns: 1fr; }
    .om-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .om-engage-col:last-child { border-bottom: none; }
    .om-engage-num { font-size: 56px; }
    .om-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · ORCHESTRATION & MULTI-AGENT SYSTEMS PAGE (1.2.02)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  AUTONOMOUS WORKFLOW AUTOMATION PAGE (1.2.03)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: autonomous-workflow.html
   Body class: .aw-page
   Parent: Agentic AI & Automation (EnAct Practice) → Discipline 03
   All styles below are scoped under .aw-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   AW · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.aw-page .aw-section {
    padding: 110px 0;
}
.aw-page .pe-cta { padding: 110px 0; }

.aw-page .aw-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   AW · COMMON SECTION SCAFFOLDING
   ========================================================= */
.aw-section { position: relative; overflow: hidden; }

.aw-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.aw-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.aw-section-title .accent { color: var(--brand, #b10f1a); }

.aw-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.aw-prose { max-width: 880px; margin: 0 auto; }
.aw-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.aw-prose p:last-child { margin-bottom: 0; }
.aw-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}
.aw-prose-close { margin-top: 40px; text-align: center; }


/* =========================================================
   AW · CHECKLIST (re-used in AW-3, AW-8)
   ========================================================= */
.aw-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.aw-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.aw-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.aw-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}
.aw-checklist li strong {
    color: #0a0a0a;
    font-weight: 700;
}


/* =========================================================
   AW-4 · RPA COMPARISON — 5 cards (5th wide)
   ========================================================= */
.aw-vs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto 40px;
}
.aw-vs-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 32px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.aw-vs-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.aw-vs-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.aw-vs-card:hover::before { width: 96px; }
.aw-vs-wide { grid-column: 1 / -1; }

.aw-vs-mono {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: #6e6e73;
    margin-bottom: 14px;
    margin-top: 4px;
}
.aw-vs-h3 {
    font: 700 20px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.aw-vs-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   AW-5 · ANATOMY — 6-ROW NUMBERED LIST
   ========================================================= */
.aw-anatomy-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.aw-anatomy-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.aw-anatomy-row:hover { padding-left: 8px; }

.aw-anatomy-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}

.aw-anatomy-content { max-width: 800px; }
.aw-anatomy-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.2 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.aw-anatomy-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AW-6 · DESIGN PRINCIPLES — 3 CARDS
   ========================================================= */
.aw-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.aw-principle-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 36px 32px 32px;
    box-shadow:
        0 18px 40px -22px rgba(0, 0, 0, .15),
        0 0 0 1px rgba(0, 0, 0, .04) inset;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.aw-principle-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 56px -22px rgba(177, 15, 26, .18),
        0 0 0 1px rgba(177, 15, 26, .14) inset;
}

.aw-principle-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
}
.aw-principle-h3 {
    font: 700 20px/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.aw-principle-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   AW-7 · INTEGRATION — 5-ROW NUMBERED LIST
   ========================================================= */
.aw-integration-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.aw-integration-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.aw-integration-row:hover { padding-left: 8px; }

.aw-integration-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.aw-integration-content { max-width: 800px; }
.aw-integration-h3 {
    font: 700 20px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.aw-integration-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AW-9 · OUTCOMES + PROOF POINTS
   ========================================================= */
.aw-outcome-list {
    max-width: 1040px;
    margin: 0 auto 64px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.aw-outcome-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 28px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.aw-outcome-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 6px;
}
.aw-outcome-content { max-width: 800px; }
.aw-outcome-h3 {
    font: 700 20px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 8px;
}
.aw-outcome-content p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

.aw-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.aw-proof-head { text-align: center; margin-bottom: 36px; }

.aw-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.aw-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.aw-proof-stat:first-child { border-left: none; padding-left: 0; }

.aw-proof-num {
    font: 800 clamp(34px, 4vw, 52px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.aw-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   AW-10 · USE CASES — 9-item arrow list (2-col)
   ========================================================= */
.aw-usecase-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.aw-usecase-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .35s ease;
}
.aw-usecase-list li:hover { padding-left: 6px; }
.aw-usecase-list li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 10px;
    margin-top: 2px;
    transition: background .35s ease, color .35s ease;
}
.aw-usecase-list li:hover i {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.aw-usecase-list li span {
    font: 500 15px/1.55 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   AW-11 · 6-PHASE PANEL (extends previous panel pattern to 6 cols)
   ========================================================= */
.aw-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.aw-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.aw-engage-col {
    position: relative;
    z-index: 1;
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.aw-engage-col:last-child { border-right: none; }
.aw-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.aw-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 24px;
}
.aw-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aw-engage-col:hover .aw-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.aw-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.aw-engage-num {
    font: 800 clamp(36px, 3.4vw, 52px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: color .45s ease;
}
.aw-engage-col:hover .aw-engage-num {
    color: var(--brand, #b10f1a);
}

.aw-engage-h3 {
    font: 700 17px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.aw-engage-col p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   AW · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .aw-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .aw-engage-panel::before { display: none; }
    .aw-engage-col:nth-child(3n) { border-right: none; }
    .aw-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }

    .aw-principle-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 991px) {
    .aw-page .aw-section { padding: 80px 0; }

    .aw-checklist { grid-template-columns: 1fr; gap: 0; }
    .aw-usecase-list { grid-template-columns: 1fr; }

    .aw-vs-grid { grid-template-columns: 1fr; gap: 18px; }
    .aw-vs-wide { grid-column: 1; }
    .aw-vs-card { padding: 28px 26px 24px; }

    .aw-anatomy-row,
    .aw-integration-row,
    .aw-outcome-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .aw-anatomy-row:hover,
    .aw-integration-row:hover { padding-left: 0; }

    .aw-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .aw-proof-stat { padding: 0 0 0 18px; }
    .aw-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .aw-proof { padding: 44px 28px; border-radius: 22px; }

    .aw-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .aw-engage-col { padding: 26px 22px; }
    .aw-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .aw-engage-col:nth-child(2n) { border-right: none; }
    .aw-engage-col:nth-child(-n+5) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .aw-page .aw-section { padding: 60px 0; }

    .aw-prose-emphasis { font-size: 18px !important; }

    .aw-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .aw-proof-stat { padding: 0; border-left: none; }

    .aw-engage-panel { grid-template-columns: 1fr; }
    .aw-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .aw-engage-col:last-child { border-bottom: none; }
    .aw-engage-num { font-size: 48px; }
    .aw-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · AUTONOMOUS WORKFLOW AUTOMATION PAGE (1.2.03)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  TOOL-USE & API-CONNECTED AGENTS PAGE (1.2.04)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: tool-use-agents.html
   Body class: .tu-page
   Parent: Agentic AI & Automation (EnAct Practice) → Discipline 04
   All styles below are scoped under .tu-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   TU · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.tu-page .tu-section {
    padding: 110px 0;
}
.tu-page .pe-cta { padding: 110px 0; }

.tu-page .tu-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   TU · COMMON SECTION SCAFFOLDING
   ========================================================= */
.tu-section { position: relative; overflow: hidden; }

.tu-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.tu-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.tu-section-title .accent { color: var(--brand, #b10f1a); }

.tu-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.tu-prose { max-width: 880px; margin: 0 auto; }
.tu-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.tu-prose p:last-child { margin-bottom: 0; }
.tu-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}
.tu-prose-close { margin-top: 40px; text-align: center; }


/* =========================================================
   TU · CHECKLIST (re-used in TU-3, TU-5, TU-7, TU-9)
   ========================================================= */
.tu-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.tu-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.tu-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.tu-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}
.tu-checklist li strong {
    color: #0a0a0a;
    font-weight: 700;
}


/* =========================================================
   TU-4 · ENGINEERING LAYERS — 7-ROW NUMBERED LIST
   ========================================================= */
.tu-layer-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.tu-layer-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.tu-layer-row:hover { padding-left: 8px; }

.tu-layer-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 6px;
}
.tu-layer-content { max-width: 800px; }
.tu-layer-h3 {
    font: 700 20px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.tu-layer-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   TU-6 · PERMISSION PRINCIPLES — 3 CARDS
   ========================================================= */
.tu-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.tu-principle-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 36px 32px 32px;
    box-shadow:
        0 18px 40px -22px rgba(0, 0, 0, .15),
        0 0 0 1px rgba(0, 0, 0, .04) inset;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.tu-principle-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 56px -22px rgba(177, 15, 26, .18),
        0 0 0 1px rgba(177, 15, 26, .14) inset;
}

.tu-principle-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
}
.tu-principle-h3 {
    font: 700 20px/1.25 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.tu-principle-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   TU-8 · AUDIT FIELDS — 5 cards (5th wide)
   ========================================================= */
.tu-audit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
}
.tu-audit-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 32px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.tu-audit-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.tu-audit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.tu-audit-card:hover::before { width: 96px; }
.tu-audit-wide { grid-column: 1 / -1; }

.tu-audit-mono {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: #6e6e73;
    margin-bottom: 14px;
    margin-top: 4px;
}
.tu-audit-h3 {
    font: 700 20px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.tu-audit-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   TU-10 · USE CASES — 7-item arrow list
   ========================================================= */
.tu-usecase-list {
    list-style: none;
    margin: 0 auto 40px;
    padding: 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.tu-usecase-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .35s ease;
}
.tu-usecase-list li:hover { padding-left: 6px; }
.tu-usecase-list li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 10px;
    margin-top: 2px;
    transition: background .35s ease, color .35s ease;
}
.tu-usecase-list li:hover i {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.tu-usecase-list li span {
    font: 500 15px/1.55 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   TU-10 · PROOF POINTS
   ========================================================= */
.tu-proof {
    max-width: 1240px;
    margin: 56px auto 0;
    padding: 56px 40px;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .1);
}
.tu-proof-head { text-align: center; margin-bottom: 36px; }

.tu-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.tu-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.tu-proof-stat:first-child { border-left: none; padding-left: 0; }

.tu-proof-num {
    font: 800 clamp(34px, 4vw, 52px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.tu-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   TU-11 · 6-PHASE PANEL
   ========================================================= */
.tu-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.tu-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.tu-engage-col {
    position: relative;
    z-index: 1;
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.tu-engage-col:last-child { border-right: none; }
.tu-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.tu-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 24px;
}
.tu-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.tu-engage-col:hover .tu-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.tu-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.tu-engage-num {
    font: 800 clamp(36px, 3.4vw, 52px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: color .45s ease;
}
.tu-engage-col:hover .tu-engage-num {
    color: var(--brand, #b10f1a);
}

.tu-engage-h3 {
    font: 700 17px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.tu-engage-col p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   TU · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .tu-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .tu-engage-panel::before { display: none; }
    .tu-engage-col:nth-child(3n) { border-right: none; }
    .tu-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }

    .tu-principle-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 991px) {
    .tu-page .tu-section { padding: 80px 0; }

    .tu-checklist { grid-template-columns: 1fr; gap: 0; }
    .tu-usecase-list { grid-template-columns: 1fr; }

    .tu-layer-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .tu-layer-row:hover { padding-left: 0; }

    .tu-audit-grid { grid-template-columns: 1fr; gap: 18px; }
    .tu-audit-wide { grid-column: 1; }
    .tu-audit-card { padding: 28px 26px 24px; }

    .tu-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .tu-proof-stat { padding: 0 0 0 18px; }
    .tu-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .tu-proof { padding: 44px 28px; border-radius: 22px; }

    .tu-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .tu-engage-col { padding: 26px 22px; }
    .tu-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .tu-engage-col:nth-child(2n) { border-right: none; }
    .tu-engage-col:nth-child(-n+5) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .tu-page .tu-section { padding: 60px 0; }

    .tu-prose-emphasis { font-size: 18px !important; }

    .tu-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .tu-proof-stat { padding: 0; border-left: none; }

    .tu-engage-panel { grid-template-columns: 1fr; }
    .tu-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .tu-engage-col:last-child { border-bottom: none; }
    .tu-engage-num { font-size: 48px; }
    .tu-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · TOOL-USE & API-CONNECTED AGENTS PAGE (1.2.04)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  MACHINE LEARNING & DEEP LEARNING PAGE (EnLearn — 1.3)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: machine-learning-deep-learning.html
   Body class: .ml-page
   Mirrors the agentic-ai-automation (EnAct) structure with
   4 disciplines, an examples + proof-points section,
   under-the-hood tech specs, frontier research grid,
   notebook-vs-production differentiators, and stage timeline.
   All styles below are scoped under .ml-page.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   ML · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.ml-page .ml-intro,
.ml-page .ml-changes,
.ml-page .ml-disc,
.ml-page .ml-hood,
.ml-page .ml-frontier,
.ml-page .ml-diff,
.ml-page .ml-process {
    padding: 110px 0;
}
.ml-page .pe-cta { padding: 110px 0; }

/* =========================================================
   ML · HERO — EnLearn brand heading + smaller product subtitle
   ========================================================= */
.ml-page .ml-hero-brand {
    font-size: 104px;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin-bottom: 18px;
}
.ml-page .ml-hero-brand .accent {
    color: var(--brand);
    background: none;
    -webkit-text-fill-color: var(--brand);
}
.ml-page .ml-hero-product {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 22px;
}
@media (max-width: 575px) {
    .ml-page .ml-hero-brand { font-size: clamp(56px, 18vw, 88px); margin-bottom: 12px; }
    .ml-page .ml-hero-product { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 16px; }
}


/* =========================================================
   ML-2 · INTRO NARRATIVE — MINTAKA CONTEXT
   ========================================================= */
.ml-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.ml-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.ml-intro-pull {
    font: 600 clamp(28px, 3.4vw, 40px)/1.32 "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 26px auto 24px;
    max-width: 880px;
}
.ml-intro-body {
    font: 400 19px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}


/* =========================================================
   ML-3 · WHAT ML STILL DOES BETTER
   Pull-quote + body + 4 example cards + closing + proof points.
   ========================================================= */
.ml-changes {
    position: relative;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.ml-changes-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 48px;
}
.ml-changes-title {
    font: 800 clamp(40px, 6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 0;
}
.ml-changes-title .accent { color: var(--brand, #b10f1a); }

.ml-changes-pull {
    max-width: 940px;
    margin: 0 auto 36px;
    padding: 32px 40px;
    border-left: 4px solid var(--brand, #b10f1a);
    background: linear-gradient(90deg, rgba(177, 15, 26, .045) 0%, rgba(177, 15, 26, 0) 100%);
    border-radius: 0 16px 16px 0;
}
.ml-changes-pull p {
    font: 600 clamp(22px, 2.8vw, 30px)/1.35 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0;
}

.ml-prose { max-width: 880px; margin: 0 auto 36px; }
.ml-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.ml-prose p:last-child { margin-bottom: 0; }

/* 4 example cards */
.ml-example-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto 56px;
}
.ml-example-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 22px;
    align-items: start;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 26px 28px 24px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.ml-example-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.ml-example-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 17px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ml-example-card:hover .ml-example-icon {
    transform: scale(1.05);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.ml-example-card:nth-child(1) {
    background: #ffe8dc;
}
.ml-example-card:nth-child(1):hover {
    background: #fdd6c0;
}
.ml-example-card:nth-child(1) .ml-example-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ml-example-card:nth-child(2) {
    background: #ece5fb;
}
.ml-example-card:nth-child(2):hover {
    background: #dccff5;
}
.ml-example-card:nth-child(2) .ml-example-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ml-example-card:nth-child(3) {
    background: #e3f0d6;
}
.ml-example-card:nth-child(3):hover {
    background: #cee5b5;
}
.ml-example-card:nth-child(3) .ml-example-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.ml-example-card:nth-child(4) {
    background: #dceffa;
}
.ml-example-card:nth-child(4):hover {
    background: #b8dcf2;
}
.ml-example-card:nth-child(4) .ml-example-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}
.ml-example-card p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    padding-top: 4px;
}

/* Closing */
.ml-changes-close {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.ml-changes-emphasis {
    font: 700 clamp(20px, 2.4vw, 28px)/1.32 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a);
    margin: 0 0 18px;
}
.ml-changes-close p:last-child {
    font: 400 17px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* Proof Points panel */
.ml-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .1);
}
.ml-proof-head { text-align: center; margin-bottom: 36px; }

.ml-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.ml-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.ml-proof-stat:first-child { border-left: none; padding-left: 0; }

.ml-proof-num {
    font: 800 clamp(40px, 5vw, 64px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.ml-proof-cap {
    font: 400 13.5px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   ML-4 · FOUR DISCIPLINES — MODULAR EXPLORE CARDS
   ========================================================= */
.ml-disc {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ml-disc-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.ml-disc-section-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 22px;
}
.ml-disc-section-title .accent { color: var(--brand, #b10f1a); }
.ml-disc-section-title .muted { color: #6e6e73; font-weight: 700; }

.ml-disc-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.ml-disc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
}

.ml-disc-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    padding: 44px 40px 36px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        border-color .45s ease,
        box-shadow .55s ease;
}
.ml-disc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(177, 15, 26, .045) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .55s ease;
    z-index: -1;
}
.ml-disc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
    text-decoration: none;
    color: inherit;
}
.ml-disc-card:hover::before { opacity: 1; }

.ml-disc-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    margin-bottom: 14px;
}

.ml-disc-rule {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    margin-bottom: 20px;
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.ml-disc-card:hover .ml-disc-rule { width: 96px; }

.ml-disc-title {
    font: 700 clamp(22px, 2.4vw, 28px)/1.18 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.ml-disc-tagline {
    font: 500 16px/1.5 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    letter-spacing: -.005em;
}

.ml-disc-body {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 28px;
}

.ml-disc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    width: 100%;
    transition: color .35s ease;
}
.ml-disc-cta i {
    font-size: 12px;
    color: var(--brand, #b10f1a);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ml-disc-card:hover .ml-disc-cta { color: var(--brand, #b10f1a); }
.ml-disc-card:hover .ml-disc-cta i { transform: translateX(8px); }


/* =========================================================
   ML-5 · WHAT'S UNDER THE HOOD — TECH SPEC SHEET
   ========================================================= */
.ml-hood {
    position: relative;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.ml-hood-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.ml-hood-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.ml-hood-title .accent { color: var(--brand, #b10f1a); }
.ml-hood-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.ml-hood-list {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.ml-hood-row {
    display: grid;
    grid-template-columns: 80px 240px 1fr;
    column-gap: 40px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.ml-hood-row:hover { padding-left: 8px; }

.ml-hood-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .12em;
    color: var(--brand, #b10f1a);
    padding-top: 6px;
}
.ml-hood-label {
    font: 700 21px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    padding-top: 2px;
}
.ml-hood-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    max-width: 720px;
}


/* =========================================================
   ML-6 · THE FRONTIER — RESEARCH MAGAZINE GRID
   ========================================================= */
.ml-frontier {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.ml-frontier-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 60px;
}
.ml-frontier-title {
    font: 800 clamp(36px, 5vw, 56px)/1.08 "Inter", sans-serif;
    letter-spacing: -.028em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.ml-frontier-title .accent { color: var(--brand, #b10f1a); }
.ml-frontier-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 720px;
    margin: 0 auto;
}

.ml-frontier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.ml-frontier-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.ml-frontier-card::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.ml-frontier-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .18);
}
.ml-frontier-card:hover::after { width: 80px; }
.ml-frontier-wide { grid-column: 1 / -1; }

.ml-frontier-h3 {
    font: 700 22px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.ml-frontier-card p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   ML-7 · NOTEBOOK vs PRODUCTION — DIFFERENTIATORS
   ========================================================= */
.ml-diff {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.ml-diff-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 56px;
}
.ml-diff-title {
    font: 800 clamp(40px, 5.8vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 0 0 22px;
}
.ml-diff-title .accent { color: var(--brand, #b10f1a); }
.ml-diff-deck {
    font: 400 16.5px/1.7 "Inter", sans-serif;
    color: #424245;
    max-width: 880px;
    margin: 0 auto;
}

.ml-diff-pillars-head {
    text-align: center;
    margin-bottom: 32px;
}

.ml-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.ml-diff-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.ml-diff-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.ml-diff-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
    margin-bottom: 18px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ml-diff-card:hover .ml-diff-icon {
    transform: scale(1.05);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.ml-diff-card:nth-child(1) {
    background: #ffe8dc;
}
.ml-diff-card:nth-child(1):hover {
    background: #fdd6c0;
}
.ml-diff-card:nth-child(1) .ml-diff-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ml-diff-card:nth-child(2) {
    background: #ece5fb;
}
.ml-diff-card:nth-child(2):hover {
    background: #dccff5;
}
.ml-diff-card:nth-child(2) .ml-diff-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ml-diff-card:nth-child(3) {
    background: #e3f0d6;
}
.ml-diff-card:nth-child(3):hover {
    background: #cee5b5;
}
.ml-diff-card:nth-child(3) .ml-diff-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.ml-diff-card:nth-child(4) {
    background: #dceffa;
}
.ml-diff-card:nth-child(4):hover {
    background: #b8dcf2;
}
.ml-diff-card:nth-child(4) .ml-diff-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}
.ml-diff-h3 {
    font: 700 18.5px/1.3 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.ml-diff-card p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   ML-8 · STAGE TIMELINE — 4-PHASE PANEL
   ========================================================= */
.ml-process {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.ml-process-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.ml-process-title {
    font: 800 clamp(38px, 5.4vw, 60px)/1.04 "Inter", sans-serif;
    letter-spacing: -.028em;
    color: #0a0a0a;
    margin-top: 14px;
}
.ml-process-title .accent { color: var(--brand, #b10f1a); }

.ml-process-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.ml-process-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.ml-process-col {
    position: relative;
    z-index: 1;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.ml-process-col:last-child { border-right: none; }
.ml-process-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.ml-process-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.ml-process-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ml-process-col:hover .ml-process-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.ml-process-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.ml-process-num {
    font: 800 clamp(48px, 4.6vw, 72px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.ml-process-col:hover .ml-process-num {
    color: var(--brand, #b10f1a);
}

.ml-process-duration {
    display: inline-block;
    font: 500 11.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.ml-process-h3 {
    font: 700 clamp(17px, 1.6vw, 21px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.ml-process-col p {
    font: 400 14px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   ML · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .ml-process-panel { grid-template-columns: repeat(2, 1fr); }
    .ml-process-panel::before { display: none; }
    .ml-process-col:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .ml-process-col:nth-child(even) { border-right: none; }
    .ml-process-col:nth-child(-n+2) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .ml-page .ml-intro,
    .ml-page .ml-changes,
    .ml-page .ml-disc,
    .ml-page .ml-hood,
    .ml-page .ml-frontier,
    .ml-page .ml-diff,
    .ml-page .ml-process { padding: 80px 0; }

    .ml-intro-pull { font-size: clamp(24px, 5vw, 32px); }
    .ml-changes-pull { padding: 26px 28px; }
    .ml-changes-pull p { font-size: 22px; }

    .ml-example-grid { grid-template-columns: 1fr; gap: 18px; }

    .ml-disc-grid { grid-template-columns: 1fr; gap: 22px; }
    .ml-disc-card { padding: 36px 30px 30px; border-radius: 22px; }

    .ml-hood-row {
        grid-template-columns: 60px 1fr;
        column-gap: 22px;
        row-gap: 8px;
        padding: 28px 0;
    }
    .ml-hood-label { grid-column: 2; padding-top: 0; }
    .ml-hood-body { grid-column: 1 / -1; }
    .ml-hood-num { padding-top: 4px; }

    .ml-frontier-grid { grid-template-columns: 1fr; gap: 18px; }
    .ml-frontier-wide { grid-column: 1; }
    .ml-frontier-card { padding: 30px 26px 28px; }

    .ml-diff-grid { grid-template-columns: 1fr; gap: 18px; }
    .ml-diff-card { padding: 30px 26px 28px; }

    .ml-proof { padding: 44px 28px; border-radius: 22px; }
    .ml-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .ml-proof-stat { padding: 0 0 0 18px; }
    .ml-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }

    .ml-process-panel { grid-template-columns: 1fr; }
    .ml-process-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .ml-process-col:last-child { border-bottom: none; }
    .ml-process-col:nth-child(odd) { border-right: none; }
    .ml-process-num { font-size: 56px; }
    .ml-process-h3 { font-size: 18px; }
}

@media (max-width: 575px) {
    .ml-page .ml-intro,
    .ml-page .ml-changes,
    .ml-page .ml-disc,
    .ml-page .ml-hood,
    .ml-page .ml-frontier,
    .ml-page .ml-diff,
    .ml-page .ml-process { padding: 60px 0; }

    .ml-changes-pull { padding: 22px 20px; }
    .ml-changes-pull p { font-size: 19px; }

    .ml-example-card { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 22px 22px 20px; }
    .ml-example-icon { width: 40px; height: 40px; font-size: 14px; }

    .ml-disc-card { padding: 30px 24px 26px; }
    .ml-disc-tagline { font-size: 15px; padding-bottom: 14px; margin-bottom: 16px; }
    .ml-disc-body { font-size: 14.5px; }

    .ml-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .ml-proof-stat { padding: 0; border-left: none; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · MACHINE LEARNING & DEEP LEARNING PAGE (EnLearn — 1.3)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  CUSTOM MODEL DEVELOPMENT PAGE (1.3.01)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: custom-model-development.html
   Body class: .cm-page
   Parent: Machine Learning & Deep Learning (EnLearn) → Discipline 01
   All styles below are scoped under .cm-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   CM · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.cm-page .cm-intro,
.cm-page .cm-section,
.cm-page .cm-proof-section {
    padding: 110px 0;
}
.cm-page .pe-cta { padding: 110px 0; }
/* Tighten gap between hero and the first section that follows it */
.cm-page .cm-intro { padding-top: 40px; }

.cm-page .cm-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   CM-2 · INTRO NARRATIVE
   ========================================================= */
.cm-intro { position: relative; background: #fff; overflow: hidden; }
.cm-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.cm-intro-body {
    font: 500 clamp(19px, 2.2vw, 24px)/1.6 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   CM · COMMON SECTION SCAFFOLDING
   ========================================================= */
.cm-section { position: relative; overflow: hidden; }

.cm-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.cm-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.cm-section-title .accent { color: var(--brand, #b10f1a); }

.cm-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.cm-prose { max-width: 880px; margin: 0 auto; }
.cm-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.cm-prose p:last-child { margin-bottom: 0; }
.cm-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}


/* =========================================================
   CM-4 · WHAT COUNTS AS CUSTOM — 5-ROW NUMBERED LIST
   ========================================================= */
.cm-counts-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.cm-counts-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.cm-counts-row:hover { padding-left: 8px; }

.cm-counts-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.cm-counts-content { max-width: 800px; }
.cm-counts-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.cm-counts-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   CM-5 · MODEL FAMILIES — 3-COL CARD GRID
   ========================================================= */
.cm-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.cm-family-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.cm-family-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}

.cm-family-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cm-family-card:hover .cm-family-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.cm-family-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.cm-family-card p {
    font: 400 14.5px/1.68 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   CM-6 · ENGINEERING CADENCE — 6-ROW NUMBERED LIST
   ========================================================= */
.cm-cadence-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.cm-cadence-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.cm-cadence-row:hover { padding-left: 8px; }

.cm-cadence-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.cm-cadence-content { max-width: 800px; }
.cm-cadence-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.cm-cadence-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   CM-9 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.cm-proof-section { background: #fff; }
.cm-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.cm-proof-head { text-align: center; margin-bottom: 36px; }

.cm-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.cm-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.cm-proof-stat:first-child { border-left: none; padding-left: 0; }

.cm-proof-num {
    font: 800 clamp(32px, 4vw, 52px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.cm-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   CM-10 · REPRESENTATIVE ENGAGEMENTS — 3-COL with 7th wide
   ========================================================= */
.cm-engagement-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.cm-engagement-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.cm-engagement-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.cm-engagement-wide { grid-column: 1 / -1; }

.cm-engagement-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 17px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cm-engagement-card:hover .cm-engagement-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.cm-engagement-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.cm-engagement-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   CM-11 · 6-PHASE PANEL
   ========================================================= */
.cm-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.cm-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.cm-engage-col {
    position: relative;
    z-index: 1;
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.cm-engage-col:last-child { border-right: none; }
.cm-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.cm-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 24px;
}
.cm-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cm-engage-col:hover .cm-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.cm-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.cm-engage-num {
    font: 800 clamp(36px, 3.4vw, 52px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: color .45s ease;
}
.cm-engage-col:hover .cm-engage-num {
    color: var(--brand, #b10f1a);
}

.cm-engage-h3 {
    font: 700 17px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.cm-engage-col p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   CM · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .cm-family-grid { grid-template-columns: repeat(2, 1fr); }
    .cm-engagement-grid { grid-template-columns: repeat(2, 1fr); }

    .cm-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .cm-engage-panel::before { display: none; }
    .cm-engage-col:nth-child(3n) { border-right: none; }
    .cm-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .cm-page .cm-intro,
    .cm-page .cm-section,
    .cm-page .cm-proof-section { padding: 80px 0; }
    .cm-page .cm-intro { padding-top: 32px; }

    .cm-counts-row,
    .cm-cadence-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .cm-counts-row:hover,
    .cm-cadence-row:hover { padding-left: 0; }

    .cm-family-grid { grid-template-columns: 1fr; gap: 18px; }
    .cm-family-card { padding: 28px 24px 24px; }

    .cm-engagement-grid { grid-template-columns: 1fr; gap: 18px; }
    .cm-engagement-wide { grid-column: 1; }
    .cm-engagement-card { padding: 28px 24px 24px; }

    .cm-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .cm-proof-stat { padding: 0 0 0 18px; }
    .cm-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .cm-proof { padding: 44px 28px; border-radius: 22px; }

    .cm-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .cm-engage-col { padding: 26px 22px; }
    .cm-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .cm-engage-col:nth-child(2n) { border-right: none; }
    .cm-engage-col:nth-child(-n+5) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .cm-page .cm-intro,
    .cm-page .cm-section,
    .cm-page .cm-proof-section { padding: 60px 0; }
    .cm-page .cm-intro { padding-top: 24px; }

    .cm-prose-emphasis { font-size: 18px !important; }

    .cm-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .cm-proof-stat { padding: 0; border-left: none; }

    .cm-engage-panel { grid-template-columns: 1fr; }
    .cm-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .cm-engage-col:last-child { border-bottom: none; }
    .cm-engage-num { font-size: 48px; }
    .cm-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · CUSTOM MODEL DEVELOPMENT PAGE (1.3.01)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  MLOPS & MODEL LIFECYCLE MANAGEMENT PAGE (1.3.02)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: mlops-lifecycle.html
   Body class: .mo-page
   Parent: Machine Learning & Deep Learning (EnLearn) → Discipline 02
   All styles below are scoped under .mo-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   MO · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.mo-page .mo-intro,
.mo-page .mo-section {
    padding: 110px 0;
}
.mo-page .pe-cta { padding: 110px 0; }

.mo-page .mo-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   MO-2 · INTRO NARRATIVE
   ========================================================= */
.mo-intro { position: relative; background: #fff; overflow: hidden; }
.mo-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.mo-intro-body {
    font: 500 clamp(19px, 2.2vw, 24px)/1.6 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   MO · COMMON SECTION SCAFFOLDING
   ========================================================= */
.mo-section { position: relative; overflow: hidden; }

.mo-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.mo-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.mo-section-title .accent { color: var(--brand, #b10f1a); }

.mo-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.mo-prose { max-width: 880px; margin: 0 auto; }
.mo-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.mo-prose p:last-child { margin-bottom: 0; }
.mo-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}
.mo-prose-close { margin-top: 36px; text-align: center; }


/* =========================================================
   MO · CHECKLIST (used in MO-8 monitoring)
   ========================================================= */
.mo-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.mo-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mo-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.mo-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}
.mo-checklist li strong {
    color: #0a0a0a;
    font-weight: 700;
}


/* =========================================================
   MO-4 · LIFECYCLE — 7-ROW NUMBERED LIST
   ========================================================= */
.mo-lifecycle-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.mo-lifecycle-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.mo-lifecycle-row:hover { padding-left: 8px; }

.mo-lifecycle-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.mo-lifecycle-content { max-width: 800px; }
.mo-lifecycle-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.mo-lifecycle-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   MO-5 · MLOPS PLATFORM — 8-COMPONENT GRID (last wide)
   ========================================================= */
.mo-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.mo-platform-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 30px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.mo-platform-card::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.mo-platform-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .18);
}
.mo-platform-card:hover::before { width: 80px; }
.mo-platform-wide { grid-column: 1 / -1; }

.mo-platform-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 17px;
    margin-bottom: 14px;
    margin-top: 8px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mo-platform-card:hover .mo-platform-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.mo-platform-mono {
    display: inline-block;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    color: #6e6e73;
    margin-bottom: 12px;
}
.mo-platform-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.mo-platform-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   MO-10 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.mo-proof {
    max-width: 1240px;
    margin: 56px auto 0;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.mo-proof-head { text-align: center; margin-bottom: 36px; }

.mo-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.mo-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.mo-proof-stat:first-child { border-left: none; padding-left: 0; }

.mo-proof-num {
    font: 800 clamp(34px, 4.2vw, 56px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.mo-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   MO-11 · 5-PHASE PANEL
   ========================================================= */
.mo-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.mo-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.mo-engage-col {
    position: relative;
    z-index: 1;
    padding: 36px 26px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.mo-engage-col:last-child { border-right: none; }
.mo-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.mo-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.mo-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mo-engage-col:hover .mo-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.mo-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.mo-engage-num {
    font: 800 clamp(44px, 4vw, 60px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: color .45s ease;
}
.mo-engage-col:hover .mo-engage-num {
    color: var(--brand, #b10f1a);
}

.mo-engage-h3 {
    font: 700 18px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.mo-engage-col p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   MO · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .mo-platform-grid { grid-template-columns: repeat(2, 1fr); }
    .mo-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .mo-engage-panel::before { display: none; }
    .mo-engage-col:nth-child(3n) { border-right: none; }
    .mo-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .mo-page .mo-intro,
    .mo-page .mo-section { padding: 80px 0; }

    .mo-checklist { grid-template-columns: 1fr; gap: 0; }

    .mo-lifecycle-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .mo-lifecycle-row:hover { padding-left: 0; }

    .mo-platform-grid { grid-template-columns: 1fr; gap: 18px; }
    .mo-platform-wide { grid-column: 1; }
    .mo-platform-card { padding: 28px 24px 24px; }

    .mo-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .mo-proof-stat { padding: 0 0 0 18px; }
    .mo-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .mo-proof { padding: 44px 28px; border-radius: 22px; }

    .mo-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .mo-engage-col { padding: 26px 22px; }
    .mo-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .mo-engage-col:nth-child(2n) { border-right: none; }
    .mo-engage-col:nth-child(-n+4) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .mo-page .mo-intro,
    .mo-page .mo-section { padding: 60px 0; }

    .mo-prose-emphasis { font-size: 18px !important; }

    .mo-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .mo-proof-stat { padding: 0; border-left: none; }

    .mo-engage-panel { grid-template-columns: 1fr; }
    .mo-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .mo-engage-col:last-child { border-bottom: none; }
    .mo-engage-num { font-size: 48px; }
    .mo-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · MLOPS & MODEL LIFECYCLE MANAGEMENT PAGE (1.3.02)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  COMPUTER VISION PAGE (1.3.03)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: computer-vision.html
   Body class: .cv-page
   Parent: Machine Learning & Deep Learning (EnLearn) → Discipline 03
   All styles below are scoped under .cv-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   CV · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.cv-page .cv-intro,
.cv-page .cv-section {
    padding: 110px 0;
}
.cv-page .pe-cta { padding: 110px 0; }

.cv-page .cv-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   CV-2 · INTRO NARRATIVE
   ========================================================= */
.cv-intro { position: relative; background: #fff; overflow: hidden; }
.cv-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.cv-intro-body {
    font: 500 clamp(19px, 2.2vw, 24px)/1.6 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   CV · COMMON SECTION SCAFFOLDING
   ========================================================= */
.cv-section { position: relative; overflow: hidden; }

.cv-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.cv-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.cv-section-title .accent { color: var(--brand, #b10f1a); }

.cv-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.cv-prose { max-width: 880px; margin: 0 auto; }
.cv-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.cv-prose p:last-child { margin-bottom: 0; }
.cv-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}


/* =========================================================
   CV · CHECKLIST (used in CV-4)
   ========================================================= */
.cv-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.cv-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.cv-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.cv-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}
.cv-checklist li strong {
    color: #0a0a0a;
    font-weight: 700;
}


/* =========================================================
   CV-5 · MODEL FAMILIES — 3-COL CARD GRID
   ========================================================= */
.cv-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.cv-family-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.cv-family-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}

.cv-family-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cv-family-card:hover .cv-family-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.cv-family-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.cv-family-card p {
    font: 400 14.5px/1.68 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   CV-6 · PERCEPTION STACK — 6-ROW NUMBERED LIST
   ========================================================= */
.cv-stack-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.cv-stack-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.cv-stack-row:hover { padding-left: 8px; }

.cv-stack-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.cv-stack-content { max-width: 800px; }
.cv-stack-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.cv-stack-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   CV-7 · CLOUD/EDGE/HYBRID — 5 deploy cards (5th wide)
   ========================================================= */
.cv-deploy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
}
.cv-deploy-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 32px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.cv-deploy-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.cv-deploy-wide { grid-column: 1 / -1; }

.cv-deploy-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 19px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cv-deploy-card:hover .cv-deploy-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.cv-deploy-h3 {
    font: 700 21px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.cv-deploy-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   CV-9 · PROOF POINTS — 4-STAT PANEL
   ========================================================= */
.cv-proof {
    max-width: 1240px;
    margin: 56px auto 0;
    padding: 56px 40px;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .1);
}
.cv-proof-head { text-align: center; margin-bottom: 36px; }

.cv-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.cv-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.cv-proof-stat:first-child { border-left: none; padding-left: 0; }

.cv-proof-num {
    font: 800 clamp(34px, 4.2vw, 56px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.cv-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   CV-10 · USE CASES — 8-item arrow list (2-col)
   ========================================================= */
.cv-usecase-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.cv-usecase-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .35s ease;
}
.cv-usecase-list li:hover { padding-left: 6px; }
.cv-usecase-list li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 10px;
    margin-top: 2px;
    transition: background .35s ease, color .35s ease;
}
.cv-usecase-list li:hover i {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.cv-usecase-list li span {
    font: 500 15px/1.55 "Inter", sans-serif;
    color: #2a2a2a;
}


/* =========================================================
   CV-11 · 6-PHASE PANEL
   ========================================================= */
.cv-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.cv-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.cv-engage-col {
    position: relative;
    z-index: 1;
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.cv-engage-col:last-child { border-right: none; }
.cv-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.cv-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 24px;
}
.cv-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.cv-engage-col:hover .cv-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.cv-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.cv-engage-num {
    font: 800 clamp(36px, 3.4vw, 52px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: color .45s ease;
}
.cv-engage-col:hover .cv-engage-num {
    color: var(--brand, #b10f1a);
}

.cv-engage-h3 {
    font: 700 17px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.cv-engage-col p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   CV · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .cv-family-grid { grid-template-columns: repeat(2, 1fr); }
    .cv-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .cv-engage-panel::before { display: none; }
    .cv-engage-col:nth-child(3n) { border-right: none; }
    .cv-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .cv-page .cv-intro,
    .cv-page .cv-section { padding: 80px 0; }

    .cv-checklist { grid-template-columns: 1fr; gap: 0; }
    .cv-usecase-list { grid-template-columns: 1fr; }

    .cv-family-grid { grid-template-columns: 1fr; gap: 18px; }
    .cv-family-card { padding: 28px 24px 24px; }

    .cv-stack-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .cv-stack-row:hover { padding-left: 0; }

    .cv-deploy-grid { grid-template-columns: 1fr; gap: 18px; }
    .cv-deploy-wide { grid-column: 1; }
    .cv-deploy-card { padding: 28px 26px 24px; }

    .cv-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .cv-proof-stat { padding: 0 0 0 18px; }
    .cv-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .cv-proof { padding: 44px 28px; border-radius: 22px; }

    .cv-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .cv-engage-col { padding: 26px 22px; }
    .cv-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .cv-engage-col:nth-child(2n) { border-right: none; }
    .cv-engage-col:nth-child(-n+5) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .cv-page .cv-intro,
    .cv-page .cv-section { padding: 60px 0; }

    .cv-prose-emphasis { font-size: 18px !important; }

    .cv-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .cv-proof-stat { padding: 0; border-left: none; }

    .cv-engage-panel { grid-template-columns: 1fr; }
    .cv-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .cv-engage-col:last-child { border-bottom: none; }
    .cv-engage-num { font-size: 48px; }
    .cv-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · COMPUTER VISION PAGE (1.3.03)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  TIME-SERIES & PREDICTIVE MODELLING PAGE (1.3.04)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: time-series-modelling.html
   Body class: .tm-page
   Parent: Machine Learning & Deep Learning (EnLearn) → Discipline 04
   All styles below are scoped under .tm-page so other
   pages remain unaffected.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   TM · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.tm-page .tm-intro,
.tm-page .tm-section {
    padding: 110px 0;
}
.tm-page .pe-cta { padding: 110px 0; }

.tm-page .tm-section-light {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}


/* =========================================================
   TM-2 · INTRO NARRATIVE
   ========================================================= */
.tm-intro { position: relative; background: #fff; overflow: hidden; }
.tm-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.tm-intro-body {
    font: 500 clamp(19px, 2.2vw, 24px)/1.6 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0;
}


/* =========================================================
   TM · COMMON SECTION SCAFFOLDING
   ========================================================= */
.tm-section { position: relative; overflow: hidden; }

.tm-section-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.tm-section-title {
    font: 800 clamp(40px, 5.6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.tm-section-title .accent { color: var(--brand, #b10f1a); }

.tm-section-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.tm-prose { max-width: 880px; margin: 0 auto; }
.tm-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.tm-prose p:last-child { margin-bottom: 0; }
.tm-prose-emphasis {
    font: 700 clamp(22px, 2.6vw, 30px)/1.32 "Inter", sans-serif !important;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a) !important;
    text-align: center;
    padding: 28px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin: 28px 0 !important;
}


/* =========================================================
   TM · CHECKLIST (used in TM-4)
   ========================================================= */
.tm-checklist {
    list-style: none;
    margin: 32px auto 0;
    padding: 0;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 18px;
}
.tm-checklist li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.tm-checklist li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 11px;
    margin-top: 2px;
}
.tm-checklist li span {
    font: 400 15.5px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
}
.tm-checklist li strong {
    color: #0a0a0a;
    font-weight: 700;
}


/* =========================================================
   TM-5 · MODEL FAMILIES — 3-COL CARD GRID
   ========================================================= */
.tm-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.tm-family-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.tm-family-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}

.tm-family-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.tm-family-card:hover .tm-family-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.tm-family-h3 {
    font: 700 19px/1.22 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.tm-family-card p {
    font: 400 14.5px/1.68 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   TM-6 · CHALLENGES — 6-ROW NUMBERED LIST
   ========================================================= */
.tm-challenge-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.tm-challenge-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.tm-challenge-row:hover { padding-left: 8px; }

.tm-challenge-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.tm-challenge-content { max-width: 800px; }
.tm-challenge-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.tm-challenge-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   TM-8 · ANOMALY GRID — 3 CARDS (3rd wide)
   ========================================================= */
.tm-anomaly-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.tm-anomaly-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.tm-anomaly-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.tm-anomaly-wide { grid-column: 1 / -1; }

.tm-anomaly-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 19px;
    margin-bottom: 18px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.tm-anomaly-card:hover .tm-anomaly-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.tm-anomaly-h3 {
    font: 700 21px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.tm-anomaly-card p {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   TM-9 · EVALUATION/MONITORING — 4-ROW NUMBERED LIST
   ========================================================= */
.tm-eval-list {
    max-width: 1040px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.tm-eval-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 48px;
    align-items: start;
    padding: 32px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .55s cubic-bezier(.2, .8, .2, 1);
}
.tm-eval-row:hover { padding-left: 8px; }

.tm-eval-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    padding-top: 8px;
}
.tm-eval-content { max-width: 800px; }
.tm-eval-h3 {
    font: 700 clamp(20px, 2.2vw, 26px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.tm-eval-content p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   TM-10 · USE CASES + PROOF POINTS
   ========================================================= */
.tm-usecase-list {
    list-style: none;
    margin: 0 auto 56px;
    padding: 0;
    max-width: 1080px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.tm-usecase-list li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 16px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .35s ease;
}
.tm-usecase-list li:hover { padding-left: 6px; }
.tm-usecase-list li i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 50%;
    font-size: 10px;
    margin-top: 2px;
    transition: background .35s ease, color .35s ease;
}
.tm-usecase-list li:hover i {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.tm-usecase-list li span {
    font: 500 15px/1.55 "Inter", sans-serif;
    color: #2a2a2a;
}

.tm-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
}
.tm-proof-head { text-align: center; margin-bottom: 36px; }

.tm-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.tm-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.tm-proof-stat:first-child { border-left: none; padding-left: 0; }

.tm-proof-num {
    font: 800 clamp(34px, 4.2vw, 56px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.tm-proof-cap {
    font: 400 13px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   TM-11 · 6-PHASE PANEL
   ========================================================= */
.tm-engage-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    max-width: 1320px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.tm-engage-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.tm-engage-col {
    position: relative;
    z-index: 1;
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.tm-engage-col:last-child { border-right: none; }
.tm-engage-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.tm-engage-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 24px;
}
.tm-engage-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.tm-engage-col:hover .tm-engage-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.tm-engage-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.tm-engage-num {
    font: 800 clamp(36px, 3.4vw, 52px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    transition: color .45s ease;
}
.tm-engage-col:hover .tm-engage-num {
    color: var(--brand, #b10f1a);
}

.tm-engage-h3 {
    font: 700 17px/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 10px;
}
.tm-engage-col p {
    font: 400 13.5px/1.6 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   TM · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .tm-family-grid { grid-template-columns: repeat(2, 1fr); }
    .tm-engage-panel { grid-template-columns: repeat(3, 1fr); }
    .tm-engage-panel::before { display: none; }
    .tm-engage-col:nth-child(3n) { border-right: none; }
    .tm-engage-col:nth-child(-n+3) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .tm-page .tm-intro,
    .tm-page .tm-section { padding: 80px 0; }

    .tm-checklist { grid-template-columns: 1fr; gap: 0; }
    .tm-usecase-list { grid-template-columns: 1fr; }

    .tm-family-grid { grid-template-columns: 1fr; gap: 18px; }
    .tm-family-card { padding: 28px 24px 24px; }

    .tm-challenge-row,
    .tm-eval-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 26px 0;
    }
    .tm-challenge-row:hover,
    .tm-eval-row:hover { padding-left: 0; }

    .tm-anomaly-grid { grid-template-columns: 1fr; gap: 18px; }
    .tm-anomaly-wide { grid-column: 1; }
    .tm-anomaly-card { padding: 28px 26px 24px; }

    .tm-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .tm-proof-stat { padding: 0 0 0 18px; }
    .tm-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }
    .tm-proof { padding: 44px 28px; border-radius: 22px; }

    .tm-engage-panel { grid-template-columns: repeat(2, 1fr); }
    .tm-engage-col { padding: 26px 22px; }
    .tm-engage-col:nth-child(3n) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .tm-engage-col:nth-child(2n) { border-right: none; }
    .tm-engage-col:nth-child(-n+5) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 575px) {
    .tm-page .tm-intro,
    .tm-page .tm-section { padding: 60px 0; }

    .tm-prose-emphasis { font-size: 18px !important; }

    .tm-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .tm-proof-stat { padding: 0; border-left: none; }

    .tm-engage-panel { grid-template-columns: 1fr; }
    .tm-engage-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .tm-engage-col:last-child { border-bottom: none; }
    .tm-engage-num { font-size: 48px; }
    .tm-engage-h3 { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · TIME-SERIES & PREDICTIVE MODELLING PAGE (1.3.04)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   ▼▼▼  DATA & ANALYTICS PAGE (EnMetrics — 1.4)  ▼▼▼
   ────────────────────────────────────────────────────────────
   File: data-analytics.html
   Body class: .da-page
   Mirrors the machine-learning-deep-learning (EnLearn)
   structure — intro narrative, examples + proof points,
   four disciplines, under-the-hood, frontier, six-card
   differentiators, and 4-stage timeline.
   ════════════════════════════════════════════════════════════ */


/* =========================================================
   DA · UNIFORM VERTICAL RHYTHM
   ========================================================= */
.da-page .da-intro,
.da-page .da-changes,
.da-page .da-disc,
.da-page .da-hood,
.da-page .da-frontier,
.da-page .da-diff,
.da-page .da-process {
    padding: 110px 0;
}
.da-page .pe-cta { padding: 110px 0; }

/* =========================================================
   DA · HERO — EnGauge brand heading + smaller product subtitle
   ========================================================= */
.da-page .da-hero-brand {
    font-size: 104px;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin-bottom: 18px;
}
.da-page .da-hero-brand .accent {
    color: var(--brand);
    background: none;
    -webkit-text-fill-color: var(--brand);
}
.da-page .da-hero-product {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 22px;
}
@media (max-width: 575px) {
    .da-page .da-hero-brand { font-size: clamp(56px, 18vw, 88px); margin-bottom: 12px; }
    .da-page .da-hero-product { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 16px; }
}


/* =========================================================
   DA-2 · INTRO NARRATIVE — HATSYA CONTEXT
   ========================================================= */
.da-intro {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.da-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.da-intro-pull {
    font: 600 clamp(28px, 3.4vw, 40px)/1.32 "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #0a0a0a;
    margin: 26px auto 24px;
    max-width: 880px;
}
.da-intro-body {
    font: 400 19px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}


/* =========================================================
   DA-3 · DATA LAYER EARNS ITS PLACE
   Pull-quote + body + 4 example cards + closing + proof points.
   ========================================================= */
.da-changes {
    position: relative;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.da-changes-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 48px;
}
.da-changes-title {
    font: 800 clamp(40px, 6vw, 68px)/1.04 "Inter", sans-serif;
    letter-spacing: -.032em;
    color: #0a0a0a;
    margin: 0;
}
.da-changes-title .accent { color: var(--brand, #b10f1a); }

.da-changes-pull {
    max-width: 940px;
    margin: 0 auto 36px;
    padding: 32px 40px;
    border-left: 4px solid var(--brand, #b10f1a);
    background: linear-gradient(90deg, rgba(177, 15, 26, .045) 0%, rgba(177, 15, 26, 0) 100%);
    border-radius: 0 16px 16px 0;
}
.da-changes-pull p {
    font: 600 clamp(22px, 2.8vw, 30px)/1.35 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0;
}

.da-prose { max-width: 880px; margin: 0 auto 36px; }
.da-prose p {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.da-prose p:last-child { margin-bottom: 0; }

.da-example-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto 56px;
}
.da-example-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 22px;
    align-items: start;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 26px 28px 24px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.da-example-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.da-example-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 17px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.da-example-card:hover .da-example-icon {
    transform: scale(1.05);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.da-example-card:nth-child(1) {
    background: #ffe8dc;
}
.da-example-card:nth-child(1):hover {
    background: #fdd6c0;
}
.da-example-card:nth-child(1) .da-example-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.da-example-card:nth-child(2) {
    background: #ece5fb;
}
.da-example-card:nth-child(2):hover {
    background: #dccff5;
}
.da-example-card:nth-child(2) .da-example-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.da-example-card:nth-child(3) {
    background: #e3f0d6;
}
.da-example-card:nth-child(3):hover {
    background: #cee5b5;
}
.da-example-card:nth-child(3) .da-example-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.da-example-card:nth-child(4) {
    background: #dceffa;
}
.da-example-card:nth-child(4):hover {
    background: #b8dcf2;
}
.da-example-card:nth-child(4) .da-example-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}
.da-example-card p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    padding-top: 4px;
}

.da-changes-close {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}
.da-changes-emphasis {
    font: 700 clamp(20px, 2.4vw, 28px)/1.32 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: var(--brand, #b10f1a);
    margin: 0 0 18px;
}
.da-changes-close p:last-child {
    font: 400 17px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

.da-proof {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 40px;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .1);
}
.da-proof-head { text-align: center; margin-bottom: 36px; }

.da-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}
.da-proof-stat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 18px;
    border-left: 1px solid rgba(0, 0, 0, .08);
    text-align: left;
}
.da-proof-stat:first-child { border-left: none; padding-left: 0; }

.da-proof-num {
    font: 800 clamp(36px, 4.4vw, 60px)/1 "Inter", sans-serif;
    letter-spacing: -.04em;
    color: var(--brand, #b10f1a);
    text-shadow: 0 14px 30px rgba(177, 15, 26, .22);
}
.da-proof-cap {
    font: 400 13.5px/1.55 "Inter", sans-serif;
    color: #424245;
}


/* =========================================================
   DA-4 · FOUR DISCIPLINES — MODULAR EXPLORE CARDS
   ========================================================= */
.da-disc {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.da-disc-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.da-disc-section-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 22px;
}
.da-disc-section-title .accent { color: var(--brand, #b10f1a); }
.da-disc-section-title .muted { color: #6e6e73; font-weight: 700; }

.da-disc-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.da-disc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1240px;
    margin: 0 auto;
}

.da-disc-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 28px;
    padding: 44px 40px 36px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform .55s cubic-bezier(.2, .8, .2, 1),
        border-color .45s ease,
        box-shadow .55s ease;
}
.da-disc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(177, 15, 26, .045) 0%, transparent 55%);
    opacity: 0;
    transition: opacity .55s ease;
    z-index: -1;
}
.da-disc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
    text-decoration: none;
    color: inherit;
}
.da-disc-card:hover::before { opacity: 1; }

.da-disc-num {
    display: inline-block;
    font: 500 12px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    color: var(--brand, #b10f1a);
    margin-bottom: 14px;
}

.da-disc-rule {
    display: block;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    margin-bottom: 20px;
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.da-disc-card:hover .da-disc-rule { width: 96px; }

.da-disc-title {
    font: 700 clamp(22px, 2.4vw, 28px)/1.18 "Inter", sans-serif;
    letter-spacing: -.018em;
    color: #0a0a0a;
    margin: 0 0 14px;
}

.da-disc-tagline {
    font: 500 16px/1.5 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0 0 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    letter-spacing: -.005em;
}

.da-disc-body {
    font: 400 15px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 28px;
}

.da-disc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1.2 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.005em;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    width: 100%;
    transition: color .35s ease;
}
.da-disc-cta i {
    font-size: 12px;
    color: var(--brand, #b10f1a);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.da-disc-card:hover .da-disc-cta { color: var(--brand, #b10f1a); }
.da-disc-card:hover .da-disc-cta i { transform: translateX(8px); }


/* =========================================================
   DA-5 · WHAT'S UNDER THE HOOD — TECH SPEC SHEET
   ========================================================= */
.da-hood {
    position: relative;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.da-hood-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.da-hood-title {
    font: 800 clamp(40px, 5.6vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.da-hood-title .accent { color: var(--brand, #b10f1a); }
.da-hood-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 820px;
    margin: 0 auto;
}

.da-hood-list {
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.da-hood-row {
    display: grid;
    grid-template-columns: 80px 240px 1fr;
    column-gap: 40px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    transition: padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.da-hood-row:hover { padding-left: 8px; }

.da-hood-num {
    font: 500 13px/1 "JetBrains Mono", monospace;
    letter-spacing: .12em;
    color: var(--brand, #b10f1a);
    padding-top: 6px;
}
.da-hood-label {
    font: 700 21px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    padding-top: 2px;
}
.da-hood-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
    max-width: 720px;
}


/* =========================================================
   DA-6 · THE FRONTIER — RESEARCH MAGAZINE GRID
   ========================================================= */
.da-frontier {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.da-frontier-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 60px;
}
.da-frontier-title {
    font: 800 clamp(36px, 5vw, 56px)/1.08 "Inter", sans-serif;
    letter-spacing: -.028em;
    color: #0a0a0a;
    margin: 14px 0 18px;
}
.da-frontier-title .accent { color: var(--brand, #b10f1a); }
.da-frontier-deck {
    font: 500 18px/1.6 "Inter", sans-serif;
    color: #424245;
    max-width: 720px;
    margin: 0 auto;
}

.da-frontier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.da-frontier-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 36px 34px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
    overflow: hidden;
}
.da-frontier-card::after {
    content: "";
    position: absolute;
    left: 34px;
    top: 0;
    width: 40px;
    height: 3px;
    background: var(--brand, #b10f1a);
    transition: width .55s cubic-bezier(.2, .8, .2, 1);
}
.da-frontier-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .18);
}
.da-frontier-card:hover::after { width: 80px; }
.da-frontier-wide { grid-column: 1 / -1; }

.da-frontier-h3 {
    font: 700 22px/1.25 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 14px;
}
.da-frontier-card p {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   DA-7 · TOOL STACK vs DATA PLATFORM — 6 DIFFERENTIATORS
   ========================================================= */
.da-diff {
    position: relative;
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
    border-top: 1px solid rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .04);
    overflow: hidden;
}
.da-diff-head {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 56px;
}
.da-diff-title {
    font: 800 clamp(40px, 5.8vw, 64px)/1.04 "Inter", sans-serif;
    letter-spacing: -.03em;
    color: #0a0a0a;
    margin: 0 0 22px;
}
.da-diff-title .accent { color: var(--brand, #b10f1a); }
.da-diff-deck {
    font: 400 16.5px/1.7 "Inter", sans-serif;
    color: #424245;
    max-width: 880px;
    margin: 0 auto;
}

.da-diff-pillars-head {
    text-align: center;
    margin-bottom: 32px;
}

/* 2-col grid with 6 differentiator cards (3 rows of 2) */
.da-diff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}
.da-diff-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.da-diff-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}

.da-diff-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
    margin-bottom: 18px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.da-diff-card:hover .da-diff-icon {
    transform: scale(1.05);
}

/* Six distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.da-diff-card:nth-child(1) {
    background: #ffe8dc;
}
.da-diff-card:nth-child(1):hover {
    background: #fdd6c0;
}
.da-diff-card:nth-child(1) .da-diff-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.da-diff-card:nth-child(2) {
    background: #ece5fb;
}
.da-diff-card:nth-child(2):hover {
    background: #dccff5;
}
.da-diff-card:nth-child(2) .da-diff-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.da-diff-card:nth-child(3) {
    background: #e3f0d6;
}
.da-diff-card:nth-child(3):hover {
    background: #cee5b5;
}
.da-diff-card:nth-child(3) .da-diff-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.da-diff-card:nth-child(4) {
    background: #dceffa;
}
.da-diff-card:nth-child(4):hover {
    background: #b8dcf2;
}
.da-diff-card:nth-child(4) .da-diff-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose */
.da-diff-card:nth-child(5) {
    background: #fde0ec;
}
.da-diff-card:nth-child(5):hover {
    background: #fbcad8;
}
.da-diff-card:nth-child(5) .da-diff-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

/* Card 06 · Butter */
.da-diff-card:nth-child(6) {
    background: #fdf2c4;
}
.da-diff-card:nth-child(6):hover {
    background: #f9e695;
}
.da-diff-card:nth-child(6) .da-diff-icon {
    background: rgba(170, 130, 30, 0.14);
    color: #8a6a1f;
}
.da-diff-h3 {
    font: 700 19px/1.3 "Inter", sans-serif;
    letter-spacing: -.012em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.da-diff-card p {
    font: 400 15px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   DA-8 · STAGE TIMELINE — 4-PHASE PANEL
   ========================================================= */
.da-process {
    position: relative;
    background: #fff;
    overflow: hidden;
}
.da-process-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 64px;
}
.da-process-title {
    font: 800 clamp(38px, 5.4vw, 60px)/1.04 "Inter", sans-serif;
    letter-spacing: -.028em;
    color: #0a0a0a;
    margin-top: 14px;
}
.da-process-title .accent { color: var(--brand, #b10f1a); }

.da-process-panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1240px;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 28px 60px -32px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.da-process-panel::before {
    content: "";
    position: absolute;
    left: 36px;
    right: 36px;
    top: 47px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, .55) 6%,
        rgba(177, 15, 26, .85) 50%,
        rgba(177, 15, 26, .55) 94%,
        rgba(177, 15, 26, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

.da-process-col {
    position: relative;
    z-index: 1;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0, 0, 0, .07);
    transition: background .45s ease;
}
.da-process-col:last-child { border-right: none; }
.da-process-col:hover {
    background: linear-gradient(180deg, rgba(177, 15, 26, .025) 0%, rgba(177, 15, 26, 0) 100%);
}

.da-process-col-head {
    display: flex;
    align-items: center;
    height: 22px;
    margin-bottom: 28px;
}
.da-process-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--brand, #b10f1a);
    box-shadow:
        0 0 0 4px #fff,
        0 0 0 5px rgba(177, 15, 26, .15);
    transition: background .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.da-process-col:hover .da-process-dot {
    background: var(--brand, #b10f1a);
    transform: scale(1.15);
}

.da-process-step {
    display: inline-block;
    font: 600 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 10px;
}

.da-process-num {
    font: 800 clamp(48px, 4.6vw, 72px)/.9 "Inter", sans-serif;
    letter-spacing: -.05em;
    color: #0a0a0a;
    margin-bottom: 4px;
    transition: color .45s ease;
}
.da-process-col:hover .da-process-num {
    color: var(--brand, #b10f1a);
}

.da-process-duration {
    display: inline-block;
    font: 500 11.5px/1 "JetBrains Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.da-process-h3 {
    font: 700 clamp(17px, 1.6vw, 21px)/1.22 "Inter", sans-serif;
    letter-spacing: -.014em;
    color: #0a0a0a;
    margin: 0 0 12px;
}
.da-process-col p {
    font: 400 14px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}


/* =========================================================
   DA · RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
    .da-process-panel { grid-template-columns: repeat(2, 1fr); }
    .da-process-panel::before { display: none; }
    .da-process-col:nth-child(odd) { border-right: 1px solid rgba(0, 0, 0, .07); }
    .da-process-col:nth-child(even) { border-right: none; }
    .da-process-col:nth-child(-n+2) { border-bottom: 1px solid rgba(0, 0, 0, .07); }
}

@media (max-width: 991px) {
    .da-page .da-intro,
    .da-page .da-changes,
    .da-page .da-disc,
    .da-page .da-hood,
    .da-page .da-frontier,
    .da-page .da-diff,
    .da-page .da-process { padding: 80px 0; }

    .da-intro-pull { font-size: clamp(24px, 5vw, 32px); }
    .da-changes-pull { padding: 26px 28px; }
    .da-changes-pull p { font-size: 22px; }

    .da-example-grid { grid-template-columns: 1fr; gap: 18px; }

    .da-disc-grid { grid-template-columns: 1fr; gap: 22px; }
    .da-disc-card { padding: 36px 30px 30px; border-radius: 22px; }

    .da-hood-row {
        grid-template-columns: 60px 1fr;
        column-gap: 22px;
        row-gap: 8px;
        padding: 28px 0;
    }
    .da-hood-label { grid-column: 2; padding-top: 0; }
    .da-hood-body { grid-column: 1 / -1; }
    .da-hood-num { padding-top: 4px; }

    .da-frontier-grid { grid-template-columns: 1fr; gap: 18px; }
    .da-frontier-wide { grid-column: 1; }
    .da-frontier-card { padding: 30px 26px 28px; }

    .da-diff-grid { grid-template-columns: 1fr; gap: 18px; }
    .da-diff-card { padding: 30px 26px 28px; }

    .da-proof { padding: 44px 28px; border-radius: 22px; }
    .da-proof-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 22px; }
    .da-proof-stat { padding: 0 0 0 18px; }
    .da-proof-stat:nth-child(odd) { border-left: none; padding-left: 0; }

    .da-process-panel { grid-template-columns: 1fr; }
    .da-process-col { padding: 26px 22px; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, .07); }
    .da-process-col:last-child { border-bottom: none; }
    .da-process-col:nth-child(odd) { border-right: none; }
    .da-process-num { font-size: 56px; }
    .da-process-h3 { font-size: 18px; }
}

@media (max-width: 575px) {
    .da-page .da-intro,
    .da-page .da-changes,
    .da-page .da-disc,
    .da-page .da-hood,
    .da-page .da-frontier,
    .da-page .da-diff,
    .da-page .da-process { padding: 60px 0; }

    .da-changes-pull { padding: 22px 20px; }
    .da-changes-pull p { font-size: 19px; }

    .da-example-card { grid-template-columns: 44px 1fr; column-gap: 16px; padding: 22px 22px 20px; }
    .da-example-icon { width: 40px; height: 40px; font-size: 14px; }

    .da-disc-card { padding: 30px 24px 26px; }
    .da-disc-tagline { font-size: 15px; padding-bottom: 14px; margin-bottom: 16px; }
    .da-disc-body { font-size: 14.5px; }

    .da-proof-grid { grid-template-columns: 1fr; gap: 28px; }
    .da-proof-stat { padding: 0; border-left: none; }
}


/* ════════════════════════════════════════════════════════════
   ▲▲▲  END · DATA & ANALYTICS PAGE (EnMetrics — 1.4)  ▲▲▲
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   ▼▼▼  START · SEMANTIC INTELLIGENCE PAGE (EnWise — EnWise — 1.5)  ▼▼▼
   ════════════════════════════════════════════════════════════════════════════
   File:        semantic-intelligence.html
   Body class:  .si-page
   Practice:    EnWise
   Sub-pages:   natural-language-processing.html
                knowledge-graphs.html
                semantic-analytics.html
                data-to-knowledge-transformation.html
   All styles below are scoped under .si-page so they cannot
   bleed into other pages. Apple-style minimal white UI with
   #b10f1a as the brand accent.
   ════════════════════════════════════════════════════════════════════════════ */

.si-page .si-intro,
.si-page .si-positioning,
.si-page .si-themes,
.si-page .si-value,
.si-page .si-cases,
.si-page .si-work,
.si-page .si-closing {
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.si-page .pe-cta { padding: 110px 0; }
/* Tighten gap between hero and the first section that follows it */
.si-page .si-intro { padding-top: 40px; }

/* =========================================================
   SI · HERO — EnWise brand heading + smaller product subtitle
   ========================================================= */
.si-page .si-hero-brand {
    font-size: 104px;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin-bottom: 18px;
}
.si-page .si-hero-brand .accent {
    color: var(--brand);
    background: none;
    -webkit-text-fill-color: var(--brand);
}
.si-page .si-hero-product {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 22px;
}
@media (max-width: 575px) {
    .si-page .si-hero-brand { font-size: clamp(56px, 18vw, 88px); margin-bottom: 12px; }
    .si-page .si-hero-product { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 16px; }
}

.si-page .si-positioning,
.si-page .si-value,
.si-page .si-work {
    background: #fafafa;
}

/* ── SI · INTRO ───────────────────────────────────────────── */
.si-intro-shell {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}
.si-intro-shell .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 28px;
    display: inline-block;
}
.si-intro-pull {
    font: 700 clamp(28px, 3.6vw, 44px)/1.2 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.02em;
    margin: 0 0 28px;
}
.si-intro-body {
    font: 400 18px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── SI · POSITIONING / CLOSING (shared prose section) ───── */
.si-positioning-head,
.si-closing-head {
    max-width: 980px;
    margin: 0 auto 48px;
    text-align: center;
}
.si-positioning-head .section-eyebrow,
.si-closing-head .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
.si-positioning-title,
.si-closing-title {
    font: 800 clamp(34px, 4.6vw, 56px)/1.1 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.03em;
    margin: 0;
}
.si-positioning-title .accent,
.si-closing-title .accent { color: var(--brand, #b10f1a); }

.si-prose {
    max-width: 880px;
    margin: 0 auto;
}
.si-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #424245;
    margin: 0 0 22px;
}
.si-prose p:last-child { margin-bottom: 0; }
.si-prose-emphasis {
    font-weight: 600 !important;
    color: #1d1d1f !important;
    font-size: 18px !important;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ── SI · THEMES (4 sub-discipline cards) ───────────────── */
.si-themes-head {
    max-width: 980px;
    margin: 0 auto 56px;
    text-align: center;
}
.si-themes-head .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
.si-themes-section-title {
    font: 800 clamp(34px, 4.6vw, 56px)/1.1 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.03em;
    margin: 0 0 22px;
}
.si-themes-section-title .accent { color: var(--brand, #b10f1a); }
.si-themes-section-title .muted { color: #6e6e73; font-weight: 700; }
.si-themes-deck {
    font: 400 18px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.si-themes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}
.si-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 40px 36px 32px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1),
                border-color .5s ease,
                box-shadow .5s ease;
}
.si-theme-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .04), transparent 60%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.si-theme-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 32px 64px -24px rgba(177, 15, 26, .25);
}
.si-theme-card:hover::before { opacity: 1; }

.si-theme-num {
    font: 700 13px/1 "JetBrains Mono", monospace;
    color: var(--brand, #b10f1a);
    letter-spacing: .14em;
    margin-bottom: 18px;
}
.si-theme-rule {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    margin-bottom: 22px;
    transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.si-theme-card:hover .si-theme-rule { width: 96px; }

.si-theme-title {
    font: 800 26px/1.18 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.02em;
    margin: 0 0 12px;
}
.si-theme-tagline {
    font: 600 16px/1.5 "Inter", sans-serif;
    color: #1d1d1f;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.si-theme-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0 0 28px;
    flex-grow: 1;
}
.si-theme-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .02em;
    margin-top: auto;
}
.si-theme-cta i {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.si-theme-card:hover .si-theme-cta i { transform: translateX(6px); }

/* ── SI · VALUE (6 outcome cards with icons) ───────────── */
.si-value-head,
.si-cases-head,
.si-work-head {
    max-width: 980px;
    margin: 0 auto 56px;
    text-align: center;
}
.si-value-head .section-eyebrow,
.si-cases-head .section-eyebrow,
.si-work-head .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
.si-value-title,
.si-cases-title,
.si-work-title {
    font: 800 clamp(34px, 4.6vw, 54px)/1.1 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.03em;
    margin: 0 0 22px;
}
.si-value-title .accent,
.si-cases-title .accent,
.si-work-title .accent { color: var(--brand, #b10f1a); }
.si-value-deck,
.si-cases-deck,
.si-work-deck {
    font: 400 18px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.si-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.si-value-card {
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.si-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.si-value-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 22px;
}

/* Six distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.si-value-card:nth-child(1) {
    background: #ffe8dc;
}
.si-value-card:nth-child(1):hover {
    background: #fdd6c0;
}
.si-value-card:nth-child(1) .si-value-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.si-value-card:nth-child(2) {
    background: #ece5fb;
}
.si-value-card:nth-child(2):hover {
    background: #dccff5;
}
.si-value-card:nth-child(2) .si-value-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.si-value-card:nth-child(3) {
    background: #e3f0d6;
}
.si-value-card:nth-child(3):hover {
    background: #cee5b5;
}
.si-value-card:nth-child(3) .si-value-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.si-value-card:nth-child(4) {
    background: #dceffa;
}
.si-value-card:nth-child(4):hover {
    background: #b8dcf2;
}
.si-value-card:nth-child(4) .si-value-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose */
.si-value-card:nth-child(5) {
    background: #fde0ec;
}
.si-value-card:nth-child(5):hover {
    background: #fbcad8;
}
.si-value-card:nth-child(5) .si-value-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

/* Card 06 · Butter */
.si-value-card:nth-child(6) {
    background: #fdf2c4;
}
.si-value-card:nth-child(6):hover {
    background: #f9e695;
}
.si-value-card:nth-child(6) .si-value-icon {
    background: rgba(170, 130, 30, 0.14);
    color: #8a6a1f;
}
.si-value-h3 {
    font: 700 19px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.si-value-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── SI · CASES (8-item numbered list) ─────────────────── */
.si-cases-list {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.si-case-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 28px;
    padding: 28px 8px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.si-case-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.si-case-row:hover { padding-left: 16px; }

.si-case-num {
    font: 700 14px/1 "JetBrains Mono", monospace;
    color: var(--brand, #b10f1a);
    letter-spacing: .12em;
    padding-top: 6px;
}
.si-case-content { max-width: 820px; }
.si-case-label {
    font: 700 19px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}
.si-case-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── SI · WORK (6 commitment cards) ────────────────────── */
.si-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.si-work-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background .45s ease,
                border-color .45s ease,
                box-shadow .45s ease;
}
.si-work-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .45);
}
.si-work-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 22px;
    transition: background .45s ease, color .45s ease;
}
.si-work-card:hover .si-work-icon {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.si-work-h3 {
    font: 700 18px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    transition: color .45s ease;
}
.si-work-card:hover .si-work-h3 { color: #fff; }
.si-work-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
    transition: color .45s ease;
}
.si-work-card:hover p { color: rgba(255, 255, 255, .85); }

/* ── SI · CTA · 4 SUB-DISCIPLINE PATHS ─────────────────── */
.si-page .si-engage-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 1040px;
    margin: 36px auto 44px;
}
.si-page .si-engage-chip {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 28px 10px 10px;
    background: #fff;
    border: 0;
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 16px 36px -18px rgba(17, 17, 19, 0.22),
                0 0 0 1px rgba(17, 17, 19, 0.04);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1),
                box-shadow .35s ease,
                background .35s ease,
                color .35s ease;
}
.si-page .si-engage-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -16px rgba(177, 15, 26, 0.32),
                0 0 0 1px rgba(177, 15, 26, 0.18);
    background: #fff;
}
.si-page .si-engage-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-soft, #fdf1f2);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 12px/1 "Inter", sans-serif;
    letter-spacing: .04em;
    flex-shrink: 0;
    transition: background .35s ease, color .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.si-page .si-engage-chip:hover .si-engage-num {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.si-page .si-engage-label {
    font: 600 14.5px/1.3 "Inter", sans-serif;
    color: var(--ink);
    flex-grow: 1;
}
/* Arrow tail removed — the icon-pill design uses the leading badge as
   the visual anchor instead. */
.si-page .si-engage-tail { display: none; }

/* ── SI · TABLET ───────────────────────────────────────── */
@media (max-width: 991px) {
    .si-page .si-intro,
    .si-page .si-positioning,
    .si-page .si-themes,
    .si-page .si-value,
    .si-page .si-cases,
    .si-page .si-work,
    .si-page .si-closing { padding: 80px 0; }
    .si-page .si-intro { padding-top: 32px; }

    .si-themes-grid { grid-template-columns: 1fr; gap: 18px; }
    .si-value-grid,
    .si-work-grid { grid-template-columns: repeat(2, 1fr); }
    .si-page .si-engage-grid { flex-direction: column; align-items: stretch; }
    .si-page .si-engage-chip { width: 100%; }
}

/* ── SI · MOBILE ───────────────────────────────────────── */
@media (max-width: 640px) {
    .si-page .si-intro,
    .si-page .si-positioning,
    .si-page .si-themes,
    .si-page .si-value,
    .si-page .si-cases,
    .si-page .si-work,
    .si-page .si-closing { padding: 64px 0; }
    .si-page .si-intro { padding-top: 24px; }

    .si-theme-card { padding: 30px 24px 26px; }
    .si-theme-title { font-size: 22px; }
    .si-theme-tagline { font-size: 15px; padding-bottom: 14px; margin-bottom: 16px; }
    .si-theme-body { font-size: 14.5px; }

    .si-value-grid,
    .si-work-grid { grid-template-columns: 1fr; gap: 18px; }
    .si-value-card,
    .si-work-card { padding: 28px 24px 24px; }

    .si-case-row {
        grid-template-columns: 60px 1fr;
        column-gap: 16px;
        padding: 22px 4px;
    }
    .si-case-row:hover { padding-left: 0; }
    .si-case-label { font-size: 17px; }
    .si-case-body { font-size: 14.5px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   ▲▲▲  END · SEMANTIC INTELLIGENCE PAGE (EnWise — EnWise — 1.5)  ▲▲▲
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   ▼▼▼  START · AI ETHICS, PRIVACY & GOVERNANCE PAGE (EnTrust — EnTrust — 1.6)  ▼▼▼
   ════════════════════════════════════════════════════════════════════════════
   File:        ai-ethics-privacy-governance.html
   Body class:  .ae-page
   Practice:    EnTrust
   Sub-pages:   responsible-ai-frameworks.html
                privacy-platform.html  (existing — Xafe)
                bias-detection-fairness.html
                regulatory-compliance-ai.html
   All styles below are scoped under .ae-page so they cannot
   bleed into other pages. Apple-style minimal white UI with
   #b10f1a as the brand accent.
   ════════════════════════════════════════════════════════════════════════════ */

.ae-page .ae-intro,
.ae-page .ae-positioning,
.ae-page .ae-themes,
.ae-page .ae-value,
.ae-page .ae-cases,
.ae-page .ae-work,
.ae-page .ae-closing {
    padding: 110px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}
.ae-page .pe-cta { padding: 110px 0; }
/* Tighten gap between hero and the first section that follows it */
.ae-page .ae-intro { padding-top: 40px; }

/* =========================================================
   AE · HERO — EnTrust brand heading + smaller product subtitle
   ========================================================= */
.ae-page .ae-hero-brand {
    font-size: 104px;
    letter-spacing: -0.05em;
    line-height: 0.92;
    margin-bottom: 18px;
}
.ae-page .ae-hero-brand .accent {
    color: var(--brand);
    background: none;
    -webkit-text-fill-color: var(--brand);
}
.ae-page .ae-hero-product {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 22px;
}
@media (max-width: 575px) {
    .ae-page .ae-hero-brand { font-size: clamp(56px, 18vw, 88px); margin-bottom: 12px; }
    .ae-page .ae-hero-product { font-size: clamp(22px, 6.5vw, 30px); margin-bottom: 16px; }
}

.ae-page .ae-positioning,
.ae-page .ae-value,
.ae-page .ae-work {
    background: #fafafa;
}

/* ── AE · INTRO ───────────────────────────────────────────── */
.ae-intro-shell {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}
.ae-intro-shell .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 28px;
    display: inline-block;
}
.ae-intro-pull {
    font: 700 clamp(28px, 3.6vw, 44px)/1.2 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.02em;
    margin: 0 0 28px;
}
.ae-intro-body {
    font: 400 18px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── AE · POSITIONING / CLOSING (shared prose section) ───── */
.ae-positioning-head,
.ae-closing-head {
    max-width: 980px;
    margin: 0 auto 48px;
    text-align: center;
}
.ae-positioning-head .section-eyebrow,
.ae-closing-head .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
.ae-positioning-title,
.ae-closing-title {
    font: 800 clamp(34px, 4.6vw, 56px)/1.1 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.03em;
    margin: 0;
}
.ae-positioning-title .accent,
.ae-closing-title .accent { color: var(--brand, #b10f1a); }

.ae-prose {
    max-width: 880px;
    margin: 0 auto;
}
.ae-prose p {
    font: 400 17px/1.75 "Inter", sans-serif;
    color: #424245;
    margin: 0 0 22px;
}
.ae-prose p:last-child { margin-bottom: 0; }
.ae-prose-emphasis {
    font-weight: 600 !important;
    color: #1d1d1f !important;
    font-size: 18px !important;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* ── AE · THEMES (4 sub-discipline cards) ───────────────── */
.ae-themes-head {
    max-width: 980px;
    margin: 0 auto 56px;
    text-align: center;
}
.ae-themes-head .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
.ae-themes-section-title {
    font: 800 clamp(34px, 4.6vw, 56px)/1.1 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.03em;
    margin: 0 0 22px;
}
.ae-themes-section-title .accent { color: var(--brand, #b10f1a); }
.ae-themes-section-title .muted { color: #6e6e73; font-weight: 700; }
.ae-themes-deck {
    font: 400 18px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.ae-themes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
}
.ae-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 40px 36px 32px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1),
                border-color .5s ease,
                box-shadow .5s ease;
}
.ae-theme-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(177, 15, 26, .04), transparent 60%);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.ae-theme-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 32px 64px -24px rgba(177, 15, 26, .25);
}
.ae-theme-card:hover::before { opacity: 1; }

.ae-theme-num {
    font: 700 13px/1 "JetBrains Mono", monospace;
    color: var(--brand, #b10f1a);
    letter-spacing: .14em;
    margin-bottom: 18px;
}
.ae-theme-rule {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    margin-bottom: 22px;
    transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.ae-theme-card:hover .ae-theme-rule { width: 96px; }

.ae-theme-title {
    font: 800 26px/1.18 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.02em;
    margin: 0 0 12px;
}
.ae-theme-tagline {
    font: 600 16px/1.5 "Inter", sans-serif;
    color: #1d1d1f;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.ae-theme-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0 0 28px;
    flex-grow: 1;
}
.ae-theme-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1 "Inter", sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: .02em;
    margin-top: auto;
}
.ae-theme-cta i {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ae-theme-card:hover .ae-theme-cta i { transform: translateX(6px); }

/* ── AE · VALUE (6 outcome cards with icons) ───────────── */
.ae-value-head,
.ae-cases-head,
.ae-work-head {
    max-width: 980px;
    margin: 0 auto 56px;
    text-align: center;
}
.ae-value-head .section-eyebrow,
.ae-cases-head .section-eyebrow,
.ae-work-head .section-eyebrow {
    color: var(--brand, #b10f1a);
    font: 600 12px/1.4 "Inter", sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}
.ae-value-title,
.ae-cases-title,
.ae-work-title {
    font: 800 clamp(34px, 4.6vw, 54px)/1.1 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.03em;
    margin: 0 0 22px;
}
.ae-value-title .accent,
.ae-cases-title .accent,
.ae-work-title .accent { color: var(--brand, #b10f1a); }
.ae-value-deck,
.ae-cases-deck,
.ae-work-deck {
    font: 400 18px/1.65 "Inter", sans-serif;
    color: #424245;
    max-width: 760px;
    margin: 0 auto;
}

.ae-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.ae-value-card {
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                box-shadow .45s ease;
}
.ae-value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.ae-value-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 22px;
}

/* Six distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's icon uses a deeper shade of the card's own
   hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.ae-value-card:nth-child(1) {
    background: #ffe8dc;
}
.ae-value-card:nth-child(1):hover {
    background: #fdd6c0;
}
.ae-value-card:nth-child(1) .ae-value-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ae-value-card:nth-child(2) {
    background: #ece5fb;
}
.ae-value-card:nth-child(2):hover {
    background: #dccff5;
}
.ae-value-card:nth-child(2) .ae-value-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ae-value-card:nth-child(3) {
    background: #e3f0d6;
}
.ae-value-card:nth-child(3):hover {
    background: #cee5b5;
}
.ae-value-card:nth-child(3) .ae-value-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.ae-value-card:nth-child(4) {
    background: #dceffa;
}
.ae-value-card:nth-child(4):hover {
    background: #b8dcf2;
}
.ae-value-card:nth-child(4) .ae-value-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

/* Card 05 · Rose */
.ae-value-card:nth-child(5) {
    background: #fde0ec;
}
.ae-value-card:nth-child(5):hover {
    background: #fbcad8;
}
.ae-value-card:nth-child(5) .ae-value-icon {
    background: rgba(190, 70, 130, 0.14);
    color: #b14072;
}

/* Card 06 · Butter */
.ae-value-card:nth-child(6) {
    background: #fdf2c4;
}
.ae-value-card:nth-child(6):hover {
    background: #f9e695;
}
.ae-value-card:nth-child(6) .ae-value-icon {
    background: rgba(170, 130, 30, 0.14);
    color: #8a6a1f;
}
.ae-value-h3 {
    font: 700 19px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.ae-value-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── AE · CASES (8-item numbered list) ─────────────────── */
.ae-cases-list {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ae-case-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    column-gap: 28px;
    padding: 28px 8px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    transition: padding-left .45s cubic-bezier(.2, .8, .2, 1);
}
.ae-case-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ae-case-row:hover { padding-left: 16px; }

.ae-case-num {
    font: 700 14px/1 "JetBrains Mono", monospace;
    color: var(--brand, #b10f1a);
    letter-spacing: .12em;
    padding-top: 6px;
}
.ae-case-content { max-width: 820px; }
.ae-case-label {
    font: 700 19px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}
.ae-case-body {
    font: 400 15.5px/1.7 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── AE · WORK (6 commitment cards) ────────────────────── */
.ae-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1240px;
    margin: 0 auto;
}
.ae-work-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    padding: 32px 28px 28px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
                background-color .45s ease,
                border-color .45s ease,
                box-shadow .45s ease;
}
/* Primary-color hover: the entire card fills with brand red and the
   text/icon flip to white for a dramatic, premium hover state. */
.ae-work-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .35);
}
.ae-work-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 22px;
    transition: background .45s ease, color .45s ease;
}
.ae-work-card:hover .ae-work-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.ae-work-h3 {
    font: 700 18px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
    transition: color .45s ease;
}
.ae-work-card:hover .ae-work-h3 {
    color: #ffffff;
}
.ae-work-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
    transition: color .45s ease;
}
.ae-work-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ── AE · CTA · 4 SUB-DISCIPLINE PATHS ─────────────────── */
.ae-page .ae-engage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 880px;
    margin: 36px auto 44px;
}
.ae-page .ae-engage-chip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    transition: background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.ae-page .ae-engage-chip:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    transform: translateY(-2px);
}
.ae-page .ae-engage-num {
    font: 700 12px/1 "JetBrains Mono", monospace;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .14em;
    flex-shrink: 0;
}
.ae-page .ae-engage-label {
    font: 600 14.5px/1.3 "Inter", sans-serif;
    flex-grow: 1;
}
.ae-page .ae-engage-tail {
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    flex-shrink: 0;
}
.ae-page .ae-engage-chip:hover .ae-engage-tail { transform: translateX(4px); }

/* ── AE · TABLET ───────────────────────────────────────── */
@media (max-width: 991px) {
    .ae-page .ae-intro,
    .ae-page .ae-positioning,
    .ae-page .ae-themes,
    .ae-page .ae-value,
    .ae-page .ae-cases,
    .ae-page .ae-work,
    .ae-page .ae-closing { padding: 80px 0; }
    .ae-page .ae-intro { padding-top: 32px; }

    .ae-themes-grid { grid-template-columns: 1fr; gap: 18px; }
    .ae-value-grid,
    .ae-work-grid { grid-template-columns: repeat(2, 1fr); }
    .ae-page .ae-engage-grid { grid-template-columns: 1fr; }
}

/* ── AE · MOBILE ───────────────────────────────────────── */
@media (max-width: 640px) {
    .ae-page .ae-intro,
    .ae-page .ae-positioning,
    .ae-page .ae-themes,
    .ae-page .ae-value,
    .ae-page .ae-cases,
    .ae-page .ae-work,
    .ae-page .ae-closing { padding: 64px 0; }
    .ae-page .ae-intro { padding-top: 24px; }

    .ae-theme-card { padding: 30px 24px 26px; }
    .ae-theme-title { font-size: 22px; }
    .ae-theme-tagline { font-size: 15px; padding-bottom: 14px; margin-bottom: 16px; }
    .ae-theme-body { font-size: 14.5px; }

    .ae-value-grid,
    .ae-work-grid { grid-template-columns: 1fr; gap: 18px; }
    .ae-value-card,
    .ae-work-card { padding: 28px 24px 24px; }

    .ae-case-row {
        grid-template-columns: 60px 1fr;
        column-gap: 16px;
        padding: 22px 4px;
    }
    .ae-case-row:hover { padding-left: 0; }
    .ae-case-label { font-size: 17px; }
    .ae-case-body { font-size: 14.5px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   ▲▲▲  END · AI ETHICS, PRIVACY & GOVERNANCE PAGE (EnTrust — EnTrust — 1.6)  ▲▲▲
   ════════════════════════════════════════════════════════════════════════════ */


/* ─── Home page Services — anchor card hardening ──────────────────────
   The Services cards became <a> elements (each card links to its inner
   page). This block makes the anchor behave identically to the old div:
   strict height fill, internal flex layout so the "Read More" pin lives
   at the bottom of every card, and no browser focus rings or default
   anchor decorations leaking through. */
a.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    outline: none;
}
a.service-card:focus,
a.service-card:focus-visible,
a.service-card:active {
    outline: none;
    box-shadow: var(--shadow-md);
}
a.service-card p { flex: 1 1 auto; margin-bottom: 24px; }
a.service-card .service-cta { margin-top: auto; }

/* "Read More →" — Apple-style minimal CTA in brand primary. */
.service-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
    transition:
        gap 0.4s var(--ease),
        color 0.3s var(--ease),
        border-color 0.3s var(--ease);
}
.service-cta i {
    font-size: 11px;
    transition: transform 0.4s var(--ease);
}
.service-card:hover .service-cta,
.service-card:active .service-cta,
.service-card:focus-visible .service-cta {
    gap: 14px;
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.30);
}
.service-card:hover .service-cta i,
.service-card:active .service-cta i,
.service-card:focus-visible .service-cta i {
    transform: translateX(4px);
}

/* iOS / touch devices: `:hover` is unreliable on tap and the 0.5s
   transition meant the brand-red state barely started fading in
   before the link navigated. Snap the transition + add a JS-set
   `.is-tapped` class trigger so the red commits instantly. */
@media (hover: none) {
    a.service-card { transition-duration: 0.08s !important; -webkit-tap-highlight-color: transparent; }
    a.service-card .service-num,
    a.service-card h3,
    a.service-card p,
    a.service-card .service-cta,
    a.service-card .service-cta i { transition-duration: 0.08s !important; }
    a.service-card.is-tapped,
    a.service-card:active,
    a.service-card:focus,
    a.service-card:focus-visible {
        transform: translateY(-5px);
        background: var(--brand, #b10f1a);
        border-color: var(--brand, #b10f1a);
        box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
    }
    a.service-card.is-tapped .service-num,
    a.service-card:active .service-num,
    a.service-card:focus .service-num { color: rgba(255, 255, 255, 0.85); }
    a.service-card.is-tapped h3,
    a.service-card:active h3,
    a.service-card:focus h3 { color: #ffffff; }
    a.service-card.is-tapped p,
    a.service-card:active p,
    a.service-card:focus p { color: rgba(255, 255, 255, 0.92); }
    a.service-card.is-tapped .service-cta,
    a.service-card:active .service-cta,
    a.service-card:focus .service-cta {
        gap: 14px;
        color: #ffffff;
        border-top-color: rgba(255, 255, 255, 0.30);
    }
    a.service-card.is-tapped .service-cta i,
    a.service-card:active .service-cta i,
    a.service-card:focus .service-cta i { transform: translateX(4px); }
}

/* Same hardening for the home page capability and platform anchor cards
   to prevent default outlines or stray pseudo-element artefacts. */
.cap-link,
a.platform-card {
    outline: none;
}
.cap-link:focus,
.cap-link:focus-visible,
a.platform-card:focus,
a.platform-card:focus-visible {
    outline: none;
}


/* ─── Sub-page prose alignment ────────────────────────────────────────
   Every sub-page section in cm-page / EnGen / EnAct / EnLearn / EnWise /
   EnTrust uses a centered section head wrapper (cm-section-head,
   lt-section-head, ae-positioning-head, etc.). When a *-prose block
   sits beneath one of those centered headings, the prose paragraphs
   should be centered too so the column reads as one cohesive block.
   This single rule replaces having to re-add per-section overrides
   on every page. */
.cm-prose, .cm-prose p,
.lt-prose, .lt-prose p,
.rg-prose, .rg-prose p,
.mm-prose, .mm-prose p,
.pq-prose, .pq-prose p,
.eg-prose, .eg-prose p,
.aa-prose, .aa-prose p,
.ad-prose, .ad-prose p,
.om-prose, .om-prose p,
.aw-prose, .aw-prose p,
.tu-prose, .tu-prose p,
.ml-prose, .ml-prose p,
.mo-prose, .mo-prose p,
.cv-prose, .cv-prose p,
.tm-prose, .tm-prose p,
.da-prose, .da-prose p,
.ae-prose, .ae-prose p,
.si-prose, .si-prose p {
    text-align: center;
}


/* ─── Footer · Global Presence ────────────────────────────────────────
   Six-office address grid in the dark footer. Apple-style restrained:
   a thin brand-red accent line down the left of each office card, a
   small uppercase eyebrow with a punctuating dot, and tight readable
   typography. Hover state gently brightens the whole card. */
/* (Old `.footer-offices` and `.footer-top` styles retired — the new
   Apple-style structure uses `.footer-cols` + `.footer-region-row`
   instead. The classes are removed from the HTML in all pages.) */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  CASE STUDIES PAGE  ▼▼▼                            |
   |   File: case-studies.html                                |
   |   Section: Insights · 5.2 · Client Outcome Stories       |
   |   All rules below are scoped under .cs-page or cs-*      |
   |   prefixes — safe to delete as a block.                  |
   |   Theme: white surface, brand red (#b10f1a), Apple-grade |
   |   typography, scroll-driven reveals & cinematic trans.   |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- CS · Page-local tokens ---------- */
.cs-page { background: var(--white, #ffffff); }

.cs-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)), transform 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.cs-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.cs-page .reveal.in { opacity: 1; transform: none; }

.cs-page .section-eyebrow {
    display: inline-block;
    font: 700 11px/1 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.cs-section-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.034em;
    color: #1d1d1f;
    margin: 0 0 22px;
}
.cs-section-title .accent {
    background: linear-gradient(180deg, var(--brand, #b10f1a) 0%, #7d0a12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.cs-section-deck {
    font: 400 17px/1.65 'Inter', sans-serif;
    color: #6e6e73;
    margin: 0 auto;
    max-width: 820px;
}

/* ---------- CS-2 · Intro narrative ---------- */
.cs-intro {
    padding: 72px 0 48px;
    background: #ffffff;
}
.cs-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.cs-intro-pull {
    font: 600 clamp(22px, 2.4vw, 30px)/1.4 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 24px;
    letter-spacing: -0.018em;
}
.cs-intro-body {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 auto 14px;
    max-width: 840px;
}
.cs-intro-body:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .cs-intro { padding: 56px 0 36px; }
    .cs-intro-body { font-size: 16px; }
}

/* ---------- CS-3 · Industries · Pinned filmstrip (cs-pillars) ---------
   Reuses the .pe-pillars-* classes from the product-engineering page
   so this section gets the same "How we build" pinned filmstrip
   treatment: sticky stage, big number-fill animation tied to scroll,
   chapters swap in place, dot navigation at the bottom. We only
   override the section height (12 chapters instead of 4) and add a
   small deck under the title.
---------------------------------------------------------------------- */
.cs-pillars {
    /* 12 chapters at ~50vh runway each + one viewport for the sticky
       stage. Total = 100vh + 12 × 50vh = 700vh. Compact yet keeps
       enough scroll runway per chapter for the cinematic transitions. */
    height: 700vh;
}

/* Subtitle deck under the section title — restrained, not in PE template */
.cs-pillars .pe-pillars-deck {
    margin: 14px 0 0;
    max-width: 720px;
    font: 400 16px/1.6 'Inter', sans-serif;
    color: #515154;
}

/* Compact the pinned shell so this section reads tight against the next */
.cs-pillars .pe-pillars-shell {
    padding-top: 96px;
    padding-bottom: 24px;
}
.cs-pillars .pe-pillars-head {
    margin-bottom: 20px;
}

/* Tighter dot row when there are 12 dots instead of 4 */
.cs-pillars .pe-pillar-dots { gap: 10px; }
.cs-pillars .pe-pillar-dot { width: 8px; height: 8px; }

@media (max-width: 991px) {
    /* On mobile the pe-pillars stylesheet already collapses the section
       to a static stacked layout, so we just need to drop the height
       override that drives the desktop pinning. */
    .cs-pillars { height: auto; }
    .cs-pillars .pe-pillars-deck { font-size: 15px; }
}

/* ---------- CS-4 · Platforms · Compact 2-column tile grid -------------
   Tight, Apple-grade tiles with hairline borders, restrained
   numbered badge + capability tag, and crisp typography. No heavy
   shadows; subtle hover lift only.
---------------------------------------------------------------------- */

/* ---------- CS-4 · Platforms · Apple-style editorial list ------------
   No card chrome — a clean, scannable numbered list. Each row is a
   two-column row: left rail (display number + capability tag),
   right body (title + prose). Hairline divider between rows; subtle
   row-hover that nudges the rail and reveals a brand-red accent.
---------------------------------------------------------------------- */
.cs-platforms {
    padding: 72px 0 80px;
    background: #ffffff;
}
.cs-platforms-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 40px;
}
.cs-platform-list {
    max-width: 1080px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cs-platform-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 56px;
    align-items: start;
    padding: 36px 18px 36px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    transition: padding .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.cs-platform-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 36px;
    bottom: 36px;
    width: 2px;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    opacity: 0;
    transform: scaleY(.4);
    transform-origin: top center;
    transition: opacity .35s var(--ease, cubic-bezier(.2,.7,.2,1)),
                transform .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.cs-platform-item:hover {
    padding-left: 30px;
    padding-right: 30px;
}
.cs-platform-item:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

.cs-platform-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}
.cs-platform-num {
    font: 600 clamp(38px, 4vw, 56px)/1 'Inter', 'Manrope', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(177, 15, 26, 0.55);
    letter-spacing: -0.03em;
    transition: color .5s var(--ease, cubic-bezier(.2,.7,.2,1)),
                -webkit-text-stroke-color .5s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.cs-platform-item:hover .cs-platform-num {
    color: var(--brand, #b10f1a);
    -webkit-text-stroke-color: var(--brand, #b10f1a);
}
.cs-platform-tag {
    display: inline-flex;
    align-items: center;
    font: 600 10.5px/1 'Inter', sans-serif;
    color: #6e6e73;
    background: #f2f2f4;
    border-radius: 999px;
    padding: 7px 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.cs-platform-body { max-width: 760px; }
.cs-platform-title {
    font: 600 clamp(22px, 2vw, 28px)/1.22 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 4px 0 14px;
    letter-spacing: -0.022em;
}
.cs-platform-item p {
    font: 400 16px/1.72 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

@media (max-width: 991px) {
    .cs-platforms { padding: 56px 0 64px; }
    .cs-platforms-head { margin-bottom: 32px; }
    .cs-platform-item {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 26px 14px;
    }
    .cs-platform-item:hover { padding-left: 20px; padding-right: 20px; }
    .cs-platform-rail {
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }
    .cs-platform-num { font-size: 36px; -webkit-text-stroke-width: 1.2px; }
    .cs-platform-title { font-size: 21px; }
    .cs-platform-item p { font-size: 15px; }
}

/* ---------- CS-5 · Before / After · Two-stage editorial composition ---
   Apple-grade comparison: no card chrome, single hairline frame around
   both columns + a vertical hairline divider between them. Big display
   stage labels with "Stage 01 / 02" micro-tags. The After column gets
   a soft warm-cream gradient and gradient-text label that visually
   signals the destination state.
---------------------------------------------------------------------- */
.cs-transform {
    padding: 72px 0 80px;
    background: #ffffff;
}
.cs-transform-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 40px;
}
.cs-transform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    position: relative;
}

.cs-transform-col {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 40px 44px 44px;
}
/* Single vertical hairline between the two columns */
.cs-transform-before {
    border-right: 1px solid rgba(0, 0, 0, 0.10);
}
/* Soft destination tint for After */
.cs-transform-after {
    background: linear-gradient(180deg, #fdf3f4 0%, #ffffff 80%);
}

/* Stage header: micro step + display label */
.cs-transform-stage {
    margin: 0 0 28px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cs-transform-after .cs-transform-stage {
    border-bottom-color: rgba(177, 15, 26, 0.18);
}
.cs-transform-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 10.5px/1 'Inter', sans-serif;
    color: #6e6e73;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.cs-transform-step::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 1.5px;
    background: #c4c4c8;
    border-radius: 2px;
}
.cs-transform-after .cs-transform-step { color: var(--brand, #b10f1a); }
.cs-transform-after .cs-transform-step::before { background: var(--brand, #b10f1a); }

.cs-transform-label {
    display: block;
    font: 600 clamp(28px, 3vw, 40px)/1.08 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.026em;
    margin: 0;
    text-transform: none;
    padding: 0;
    border: 0;
    width: auto;
}
.cs-transform-after .cs-transform-label {
    background: linear-gradient(180deg, var(--brand, #b10f1a) 0%, #7d0a12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Editorial bullet list — hairline dividers between top-level items */
.cs-transform-list,
.cs-transform-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cs-transform-list > li {
    position: relative;
    padding: 18px 0 18px 26px;
    font: 400 15px/1.65 'Inter', sans-serif;
    color: #424245;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cs-transform-list > li:first-child { padding-top: 0; }
.cs-transform-list > li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.cs-transform-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    width: 14px;
    height: 1.5px;
    background: #c4c4c8;
    border-radius: 2px;
}
.cs-transform-list > li:first-child::before { top: 8px; }
.cs-transform-after .cs-transform-list > li::before {
    background: var(--brand, #b10f1a);
}
.cs-transform-after .cs-transform-list > li {
    border-bottom-color: rgba(177, 15, 26, 0.10);
}
.cs-transform-list > li > ul {
    margin-top: 12px;
    padding-left: 4px;
}
.cs-transform-list > li > ul > li {
    position: relative;
    padding: 0 0 8px 20px;
    font: 400 13.5px/1.6 'Inter', sans-serif;
    color: #6e6e73;
}
.cs-transform-list > li > ul > li:last-child { padding-bottom: 0; }
.cs-transform-list > li > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d4d4d8;
}
.cs-transform-after .cs-transform-list > li > ul > li::before {
    background: rgba(177, 15, 26, 0.5);
}

/* Closing emphasis */
.cs-transform-close {
    margin: 44px auto 0;
    text-align: center;
    max-width: 880px;
}
.cs-transform-emphasis {
    font: 600 clamp(20px, 2vw, 26px)/1.38 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 18px;
    letter-spacing: -0.016em;
}
.cs-transform-close p {
    font: 400 16px/1.74 'Inter', sans-serif;
    color: #515154;
    margin: 0 auto 12px;
}
.cs-transform-close p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .cs-transform { padding: 56px 0 64px; }
    .cs-transform-head { margin-bottom: 32px; }
    .cs-transform-grid { grid-template-columns: 1fr; }
    .cs-transform-col { padding: 32px 22px 36px; }
    .cs-transform-before { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.10); }
    .cs-transform-stage { margin-bottom: 22px; padding-bottom: 16px; }
    .cs-transform-list > li { padding-left: 22px; font-size: 14.5px; }
    .cs-transform-list > li > ul > li { font-size: 13px; }
    .cs-transform-close { margin-top: 32px; }
}

/* ============================================================
   ▲▲▲  END CASE STUDIES PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  INNOVATIONS LAB PAGE  ▼▼▼                         |
   |   File: innovations-lab.html                             |
   |   Section: Insights · Innovations Lab                    |
   |   All rules below are scoped under .il-page or il-*      |
   |   prefixes — safe to delete as a block.                  |
   |   Theme: white surface, brand red (#b10f1a), Apple-grade |
   |   typography, scroll-driven reveals & cinematic trans.   |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- IL · Page-local tokens ---------- */
.il-page { background: var(--white, #ffffff); }

.il-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)), transform 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.il-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.il-page .reveal.in { opacity: 1; transform: none; }

.il-page .section-eyebrow {
    display: inline-block;
    font: 700 11px/1 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.il-section-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.034em;
    color: #1d1d1f;
    margin: 0 0 22px;
}
.il-section-title .accent {
    background: linear-gradient(180deg, var(--brand, #b10f1a) 0%, #7d0a12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.il-section-deck {
    font: 400 17px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0 auto 14px;
    max-width: 820px;
}
.il-section-deck:last-child { margin-bottom: 0; }

/* ---------- IL-2 · Intro narrative ---------- */
.il-intro {
    padding: 72px 0 48px;
    background: #ffffff;
}
.il-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.il-intro-pull {
    font: 600 clamp(22px, 2.4vw, 30px)/1.4 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 24px;
    letter-spacing: -0.018em;
}
.il-intro-body {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 auto 14px;
    max-width: 840px;
}
.il-intro-body:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .il-intro { padding: 56px 0 36px; }
    .il-intro-body { font-size: 16px; }
}

/* ---------- IL-3/4 · Innovation Pillars ---------------------------------
   Two-column editorial pillars: large outlined display number on the
   left rail (sticky on desktop, lingers as the prose scrolls past),
   long-form practice prose on the right. Hairline divider between
   pillars; the second pillar (.il-pillar-alt) carries a subtle
   off-white tint so the two stack visually distinct.
---------------------------------------------------------------------- */
/* ---------- IL-3 / IL-4 · Innovation Pillars (editorial sticky) -----
   Mirrors the gp-location pattern: a sticky aside on the left holds
   the big pillar title; the body paragraphs scroll past on the right.
   The huge title stays anchored as the user reads — same effect as
   "Kolkata" / "San Francisco" sticking on the Global Presence page. */
.il-pillar {
    padding: 80px 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    position: relative;
}
.il-pillar:first-of-type { padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.10); }
.il-pillar:last-of-type { border-bottom: 0; }
.il-pillar-alt {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
}

.il-pillar-row {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 80px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

/* Sticky aside — anchors at top:120px while body scrolls past it. */
.il-pillar-rail {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.il-pillar-flag {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    margin-bottom: 18px;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(177, 15, 26, 0.18);
    flex-shrink: 0;
}
.il-pillar-tag {
    font: 700 11px/1 'Inter', sans-serif;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 10px;
}
.il-pillar-title {
    font: 600 clamp(40px, 5.4vw, 68px)/1.02 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.038em;
    margin: 0;
}
.il-pillar-title::after {
    content: ".";
    color: var(--brand, #b10f1a);
}
.il-pillar-role {
    font: 600 13px/1.4 'Inter', sans-serif;
    color: #86868b;
    margin: 14px 0 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.il-pillar-body {
    max-width: 720px;
    padding-top: 8px;
}
.il-pillar-lede {
    font: 600 clamp(22px, 2.4vw, 30px)/1.42 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 28px;
    letter-spacing: -0.022em;
}
.il-pillar-body p:not(.il-pillar-lede) {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.il-pillar-body p:last-child { margin: 0; }

/* Per-paragraph reveal — each paragraph fades up as it enters the
   viewport during scroll, giving a continuous cascade. */
.il-pillar-body > * {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.il-pillar-body > *.in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .il-pillar-body > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 991px) {
    .il-pillar { padding: 56px 0; }
    .il-pillar:first-of-type { padding-top: 56px; }
    .il-pillar-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .il-pillar-rail {
        position: static;
        gap: 4px;
    }
    .il-pillar-flag { margin-bottom: 14px; }
    .il-pillar-title { font-size: clamp(36px, 8vw, 52px); }
    .il-pillar-role { margin-top: 10px; }
    .il-pillar-body { padding-top: 0; }
    .il-pillar-body p:not(.il-pillar-lede) { font-size: 16px; }
}

/* ---------- IL-5 · Ongoing Research Projects --------------------------
   Centered head + 2x2 research card grid + closing bridge prose.
   Cards are restrained: hairline border, top brand-red accent on
   hover, numbered badge + capability tag header, title + prose body.
---------------------------------------------------------------------- */
.il-research {
    padding: 80px 0 88px;
    background: #ffffff;
}
.il-research-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 48px;
}
.il-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.il-research-card {
    background: #ffffff;
    border: 0;
    border-radius: 20px;
    padding: 32px 32px 30px;
    position: relative;
    overflow: hidden;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.il-research-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -28px rgba(15, 30, 60, 0.20);
}

/* Four distinct soft sweet pastel fills — solid colors, no gradient,
   no border. Each card's number badge uses a deeper shade of the
   card's own hue family; on hover the bg deepens to a richer pastel. */

/* Card 01 · Peach */
.il-research-card:nth-child(1) {
    background: #ffe8dc;
}
.il-research-card:nth-child(1):hover {
    background: #fdd6c0;
}
.il-research-card:nth-child(1) .il-research-num {
    color: #c85f32;
}
.il-research-card:nth-child(1) .il-research-tag {
    background: rgba(200, 95, 50, 0.14);
    color: #8c4a2b;
}

/* Card 02 · Lavender */
.il-research-card:nth-child(2) {
    background: #ece5fb;
}
.il-research-card:nth-child(2):hover {
    background: #dccff5;
}
.il-research-card:nth-child(2) .il-research-num {
    color: #6e50c8;
}
.il-research-card:nth-child(2) .il-research-tag {
    background: rgba(110, 80, 200, 0.14);
    color: #4f3d8a;
}

/* Card 03 · Pistachio */
.il-research-card:nth-child(3) {
    background: #e3f0d6;
}
.il-research-card:nth-child(3):hover {
    background: #cee5b5;
}
.il-research-card:nth-child(3) .il-research-num {
    color: #5f8c37;
}
.il-research-card:nth-child(3) .il-research-tag {
    background: rgba(95, 140, 55, 0.16);
    color: #4a6a32;
}

/* Card 04 · Sky */
.il-research-card:nth-child(4) {
    background: #dceffa;
}
.il-research-card:nth-child(4):hover {
    background: #b8dcf2;
}
.il-research-card:nth-child(4) .il-research-num {
    color: #326eb4;
}
.il-research-card:nth-child(4) .il-research-tag {
    background: rgba(50, 110, 180, 0.14);
    color: #355576;
}

.il-research-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.il-research-num {
    font: 700 11.5px/1 'JetBrains Mono', monospace;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.18em;
}
.il-research-tag {
    display: inline-flex;
    align-items: center;
    font: 600 10.5px/1 'Inter', sans-serif;
    color: #6e6e73;
    background: #f2f2f4;
    border-radius: 999px;
    padding: 7px 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.il-research-title {
    font: 600 22px/1.22 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.il-research-card p {
    font: 400 15px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

.il-research-close {
    max-width: 880px;
    margin: 56px auto 0;
    text-align: center;
}
.il-research-close p {
    font: 400 16.5px/1.74 'Inter', sans-serif;
    color: #515154;
    margin: 0 0 14px;
}
.il-research-close p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .il-research { padding: 56px 0 64px; }
    .il-research-head { margin-bottom: 36px; }
    .il-research-grid { grid-template-columns: 1fr; gap: 14px; }
    .il-research-card { padding: 26px 24px 24px; }
    .il-research-close { margin-top: 36px; }
}

/* ---------- IL-6 · Innovation Philosophy · Closing manifesto -----------
   A centered, dramatic closing band. Restrained typography, a strong
   philosophy statement at the top, two body paragraphs, then a
   brand-red mantra line — the take-away the page leaves you with.
---------------------------------------------------------------------- */
.il-philosophy {
    padding: 80px 0 96px;
    background: linear-gradient(180deg, #ffffff 0%, #fdf3f4 100%);
}
.il-philosophy-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.il-philosophy-statement {
    font: 600 clamp(28px, 3.4vw, 44px)/1.18 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.026em;
    margin: 0 0 32px;
}
.il-philosophy-body {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 auto 16px;
    max-width: 800px;
}
.il-philosophy-mantra {
    margin: 36px auto 0;
    padding-top: 32px;
    max-width: 760px;
    border-top: 1px solid rgba(177, 15, 26, 0.20);
    font: 600 clamp(20px, 2.2vw, 28px)/1.4 'Manrope', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: -0.014em;
}

@media (max-width: 991px) {
    .il-philosophy { padding: 56px 0 72px; }
    .il-philosophy-statement { margin-bottom: 24px; }
    .il-philosophy-body { font-size: 16px; }
    .il-philosophy-mantra { margin-top: 28px; padding-top: 24px; }
}

/* ============================================================
   ▲▲▲  END INNOVATIONS LAB PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  SOCIAL PLATFORM (EnSocial) PAGE  ▼▼▼              |
   |   File: social-platform.html                             |
   |   Section: Platforms · 3.6 · EnSocial                    |
   |   All rules below are scoped under .sp-page or sp-*      |
   |   prefixes — safe to delete as a block.                  |
   |   Theme: white surface, brand red (#b10f1a), Apple-grade |
   |   typography, scroll-driven reveals & cinematic trans.   |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- SP · Page-local tokens ---------- */
.sp-page { background: var(--white, #ffffff); }

.sp-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)), transform 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.sp-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.sp-page .reveal.in { opacity: 1; transform: none; }

.sp-page .section-eyebrow {
    display: inline-block;
    font: 700 11px/1 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.sp-section-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.034em;
    color: #1d1d1f;
    margin: 0 0 22px;
}
.sp-section-title .accent {
    background: linear-gradient(180deg, var(--brand, #b10f1a) 0%, #7d0a12 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sp-section-deck {
    font: 400 17px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0 auto;
    max-width: 820px;
}

/* ---------- SP-2 · Intro narrative ---------- */
.sp-intro {
    padding: 72px 0 48px;
    background: #ffffff;
}
.sp-intro-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.sp-intro-pull {
    font: 600 clamp(22px, 2.4vw, 30px)/1.4 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 24px;
    letter-spacing: -0.018em;
}
.sp-intro-body {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 auto 14px;
    max-width: 840px;
}
.sp-intro-body:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
    .sp-intro { padding: 56px 0 36px; }
    .sp-intro-body { font-size: 16px; }
}

/* ---------- SP-3 · Unified Intelligence Layer ---------- */
.sp-unified {
    padding: 72px 0 80px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.sp-unified-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 40px;
}
.sp-unified-body {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.sp-unified-body p {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.sp-unified-body p:last-child { margin: 0; }

@media (max-width: 991px) {
    .sp-unified { padding: 56px 0 64px; }
    .sp-unified-body p { font-size: 16px; }
}

/* ---------- SP-4 · Two Pillars (Section 02) ---------- */
.sp-pillars {
    padding: 80px 0 90px;
    background: #ffffff;
}
.sp-pillars-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 48px;
}
.sp-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
}
.sp-pillar-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                border-color .35s ease;
}
.sp-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -28px rgba(15, 30, 60, 0.20);
    border-color: rgba(177, 15, 26, 0.16);
}

/* Pillar A peach / Pillar B sky for distinct visual identity */
.sp-pillar-card:nth-child(1) {
    background: #ffe8dc;
    border-color: transparent;
}
.sp-pillar-card:nth-child(1):hover {
    background: #fdd6c0;
}
.sp-pillar-card:nth-child(1) .sp-pillar-card-head i {
    background: rgba(200, 95, 50, 0.16);
    color: #c85f32;
}
.sp-pillar-card:nth-child(1) .sp-pillar-tag {
    background: rgba(200, 95, 50, 0.18);
    color: #8c4a2b;
}
.sp-pillar-card:nth-child(1) .sp-pillar-cta {
    color: #c85f32;
}
.sp-pillar-card:nth-child(2) {
    background: #dceffa;
    border-color: transparent;
}
.sp-pillar-card:nth-child(2):hover {
    background: #b8dcf2;
}
.sp-pillar-card:nth-child(2) .sp-pillar-card-head i {
    background: rgba(50, 110, 180, 0.16);
    color: #326eb4;
}
.sp-pillar-card:nth-child(2) .sp-pillar-tag {
    background: rgba(50, 110, 180, 0.18);
    color: #355576;
}
.sp-pillar-card:nth-child(2) .sp-pillar-cta {
    color: #326eb4;
}

.sp-pillar-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.sp-pillar-card-head i {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.sp-pillar-tag {
    font: 700 10.5px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
}
.sp-pillar-title {
    font: 600 clamp(24px, 2.4vw, 30px)/1.18 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.022em;
    margin: 0 0 18px;
}
.sp-pillar-card p {
    font: 400 16px/1.74 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 24px;
    flex: 1;
}
.sp-pillar-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1 'Inter', sans-serif;
    letter-spacing: 0.005em;
    text-decoration: none;
    align-self: flex-start;
    transition: gap .3s ease;
}
.sp-pillar-cta:hover {
    gap: 14px;
    text-decoration: none;
}
.sp-pillar-cta i {
    transition: transform .3s ease;
}
.sp-pillar-card:hover .sp-pillar-cta i {
    transform: translateX(4px);
}

@media (max-width: 991px) {
    .sp-pillars { padding: 56px 0 64px; }
    .sp-pillars-head { margin-bottom: 36px; }
    .sp-pillars-grid { grid-template-columns: 1fr; gap: 18px; }
    .sp-pillar-card { padding: 32px 26px 30px; }
}

/* ---------- SP-5 · Capability Themes (Section 03) ---------- */
.sp-caps {
    padding: 80px 0 90px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.sp-caps-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 48px;
}
.sp-caps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.sp-caps-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 28px 26px 26px;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.sp-caps-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.sp-caps-card-wide { grid-column: 1 / -1; }
.sp-caps-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 18px;
}
.sp-caps-title {
    font: 600 19px/1.25 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.018em;
    margin: 0 0 12px;
}
.sp-caps-card p {
    font: 400 14.5px/1.65 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Seven distinct sweet pastel fills cycling across the 7 capability cards. */
.sp-caps-card:nth-child(1) { background: #ffe8dc; }
.sp-caps-card:nth-child(1):hover { background: #fdd6c0; }
.sp-caps-card:nth-child(1) .sp-caps-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.sp-caps-card:nth-child(2) { background: #ece5fb; }
.sp-caps-card:nth-child(2):hover { background: #dccff5; }
.sp-caps-card:nth-child(2) .sp-caps-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.sp-caps-card:nth-child(3) { background: #e3f0d6; }
.sp-caps-card:nth-child(3):hover { background: #cee5b5; }
.sp-caps-card:nth-child(3) .sp-caps-icon { background: rgba(95, 140, 55, 0.16); color: #5f8c37; }

.sp-caps-card:nth-child(4) { background: #dceffa; }
.sp-caps-card:nth-child(4):hover { background: #b8dcf2; }
.sp-caps-card:nth-child(4) .sp-caps-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.sp-caps-card:nth-child(5) { background: #fde0ec; }
.sp-caps-card:nth-child(5):hover { background: #fbcad8; }
.sp-caps-card:nth-child(5) .sp-caps-icon { background: rgba(190, 70, 130, 0.14); color: #b14072; }

.sp-caps-card:nth-child(6) { background: #fdf2c4; }
.sp-caps-card:nth-child(6):hover { background: #f9e695; }
.sp-caps-card:nth-child(6) .sp-caps-icon { background: rgba(170, 130, 30, 0.14); color: #8a6a1f; }

.sp-caps-card:nth-child(7) { background: #d6f0e2; }
.sp-caps-card:nth-child(7):hover { background: #b8e3cd; }
.sp-caps-card:nth-child(7) .sp-caps-icon { background: rgba(45, 140, 100, 0.14); color: #2f8c63; }

@media (max-width: 991px) {
    .sp-caps { padding: 56px 0 64px; }
    .sp-caps-head { margin-bottom: 36px; }
    .sp-caps-grid { grid-template-columns: 1fr; gap: 14px; }
    .sp-caps-card { padding: 24px 22px 22px; }
    .sp-caps-card-wide { grid-column: auto; }
}

/* ---------- SP-6 · What Organisations Gain (Section 04) ---------- */
.sp-gain {
    padding: 80px 0 80px;
    background: #ffffff;
}
.sp-gain-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 40px;
}
.sp-gain-body {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.sp-gain-lead {
    font: 600 clamp(20px, 2.1vw, 26px)/1.45 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 24px;
    letter-spacing: -0.016em;
}
.sp-gain-body p:not(.sp-gain-lead) {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.sp-gain-body p:last-child { margin: 0; }

@media (max-width: 991px) {
    .sp-gain { padding: 56px 0 64px; }
    .sp-gain-body p:not(.sp-gain-lead) { font-size: 16px; }
}

/* ---------- SP-7 · Where EnSocial Is Used (Section 05) ---------- */
.sp-cases {
    padding: 80px 0 90px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.sp-cases-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 48px;
}
.sp-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.sp-case-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 32px 30px 28px;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                border-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
/* Primary-color hover for use cases */
.sp-case-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.35);
}
.sp-case-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 18px;
    transition: background .35s ease, color .35s ease;
}
.sp-case-card:hover .sp-case-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.sp-case-title {
    font: 600 19px/1.25 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.018em;
    margin: 0 0 12px;
    transition: color .35s ease;
}
.sp-case-card:hover .sp-case-title {
    color: #ffffff;
}
.sp-case-card p {
    font: 400 14.5px/1.65 'Inter', sans-serif;
    color: #515154;
    margin: 0;
    transition: color .35s ease;
}
.sp-case-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 991px) {
    .sp-cases { padding: 56px 0 64px; }
    .sp-cases-grid { grid-template-columns: 1fr; gap: 14px; }
    .sp-case-card { padding: 26px 22px 24px; }
}

/* ---------- SP-8 · How EnSocial Works (Section 06) — 5-step pipeline ---------- */
.sp-flow {
    padding: 80px 0 90px;
    background: #ffffff;
}
.sp-flow-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 48px;
}
.sp-flow-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    max-width: 1240px;
    margin: 0 auto;
}
.sp-flow-step {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 26px 22px 22px;
    text-align: center;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.sp-flow-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.sp-flow-num {
    display: block;
    margin-bottom: 12px;
    font: 700 11px/1 'Inter', sans-serif;
    letter-spacing: 0.18em;
    color: rgba(0, 0, 0, 0.30);
}
.sp-flow-step > i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: 12px;
}
.sp-flow-step h4 {
    font: 600 16px/1.25 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.012em;
    margin: 0 0 6px;
}
.sp-flow-step p {
    font: 400 13px/1.55 'Inter', sans-serif;
    color: #6a6a6a;
    margin: 0;
}
.sp-flow-arrow {
    align-self: center;
    color: var(--brand, #b10f1a);
    font-size: 14px;
    padding: 0 6px;
    flex-shrink: 0;
}

/* Five sweet pastel fills for the pipeline steps */
.sp-flow-step:nth-of-type(1) { background: #ffe8dc; }
.sp-flow-step:nth-of-type(1):hover { background: #fdd6c0; }
.sp-flow-step:nth-of-type(1) > i { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.sp-flow-step:nth-of-type(2) { background: #ece5fb; }
.sp-flow-step:nth-of-type(2):hover { background: #dccff5; }
.sp-flow-step:nth-of-type(2) > i { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.sp-flow-step:nth-of-type(3) { background: #e3f0d6; }
.sp-flow-step:nth-of-type(3):hover { background: #cee5b5; }
.sp-flow-step:nth-of-type(3) > i { background: rgba(95, 140, 55, 0.16); color: #5f8c37; }

.sp-flow-step:nth-of-type(4) { background: #dceffa; }
.sp-flow-step:nth-of-type(4):hover { background: #b8dcf2; }
.sp-flow-step:nth-of-type(4) > i { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.sp-flow-step:nth-of-type(5) { background: #fde0ec; }
.sp-flow-step:nth-of-type(5):hover { background: #fbcad8; }
.sp-flow-step:nth-of-type(5) > i { background: rgba(190, 70, 130, 0.14); color: #b14072; }

@media (max-width: 991px) {
    .sp-flow { padding: 56px 0 64px; }
    .sp-flow-grid {
        flex-direction: column;
        gap: 14px;
    }
    .sp-flow-arrow {
        transform: rotate(90deg);
    }
}

/* ---------- SP-9 · How Entiovi Works with Clients (Section 07) ---------- */
.sp-engage-narrative {
    padding: 80px 0 80px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.sp-engage-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.sp-engage-lead {
    font: 600 clamp(20px, 2.1vw, 26px)/1.45 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 24px;
    letter-spacing: -0.016em;
}
.sp-engage-shell p:not(.sp-engage-lead) {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.sp-engage-shell p:last-child { margin: 0; }

@media (max-width: 991px) {
    .sp-engage-narrative { padding: 56px 0 64px; }
    .sp-engage-shell p:not(.sp-engage-lead) { font-size: 16px; }
}

/* ---------- SP-10 · Explore the Two Pillars (Section 08) ---------- */
.sp-explore {
    padding: 80px 0 90px;
    background: #ffffff;
}
.sp-explore-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 48px;
}
.sp-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
}
.sp-explore-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    text-decoration: none;
    color: inherit;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.sp-explore-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -28px rgba(15, 30, 60, 0.20);
    text-decoration: none;
    color: inherit;
}
.sp-explore-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.sp-explore-card-head i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.sp-explore-card-tag {
    font: 700 10.5px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
}
.sp-explore-card-title {
    font: 600 22px/1.22 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.sp-explore-card p {
    font: 400 15.5px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0 0 22px;
    flex: 1;
}
.sp-explore-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1 'Inter', sans-serif;
    letter-spacing: 0.005em;
    transition: gap .3s ease;
}
.sp-explore-card:hover .sp-explore-card-cta { gap: 14px; }

/* Pillar A peach / Pillar B sky — reinforce the same identity from SP-4 */
.sp-explore-card:nth-child(1) {
    background: #ffe8dc;
}
.sp-explore-card:nth-child(1):hover {
    background: #fdd6c0;
}
.sp-explore-card:nth-child(1) .sp-explore-card-head i {
    background: rgba(200, 95, 50, 0.16);
    color: #c85f32;
}
.sp-explore-card:nth-child(1) .sp-explore-card-tag {
    background: rgba(200, 95, 50, 0.18);
    color: #8c4a2b;
}
.sp-explore-card:nth-child(1) .sp-explore-card-cta {
    color: #c85f32;
}

.sp-explore-card:nth-child(2) {
    background: #dceffa;
}
.sp-explore-card:nth-child(2):hover {
    background: #b8dcf2;
}
.sp-explore-card:nth-child(2) .sp-explore-card-head i {
    background: rgba(50, 110, 180, 0.16);
    color: #326eb4;
}
.sp-explore-card:nth-child(2) .sp-explore-card-tag {
    background: rgba(50, 110, 180, 0.18);
    color: #355576;
}
.sp-explore-card:nth-child(2) .sp-explore-card-cta {
    color: #326eb4;
}

@media (max-width: 991px) {
    .sp-explore { padding: 56px 0 64px; }
    .sp-explore-head { margin-bottom: 36px; }
    .sp-explore-grid { grid-template-columns: 1fr; gap: 18px; }
    .sp-explore-card { padding: 28px 24px 26px; }
}

/* ============================================================
   ▲▲▲  END SOCIAL PLATFORM (EnSocial) PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  SOCIAL LISTENING (EnSocial · Pillar 01)  ▼▼▼      |
   |   File: social-listening.html                            |
   |   Section: Platforms · EnSocial · Pillar 01              |
   |   All rules below are scoped under .sp-page or sl-*      |
   |   prefixes — adds only the few elements unique to the    |
   |   sub-page (3-stage architecture, closing 1-card link    |
   |   block, 2×2 outputs grid). Reuses all sp-* styles.      |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- SL · Three-stage architecture ---------- */
.sl-stages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.sl-stage-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                border-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
/* Primary-color hover: the entire card fills with brand red and the
   pill, icon, title, body all flip to white. */
.sl-stage-card:hover {
    transform: translateY(-6px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.35);
}
.sl-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.sl-stage-num {
    font: 700 11px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(177, 15, 26, 0.10);
    color: var(--brand, #b10f1a);
    transition: background .35s ease, color .35s ease;
}
.sl-stage-card:hover .sl-stage-num {
    background: rgba(255, 255, 255, 0.20);
    color: #ffffff;
}
.sl-stage-head i {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    transition: background .35s ease, color .35s ease;
}
.sl-stage-card:hover .sl-stage-head i {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.sl-stage-title {
    font: 600 22px/1.22 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    transition: color .35s ease;
}
.sl-stage-card:hover .sl-stage-title {
    color: #ffffff;
}
.sl-stage-card p {
    font: 400 15px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0;
    transition: color .35s ease;
}
.sl-stage-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 991px) {
    .sl-stages-grid { grid-template-columns: 1fr; gap: 14px; }
    .sl-stage-card { padding: 30px 26px 28px; }
}

/* ---------- SL · Outputs · 2×2 grid override ---------- */
.sl-outputs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 1080px !important;
}
@media (max-width: 991px) {
    .sl-outputs-grid { grid-template-columns: 1fr !important; }
}

/* ---------- SL · Analytical layers · Primary-color hover --------------
   Scoped override for the "Analytical layers" section only — replaces
   the cycling pastel fills with a clean white-at-rest, brand-red-on-
   hover treatment. Other sections (sources, outputs, commitments)
   keep their cycling sweet pastels. */
#sl-layers .sp-caps-card,
#sl-layers .sp-caps-card:nth-child(1),
#sl-layers .sp-caps-card:nth-child(2),
#sl-layers .sp-caps-card:nth-child(3),
#sl-layers .sp-caps-card:nth-child(4),
#sl-layers .sp-caps-card:nth-child(5),
#sl-layers .sp-caps-card:nth-child(6) {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
#sl-layers .sp-caps-card:hover,
#sl-layers .sp-caps-card:nth-child(1):hover,
#sl-layers .sp-caps-card:nth-child(2):hover,
#sl-layers .sp-caps-card:nth-child(3):hover,
#sl-layers .sp-caps-card:nth-child(4):hover,
#sl-layers .sp-caps-card:nth-child(5):hover,
#sl-layers .sp-caps-card:nth-child(6):hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.35);
}
#sl-layers .sp-caps-card .sp-caps-icon,
#sl-layers .sp-caps-card:nth-child(1) .sp-caps-icon,
#sl-layers .sp-caps-card:nth-child(2) .sp-caps-icon,
#sl-layers .sp-caps-card:nth-child(3) .sp-caps-icon,
#sl-layers .sp-caps-card:nth-child(4) .sp-caps-icon,
#sl-layers .sp-caps-card:nth-child(5) .sp-caps-icon,
#sl-layers .sp-caps-card:nth-child(6) .sp-caps-icon {
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    transition: background .35s ease, color .35s ease;
}
#sl-layers .sp-caps-card:hover .sp-caps-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
#sl-layers .sp-caps-title {
    transition: color .35s ease;
}
#sl-layers .sp-caps-card:hover .sp-caps-title {
    color: #ffffff;
}
#sl-layers .sp-caps-card p {
    transition: color .35s ease;
}
#sl-layers .sp-caps-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ---------- SL · Sources & coverage · 2×2 + 1 full-width below -------
   Reorganises the 5-card grid into a clean 2-col layout for the four
   source-type cards, with the multilingual card sitting full-width
   below as a uniform card (same vertical structure as the others). */
#sl-sources .sp-caps-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1080px;
    gap: 18px;
}
#sl-sources .sp-caps-card-wide {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    #sl-sources .sp-caps-grid { grid-template-columns: 1fr; }
}

/* ---------- SL · Commitments grid · 3-col on 3 cards ---------- */
.sl-commit-grid {
    margin-top: 36px;
}

/* ---------- SL · Closing single-card link to Pillar 02 ---------- */
.sl-next-grid {
    grid-template-columns: minmax(0, 720px) !important;
    justify-content: center;
}
@media (max-width: 991px) {
    .sl-next-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ▲▲▲  END SOCIAL LISTENING (EnSocial · Pillar 01)  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |  ▼▼▼  EVENTS & NEWS MONITORING (EnSocial · Pillar 02) ▼▼▼ |
   |  File: events-news-monitoring.html                       |
   |  Section: Platforms · EnSocial · Pillar 02               |
   |  Reuses sp-* and sl-* shared styles. Adds:               |
   |    · .en-streams-grid · 2-col override for streams       |
   |    · .en-gdelt · featured GDELT spotlight section        |
   |    · .en-coverage-close · post-grid editorial closing    |
   |    · .en-outputs-grid · 2x2 + wide for 5 outputs         |
   |    · .en-next-grid · centred single-card link            |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- EN · Analytical layers · Primary-color hover ------------
   Scoped override for the "Analytical layers" section only — replaces
   the cycling pastel fills with a clean white-at-rest, brand-red-on-
   hover treatment. Other sections (streams, sources, outputs) keep
   their cycling sweet pastels. */
#en-layers .sp-caps-card,
#en-layers .sp-caps-card:nth-child(1),
#en-layers .sp-caps-card:nth-child(2),
#en-layers .sp-caps-card:nth-child(3),
#en-layers .sp-caps-card:nth-child(4),
#en-layers .sp-caps-card:nth-child(5),
#en-layers .sp-caps-card:nth-child(6) {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
#en-layers .sp-caps-card:hover,
#en-layers .sp-caps-card:nth-child(1):hover,
#en-layers .sp-caps-card:nth-child(2):hover,
#en-layers .sp-caps-card:nth-child(3):hover,
#en-layers .sp-caps-card:nth-child(4):hover,
#en-layers .sp-caps-card:nth-child(5):hover,
#en-layers .sp-caps-card:nth-child(6):hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.35);
}
#en-layers .sp-caps-card .sp-caps-icon,
#en-layers .sp-caps-card:nth-child(1) .sp-caps-icon,
#en-layers .sp-caps-card:nth-child(2) .sp-caps-icon,
#en-layers .sp-caps-card:nth-child(3) .sp-caps-icon,
#en-layers .sp-caps-card:nth-child(4) .sp-caps-icon,
#en-layers .sp-caps-card:nth-child(5) .sp-caps-icon,
#en-layers .sp-caps-card:nth-child(6) .sp-caps-icon {
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    transition: background .35s ease, color .35s ease;
}
#en-layers .sp-caps-card:hover .sp-caps-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
#en-layers .sp-caps-title { transition: color .35s ease; }
#en-layers .sp-caps-card:hover .sp-caps-title { color: #ffffff; }
#en-layers .sp-caps-card p { transition: color .35s ease; }
#en-layers .sp-caps-card:hover p { color: rgba(255, 255, 255, 0.92); }

/* ---------- EN · Streams · 2-col grid override ---------- */
.en-streams-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 920px !important;
    margin-top: 36px;
}
@media (max-width: 991px) {
    .en-streams-grid { grid-template-columns: 1fr !important; }
}

/* ---------- EN · GDELT backbone · clean editorial section -------------
   Centred Apple-style explainer: small uppercase eyebrow, large
   display title, a pull-quote lead, three restrained metric chips,
   then the supporting body prose. No heavy mark or coloured panel —
   typography carries the section. */
.en-gdelt {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.en-gdelt-shell {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.en-gdelt-tag {
    display: inline-block;
    font: 700 11px/1 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, 0.08);
    border-radius: 999px;
}
.en-gdelt-shell .sp-section-title {
    margin-bottom: 28px;
}
.en-gdelt-lead {
    font: 600 clamp(20px, 2.2vw, 28px)/1.42 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 36px;
    letter-spacing: -0.018em;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.en-gdelt-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 760px;
    margin: 0 auto 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    padding: 28px 0;
}
.en-gdelt-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.en-gdelt-metric:last-child { border-right: 0; }
.en-gdelt-metric-num {
    font: 700 clamp(28px, 3vw, 36px)/1 'Inter', 'Manrope', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: -0.028em;
}
.en-gdelt-metric-label {
    font: 600 11px/1.2 'Inter', sans-serif;
    color: #6e6e73;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.en-gdelt-prose {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}
.en-gdelt-prose p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.en-gdelt-prose p:last-child { margin: 0; }

@media (max-width: 991px) {
    .en-gdelt { padding: 64px 0 72px; }
    .en-gdelt-tag { letter-spacing: 0.22em; padding: 6px 12px; }
    .en-gdelt-lead { margin-bottom: 28px; }
    .en-gdelt-metrics {
        grid-template-columns: 1fr;
        padding: 22px 0;
        margin-bottom: 32px;
    }
    .en-gdelt-metric {
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        gap: 14px;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .en-gdelt-metric:last-child { border-bottom: 0; }
    .en-gdelt-metric-label { letter-spacing: 0.14em; }
    .en-gdelt-prose p { font-size: 16px; }
}

/* ---------- EN · Coverage section · closing editorial line ---------- */
.en-coverage-close {
    max-width: 880px;
    margin: 40px auto 0;
    text-align: center;
}
.en-coverage-close p {
    font: 400 16.5px/1.74 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* ---------- EN · Outputs · 2-col + 5th card wide --------------------- */
.en-outputs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 1080px !important;
    gap: 18px !important;
}
.en-outputs-grid .sp-caps-card-wide {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .en-outputs-grid { grid-template-columns: 1fr !important; }
}

/* ---------- EN · Closing single-card link ---------- */
.en-next-grid {
    grid-template-columns: minmax(0, 720px) !important;
    justify-content: center;
}
@media (max-width: 991px) {
    .en-next-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   ▲▲▲  END EVENTS & NEWS MONITORING (Pillar 02)  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  OUR STORY & VISION PAGE  ▼▼▼                      |
   |   File: our-story.html                                   |
   |   Section: Company · Our Story & Vision                  |
   |   All rules below scoped under .os-page or os-* and      |
   |   reuse sp-* shared styles. Adds:                        |
   |     · .os-founding · timeline section + mission band     |
   |     · .os-timeline · 7-milestone vertical timeline       |
   |     · .os-vision · AI-first vision narrative + grid      |
   |     · .os-values · 5-value editorial grid                |
   |     · .os-dna · closing manifesto band                   |
   |                                                          |
   ============================================================
   ============================================================ */

.os-page { background: var(--white, #ffffff); }
.os-page .reveal { opacity: 1; transition: opacity 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)), transform 0.8s var(--ease, cubic-bezier(.2,.7,.2,1)); }
.os-page .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
.os-page .reveal.in { opacity: 1; transform: none; }
.os-page .section-eyebrow {
    display: inline-block;
    font: 700 11px/1 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

/* ---------- OS-3 · Founding Story · timeline ----------------------- */
.os-founding {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.os-founding-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}

.os-timeline {
    max-width: 940px;
    margin: 0 auto 72px;
    position: relative;
    padding-left: 0;
}
/* Brand-red vertical spine — sits in the gap between year + card cols */
.os-timeline::before {
    content: "";
    position: absolute;
    left: 105px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--brand, #b10f1a) 0%, rgba(177, 15, 26, 0.20) 100%);
}
.os-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 60px;
    padding: 18px 0;
}
/* Dot centred on the spine, vertically centered with the year + card row */
.os-timeline-item::before {
    content: "";
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(177, 15, 26, 0.18);
    z-index: 1;
}
.os-timeline-year {
    font: 700 clamp(20px, 1.8vw, 22px)/1 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.012em;
    text-align: right;
    /* Equal-width digits so 1996 / 2006 / 2007 align perfectly */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.os-timeline-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    padding: 22px 26px 22px;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                border-color .35s ease;
}
.os-timeline-item:hover .os-timeline-card {
    transform: translateX(4px);
    border-color: rgba(177, 15, 26, 0.22);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.os-timeline-card h3 {
    font: 600 19px/1.25 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: -0.018em;
    margin: 0 0 8px;
}
.os-timeline-card p {
    font: 400 15px/1.65 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Mission narrative under the timeline */
.os-mission {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.os-mission-title {
    font: 600 clamp(24px, 2.4vw, 30px)/1.2 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.022em;
    margin: 0 0 24px;
}
.os-mission-lead {
    font: 600 clamp(18px, 1.9vw, 22px)/1.5 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 22px;
    letter-spacing: -0.014em;
}
.os-mission p:not(.os-mission-lead) {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 16px;
}
.os-mission p:last-child { margin: 0; }

@media (max-width: 991px) {
    .os-founding { padding: 64px 0 72px; }
    .os-founding-head { margin-bottom: 40px; }
    .os-timeline { margin-bottom: 48px; }
    .os-timeline::before { left: 14px; }
    .os-timeline-item {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 8px;
        padding: 14px 0 14px 40px;
    }
    .os-timeline-item::before {
        left: 9px;
        top: 20px;
        transform: none;
    }
    .os-timeline-year {
        text-align: left;
        margin-bottom: 4px;
    }
    .os-timeline-card { padding: 20px 22px 20px; }
    .os-mission-lead { font-size: 18px; }
}

/* ---------- OS-4 · AI-First Vision Statement ----------------------- */
.os-vision {
    padding: 96px 0 100px;
    background: #ffffff;
}
.os-vision-head {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 40px;
}
.os-vision-body {
    max-width: 880px;
    margin: 0 auto 48px;
    text-align: center;
}
.os-vision-body p {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.os-vision-body p:last-child {
    margin: 0;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 17.5px;
}
.os-domain-grid {
    margin-bottom: 56px;
}
.os-vision-close {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.os-vision-close p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #515154;
    margin: 0 0 18px;
}
.os-vision-close p:last-child { margin: 0; }
.os-vision-mantra {
    margin-top: 32px !important;
    padding-top: 32px;
    border-top: 1px solid rgba(177, 15, 26, 0.18);
    font: 600 clamp(19px, 2vw, 24px)/1.45 'Manrope', sans-serif !important;
    color: var(--brand, #b10f1a) !important;
    letter-spacing: -0.014em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .os-vision { padding: 64px 0 72px; }
    .os-vision-head { margin-bottom: 32px; }
    .os-vision-body { margin-bottom: 36px; }
    .os-vision-body p { font-size: 16px; }
    .os-vision-body p:last-child { font-size: 16.5px; }
    .os-domain-grid { margin-bottom: 40px; }
    .os-vision-mantra { margin-top: 24px !important; padding-top: 24px; }
}

/* ---------- OS-5 · Values & Culture --------------------------------- */
.os-values {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.os-values-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
/* 2×2 + 1 wide layout for the 5 value cards */
.os-values-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 1080px !important;
    gap: 18px !important;
    margin: 0 auto 64px;
}
.os-values-grid .sp-caps-card-wide {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .os-values-grid { grid-template-columns: 1fr !important; }
}

/* Primary-color hover override for Values cards — replaces the cycling
   pastel fills with white-at-rest, brand-red-on-hover treatment. */
#os-values .sp-caps-card,
#os-values .sp-caps-card:nth-child(1),
#os-values .sp-caps-card:nth-child(2),
#os-values .sp-caps-card:nth-child(3),
#os-values .sp-caps-card:nth-child(4),
#os-values .sp-caps-card:nth-child(5) {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
#os-values .sp-caps-card:hover,
#os-values .sp-caps-card:nth-child(1):hover,
#os-values .sp-caps-card:nth-child(2):hover,
#os-values .sp-caps-card:nth-child(3):hover,
#os-values .sp-caps-card:nth-child(4):hover,
#os-values .sp-caps-card:nth-child(5):hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.35);
}
#os-values .sp-caps-card .sp-caps-icon,
#os-values .sp-caps-card:nth-child(1) .sp-caps-icon,
#os-values .sp-caps-card:nth-child(2) .sp-caps-icon,
#os-values .sp-caps-card:nth-child(3) .sp-caps-icon,
#os-values .sp-caps-card:nth-child(4) .sp-caps-icon,
#os-values .sp-caps-card:nth-child(5) .sp-caps-icon {
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    transition: background .35s ease, color .35s ease;
}
#os-values .sp-caps-card:hover .sp-caps-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
#os-values .sp-caps-title { transition: color .35s ease; }
#os-values .sp-caps-card:hover .sp-caps-title { color: #ffffff; }
#os-values .sp-caps-card p { transition: color .35s ease; }
#os-values .sp-caps-card:hover p { color: rgba(255, 255, 255, 0.92); }

/* Closing DNA band */
.os-dna {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding-top: 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.os-dna-title {
    font: 700 clamp(28px, 3vw, 38px)/1.2 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.026em;
    margin: 0 0 28px;
}
.os-dna p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.os-dna-final {
    margin-top: 32px !important;
    padding-top: 28px;
    border-top: 1px solid rgba(177, 15, 26, 0.18);
    font: 600 clamp(19px, 2vw, 24px)/1.45 'Manrope', sans-serif !important;
    color: var(--brand, #b10f1a) !important;
    letter-spacing: -0.014em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .os-values { padding: 64px 0 72px; }
    .os-values-head { margin-bottom: 40px; }
    .os-values-grid { margin-bottom: 48px; }
    .os-dna { padding-top: 36px; }
    .os-dna p { font-size: 16px; }
    .os-dna-final { margin-top: 24px !important; padding-top: 22px; }
}

/* ============================================================
   ▲▲▲  END OUR STORY & VISION PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  OUR WORK (PORTFOLIO) PAGE  ▼▼▼                    |
   |   File: our-work.html                                    |
   |   Section: Company · Our Work                            |
   |   Body: .sp-page (reuses cycling-pastel sp-caps-card     |
   |   styles for Project Highlights). Adds:                  |
   |     · .ow-highlights · 9-card project highlights grid    |
   |     · .ow-outcomes · 10-row editorial outcomes list      |
   |     · .ow-scale · narrative + 3 scale cards + closing    |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- OW-3 · Project Highlights ----------------------------- */
.ow-highlights {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.ow-highlights-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}

/* Primary-color hover override — replaces the cycling pastel fills
   with a clean white-at-rest, brand-red-on-hover treatment. */
#ow-highlights .sp-caps-card,
#ow-highlights .sp-caps-card:nth-child(1),
#ow-highlights .sp-caps-card:nth-child(2),
#ow-highlights .sp-caps-card:nth-child(3),
#ow-highlights .sp-caps-card:nth-child(4),
#ow-highlights .sp-caps-card:nth-child(5),
#ow-highlights .sp-caps-card:nth-child(6),
#ow-highlights .sp-caps-card:nth-child(7),
#ow-highlights .sp-caps-card:nth-child(8),
#ow-highlights .sp-caps-card:nth-child(9) {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
#ow-highlights .sp-caps-card:hover,
#ow-highlights .sp-caps-card:nth-child(1):hover,
#ow-highlights .sp-caps-card:nth-child(2):hover,
#ow-highlights .sp-caps-card:nth-child(3):hover,
#ow-highlights .sp-caps-card:nth-child(4):hover,
#ow-highlights .sp-caps-card:nth-child(5):hover,
#ow-highlights .sp-caps-card:nth-child(6):hover,
#ow-highlights .sp-caps-card:nth-child(7):hover,
#ow-highlights .sp-caps-card:nth-child(8):hover,
#ow-highlights .sp-caps-card:nth-child(9):hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.35);
}
#ow-highlights .sp-caps-card .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(1) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(2) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(3) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(4) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(5) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(6) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(7) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(8) .sp-caps-icon,
#ow-highlights .sp-caps-card:nth-child(9) .sp-caps-icon {
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    transition: background .35s ease, color .35s ease;
}
#ow-highlights .sp-caps-card:hover .sp-caps-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
#ow-highlights .sp-caps-title { transition: color .35s ease; }
#ow-highlights .sp-caps-card:hover .sp-caps-title { color: #ffffff; }
#ow-highlights .sp-caps-card p { transition: color .35s ease; }
#ow-highlights .sp-caps-card:hover p { color: rgba(255, 255, 255, 0.92); }

@media (max-width: 991px) {
    .ow-highlights { padding: 64px 0 72px; }
    .ow-highlights-head { margin-bottom: 40px; }
}

/* ---------- OW-4 · Client Outcomes · pinned filmstrip ---------------
   Reuses the .pe-pillars-* shared classes (same pattern as the AI
   Consulting "Our consulting framework" section). The override below
   only adjusts the section height for 10 chapters and tightens the
   bottom dot row. */
.ow-pillars {
    /* 10 outcomes at ~50vh runway each + one viewport for the sticky
       stage. Total = 100vh + 10 × 50vh = 600vh. */
    height: 600vh;
}
.ow-pillars .pe-pillars-shell {
    padding-top: 96px;
    padding-bottom: 24px;
}
.ow-pillars .pe-pillars-head {
    margin-bottom: 20px;
}
.ow-pillars .pe-pillar-dots { gap: 10px; }
.ow-pillars .pe-pillar-dot { width: 8px; height: 8px; }

@media (max-width: 991px) {
    /* On mobile the pe-pillars stylesheet collapses the section to a
       static stacked layout, so we just remove the desktop pinning. */
    .ow-pillars { height: auto; }
}

/* ---------- OW-5 · Metrics & Scale --------------------------------- */
.ow-scale {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.ow-scale-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 40px;
}
.ow-scale-body {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}
.ow-scale-body p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.ow-scale-body p:last-child { margin: 0; }
.ow-scale-bridge {
    margin-top: 28px !important;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font: 600 clamp(18px, 1.9vw, 22px)/1.45 'Manrope', sans-serif !important;
    color: #1d1d1f !important;
    letter-spacing: -0.014em;
}

.ow-scale-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto 56px;
}
.ow-scale-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.ow-scale-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.ow-scale-num {
    position: absolute;
    top: 22px;
    right: 26px;
    font: 700 11.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
}
.ow-scale-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
}
.ow-scale-title {
    font: 600 22px/1.22 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.ow-scale-card p {
    font: 400 15.5px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Three distinct sweet pastel fills — peach / lavender / pistachio */

/* Card 01 · Peach */
.ow-scale-card:nth-child(1) {
    background: #ffe8dc;
}
.ow-scale-card:nth-child(1):hover {
    background: #fdd6c0;
}
.ow-scale-card:nth-child(1) .ow-scale-num { color: #c85f32; }
.ow-scale-card:nth-child(1) .ow-scale-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ow-scale-card:nth-child(2) {
    background: #ece5fb;
}
.ow-scale-card:nth-child(2):hover {
    background: #dccff5;
}
.ow-scale-card:nth-child(2) .ow-scale-num { color: #6e50c8; }
.ow-scale-card:nth-child(2) .ow-scale-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ow-scale-card:nth-child(3) {
    background: #e3f0d6;
}
.ow-scale-card:nth-child(3):hover {
    background: #cee5b5;
}
.ow-scale-card:nth-child(3) .ow-scale-num { color: #5f8c37; }
.ow-scale-card:nth-child(3) .ow-scale-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

.ow-scale-close {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding-top: 36px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ow-scale-final {
    font: 600 clamp(20px, 2.1vw, 26px)/1.45 'Manrope', sans-serif;
    color: var(--brand, #b10f1a);
    margin: 0;
    letter-spacing: -0.016em;
}

@media (max-width: 991px) {
    .ow-scale { padding: 64px 0 72px; }
    .ow-scale-head { margin-bottom: 32px; }
    .ow-scale-body { margin-bottom: 40px; }
    .ow-scale-body p { font-size: 16px; }
    .ow-scale-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
    .ow-scale-card { padding: 28px 24px 26px; }
    .ow-scale-close { padding-top: 28px; }
}

/* ============================================================
   ▲▲▲  END OUR WORK (PORTFOLIO) PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  PARTNERS & ECOSYSTEM PAGE  ▼▼▼                    |
   |   File: partners-ecosystem.html                          |
   |   Section: Company · Partners & Ecosystem                |
   |   Reuses sp-* shared classes. Adds:                      |
   |     · .ec-spotlight · Conveh partner spotlight panel     |
   |     · .ec-chip · capability chips                        |
   |     · .ec-philosophy · 4 ecosystem layer cards + close   |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- EC-3 · Partner spotlight (Conveh) ---------------------- */
.ec-spotlight {
    padding: 72px 0 80px;
    background: #ffffff;
}
.ec-spotlight-card {
    max-width: 1080px;
    margin: 0 auto;
    background: linear-gradient(160deg, #fdf3f4 0%, #ffffff 50%, #fef9f5 100%);
    border-radius: 28px;
    padding: 56px 60px 52px;
    text-align: center;
    box-shadow: 0 30px 70px -36px rgba(15, 30, 60, 0.12);
}
.ec-spotlight-tag {
    display: inline-block;
    font: 700 11px/1 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-bottom: 22px;
    padding: 7px 14px;
    background: rgba(177, 15, 26, 0.08);
    border-radius: 999px;
}
.ec-spotlight-card .sp-section-title {
    margin-bottom: 24px;
}
.ec-spotlight-lead {
    font: 600 clamp(20px, 2.1vw, 26px)/1.45 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 auto 22px;
    letter-spacing: -0.018em;
    max-width: 800px;
}
.ec-spotlight-body {
    font: 400 16.5px/1.74 'Inter', sans-serif;
    color: #515154;
    margin: 0 auto 36px;
    max-width: 760px;
}
.ec-spotlight-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 880px;
    margin: 0 auto;
}
.ec-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid rgba(177, 15, 26, 0.16);
    border-radius: 999px;
    font: 600 13px/1.2 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.005em;
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.ec-chip i {
    color: var(--brand, #b10f1a);
    font-size: 12px;
    transition: color .35s ease;
}
.ec-chip:hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    color: #ffffff;
}
.ec-chip:hover i { color: #ffffff; }

@media (max-width: 991px) {
    .ec-spotlight { padding: 56px 0 64px; }
    .ec-spotlight-card { padding: 40px 30px 36px; border-radius: 22px; }
    .ec-spotlight-body { font-size: 16px; margin-bottom: 28px; }
    .ec-chip { font-size: 12px; padding: 8px 14px; }
}

/* ---------- EC-7 · Ecosystem Philosophy --------------------------- */
.ec-philosophy {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.ec-philosophy-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.ec-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto 56px;
}
.ec-philosophy-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 32px 28px 30px;
    text-align: center;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.ec-philosophy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.ec-philosophy-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
}
.ec-philosophy-title {
    font: 600 19px/1.25 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.018em;
    margin: 0 0 12px;
}
.ec-philosophy-card p {
    font: 400 14.5px/1.65 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Four distinct sweet pastel fills — peach / lavender / pistachio / sky */

/* Card 01 · Peach */
.ec-philosophy-card:nth-child(1) {
    background: #ffe8dc;
}
.ec-philosophy-card:nth-child(1):hover {
    background: #fdd6c0;
}
.ec-philosophy-card:nth-child(1) .ec-philosophy-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender */
.ec-philosophy-card:nth-child(2) {
    background: #ece5fb;
}
.ec-philosophy-card:nth-child(2):hover {
    background: #dccff5;
}
.ec-philosophy-card:nth-child(2) .ec-philosophy-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}

/* Card 03 · Pistachio */
.ec-philosophy-card:nth-child(3) {
    background: #e3f0d6;
}
.ec-philosophy-card:nth-child(3):hover {
    background: #cee5b5;
}
.ec-philosophy-card:nth-child(3) .ec-philosophy-icon {
    background: rgba(95, 140, 55, 0.16);
    color: #5f8c37;
}

/* Card 04 · Sky */
.ec-philosophy-card:nth-child(4) {
    background: #dceffa;
}
.ec-philosophy-card:nth-child(4):hover {
    background: #b8dcf2;
}
.ec-philosophy-card:nth-child(4) .ec-philosophy-icon {
    background: rgba(50, 110, 180, 0.14);
    color: #326eb4;
}

.ec-philosophy-close {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.ec-philosophy-bridge {
    font: 600 clamp(20px, 2.1vw, 26px)/1.45 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 24px;
    letter-spacing: -0.016em;
}
.ec-philosophy-close p:not(.ec-philosophy-bridge):not(.ec-philosophy-final) {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.ec-philosophy-final {
    margin-top: 28px !important;
    padding-top: 28px;
    border-top: 1px solid rgba(177, 15, 26, 0.18);
    font: 600 clamp(19px, 2vw, 24px)/1.45 'Manrope', sans-serif !important;
    color: var(--brand, #b10f1a) !important;
    letter-spacing: -0.014em;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1199px) {
    .ec-philosophy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .ec-philosophy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
    .ec-philosophy { padding: 64px 0 72px; }
    .ec-philosophy-head { margin-bottom: 40px; }
    .ec-philosophy-grid { margin-bottom: 40px; }
    .ec-philosophy-card { padding: 26px 22px 24px; }
    .ec-philosophy-final { margin-top: 22px !important; padding-top: 22px; }
}

/* ============================================================
   ▲▲▲  END PARTNERS & ECOSYSTEM PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼▼▼  GLOBAL PRESENCE PAGE  ▼▼▼                         |
   |   File: global-presence.html                             |
   |   Section: Company · Global Presence                     |
   |   Reuses sp-* shared classes. Adds:                      |
   |     · .gp-locations · 4 alternating location panels      |
   |       (India · USA · Europe · Australia) with cycling    |
   |       sweet pastels                                       |
   |     · .gp-philosophy · 2-card philosophy grid +          |
   |       closing manifesto                                  |
   |                                                          |
   ============================================================
   ============================================================ */

/* ---------- GP-3 · Locations · Apple-style editorial chapters --------
   Each location becomes a clean editorial chapter: huge city name on
   the left (sticky), restrained body prose on the right. Hairline
   dividers between locations replace card chrome. Brand-red period
   on each city name as the only colour accent. */
.gp-locations {
    padding: 80px 0 80px;
    background: #ffffff;
}
.gp-locations .container-xl {
    max-width: 1180px;
}
.gp-location {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 80px;
    align-items: start;
    padding: 72px 0;
    margin: 0;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 0;
    box-shadow: none;
    transition: padding-left .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.gp-location:first-child { padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.10); }
.gp-location:last-child { border-bottom: 0; padding-bottom: 16px; }
.gp-location:hover { padding-left: 16px; }
.gp-location:hover:first-child { padding-top: 16px; }

.gp-location-aside {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.gp-location-flag {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50%;
    background: var(--brand, #b10f1a) !important;
    color: transparent !important;
    font-size: 0 !important;
    margin-bottom: 18px;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px rgba(177, 15, 26, 0.18);
}
.gp-location-tag {
    font: 700 11px/1 'Inter', sans-serif;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a) !important;
    margin-bottom: 10px;
}
.gp-location-city {
    font: 600 clamp(48px, 6vw, 76px)/1 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.04em;
    margin: 0;
}
.gp-location-city::after {
    content: ".";
    color: var(--brand, #b10f1a);
}
.gp-location-role {
    font: 600 13px/1.4 'Inter', sans-serif;
    color: #86868b;
    margin: 14px 0 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gp-location-body {
    max-width: 720px;
    padding-top: 8px;
}
.gp-location-lead {
    font: 600 clamp(22px, 2.4vw, 30px)/1.42 'Manrope', sans-serif;
    color: #1d1d1f;
    margin: 0 0 28px;
    letter-spacing: -0.022em;
}
.gp-location-body p:not(.gp-location-lead) {
    font: 400 17px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.gp-location-body p:last-child { margin: 0; }

/* Reset any leftover hue overrides from the previous design */
#gp-india, #gp-usa, #gp-europe, #gp-australia {
    background: transparent !important;
}
#gp-india:hover, #gp-usa:hover, #gp-europe:hover, #gp-australia:hover {
    background: transparent !important;
}

@media (max-width: 991px) {
    .gp-locations { padding: 56px 0 56px; }
    .gp-location {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 48px 0;
    }
    .gp-location:hover { padding-left: 0; }
    .gp-location-aside { position: static; top: auto; gap: 4px; }
    .gp-location-flag { margin-bottom: 14px; }
    .gp-location-city { font-size: clamp(40px, 9vw, 56px); }
    .gp-location-role { margin-top: 10px; }
    .gp-location-body { padding-top: 0; }
    .gp-location-body p:not(.gp-location-lead) { font-size: 16px; }
}

/* ---------- GP-4 · Global Delivery Philosophy ---------- */
.gp-philosophy {
    padding: 96px 0 100px;
    background: #ffffff;
}
.gp-philosophy-head {
    text-align: center;
    max-width: 940px;
    margin: 0 auto 56px;
}
.gp-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 920px;
    margin: 0 auto 56px;
}
.gp-philosophy-card {
    position: relative;
    background: #ffffff;
    border: 0;
    border-radius: 22px;
    padding: 36px 32px 32px;
    text-align: center;
    transition: transform .45s var(--ease, cubic-bezier(.2,.7,.2,1)),
                background-color .35s ease,
                box-shadow .45s var(--ease, cubic-bezier(.2,.7,.2,1));
}
.gp-philosophy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -22px rgba(15, 30, 60, 0.20);
}
.gp-philosophy-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
}
.gp-philosophy-title {
    font: 600 22px/1.25 'Inter', 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.gp-philosophy-card p {
    font: 400 15px/1.7 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Two distinct sweet pastel fills — peach / lavender */

/* Card 01 · Peach (Proximity) */
.gp-philosophy-card:nth-child(1) {
    background: #ffe8dc;
}
.gp-philosophy-card:nth-child(1):hover {
    background: #fdd6c0;
}
.gp-philosophy-card:nth-child(1) .gp-philosophy-icon {
    background: rgba(200, 95, 50, 0.14);
    color: #c85f32;
}

/* Card 02 · Lavender (Depth) */
.gp-philosophy-card:nth-child(2) {
    background: #ece5fb;
}
.gp-philosophy-card:nth-child(2):hover {
    background: #dccff5;
}
.gp-philosophy-card:nth-child(2) .gp-philosophy-icon {
    background: rgba(110, 80, 200, 0.14);
    color: #6e50c8;
}
.gp-philosophy-close {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.gp-philosophy-close p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 18px;
}
.gp-philosophy-final {
    margin-top: 24px !important;
    padding-top: 24px;
    border-top: 1px solid rgba(177, 15, 26, 0.18);
    font: 600 clamp(19px, 2vw, 24px)/1.45 'Manrope', sans-serif !important;
    color: var(--brand, #b10f1a) !important;
    letter-spacing: -0.014em;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .gp-philosophy { padding: 64px 0 72px; }
    .gp-philosophy-head { margin-bottom: 40px; }
    .gp-philosophy-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
    .gp-philosophy-card { padding: 28px 26px 26px; }
    .gp-philosophy-final { margin-top: 20px !important; padding-top: 20px; }
}

/* ============================================================
   ▲▲▲  END GLOBAL PRESENCE PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  LEADERSHIP & TEAM PAGE  ▼▼▼
   File: leadership-team.html
   ============================================================ */

/* ---- LT · Section shells ---- */
.lt-section {
    padding: 72px 0 80px;
    background: #ffffff;
    position: relative;
}
.lt-section-alt {
    background: linear-gradient(180deg, #fcfbfa 0%, #ffffff 100%);
}
.lt-section + .lt-section { padding-top: 64px; }

.lt-section-head {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}
.lt-section-head .section-eyebrow {
    margin: 0 auto 18px;
}
.lt-section-head .sp-section-title {
    margin-bottom: 18px;
}
.lt-section-head .sp-section-deck {
    margin: 0 auto;
    max-width: 720px;
}

/* ---- LT · Roster (editorial dossier rows) ---- */
.lt-roster {
    max-width: 1180px;
    margin: 0 auto;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.lt-roster-single {
    max-width: 1080px;
}

/* Single editorial row */
.lt-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 64px;
    padding: 44px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    align-items: start;
    position: relative;
}

/* Advisors: tighter row */
#lt-advisors .lt-row {
    grid-template-columns: 200px 1fr;
    column-gap: 52px;
    padding: 38px 0;
}
#lt-research .lt-row {
    padding: 56px 0;
}

/* ---- LT · Aside (portrait + number) ---- */
.lt-row-aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}
.lt-row-portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    background:
        linear-gradient(165deg, #1f1f22 0%, #131316 60%, #0a0a0c 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 36px -22px rgba(0, 0, 0, 0.45);
}
.lt-row-portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(380px 240px at 30% 0%, rgba(255, 255, 255, 0.10), transparent 60%),
        radial-gradient(360px 240px at 90% 100%, rgba(177, 15, 26, 0.18), transparent 65%);
    pointer-events: none;
}
.lt-row-portrait::after {
    content: "";
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 22px;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
}

.lt-monogram {
    position: relative;
    z-index: 1;
    font: 600 72px/1 'Manrope', sans-serif;
    letter-spacing: -0.04em;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
#lt-advisors .lt-monogram { font-size: 56px; }
#lt-research .lt-monogram { font-size: 84px; }

/* Real portrait photo inside the dark frame — fills the 4:5 box and sits
   above the dark gradient background, below the corner underline accent. */
.lt-row-portrait-has-img .lt-row-portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    display: block;
}
.lt-row-portrait-has-img::before { display: none; }
.lt-row-portrait-has-img::after {
    z-index: 2;
    background: rgba(255, 255, 255, 0.85);
}

.lt-row-num {
    display: flex;
    align-items: baseline;
    font: 600 12px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    color: var(--brand, #b10f1a);
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.lt-row-num span {
    color: rgba(0, 0, 0, 0.40);
    font-weight: 500;
}

/* ---- LT · Member info ---- */
.lt-row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 4px;
}
.lt-row-tag {
    display: inline-block;
    font: 600 12.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 16px;
}
.lt-row-name {
    font: 700 clamp(30px, 3.4vw, 36px)/1.06 'Manrope', sans-serif;
    letter-spacing: -0.028em;
    color: #1d1d1f;
    margin: 0 0 20px;
    max-width: 720px;
}
#lt-research .lt-row-name {
    font-size: clamp(34px, 3.8vw, 50px);
}
#lt-advisors .lt-row-name {
    font-size: clamp(24px, 2.4vw, 32px);
    margin-bottom: 16px;
}
.lt-row-bio {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
}
.lt-row-bio p {
    font: 400 15.5px/1.72 'Inter', sans-serif;
    color: #4a4a4d;
    margin: 0;
}
#lt-advisors .lt-row-bio p {
    font-size: 14.5px;
    line-height: 1.68;
}

/* Subtle hover: name shifts to brand red */
.lt-row {
    transition: background 0.4s ease;
}
.lt-row:hover .lt-row-name {
    color: var(--brand, #b10f1a);
    transition: color 0.35s ease;
}

/* ---- LT-6 · Leadership Philosophy ---- */
.lt-philosophy {
    padding: 80px 0 96px;
    background:
        radial-gradient(900px 540px at 50% 0%, rgba(177, 15, 26, 0.05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fcfbfa 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.lt-philosophy-head {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}
.lt-philosophy-head .section-eyebrow {
    margin: 0 auto 18px;
}
.lt-philosophy-body {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.lt-philosophy-body p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 20px;
}
.lt-philosophy-final {
    margin-top: 28px !important;
    padding-top: 28px;
    border-top: 1px solid rgba(177, 15, 26, 0.18);
    font: 600 clamp(19px, 2vw, 24px)/1.45 'Manrope', sans-serif !important;
    color: var(--brand, #b10f1a) !important;
    letter-spacing: -0.014em;
}

/* ---- LT · Responsive ---- */
@media (max-width: 1100px) {
    .lt-row,
    #lt-advisors .lt-row,
    #lt-research .lt-row {
        grid-template-columns: 200px 1fr;
        column-gap: 44px;
    }
    .lt-monogram { font-size: 60px; }
    #lt-research .lt-monogram { font-size: 72px; }
    .lt-row-name { font-size: clamp(26px, 3vw, 36px); }
}

@media (max-width: 760px) {
    .lt-section { padding: 56px 0 60px; }
    .lt-section-head { margin-bottom: 40px; }
    .lt-roster, .lt-roster-single { max-width: 100%; }

    .lt-row,
    #lt-advisors .lt-row,
    #lt-research .lt-row {
        grid-template-columns: 1fr;
        row-gap: 22px;
        padding: 32px 0;
    }
    .lt-row-aside {
        flex-direction: row;
        align-items: center;
        gap: 18px;
    }
    .lt-row-portrait {
        width: 120px;
        aspect-ratio: 4 / 5;
        flex-shrink: 0;
    }
    .lt-monogram,
    #lt-advisors .lt-monogram,
    #lt-research .lt-monogram { font-size: 40px; }
    .lt-row-num {
        flex: 1;
        padding-top: 0;
        border-top: none;
        font-size: 11px;
    }
    .lt-row-name { font-size: clamp(22px, 5vw, 28px); margin-bottom: 14px; }
    .lt-row-bio p { font-size: 14.5px; }

    .lt-philosophy { padding: 60px 0 72px; }
    .lt-philosophy-head { margin-bottom: 36px; }
    .lt-philosophy-final { margin-top: 22px !important; padding-top: 22px; }
}

/* ============================================================
   ▼▼▼  LEADERSHIP & TEAM · APPLE-STYLE INNOVATIONS (additive)
   Layered enhancements that turn each row into a small cinematic
   moment — chapter watermark, 3D portrait tilt with spotlight,
   letter-stagger monogram entrance, name underline draw, bio
   cascade. Pure additive overrides; existing layout is unchanged.
   ============================================================ */

/* Row positioning context for child animations + watermark clipping */
.lt-row { overflow: hidden; }
.lt-row > * { position: relative; z-index: 1; }

/* Chapter-number watermark — bleeds off the right edge so the
   digit's right portion is clipped, leaving roughly half the number
   visible in the gutter past the bio's max-width. Bio reaches 760px
   into the body column, leaving ~115px of safe gutter; the watermark
   sits inside that gutter and bleeds off the page edge. */
.lt-row::before {
    content: "";
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font: 700 240px/0.82 'Manrope', sans-serif;
    letter-spacing: -0.08em;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(177, 15, 26, 0.14);
    pointer-events: none;
    z-index: 0;
    user-select: none;
    opacity: 0;
    transition: opacity 1.2s ease, -webkit-text-stroke-color 0.5s ease;
}
.lt-row.in::before { opacity: 1; }
.lt-row:hover::before {
    -webkit-text-stroke-color: rgba(177, 15, 26, 0.28);
}

#lt-founders .lt-row:nth-of-type(1)::before { content: "01"; }
#lt-founders .lt-row:nth-of-type(2)::before { content: "02"; }
#lt-founders .lt-row:nth-of-type(3)::before { content: "03"; }
#lt-founders .lt-row:nth-of-type(4)::before { content: "04"; }
#lt-founders .lt-row:nth-of-type(5)::before { content: "05"; }
#lt-research .lt-row::before { content: "01"; }
#lt-advisors .lt-row:nth-of-type(1)::before { content: "01"; }
#lt-advisors .lt-row:nth-of-type(2)::before { content: "02"; }
#lt-advisors .lt-row:nth-of-type(3)::before { content: "03"; }

/* ---- 3D portrait card with cursor-tracked tilt + spotlight ---- */
.lt-row-aside {
    perspective: 1400px;
}
.lt-row-portrait {
    transform-style: preserve-3d;
    transform:
        rotateX(var(--tx, 0deg))
        rotateY(var(--ty, 0deg))
        translateZ(0);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.lt-row-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            420px 420px at var(--mx, 50%) var(--my, 30%),
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.06) 28%,
            transparent 55%
        );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
}
.lt-row-portrait:hover::after { opacity: 1; }
.lt-row-portrait .lt-monogram { transform: translateZ(40px); }

/* ---- Letter-stagger monogram entrance ---- */
.lt-monogram { display: inline-flex; gap: 0; overflow: visible; }
.lt-mono-l {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition:
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease;
    will-change: transform, opacity;
}
.lt-row.in .lt-mono-l { transform: translateY(0); opacity: 1; }
.lt-row.in .lt-mono-l:nth-child(1) { transition-delay: 0.18s; }
.lt-row.in .lt-mono-l:nth-child(2) { transition-delay: 0.32s; }

/* ---- Name reveal: brand-red period accent + underline draw ----
   align-self + width:fit-content keeps the h3 from stretching to the
   full width of its flex-column parent. The period uses ::after so it
   lands AFTER the text inline. The underline uses ::before with
   position:absolute, so render order doesn't matter visually. */
.lt-row-name {
    position: relative;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding-bottom: 6px;
}
.lt-row-name::after {
    content: ".";
    color: var(--brand, #b10f1a);
    margin-left: 0.04em;
}
.lt-row-name::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 56px;
    background: var(--brand, #b10f1a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s,
                width 0.5s ease;
}
.lt-row.in .lt-row-name::before { transform: scaleX(1); }
.lt-row:hover .lt-row-name::before { width: 120px; }

/* ---- Bio paragraph cascade reveal ---- */
.lt-row-bio p {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.lt-row.in .lt-row-bio p { opacity: 1; transform: none; }
.lt-row.in .lt-row-bio p:nth-child(1) { transition-delay: 0.50s; }
.lt-row.in .lt-row-bio p:nth-child(2) { transition-delay: 0.62s; }
.lt-row.in .lt-row-bio p:nth-child(3) { transition-delay: 0.74s; }
.lt-row.in .lt-row-bio p:nth-child(n+4) { transition-delay: 0.86s; }

/* ---- Tag fade-in ---- */
.lt-row-tag {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.6s ease 0.30s,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.30s;
}
.lt-row.in .lt-row-tag { opacity: 1; transform: none; }

/* ---- Reduced motion: instant reveal, no tilt ---- */
@media (prefers-reduced-motion: reduce) {
    .lt-row::before,
    .lt-row .lt-mono-l,
    .lt-row-bio p,
    .lt-row-tag,
    .lt-row-name::after {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .lt-row-portrait { transform: none !important; }
}

/* ---- Responsive: disable 3D tilt + watermark on small screens
   (the bio column gets too narrow to safely host the watermark). */
@media (max-width: 1100px) {
    .lt-row::before {
        right: -260px;
        font-size: 260px;
    }
}
@media (max-width: 760px) {
    .lt-row::before { display: none; }
    .lt-row-portrait { transform: none !important; }
    .lt-row-portrait::after { display: none; }
}

/* ============================================================
   ▲▲▲  END LEADERSHIP & TEAM PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  CONTACT US PAGE  ▼▼▼
   File: contact-us.html
   ============================================================ */

/* ---- CU-2 · Quick contact cards ---- */
.cu-quick {
    padding: 64px 0 32px;
    background: #ffffff;
}
.cu-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.cu-quick-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}
.cu-quick-card:hover,
.cu-quick-card:active,
.cu-quick-card:focus-visible {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.cu-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(177, 15, 26, 0.08);
    color: var(--brand, #b10f1a);
    font-size: 18px;
    margin-bottom: 6px;
    transition: background 0.4s ease, color 0.4s ease;
}
.cu-quick-tag {
    font: 700 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
    transition: color 0.4s ease;
}
.cu-quick-title {
    font: 700 22px/1.18 'Manrope', sans-serif;
    letter-spacing: -0.022em;
    color: #1d1d1f;
    margin: 4px 0 6px;
    transition: color 0.4s ease;
}
.cu-quick-card p {
    font: 400 14.5px/1.62 'Inter', sans-serif;
    color: #4a4a4d;
    margin: 0 0 14px;
    flex: 1;
    transition: color 0.4s ease;
}
.cu-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 12px/1 'Inter', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    text-decoration: none;
    transition: gap 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.cu-quick-link i { font-size: 11px; transition: transform 0.35s ease; }
.cu-quick-card:hover .cu-quick-link,
.cu-quick-card:active .cu-quick-link,
.cu-quick-card:focus-visible .cu-quick-link { gap: 12px; }
.cu-quick-card:hover .cu-quick-link i,
.cu-quick-card:active .cu-quick-link i,
.cu-quick-card:focus-visible .cu-quick-link i { transform: translateX(3px); }

/* Hover / touch-active / keyboard-focus white-on-red */
.cu-quick-card:hover .cu-quick-icon,
.cu-quick-card:active .cu-quick-icon,
.cu-quick-card:focus-visible .cu-quick-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.cu-quick-card:hover .cu-quick-tag,
.cu-quick-card:active .cu-quick-tag,
.cu-quick-card:focus-visible .cu-quick-tag { color: rgba(255, 255, 255, 0.78); }
.cu-quick-card:hover .cu-quick-title,
.cu-quick-card:active .cu-quick-title,
.cu-quick-card:focus-visible .cu-quick-title { color: #ffffff; }
.cu-quick-card:hover p,
.cu-quick-card:active p,
.cu-quick-card:focus-visible p { color: rgba(255, 255, 255, 0.92); }
.cu-quick-card:hover .cu-quick-link,
.cu-quick-card:active .cu-quick-link,
.cu-quick-card:focus-visible .cu-quick-link {
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.30);
}

/* iOS / touch devices: every text colour change is forced with
   !important so no upstream rule (e.g. `.cu-quick-title` base colour
   #1d1d1f, the `:hover` rule outside the @media block) can defeat
   them. Transitions disabled entirely on the touch state so the red
   and white colours snap together — no half-state where bg has
   flipped to red but text is still mid-transition. */
@media (hover: none) {
    .cu-quick-card { -webkit-tap-highlight-color: transparent; }
    .cu-quick-card.is-tapped,
    .cu-quick-card.is-tapped *,
    .cu-quick-card:active,
    .cu-quick-card:active *,
    .cu-quick-card:focus-within,
    .cu-quick-card:focus-within * { transition: none !important; }
    .cu-quick-card.is-tapped,
    .cu-quick-card:active,
    .cu-quick-card:focus,
    .cu-quick-card:focus-within {
        transform: translateY(-4px);
        background: var(--brand, #b10f1a) !important;
        border-color: var(--brand, #b10f1a) !important;
        box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
    }
    .cu-quick-card.is-tapped .cu-quick-icon,
    .cu-quick-card:active .cu-quick-icon,
    .cu-quick-card:focus-within .cu-quick-icon { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; }
    .cu-quick-card.is-tapped .cu-quick-tag,
    .cu-quick-card:active .cu-quick-tag,
    .cu-quick-card:focus-within .cu-quick-tag { color: rgba(255, 255, 255, 0.85) !important; }
    .cu-quick-card.is-tapped .cu-quick-title,
    .cu-quick-card:active .cu-quick-title,
    .cu-quick-card:focus-within .cu-quick-title { color: #ffffff !important; }
    .cu-quick-card.is-tapped p,
    .cu-quick-card:active p,
    .cu-quick-card:focus-within p { color: rgba(255, 255, 255, 0.92) !important; }
    .cu-quick-card.is-tapped .cu-quick-link,
    .cu-quick-card:active .cu-quick-link,
    .cu-quick-card:focus-within .cu-quick-link {
        color: #ffffff !important;
        border-top-color: rgba(255, 255, 255, 0.30) !important;
        gap: 12px;
    }
    .cu-quick-card.is-tapped .cu-quick-link i,
    .cu-quick-card:active .cu-quick-link i,
    .cu-quick-card:focus-within .cu-quick-link i { transform: translateX(3px); }
}

/* ---- CU-3 · Form + direct contact split ---- */
.cu-talk {
    padding: 64px 0 96px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbfa 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 48px;
}
.cu-talk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 80px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}

/* Form shell */
.cu-form-shell .section-eyebrow { margin-bottom: 18px; }
.cu-talk-title {
    font: 600 clamp(34px, 4vw, 56px)/1.04 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.030em;
    margin: 0 0 18px;
}
.cu-talk-title .accent {
    color: var(--brand, #b10f1a);
}
.cu-talk-deck {
    font: 400 16.5px/1.7 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 36px;
    max-width: 560px;
}

/* Form fields — Apple-style line inputs with floating labels */
.cu-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cu-field {
    position: relative;
}
.cu-field input,
.cu-field textarea {
    width: 100%;
    padding: 18px 0 12px;
    font: 400 16px/1.4 'Inter', sans-serif;
    color: #1d1d1f;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    outline: none;
    border-radius: 0;
    resize: none;
    transition:
        border-color 0.35s ease,
        padding 0.35s ease;
}
.cu-field textarea {
    min-height: 120px;
    line-height: 1.55;
    resize: vertical;
}
.cu-field label {
    position: absolute;
    left: 0;
    top: 18px;
    font: 400 16px/1 'Inter', sans-serif;
    color: rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition:
        top 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        font-size 0.3s ease,
        color 0.3s ease;
}
.cu-field input:focus,
.cu-field textarea:focus {
    border-bottom-color: var(--brand, #b10f1a);
}
.cu-field input:focus + label,
.cu-field input:not(:placeholder-shown) + label,
.cu-field textarea:focus + label,
.cu-field textarea:not(:placeholder-shown) + label {
    top: -2px;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    font-weight: 600;
}
.cu-field input::placeholder,
.cu-field textarea::placeholder {
    color: transparent;
}

/* Submit button — minimal Apple-style filled pill */
.cu-form-submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #1d1d1f;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    font: 600 14px/1 'Inter', sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        background 0.35s ease,
        gap 0.35s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    margin-top: 6px;
}
.cu-form-submit i { font-size: 12px; transition: transform 0.35s ease; }
.cu-form-submit:hover {
    background: var(--brand, #b10f1a);
    gap: 16px;
}
.cu-form-submit:hover i { transform: translateX(4px); }
.cu-form-submit.is-sent {
    background: #1f8f4f;
    pointer-events: none;
}
.cu-form-fineprint {
    font: 400 12.5px/1.55 'Inter', sans-serif;
    color: #86868b;
    margin: 14px 0 0;
    max-width: 520px;
}

/* Direct contact rail */
.cu-direct {
    display: flex;
    flex-direction: column;
    gap: 36px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 22px;
    padding: 32px 28px;
    box-shadow: 0 12px 32px -22px rgba(15, 17, 22, 0.10);
    position: sticky;
    top: 110px;
    align-self: start;
}
.cu-direct-block { display: flex; flex-direction: column; }
.cu-direct-label {
    font: 700 10px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 10px;
}
.cu-direct-heading {
    font: 700 22px/1.16 'Manrope', sans-serif;
    letter-spacing: -0.022em;
    color: #1d1d1f;
    margin: 0 0 18px;
}
.cu-direct-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cu-direct-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cu-direct-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.cu-direct-region {
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
}
.cu-direct-list a {
    font: 600 16px/1.3 'Manrope', sans-serif;
    color: #1d1d1f;
    text-decoration: none;
    letter-spacing: -0.012em;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.cu-direct-list a:hover { color: var(--brand, #b10f1a); }
.cu-direct-mail {
    font: 700 clamp(20px, 1.8vw, 24px)/1.2 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: color 0.3s ease;
    margin-bottom: 8px;
    word-break: break-word;
}
.cu-direct-mail:hover { color: var(--brand, #b10f1a); }
.cu-direct-note {
    font: 400 13.5px/1.6 'Inter', sans-serif;
    color: #86868b;
    margin: 8px 0 0;
}
.cu-direct-social { padding-top: 4px; }
.cu-social-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.cu-social-row a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1d1d1f;
    font-size: 13px;
    text-decoration: none;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}
.cu-social-row a:hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    color: #ffffff;
}

/* ---- CU-4 · Global Offices ---- */
.cu-offices {
    padding: 80px 0 96px;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cu-offices-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 56px;
}
.cu-offices-head .section-eyebrow {
    margin: 0 auto 18px;
}
.cu-offices-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
/* Top row: India card (75%) + USA card (25%).
   Bottom row: France, UK, Australia in equal thirds. */
.cu-offices-grid.cu-offices-grid-2-4 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(1) {
    grid-column: span 8;
}
.cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(2) {
    grid-column: span 4;
}
.cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(n+3) {
    grid-column: span 4;
}

/* Small country flag pinned to the top-right of every office card. */
.cu-office-country.fi {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 21px;
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(0, 0, 0, 0.06);
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cu-office:hover .cu-office-country.fi {
    transform: translateY(-1px);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* Inside the India card, the Registered Office and Development Centre
   sit side by side. */
.cu-office-india-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}
.cu-office-india-sub-tag {
    display: block;
    font: 700 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
    margin-bottom: 6px;
    transition: color 0.4s ease;
}
.cu-office:hover .cu-office-india-sub-tag,
.cu-office:active .cu-office-india-sub-tag,
.cu-office:focus-visible .cu-office-india-sub-tag {
    color: rgba(255, 255, 255, 0.92);
}
.cu-office-india .cu-office-addr { margin-bottom: 0; }

@media (max-width: 991px) {
    .cu-offices-grid.cu-offices-grid-2-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(1),
    .cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(2),
    .cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(n+3) {
        grid-column: auto;
    }
    .cu-office-india-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Mobile: 2 columns crowds the office card content (addresses with
   line breaks, country flag, phone link) — drop to a single column
   so each office reads cleanly, and tighten the inner padding. */
@media (max-width: 575px) {
    .cu-offices-grid,
    .cu-offices-grid.cu-offices-grid-2-4 {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(1),
    .cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(2),
    .cu-offices-grid.cu-offices-grid-2-4 > .cu-office:nth-child(n+3) {
        grid-column: auto;
    }
    .cu-office { padding: 22px 22px 20px; border-radius: 16px; }
    .cu-office-country.fi { width: 24px; height: 18px; top: 16px; right: 16px; }
    .cu-office-india-grid { gap: 14px; }
}
.cu-office {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 28px 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition:
        transform 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.cu-office:hover,
.cu-office:active,
.cu-office:focus-visible {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.cu-office-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cu-office-flag {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.15);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.cu-office:hover .cu-office-flag,
.cu-office:active .cu-office-flag,
.cu-office:focus-visible .cu-office-flag {
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}
.cu-office-tag {
    font: 700 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    transition: color 0.4s ease;
}
.cu-office:hover .cu-office-tag,
.cu-office:active .cu-office-tag,
.cu-office:focus-visible .cu-office-tag { color: rgba(255, 255, 255, 0.82); }
.cu-office-city {
    font: 600 clamp(28px, 2.6vw, 36px)/1.04 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.030em;
    margin: 4px 0 4px;
    transition: color 0.4s ease;
}
.cu-office-city span {
    color: var(--brand, #b10f1a);
    transition: color 0.4s ease;
}
.cu-office:hover .cu-office-city,
.cu-office:active .cu-office-city,
.cu-office:focus-visible .cu-office-city,
.cu-office:hover .cu-office-city span,
.cu-office:active .cu-office-city span,
.cu-office:focus-visible .cu-office-city span { color: #ffffff; }
.cu-office-addr {
    font: 400 14px/1.6 'Inter', sans-serif;
    color: #4a4a4d;
    margin: 0 0 8px;
    flex: 1;
    transition: color 0.4s ease;
}
.cu-office:hover .cu-office-addr,
.cu-office:active .cu-office-addr,
.cu-office:focus-visible .cu-office-addr { color: rgba(255, 255, 255, 0.86); }
.cu-office-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 600 13.5px/1 'Inter', sans-serif;
    color: #1d1d1f;
    text-decoration: none;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, gap 0.3s ease, border-color 0.4s ease;
}
.cu-office-phone i {
    color: var(--brand, #b10f1a);
    font-size: 11px;
    transition: color 0.4s ease;
}
.cu-office-phone:hover { color: var(--brand, #b10f1a); gap: 12px; }
.cu-office:hover .cu-office-phone,
.cu-office:active .cu-office-phone,
.cu-office:focus-visible .cu-office-phone {
    color: #ffffff;
    border-top-color: rgba(255, 255, 255, 0.22);
}
.cu-office:hover .cu-office-phone i,
.cu-office:active .cu-office-phone i,
.cu-office:focus-visible .cu-office-phone i { color: #ffffff; }
.cu-office:hover .cu-office-phone:hover { color: #ffffff; gap: 12px; }

/* iOS / touch devices: same instant-snap fix as .cu-quick-card.
   Every text colour forced with !important + transitions disabled
   on the touch state so the red bg and white text snap together. */
@media (hover: none) {
    .cu-office { -webkit-tap-highlight-color: transparent; }
    .cu-office.is-tapped,
    .cu-office.is-tapped *,
    .cu-office:active,
    .cu-office:active *,
    .cu-office:focus-within,
    .cu-office:focus-within * { transition: none !important; }
    .cu-office.is-tapped,
    .cu-office:active,
    .cu-office:focus,
    .cu-office:focus-within {
        transform: translateY(-4px);
        background: var(--brand, #b10f1a) !important;
        border-color: var(--brand, #b10f1a) !important;
        box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
    }
    .cu-office.is-tapped .cu-office-flag,
    .cu-office:active .cu-office-flag,
    .cu-office:focus-within .cu-office-flag {
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28) !important;
    }
    .cu-office.is-tapped .cu-office-tag,
    .cu-office:active .cu-office-tag,
    .cu-office:focus-within .cu-office-tag { color: rgba(255, 255, 255, 0.85) !important; }
    .cu-office.is-tapped .cu-office-city,
    .cu-office:active .cu-office-city,
    .cu-office:focus-within .cu-office-city,
    .cu-office.is-tapped .cu-office-city span,
    .cu-office:active .cu-office-city span,
    .cu-office:focus-within .cu-office-city span { color: #ffffff !important; }
    .cu-office.is-tapped .cu-office-addr,
    .cu-office:active .cu-office-addr,
    .cu-office:focus-within .cu-office-addr { color: rgba(255, 255, 255, 0.92) !important; }
    .cu-office.is-tapped .cu-office-india-sub-tag,
    .cu-office:active .cu-office-india-sub-tag,
    .cu-office:focus-within .cu-office-india-sub-tag { color: rgba(255, 255, 255, 0.95) !important; }
    .cu-office.is-tapped .cu-office-phone,
    .cu-office:active .cu-office-phone,
    .cu-office:focus-within .cu-office-phone {
        color: #ffffff !important;
        border-top-color: rgba(255, 255, 255, 0.30) !important;
    }
    .cu-office.is-tapped .cu-office-phone i,
    .cu-office:active .cu-office-phone i,
    .cu-office:focus-within .cu-office-phone i { color: #ffffff !important; }
}

/* ---- CU-5 · Map (tabbed by office) ---- */
.cu-map {
    padding: 80px 0 96px;
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cu-map-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 48px;
}
.cu-map-head .section-eyebrow { margin: 0 auto 18px; }
.cu-map-shell {
    max-width: 1180px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 56px -32px rgba(15, 17, 22, 0.18);
}

/* Tab strip */
.cu-map-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fbfafa;
}
.cu-map-tab {
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding: 18px 18px 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition:
        background 0.35s ease,
        color 0.35s ease;
}
.cu-map-tab:last-child { border-right: 0; }
.cu-map-tab::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    height: 2px;
    background: var(--brand, #b10f1a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.cu-map-tab.is-active::after { transform: scaleX(1); }
.cu-map-tab:hover { background: #ffffff; }
.cu-map-tab.is-active { background: #ffffff; }

.cu-map-tab-flag {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cu-map-tab.is-active .cu-map-tab-flag {
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.18);
}
.cu-map-tab-label {
    font: 600 15px/1.2 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.014em;
}
.cu-map-tab-sub {
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
}
.cu-map-tab.is-active .cu-map-tab-sub { color: var(--brand, #b10f1a); }

/* Cycling sweet-pastel palette across the 5 map tabs — peach,
   lavender, pistachio, sky, rose. Mirrors the "Typical enterprise
   use cases" treatment from data-to-knowledge-transformation.html.
   The accent (flag dot + sub-label) is tinted to match each tab's
   identity. */
.cu-map-tabs .cu-map-tab:nth-child(1) { background: #ffe8dc; }
.cu-map-tabs .cu-map-tab:nth-child(1):hover,
.cu-map-tabs .cu-map-tab:nth-child(1).is-active { background: #fdd6c0; }
.cu-map-tabs .cu-map-tab:nth-child(1) .cu-map-tab-flag { background: rgba(200, 95, 50, 0.35); }
.cu-map-tabs .cu-map-tab:nth-child(1).is-active .cu-map-tab-flag {
    background: #c85f32;
    box-shadow: 0 0 0 3px rgba(200, 95, 50, 0.20);
}
.cu-map-tabs .cu-map-tab:nth-child(1).is-active .cu-map-tab-sub { color: #c85f32; }
.cu-map-tabs .cu-map-tab:nth-child(1).is-active::after { background: #c85f32; }

.cu-map-tabs .cu-map-tab:nth-child(2) { background: #ece5fb; }
.cu-map-tabs .cu-map-tab:nth-child(2):hover,
.cu-map-tabs .cu-map-tab:nth-child(2).is-active { background: #dccff5; }
.cu-map-tabs .cu-map-tab:nth-child(2) .cu-map-tab-flag { background: rgba(110, 80, 200, 0.35); }
.cu-map-tabs .cu-map-tab:nth-child(2).is-active .cu-map-tab-flag {
    background: #6e50c8;
    box-shadow: 0 0 0 3px rgba(110, 80, 200, 0.20);
}
.cu-map-tabs .cu-map-tab:nth-child(2).is-active .cu-map-tab-sub { color: #6e50c8; }
.cu-map-tabs .cu-map-tab:nth-child(2).is-active::after { background: #6e50c8; }

.cu-map-tabs .cu-map-tab:nth-child(3) { background: #e3f0d6; }
.cu-map-tabs .cu-map-tab:nth-child(3):hover,
.cu-map-tabs .cu-map-tab:nth-child(3).is-active { background: #cee5b5; }
.cu-map-tabs .cu-map-tab:nth-child(3) .cu-map-tab-flag { background: rgba(95, 140, 55, 0.35); }
.cu-map-tabs .cu-map-tab:nth-child(3).is-active .cu-map-tab-flag {
    background: #5f8c37;
    box-shadow: 0 0 0 3px rgba(95, 140, 55, 0.22);
}
.cu-map-tabs .cu-map-tab:nth-child(3).is-active .cu-map-tab-sub { color: #5f8c37; }
.cu-map-tabs .cu-map-tab:nth-child(3).is-active::after { background: #5f8c37; }

.cu-map-tabs .cu-map-tab:nth-child(4) { background: #dceffa; }
.cu-map-tabs .cu-map-tab:nth-child(4):hover,
.cu-map-tabs .cu-map-tab:nth-child(4).is-active { background: #b8dcf2; }
.cu-map-tabs .cu-map-tab:nth-child(4) .cu-map-tab-flag { background: rgba(50, 110, 180, 0.35); }
.cu-map-tabs .cu-map-tab:nth-child(4).is-active .cu-map-tab-flag {
    background: #326eb4;
    box-shadow: 0 0 0 3px rgba(50, 110, 180, 0.20);
}
.cu-map-tabs .cu-map-tab:nth-child(4).is-active .cu-map-tab-sub { color: #326eb4; }
.cu-map-tabs .cu-map-tab:nth-child(4).is-active::after { background: #326eb4; }

.cu-map-tabs .cu-map-tab:nth-child(5) { background: #fde0ec; }
.cu-map-tabs .cu-map-tab:nth-child(5):hover,
.cu-map-tabs .cu-map-tab:nth-child(5).is-active { background: #fbcad8; }
.cu-map-tabs .cu-map-tab:nth-child(5) .cu-map-tab-flag { background: rgba(177, 64, 114, 0.35); }
.cu-map-tabs .cu-map-tab:nth-child(5).is-active .cu-map-tab-flag {
    background: #b14072;
    box-shadow: 0 0 0 3px rgba(177, 64, 114, 0.20);
}
.cu-map-tabs .cu-map-tab:nth-child(5).is-active .cu-map-tab-sub { color: #b14072; }
.cu-map-tabs .cu-map-tab:nth-child(5).is-active::after { background: #b14072; }

/* Map iframe frame */
.cu-map-frame {
    position: relative;
    background: #f0eee9;
    aspect-ratio: 21 / 9;
    min-height: 360px;
}
.cu-map-frame iframe {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(0.20) contrast(1.02);
}

/* Footer with address + directions */
.cu-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    background: #ffffff;
}
.cu-map-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cu-map-region {
    font: 700 10px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
}
.cu-map-addr {
    font: 500 14.5px/1.55 'Inter', sans-serif;
    color: #1d1d1f;
    margin: 0;
}
.cu-map-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: #1d1d1f;
    color: #ffffff;
    border-radius: 999px;
    font: 600 13px/1 'Inter', sans-serif;
    letter-spacing: 0.02em;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.3s ease, gap 0.3s ease;
}
.cu-map-cta i { font-size: 12px; }
.cu-map-cta:hover {
    background: var(--brand, #b10f1a);
    gap: 13px;
    color: #ffffff;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .cu-quick { padding: 56px 0 24px; }
    .cu-quick-grid { grid-template-columns: 1fr; gap: 14px; }
    .cu-talk { padding: 48px 0 72px; margin-top: 24px; }
    .cu-talk-grid { grid-template-columns: 1fr; gap: 36px; }
    .cu-direct { position: static; }
    .cu-offices { padding: 60px 0 72px; }
    .cu-offices-head { margin-bottom: 40px; }
    .cu-offices-grid { grid-template-columns: 1fr; gap: 14px; }
    .cu-map { padding: 60px 0 72px; }
    .cu-map-head { margin-bottom: 40px; }
    .cu-map-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cu-map-tab:nth-child(2) { border-right: 0; }
    .cu-map-tab:nth-child(1), .cu-map-tab:nth-child(2) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .cu-map-frame { aspect-ratio: 4 / 3; min-height: 320px; }
    .cu-map-footer { flex-direction: column; align-items: flex-start; padding: 20px 22px; }
}
@media (max-width: 600px) {
    .cu-form-submit { width: 100%; justify-content: center; }
    .cu-map-tab { padding: 14px 16px 12px; }
    .cu-map-tab-label { font-size: 13.5px; }
}

/* ============================================================
   ▲▲▲  END CONTACT US PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  PRIVACY POLICY PAGE  ▼▼▼
   File: privacy-policy.html
   Apple-style legal page: tighter hero, sticky TOC + numbered
   sections in a serif-feel reading column, generous whitespace.
   ============================================================ */

/* Hero compact override (smaller than product-page heroes) */
.pp-hero { padding-top: 120px; padding-bottom: 56px; }
.pp-hero .pe-hero-title {
    font-size: clamp(48px, 6vw, 84px);
}

/* ---- Document header bar (Apple-style legal-document chrome) ---- */
.pp-doc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 36px;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 36px -22px rgba(15, 17, 22, 0.10);
    max-width: 920px;
}
.pp-doc-cols {
    display: flex;
    gap: 36px;
    align-items: center;
    flex-wrap: wrap;
}
.pp-doc-col {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}
.pp-doc-col + .pp-doc-col::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.10);
}
.pp-doc-label {
    font: 700 9px/1 'Inter', sans-serif;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.50);
}
.pp-doc-value {
    font: 700 13.5px/1.2 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.012em;
    font-variant-numeric: tabular-nums;
}
.pp-doc-actions {
    display: flex;
    gap: 8px;
}
.pp-doc-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    font: 600 12px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}
.pp-doc-action i { font-size: 12px; }
.pp-doc-action:hover {
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #ffffff;
}
.pp-doc-action.is-copied {
    background: #1f8f4f;
    border-color: #1f8f4f;
    color: #ffffff;
}

/* ---- Body grid: sticky TOC sidebar + reading column ---- */
.pp-body {
    padding: 64px 0 96px;
    background: #ffffff;
}
.pp-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 64px;
    max-width: 1140px;
    margin: 0 auto;
}

/* ---- TOC · Minimal sliding-indicator sidebar ----
   No card chrome. Pure typography on white, with a thin track and a
   brand-red marker bar that animates between active items as the user
   scrolls. Inspired by Apple developer docs / Stripe legal pages. */
.pp-toc {
    position: relative;
}
.pp-toc-shell {
    position: sticky;
    top: 110px;
}
.pp-toc-label {
    display: inline-block;
    font: 700 9.5px/1 'Inter', sans-serif;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.40);
    margin-bottom: 22px;
}

/* Rail: hairline track on left + sliding marker + the link list */
.pp-toc-rail {
    position: relative;
    padding-left: 22px;
}
.pp-toc-track {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 1px;
}
.pp-toc-marker {
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--brand, #b10f1a);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(177, 15, 26, 0.35);
    opacity: 0;
    transform: translateY(0);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
    z-index: 1;
}

.pp-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.pp-toc-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    text-decoration: none;
    position: relative;
}
.pp-toc-num {
    flex-shrink: 0;
    width: 22px;
    font: 600 10.5px/1.4 'JetBrains Mono', monospace;
    color: rgba(0, 0, 0, 0.32);
    letter-spacing: 0.10em;
    transition: color 0.35s ease;
}
.pp-toc-text {
    font: 500 14.5px/1.4 'Inter', sans-serif;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: -0.005em;
    transition:
        color 0.35s ease,
        font-weight 0.35s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-toc-link:hover .pp-toc-num { color: var(--brand, #b10f1a); }
.pp-toc-link:hover .pp-toc-text { color: #1d1d1f; }

.pp-toc-link.is-active .pp-toc-num {
    color: var(--brand, #b10f1a);
}
.pp-toc-link.is-active .pp-toc-text {
    color: #1d1d1f;
    font-weight: 700;
    transform: translateX(2px);
}

/* Reading-progress meta at bottom of the sidebar */
.pp-toc-meta {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.pp-toc-meta-pct {
    font: 700 28px/1 'Manrope', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: -0.026em;
}
.pp-toc-meta-label {
    font: 700 9.5px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45);
}

/* ---- Article column ---- */
.pp-article {
    max-width: 720px;
    color: #1d1d1f;
}
.pp-lede {
    font: 500 clamp(20px, 1.9vw, 24px)/1.55 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.012em;
    margin: 0 0 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

/* Each section — separated by a hairline divider for clean document feel */
.pp-section {
    margin: 0;
    padding: 48px 0;
    scroll-margin-top: 96px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.pp-section:first-of-type {
    border-top: 0;
    padding-top: 8px;
}
.pp-section:last-of-type {
    padding-bottom: 0;
}

.pp-section-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}
.pp-section-num {
    flex-shrink: 0;
    font: 700 11px/1 'JetBrains Mono', monospace;
    color: var(--brand, #b10f1a);
    letter-spacing: 0.18em;
    padding: 8px 10px;
    background: rgba(177, 15, 26, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(177, 15, 26, 0.16);
    margin-top: 6px;
}
.pp-section-title {
    font: 600 clamp(24px, 2.4vw, 32px)/1.16 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.022em;
    margin: 0;
}
.pp-section p {
    font: 400 16.5px/1.78 'Inter', sans-serif;
    color: #424245;
    margin: 0 0 16px;
}
.pp-section p:last-child { margin-bottom: 0; }
.pp-link {
    color: var(--brand, #b10f1a);
    text-decoration: none;
    border-bottom: 1px solid rgba(177, 15, 26, 0.30);
    transition: border-color 0.3s ease, color 0.3s ease;
}
.pp-link:hover {
    border-bottom-color: var(--brand, #b10f1a);
    color: var(--brand, #b10f1a);
}

/* Contact card at the end */
.pp-contact-card {
    margin-top: 28px;
    padding: 24px 26px 26px;
    background: linear-gradient(180deg, #fcfbfa 0%, #ffffff 100%);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.pp-contact-tag {
    font: 700 10px/1 'Inter', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
}
.pp-contact-mail {
    font: 700 clamp(20px, 1.8vw, 26px)/1.2 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.020em;
    text-decoration: none;
    transition: color 0.3s ease;
}
.pp-contact-mail:hover { color: var(--brand, #b10f1a); }
.pp-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 11px 22px;
    background: #1d1d1f;
    color: #ffffff;
    border-radius: 999px;
    font: 600 12.5px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, gap 0.3s ease;
}
.pp-contact-link i { font-size: 11px; }
.pp-contact-link:hover {
    background: var(--brand, #b10f1a);
    gap: 12px;
    color: #ffffff;
}

/* ---- Floating "Back to top" button (Apple legal-page chrome) ---- */
.pp-totop {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1d1d1f;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.30);
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    pointer-events: none;
    transition:
        opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease;
    z-index: 90;
}
.pp-totop.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.pp-totop:hover {
    background: var(--brand, #b10f1a);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .pp-hero { padding-top: 100px; padding-bottom: 40px; }
    .pp-doc-meta {
        margin-top: 28px;
        padding: 16px 18px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
    .pp-doc-cols { gap: 22px; }
    .pp-doc-col + .pp-doc-col::before { left: -11px; height: 18px; }
    .pp-doc-actions { width: 100%; }
    .pp-doc-action { flex: 1; justify-content: center; }
    .pp-body { padding: 48px 0 72px; }
    .pp-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pp-toc-shell { position: static; }
    .pp-toc-label { margin-bottom: 16px; }
    .pp-toc-rail { padding-left: 18px; }
    .pp-toc-link { padding: 9px 0; }
    .pp-toc-num { width: 20px; font-size: 10px; }
    .pp-toc-text { font-size: 13.5px; }
    .pp-toc-meta { margin-top: 22px; padding-top: 16px; }
    .pp-toc-meta-pct { font-size: 24px; }
    .pp-lede { margin-bottom: 36px; padding-bottom: 24px; }
    .pp-section { padding: 36px 0; }
    .pp-section-num { padding: 7px 9px; font-size: 10.5px; }

    .pp-totop {
        right: 18px;
        bottom: 18px;
        width: 42px;
        height: 42px;
    }
}

/* ---- Print: clean document for download/export ---- */
@media print {
    .navbar-custom,
    .scroll-progress,
    .pe-hero-bg,
    .pp-doc-actions,
    .pp-toc,
    .pp-totop,
    .footer { display: none !important; }
    body { background: #ffffff; }
    .pp-hero { padding: 24px 0 8px; background: #ffffff !important; }
    .pp-hero .pe-hero-title { font-size: 32px; color: #1d1d1f; }
    .pp-hero .pe-hero-title .accent { color: #1d1d1f; }
    .pe-hero-eyebrow .pulse-dot { display: none; }
    .pp-doc-meta {
        background: #ffffff;
        border-color: #d1d1d6;
        box-shadow: none;
        backdrop-filter: none;
    }
    .pp-grid { grid-template-columns: 1fr; gap: 0; max-width: 100%; }
    .pp-article { max-width: 100%; }
    .pp-section { break-inside: avoid; padding: 18px 0; }
    .pp-section-num {
        background: transparent;
        border: 0;
        padding: 0;
        color: #1d1d1f;
    }
    .pp-section p { color: #1d1d1f; }
    .pp-contact-card { background: #ffffff; border-color: #d1d1d6; }
    .pp-contact-link { display: none; }
    a, a:visited { color: #1d1d1f !important; text-decoration: underline; }
}

/* ============================================================
   ▲▲▲  END PRIVACY POLICY PAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  HOME HERO · BRAIN HOLOGRAM SCENE  ▼▼▼
   Replaces the previous wireframe orbit visual on index.html.
   Glowing anatomical brain inside a holographic chamber, with
   rising energy beams, drifting particles, voxel cube backdrop,
   and a glowing pedestal base. All animated.
   ============================================================ */

.hv-brain {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

/* ---- Backdrop: voxel grid + drifting cubes ---- */
.brain-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.brain-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(177, 15, 26, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177, 15, 26, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 30%, transparent 80%);
}
.brain-cube {
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #d6404a, #7a0a14);
    box-shadow: 0 0 14px rgba(177, 15, 26, 0.45);
    border: 1px solid rgba(177, 15, 26, 0.35);
    transform: rotate(45deg);
    will-change: transform, opacity;
}
.brain-cube.c1 { top: 14%;  left: 12%; animation: brainFloat 6s ease-in-out infinite; }
.brain-cube.c2 { top: 22%;  right: 10%; width: 10px; height: 10px; animation: brainFloat 7s ease-in-out infinite 1.2s; }
.brain-cube.c3 { bottom: 32%; left: 8%; width: 8px; height: 8px; animation: brainFloat 5.5s ease-in-out infinite 0.6s; }
.brain-cube.c4 { bottom: 18%; right: 14%; width: 12px; height: 12px; animation: brainFloat 6.5s ease-in-out infinite 1.8s; }
.brain-cube.c5 { top: 48%;  right: 6%;  width: 9px; height: 9px; animation: brainFloat 8s ease-in-out infinite 0.4s; }

@keyframes brainFloat {
    0%, 100% { transform: rotate(45deg) translateY(0) scale(1); opacity: 0.55; }
    50%      { transform: rotate(45deg) translateY(-12px) scale(1.08); opacity: 1; }
}

/* ---- Vertical energy beams rising through the chamber ---- */
.brain-beams {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.brain-beam {
    position: absolute;
    bottom: 22%;
    width: 2px;
    height: 70%;
    background: linear-gradient(
        to top,
        rgba(177, 15, 26, 0) 0%,
        rgba(177, 15, 26, 0.85) 18%,
        rgba(214, 64, 74, 1) 50%,
        rgba(177, 15, 26, 0.65) 75%,
        rgba(177, 15, 26, 0) 100%
    );
    border-radius: 2px;
    filter: blur(0.4px);
    box-shadow: 0 0 8px rgba(177, 15, 26, 0.55);
    will-change: opacity, transform;
}
.brain-beam.b1 { left: 38%; animation: brainBeam 2.4s ease-in-out infinite 0.0s; }
.brain-beam.b2 { left: 46%; animation: brainBeam 3.2s ease-in-out infinite 0.4s; opacity: 0.7; }
.brain-beam.b3 { left: 50%; animation: brainBeam 2.8s ease-in-out infinite 0.8s; }
.brain-beam.b4 { left: 56%; animation: brainBeam 3.6s ease-in-out infinite 0.2s; opacity: 0.65; }
.brain-beam.b5 { left: 62%; animation: brainBeam 2.2s ease-in-out infinite 1.1s; opacity: 0.85; }

@keyframes brainBeam {
    0%, 100% {
        opacity: 0.35;
        transform: scaleY(0.85);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.05);
    }
}

/* ---- Holographic chamber frame (corner brackets + edges) ---- */
.brain-frame {
    position: absolute;
    inset: 14% 16%;
    pointer-events: none;
    z-index: 2;
}
.frame-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 1.5px solid rgba(177, 15, 26, 0.45);
    box-shadow: 0 0 10px rgba(177, 15, 26, 0.30);
    animation: frameFlick 4s ease-in-out infinite;
}
.frame-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.frame-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; animation-delay: 0.5s; }
.frame-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; animation-delay: 1s; }
.frame-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; animation-delay: 1.5s; }

.frame-edge {
    position: absolute;
    left: 26px;
    right: 26px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(177, 15, 26, 0.22),
        transparent
    );
}
.frame-edge.top { top: 0; }
.frame-edge.bottom { bottom: 0; }

@keyframes frameFlick {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ---- Brain core: glowing anatomical icon, breathing pulse ---- */
.brain-core {
    position: relative;
    z-index: 3;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brain-core i {
    font-size: 210px;
    color: transparent;
    /* Inner-glow effect: a radial gradient that's nearly black at
       the centre and brightens to warm orange/gold at the edges.
       The light appears to seep into the brain from the rim
       inward, while the core stays dark. No hard border stroke. */
    background: radial-gradient(
        ellipse at 50% 52%,
        #050202 0%,
        rgba(18, 8, 4, 0.97) 30%,
        rgba(45, 18, 6, 0.90) 55%,
        rgba(110, 45, 12, 0.85) 75%,
        rgba(180, 85, 25, 0.85) 92%,
        rgba(210, 110, 40, 0.85) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 12px rgba(255, 150, 40, 0.45))
        drop-shadow(0 0 28px rgba(255, 110, 20, 0.28))
        drop-shadow(0 0 52px rgba(255, 90, 10, 0.16));
    animation: brainBreathe 4.5s ease-in-out infinite;
    will-change: transform, filter;
    z-index: 2;
}

@keyframes brainBreathe {
    0%, 100% {
        transform: scale(1);
        filter:
            drop-shadow(0 0 12px rgba(255, 150, 40, 0.42))
            drop-shadow(0 0 28px rgba(255, 110, 20, 0.25))
            drop-shadow(0 0 52px rgba(255, 90, 10, 0.14));
    }
    50% {
        transform: scale(1.04);
        filter:
            drop-shadow(0 0 18px rgba(255, 160, 50, 0.60))
            drop-shadow(0 0 38px rgba(255, 120, 25, 0.38))
            drop-shadow(0 0 70px rgba(255, 100, 20, 0.22));
    }
}

/* Aura behind the brain — soft warm backlight, restrained. */
.brain-aura {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 55%,
        rgba(255, 160, 40, 0.22) 0%,
        rgba(255, 110, 20, 0.10) 35%,
        rgba(255, 90, 10, 0.04) 60%,
        transparent 80%
    );
    filter: blur(14px);
    z-index: 1;
    animation: brainAura 4.5s ease-in-out infinite;
}
@keyframes brainAura {
    0%, 100% { transform: scale(0.92); opacity: 0.7; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Expanding pulse rings */
.brain-pulse {
    position: absolute;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    border: 1.5px solid rgba(177, 15, 26, 0.45);
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.30);
    z-index: 1;
    pointer-events: none;
    animation: brainPulse 3s ease-out infinite;
    will-change: transform, opacity;
}
.brain-pulse.p1 { animation-delay: 0s; }
.brain-pulse.p2 { animation-delay: 1.5s; }

@keyframes brainPulse {
    0% {
        transform: scale(0.65);
        opacity: 0.85;
        border-width: 1.5px;
    }
    100% {
        transform: scale(1.7);
        opacity: 0;
        border-width: 0.4px;
    }
}

/* ---- Rising sparks (data particles) ---- */
.brain-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.spark {
    position: absolute;
    bottom: 22%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b10f1a;
    box-shadow: 0 0 6px rgba(177, 15, 26, 0.95), 0 0 14px rgba(177, 15, 26, 0.55);
    opacity: 0;
    will-change: transform, opacity;
}
.spark.s1  { left: 36%; animation: sparkRise 4.2s linear infinite 0.0s; }
.spark.s2  { left: 42%; animation: sparkRise 3.6s linear infinite 0.6s; }
.spark.s3  { left: 48%; animation: sparkRise 4.8s linear infinite 1.2s; }
.spark.s4  { left: 54%; animation: sparkRise 3.4s linear infinite 0.4s; }
.spark.s5  { left: 60%; animation: sparkRise 4.0s linear infinite 2.0s; }
.spark.s6  { left: 64%; animation: sparkRise 3.8s linear infinite 1.6s; }
.spark.s7  { left: 38%; animation: sparkRise 5.0s linear infinite 1.0s; }
.spark.s8  { left: 46%; animation: sparkRise 4.4s linear infinite 2.4s; }
.spark.s9  { left: 52%; animation: sparkRise 3.2s linear infinite 0.8s; }
.spark.s10 { left: 58%; animation: sparkRise 4.6s linear infinite 1.4s; }
.spark.s11 { left: 40%; animation: sparkRise 5.2s linear infinite 2.8s; }
.spark.s12 { left: 56%; animation: sparkRise 3.6s linear infinite 0.2s; }

@keyframes sparkRise {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateY(-180px) scale(1); opacity: 0.95; }
    90%  { transform: translateY(-340px) scale(0.7); opacity: 0.55; }
    100% { transform: translateY(-380px) scale(0.4); opacity: 0; }
}

/* ---- Glowing pedestal/podium base ---- */
.brain-podium {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 56%;
    height: 60px;
    z-index: 2;
    pointer-events: none;
}
.podium-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 50% 100%,
            rgba(177, 15, 26, 0.70) 0%,
            rgba(177, 15, 26, 0.35) 25%,
            rgba(177, 15, 26, 0.12) 50%,
            transparent 75%
        );
    filter: blur(3px);
    animation: podiumGlow 3s ease-in-out infinite;
}
.podium-line {
    position: absolute;
    bottom: 14px;
    left: 18%;
    right: 18%;
    height: 1.5px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(177, 15, 26, 0.85) 30%,
        rgba(214, 64, 74, 1) 50%,
        rgba(177, 15, 26, 0.85) 70%,
        transparent
    );
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.85);
}
@keyframes podiumGlow {
    0%, 100% { opacity: 0.85; transform: scale(0.96); }
    50%      { opacity: 1; transform: scale(1.04); }
}

/* ---- Status chips (kept; restyled for dark hologram backdrop) ---- */
.brain-chip {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 32px -18px rgba(15, 17, 22, 0.18);
    color: #1d1d1f;
    will-change: transform;
    animation: brainChipFloat 6s ease-in-out infinite;
}
.brain-chip strong {
    display: block;
    font: 700 13px/1.1 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.014em;
}
.brain-chip em {
    font: 500 10.5px/1.2 'Inter', sans-serif;
    color: #6e6e73;
    font-style: normal;
    letter-spacing: 0.04em;
}
.brain-chip .chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 10px rgba(177, 15, 26, 0.85);
    flex-shrink: 0;
    animation: brainDotPulse 1.8s ease-in-out infinite;
}
.brain-chip .chip-dot.green {
    background: #2bd47d;
    box-shadow: 0 0 10px rgba(43, 212, 125, 0.75);
}
.brain-chip.chip-top    { top: 12%; left: 6%; animation-delay: 0s; }
.brain-chip.chip-bottom { bottom: 16%; right: 5%; animation-delay: 1.5s; }

@keyframes brainChipFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes brainDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.7); opacity: 0.7; }
}

/* ---- Reduced motion: stop all animations ---- */
@media (prefers-reduced-motion: reduce) {
    .hv-brain *,
    .hv-brain *::before,
    .hv-brain *::after {
        animation: none !important;
    }
}

/* ---- Responsive tightening on small screens ---- */
@media (max-width: 991px) {
    .hv-brain { border-radius: 22px; }
    .brain-core { width: 220px; height: 220px; }
    .brain-core i { font-size: 160px; }
    .brain-aura { width: 220px; height: 220px; }
    .brain-pulse { width: 140px; height: 140px; }
    .brain-chip { padding: 9px 14px; gap: 10px; }
    .brain-chip strong { font-size: 12px; }
    .brain-chip em { font-size: 10px; }
}

/* ============================================================
   ▲▲▲  END HOME HERO BRAIN HOLOGRAM  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  HOME HERO · CIRCUIT OVERLAY (PCB traces + AI nodes)
   Adds a circuit-board layer over the brain core: 6 right-angle
   traces routing from the brain to capability badges (EnGen,
   EnAct, EnLearn, EnMetrics, EnWise, EnTrust), with junction
   dots and animated data pulses. Matches the "Entuitive
   Intelligence — one governed fabric" hero copy.
   ============================================================ */

.hv-circuit { position: relative; }

/* Circuit SVG sits behind the brain core but above the backdrop */
.ct-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

/* Trace lines: animated dash flow on top of the static brand-red trace */
.ct-traces path {
    stroke-dasharray: 4 6;
    animation: ctDashFlow 24s linear infinite;
}
@keyframes ctDashFlow {
    to { stroke-dashoffset: -120; }
}

/* Endpoint glow halo — gentle breathing */
.ct-haloes circle {
    animation: ctHalo 3.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.ct-haloes circle:nth-child(1) { animation-delay: 0s; }
.ct-haloes circle:nth-child(2) { animation-delay: 0.4s; }
.ct-haloes circle:nth-child(3) { animation-delay: 0.8s; }
.ct-haloes circle:nth-child(4) { animation-delay: 1.2s; }
.ct-haloes circle:nth-child(5) { animation-delay: 1.6s; }
.ct-haloes circle:nth-child(6) { animation-delay: 2.0s; }

@keyframes ctHalo {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* Animated pulse dots glow as they travel — bigger glow so the
   "energy emerging from the brain" reads clearly across the stage. */
.ct-pulses circle {
    filter:
        drop-shadow(0 0 8px rgba(177, 15, 26, 0.95))
        drop-shadow(0 0 16px rgba(177, 15, 26, 0.55));
}

/* ---- Capability node badges at trace endpoints ----
   Each badge runs a 2.6s cycle that synchronises with the SVG
   data-pulse animation: as the pulse from the brain arrives at
   this badge's endpoint (around 90% of the cycle), the badge
   border + dot + halo briefly intensify so it visually receives
   the energy. Combined with a subtle continuous outward "drift",
   it reads as content emerging from the brain into the badge. */
.ct-node {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(177, 15, 26, 0.22);
    border-radius: 10px;
    font: 700 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.10em;
    color: #1d1d1f;
    box-shadow: 0 8px 22px -10px rgba(177, 15, 26, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-transform: uppercase;
    transition:
        transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform;
    animation: ctNodeReceive 2.6s ease-out infinite;
}
.ct-node-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 8px rgba(177, 15, 26, 0.55);
    flex-shrink: 0;
    animation: ctNodeDotReceive 2.6s ease-out infinite;
}

/* Per-node animation delays match the SVG pulse delays, so each
   badge flashes exactly when its pulse arrives (and is offset
   from the others — it cascades around the brain). */
.ct-n1, .ct-n1 .ct-node-dot { animation-delay: 0s; }
.ct-n2, .ct-n2 .ct-node-dot { animation-delay: 0.4s; }
.ct-n3, .ct-n3 .ct-node-dot { animation-delay: 0.8s; }
.ct-n4, .ct-n4 .ct-node-dot { animation-delay: 1.2s; }
.ct-n5, .ct-n5 .ct-node-dot { animation-delay: 1.6s; }
.ct-n6, .ct-n6 .ct-node-dot { animation-delay: 2.0s; }

@keyframes ctNodeReceive {
    0%, 75% {
        border-color: rgba(177, 15, 26, 0.22);
        box-shadow: 0 8px 22px -10px rgba(177, 15, 26, 0.30);
    }
    88% {
        border-color: rgba(177, 15, 26, 0.75);
        box-shadow:
            0 10px 26px -10px rgba(177, 15, 26, 0.55),
            0 0 22px rgba(177, 15, 26, 0.45);
    }
    100% {
        border-color: rgba(177, 15, 26, 0.22);
        box-shadow: 0 8px 22px -10px rgba(177, 15, 26, 0.30);
    }
}
@keyframes ctNodeDotReceive {
    0%, 75% {
        background: rgba(177, 15, 26, 0.55);
        box-shadow: 0 0 6px rgba(177, 15, 26, 0.40);
        transform: scale(1);
    }
    88% {
        background: var(--brand, #b10f1a);
        box-shadow:
            0 0 16px rgba(177, 15, 26, 1),
            0 0 28px rgba(177, 15, 26, 0.6);
        transform: scale(1.4);
    }
    100% {
        background: rgba(177, 15, 26, 0.55);
        box-shadow: 0 0 6px rgba(177, 15, 26, 0.40);
        transform: scale(1);
    }
}

.ct-node:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(177, 15, 26, 0.55);
    box-shadow: 0 14px 28px -10px rgba(177, 15, 26, 0.45);
}

/* Position the 6 nodes at trace endpoints (viewBox 560×560 → percentages) */
/* Endpoint coords in SVG: (380,100), (490,280), (380,410), (180,410), (70,280), (180,100) */
.ct-n1 { top: 6%;                      left: 67.8%; transform: translate(-50%, -50%); }
.ct-n2 { top: 50%;                     left: 87.5%; transform: translate(-50%, -50%); }
.ct-n3 { top: 73.2%;                   left: 67.8%; transform: translate(-50%, -50%); }
.ct-n4 { top: 73.2%;                   left: 32.1%; transform: translate(-50%, -50%); }
.ct-n5 { top: 50%;                     left: 12.5%; transform: translate(-50%, -50%); }
.ct-n6 { top: 6%;                      left: 32.1%; transform: translate(-50%, -50%); }

/* Per-node hover transforms preserve the translate(-50%,-50%) anchor */
.ct-n1:hover { transform: translate(-50%, -50%) translateY(-3px) scale(1.04); }
.ct-n2:hover { transform: translate(-50%, -50%) translateX(2px)  scale(1.04); }
.ct-n3:hover { transform: translate(-50%, -50%) translateY(2px)  scale(1.04); }
.ct-n4:hover { transform: translate(-50%, -50%) translateY(2px)  scale(1.04); }
.ct-n5:hover { transform: translate(-50%, -50%) translateX(-2px) scale(1.04); }
.ct-n6:hover { transform: translate(-50%, -50%) translateY(-3px) scale(1.04); }

/* Bring the brain core above the circuit lines */
.hv-circuit .brain-core { z-index: 3; }

/* Hide elements no longer used in circuit variant.
   Chips are also hidden because the capability node badges already
   carry the "intelligences online" message and the chips overlap
   with the EnTrust / EnLearn badges. */
.hv-circuit .brain-beams,
.hv-circuit .brain-sparks,
.hv-circuit .brain-frame,
.hv-circuit .brain-chip { display: none; }

/* Push the visual to the right side of its column so the left
   content gets breathing room before the brain begins, and
   eliminate the col gutter on the right so the visual's right
   edge aligns precisely with the navbar Contact button. The
   margin-top nudges the whole stage down a bit so the brain
   sits lower, balancing visually with the title height on the
   left. */
.hv-circuit {
    margin-left: auto;
    margin-right: 0;
    margin-top: 60px;
}
@media (min-width: 992px) {
    .hero-row > .hero-visual-col {
        padding-right: 0;
    }
}

/* =========================================================
   HERO · BRAIN + CIRCUIT-"E" IMAGE (hv-brain-e)
   Static polygonal-brain illustration with the E circuit
   trace, placed on the right side of the hero.
   ========================================================= */
.hv-brain-e {
    position: relative;
    margin-left: auto;
        margin-right: 30px;
    margin-top: 28px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv-brain-e-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transform: scale(1.2);
    transform-origin: left;
    /* MP4 ships with a near-white background that bleeds through over
       the pink-tinted bottom-right of the hero. To dissolve it cleanly:
        1. `contrast(1.35) brightness(1.10) saturate(1.15)` crushes
           near-white (anti-aliased / compressed) pixels to pure 255-
           white while keeping the brain artwork punchy.
        2. `mix-blend-mode: darken` drops every white pixel — they
           always lose to the underlying hero (white or pink-tinted).
        3. A tighter radial mask keeps the brain fully visible (opaque
           to 70%) and then fully fades to transparent by 85% — well
           inside the rectangular video frame — so no boxy outline
           ever reaches the pink-tinted hero corner. */
    filter: contrast(1.35) brightness(1.10) saturate(1.15);
    mix-blend-mode: darken;
    mask-image: radial-gradient(ellipse 72% 72% at center, #000 0%, #000 70%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at center, #000 0%, #000 70%, transparent 85%);
}
@media (max-width: 991px) {
    .hv-brain-e { margin-right: 0; margin-top: 16px; }
    .hv-brain-e-img {
        transform: scale(1);
        transform-origin: center center;
        /* Mobile: kill the rectangular video-frame edges on every side
           (the top-right corner especially bleeds against the pink-
           tinted hero background). Aggressive contrast push + a 4-
           sided vignette mask: top, bottom, left, and right strips
           all fade to transparent so only the central brain artwork
           survives. */
        filter: contrast(1.85) brightness(1.32) saturate(1.18);
        mask-image:
            linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
            linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
            radial-gradient(ellipse 80% 80% at center, #000 0%, #000 70%, transparent 92%);
        mask-composite: intersect;
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%),
            linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
            radial-gradient(ellipse 80% 80% at center, #000 0%, #000 70%, transparent 92%);
        -webkit-mask-composite: source-in;
    }
}
@media (max-width: 575px) {
    .hv-brain-e-img {
        transform: scale(1);
        filter: contrast(1.95) brightness(1.36) saturate(1.18);
        mask-image:
            linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%),
            linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
            radial-gradient(ellipse 85% 85% at center, #000 0%, #000 72%, transparent 92%);
        mask-composite: intersect;
        -webkit-mask-image:
            linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%),
            linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
            radial-gradient(ellipse 85% 85% at center, #000 0%, #000 72%, transparent 92%);
        -webkit-mask-composite: source-in;
    }
}


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE-SCOPED STYLES  ▼▼▼
   Each block below holds styles that were previously inlined in a
   single HTML page. They are scoped under their page's body class
   (.mf-page, .pm-page) or section IDs so they cannot bleed into
   other pages.
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · manufacturing-industry-4-0.html  (body.mf-page)  ▼▼▼
   ════════════════════════════════════════════════════════════════════ */

/* Section heading typography — matched to the 64px scale used on
   other pages (Inter 800, 5.6vw growth, tighter 1.04 leading)
   instead of the 54-56px Manrope scale the SI base inherits. */
.mf-page .si-positioning-title,
.mf-page .si-closing-title,
.mf-page .si-themes-section-title,
.mf-page .si-value-title,
.mf-page .si-cases-title,
.mf-page .si-work-title {
    font: 800 clamp(38px, 5.6vw, 64px)/1.04 "Inter", "Manrope", sans-serif;
    letter-spacing: -.03em;
}

/* Proof points — four stat tiles across one row */
.mf-page .mf-proofs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 32px auto 0;
}
.mf-page .mf-proof {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 28px 24px 26px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.45s ease,
                background 0.45s ease;
}
.mf-page .mf-proof:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.mf-page .mf-proof-num {
    font: 800 clamp(30px, 3vw, 40px)/1 'Manrope', 'Inter', sans-serif;
    letter-spacing: -0.025em;
    display: block;
    margin: 0 0 12px;
}
.mf-page .mf-proof-label {
    font: 500 14px/1.5 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Distinct accent palette across the four proof tiles */
.mf-page .mf-proofs .mf-proof:nth-child(1) {
    background: #ffe8dc;
    border-color: rgba(200, 95, 50, 0.20);
}
.mf-page .mf-proofs .mf-proof:nth-child(1):hover { background: #fdd6c0; }
.mf-page .mf-proofs .mf-proof:nth-child(1) .mf-proof-num { color: #c85f32; }

.mf-page .mf-proofs .mf-proof:nth-child(2) {
    background: #ece5fb;
    border-color: rgba(110, 80, 200, 0.20);
}
.mf-page .mf-proofs .mf-proof:nth-child(2):hover { background: #dccff5; }
.mf-page .mf-proofs .mf-proof:nth-child(2) .mf-proof-num { color: #6e50c8; }

.mf-page .mf-proofs .mf-proof:nth-child(3) {
    background: #e3f0d6;
    border-color: rgba(95, 140, 55, 0.22);
}
.mf-page .mf-proofs .mf-proof:nth-child(3):hover { background: #cee5b5; }
.mf-page .mf-proofs .mf-proof:nth-child(3) .mf-proof-num { color: #5f8c37; }

.mf-page .mf-proofs .mf-proof:nth-child(4) {
    background: #dceffa;
    border-color: rgba(50, 110, 180, 0.20);
}
.mf-page .mf-proofs .mf-proof:nth-child(4):hover { background: #b8dcf2; }
.mf-page .mf-proofs .mf-proof:nth-child(4) .mf-proof-num { color: #326eb4; }

/* 7-card themes grid override (3 columns on wide screens).
   The 7th card spans the full row so it reads as a banner card
   instead of a lonely orphan to the left of empty space. */
.mf-page .si-themes-grid.mf-themes-grid {
    grid-template-columns: repeat(3, 1fr);
}
.mf-page .si-themes-grid.mf-themes-grid > .si-theme-card:nth-child(7) {
    grid-column: 1 / -1;
}

/* Primary brand-red hover for theme cards on this page */
.mf-page .si-theme-card {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease,
                border-color 0.4s ease,
                box-shadow 0.4s ease;
}
.mf-page .si-theme-card:hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.mf-page .si-theme-card:hover .si-theme-num,
.mf-page .si-theme-card:hover .si-theme-title,
.mf-page .si-theme-card:hover .si-theme-tagline,
.mf-page .si-theme-card:hover .si-theme-body {
    color: #ffffff;
}
.mf-page .si-theme-card:hover .si-theme-tagline,
.mf-page .si-theme-card:hover .si-theme-body {
    color: rgba(255, 255, 255, 0.88);
}
.mf-page .si-theme-card:hover .si-theme-rule {
    background: rgba(255, 255, 255, 0.35);
}

/* Outcomes — Apple-style 3-col card grid with iconography */
.mf-page .mf-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 36px auto 0;
}
.mf-page .mf-outcome-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 32px 28px 30px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                background 0.45s ease,
                border-color 0.45s ease;
}
.mf-page .mf-outcome-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.mf-page .mf-outcome-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    transition: background 0.45s ease;
}

/* Distinct pastel palette across the six outcome cards */
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(1) {
    background: #ffe8dc;
    border-color: rgba(200, 95, 50, 0.20);
}
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(1):hover { background: #fdd6c0; }
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(1) .mf-outcome-icon { color: #c85f32; }

.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(2) {
    background: #ece5fb;
    border-color: rgba(110, 80, 200, 0.20);
}
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(2):hover { background: #dccff5; }
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(2) .mf-outcome-icon { color: #6e50c8; }

.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(3) {
    background: #e3f0d6;
    border-color: rgba(95, 140, 55, 0.22);
}
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(3):hover { background: #cee5b5; }
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(3) .mf-outcome-icon { color: #5f8c37; }

.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(4) {
    background: #dceffa;
    border-color: rgba(50, 110, 180, 0.20);
}
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(4):hover { background: #b8dcf2; }
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(4) .mf-outcome-icon { color: #326eb4; }

.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(5) {
    background: #fde0ec;
    border-color: rgba(177, 64, 114, 0.20);
}
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(5):hover { background: #fbcad8; }
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(5) .mf-outcome-icon { color: #b14072; }

.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(6) {
    background: #fdf2c4;
    border-color: rgba(138, 106, 31, 0.22);
}
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(6):hover { background: #f9e89a; }
.mf-page .mf-outcomes-grid > .mf-outcome-card:nth-child(6) .mf-outcome-icon { color: #8a6a1f; }
.mf-page .mf-outcome-card h3 {
    font: 700 19px/1.3 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0;
}
.mf-page .mf-outcome-card p {
    font: 400 15px/1.6 'Inter', sans-serif;
    color: #515154;
    margin: 0;
}

/* Engagement scope — single-column refined list */
.mf-page .mf-scope-list {
    list-style: none;
    padding: 0;
    margin: 36px auto 0;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    counter-reset: scope-counter;
}
.mf-page .mf-scope-list li {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: baseline;
    padding: 22px 4px 22px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font: 400 16px/1.6 'Inter', sans-serif;
    color: #424245;
    transition: padding-left 0.4s ease, color 0.4s ease;
}
.mf-page .mf-scope-list li::before {
    content: counter(scope-counter, decimal-leading-zero);
    counter-increment: scope-counter;
    font: 700 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4px;
}
.mf-page .mf-scope-list li:hover {
    padding-left: 10px;
    color: #1d1d1f;
}

/* Stage cards — numbered horizontal cards (Section 5) */
.mf-page .mf-stages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 1180px;
    margin: 32px auto 0;
}
.mf-page .mf-stage {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 28px;
    align-items: start;
    padding: 28px 28px 26px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.45s ease;
}
.mf-page .mf-stage:hover {
    transform: translateY(-2px);
    border-color: rgba(177, 15, 26, 0.35);
    box-shadow: 0 22px 44px -20px rgba(177, 15, 26, 0.20);
}
.mf-page .mf-stage-num {
    font: 800 36px/1 'Manrope', 'Inter', sans-serif;
    color: var(--brand, #b10f1a);
    letter-spacing: -0.02em;
}
.mf-page .mf-stage-meta {
    display: block;
    margin-top: 8px;
    font: 600 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.5);
}
.mf-page .mf-stage-h3 {
    font: 700 19px/1.3 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.mf-page .mf-stage-body {
    font: 400 16px/1.7 'Inter', sans-serif;
    color: #424245;
    margin: 0;
}

/* Section 6 — three explore buttons */
.mf-page .mf-explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    max-width: 1180px;
    margin: 32px auto 0;
}
.mf-page .mf-explore-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 28px 28px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s ease,
                border-color 0.45s ease,
                background 0.45s ease;
}
.mf-page .mf-explore-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.mf-page .mf-explore-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(177, 15, 26, 0.10);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: background 0.45s ease, color 0.45s ease;
}
.mf-page .mf-explore-card:hover .mf-explore-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.mf-page .mf-explore-title {
    font: 800 26px/1.18 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -.02em;
    margin: 14px 0 6px;
    transition: color 0.45s ease;
}
.mf-page .mf-explore-card:hover .mf-explore-title { color: #ffffff; }
.mf-page .mf-explore-deck {
    font: 400 14.5px/1.6 'Inter', sans-serif;
    color: #515154;
    margin: 0;
    transition: color 0.45s ease;
}
.mf-page .mf-explore-card:hover .mf-explore-deck { color: rgba(255, 255, 255, 0.88); }
.mf-page .mf-explore-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--brand, #b10f1a);
    color: #ffffff;
    font: 600 13px/1 'Inter', sans-serif;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    transition: background 0.45s ease, color 0.45s ease, transform 0.3s ease;
}
.mf-page .mf-explore-btn i { font-size: 11px; }
.mf-page .mf-explore-card:hover .mf-explore-btn {
    background: #ffffff;
    color: var(--brand, #b10f1a);
}
.mf-page a.mf-explore-card-link { text-decoration: none; }
.mf-page a.mf-explore-card-link:hover { text-decoration: none; }

@media (max-width: 991px) {
    .mf-page .mf-proofs { grid-template-columns: repeat(2, 1fr); }
    .mf-page .si-themes-grid.mf-themes-grid { grid-template-columns: 1fr; }
    .mf-page .mf-outcomes-grid { grid-template-columns: 1fr; }
    .mf-page .mf-scope-list { grid-template-columns: 1fr; }
    .mf-page .mf-stage { grid-template-columns: 1fr; gap: 8px; }
    .mf-page .mf-explore-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .mf-page .mf-proofs { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · manufacturing-industry-4-0.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · predictive-maintenance.html  (body.pm-page)  ▼▼▼
   ════════════════════════════════════════════════════════════════════ */

/* PM-2 · Intro narrative — editorial pull + supporting body */
.pm-page .pm-intro {
    position: relative;
    background: #fff;
    padding: 110px 0;
    overflow: hidden;
}
.pm-page .pm-intro-shell {
    max-width: 1000px;
    margin: 0 auto;
    padding-left: 32px;
    border-left: 2px solid var(--brand, #b10f1a);
}
.pm-page .pm-intro-pull {
    font: 700 clamp(26px, 3.2vw, 38px)/1.25 "Manrope", "Inter", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.02em;
    margin: 0 0 22px;
}
.pm-page .pm-intro-body {
    font: 400 clamp(16px, 1.2vw, 18px)/1.7 "Inter", sans-serif;
    color: #515154;
    margin: 0;
    max-width: 820px;
}

/* PM-3 · Core capability overview — 2-column magazine split */
.pm-page .pm-overview-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}
.pm-page .pm-overview-left { position: sticky; top: 110px; }
.pm-page .pm-overview-title {
    font: 800 clamp(38px, 5.6vw, 64px)/1.04 "Inter", "Manrope", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.03em;
    margin: 0;
}
.pm-page .pm-overview-title .accent { color: var(--brand, #b10f1a); }
.pm-page .pm-overview-right { padding-top: 12px; }
.pm-page .pm-overview-body {
    font: 400 17px/1.78 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0 0 22px;
}
.pm-page .pm-overview-emphasis {
    font: 600 clamp(18px, 1.5vw, 21px)/1.55 "Manrope", "Inter", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.012em;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
}
@media (max-width: 991px) {
    .pm-page .pm-intro { padding: 80px 0; }
    .pm-page .pm-intro-shell { padding-left: 20px; }
    .pm-page .pm-overview-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pm-page .pm-overview-left { position: static; }
}

/* PM-4 · Key technology & solution areas — 6 cards in 3 cols on desktop */
@media (min-width: 992px) {
    .pm-page #pm-tech .cm-family-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* PM-4 + PM-7 · Capability cards: primary-colour hover */
.pm-page #pm-tech .cm-family-card,
.pm-page #pm-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.pm-page #pm-tech .cm-family-card:hover,
.pm-page #pm-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.pm-page #pm-tech .cm-family-card .cm-family-icon,
.pm-page #pm-tech .cm-family-card .cm-family-h3,
.pm-page #pm-tech .cm-family-card p,
.pm-page #pm-work .cm-family-card .cm-family-icon,
.pm-page #pm-work .cm-family-card .cm-family-h3,
.pm-page #pm-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.pm-page #pm-tech .cm-family-card:hover .cm-family-icon,
.pm-page #pm-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.pm-page #pm-tech .cm-family-card:hover .cm-family-h3,
.pm-page #pm-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.pm-page #pm-tech .cm-family-card:hover p,
.pm-page #pm-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* PM-5 · Typical use cases — pastel palette across 5 cards */
.pm-page #pm-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.pm-page #pm-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.pm-page #pm-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.pm-page #pm-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.pm-page #pm-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.pm-page #pm-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.pm-page #pm-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.pm-page #pm-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.pm-page #pm-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.pm-page #pm-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.pm-page #pm-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.pm-page #pm-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.pm-page #pm-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.pm-page #pm-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.pm-page #pm-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.pm-page #pm-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.pm-page #pm-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · predictive-maintenance.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · quality-control-computer-vision.html  (body.qc-page)  ▼▼▼
   This page inherits the full layout from .pm-page (body uses both
   `pm-page` and `qc-page`). The block below only adds the 6th pastel
   use-case card colour (QC has 6 use cases; PM had 5).
   ════════════════════════════════════════════════════════════════════ */

.qc-page #qc-usecases .cm-engagement-card:nth-child(6) {
    background: #fdf2c4;
    border-color: rgba(138, 106, 31, 0.22);
}
.qc-page #qc-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.qc-page #qc-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon {
    background: rgba(138, 106, 31, 0.14);
    color: #8a6a1f;
}

/* The first five use-case colour rules are inherited from .pm-page,
   but the IDs differ (#pm-usecases vs #qc-usecases). Re-bind them
   under the QC ID so the palette renders on this page too. */
.qc-page #qc-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.qc-page #qc-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.qc-page #qc-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.qc-page #qc-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.qc-page #qc-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.qc-page #qc-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.qc-page #qc-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.qc-page #qc-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.qc-page #qc-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.qc-page #qc-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.qc-page #qc-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.qc-page #qc-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.qc-page #qc-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.qc-page #qc-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.qc-page #qc-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.qc-page #qc-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.qc-page #qc-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

/* Same brand-red hover treatment for tech & work cards on this page
   (the .pm-page rules target #pm-tech / #pm-work; mirror them here). */
.qc-page #qc-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .qc-page #qc-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.qc-page #qc-tech .cm-family-card,
.qc-page #qc-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.qc-page #qc-tech .cm-family-card:hover,
.qc-page #qc-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.qc-page #qc-tech .cm-family-card .cm-family-icon,
.qc-page #qc-tech .cm-family-card .cm-family-h3,
.qc-page #qc-tech .cm-family-card p,
.qc-page #qc-work .cm-family-card .cm-family-icon,
.qc-page #qc-work .cm-family-card .cm-family-h3,
.qc-page #qc-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.qc-page #qc-tech .cm-family-card:hover .cm-family-icon,
.qc-page #qc-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.qc-page #qc-tech .cm-family-card:hover .cm-family-h3,
.qc-page #qc-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.qc-page #qc-tech .cm-family-card:hover p,
.qc-page #qc-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · quality-control-computer-vision.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · industrial-iot-ai.html  (body.iiot-page)  ▼▼▼
   Inherits layout from .pm-page (body uses both `pm-page` and
   `iiot-page`). The block below rebinds the use-cases palette and
   the tech / work card hover treatment to this page's #iiot-* IDs.
   ════════════════════════════════════════════════════════════════════ */

.iiot-page #iiot-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.iiot-page #iiot-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.iiot-page #iiot-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.iiot-page #iiot-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.iiot-page #iiot-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.iiot-page #iiot-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.iiot-page #iiot-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.iiot-page #iiot-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #iiot-* IDs). */
.iiot-page #iiot-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .iiot-page #iiot-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.iiot-page #iiot-tech .cm-family-card,
.iiot-page #iiot-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.iiot-page #iiot-tech .cm-family-card:hover,
.iiot-page #iiot-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.iiot-page #iiot-tech .cm-family-card .cm-family-icon,
.iiot-page #iiot-tech .cm-family-card .cm-family-h3,
.iiot-page #iiot-tech .cm-family-card p,
.iiot-page #iiot-work .cm-family-card .cm-family-icon,
.iiot-page #iiot-work .cm-family-card .cm-family-h3,
.iiot-page #iiot-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.iiot-page #iiot-tech .cm-family-card:hover .cm-family-icon,
.iiot-page #iiot-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.iiot-page #iiot-tech .cm-family-card:hover .cm-family-h3,
.iiot-page #iiot-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.iiot-page #iiot-tech .cm-family-card:hover p,
.iiot-page #iiot-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · industrial-iot-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · healthcare-life-sciences.html  (body.hcl-page)  ▼▼▼
   Inherits the full layout from .mf-page (body uses both `mf-page`
   and `hcl-page`). The block below only adds the 4-column explore
   grid override — healthcare has four capability cards in Section 6
   instead of the three the Manufacturing page has.
   ════════════════════════════════════════════════════════════════════ */

.hcl-page .mf-explore-grid {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {
    .hcl-page .mf-explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .hcl-page .mf-explore-grid {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · healthcare-life-sciences.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · clinical-ai-decision-support.html  (body.cads-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `cads-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.cads-page #cads-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.cads-page #cads-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.cads-page #cads-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.cads-page #cads-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.cads-page #cads-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.cads-page #cads-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.cads-page #cads-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.cads-page #cads-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.cads-page #cads-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.cads-page #cads-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.cads-page #cads-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.cads-page #cads-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.cads-page #cads-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.cads-page #cads-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.cads-page #cads-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.cads-page #cads-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.cads-page #cads-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.cads-page #cads-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.cads-page #cads-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.cads-page #cads-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #cads-* IDs). */
.cads-page #cads-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .cads-page #cads-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.cads-page #cads-tech .cm-family-card,
.cads-page #cads-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.cads-page #cads-tech .cm-family-card:hover,
.cads-page #cads-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.cads-page #cads-tech .cm-family-card .cm-family-icon,
.cads-page #cads-tech .cm-family-card .cm-family-h3,
.cads-page #cads-tech .cm-family-card p,
.cads-page #cads-work .cm-family-card .cm-family-icon,
.cads-page #cads-work .cm-family-card .cm-family-h3,
.cads-page #cads-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.cads-page #cads-tech .cm-family-card:hover .cm-family-icon,
.cads-page #cads-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.cads-page #cads-tech .cm-family-card:hover .cm-family-h3,
.cads-page #cads-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.cads-page #cads-tech .cm-family-card:hover p,
.cads-page #cads-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · clinical-ai-decision-support.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · medical-imaging-diagnostics-ai.html  (body.mida-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `mida-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.mida-page #mida-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.mida-page #mida-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.mida-page #mida-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.mida-page #mida-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.mida-page #mida-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.mida-page #mida-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.mida-page #mida-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.mida-page #mida-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.mida-page #mida-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.mida-page #mida-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.mida-page #mida-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.mida-page #mida-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.mida-page #mida-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.mida-page #mida-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.mida-page #mida-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.mida-page #mida-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.mida-page #mida-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.mida-page #mida-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.mida-page #mida-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.mida-page #mida-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #mida-* IDs). */
.mida-page #mida-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .mida-page #mida-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.mida-page #mida-tech .cm-family-card,
.mida-page #mida-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.mida-page #mida-tech .cm-family-card:hover,
.mida-page #mida-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.mida-page #mida-tech .cm-family-card .cm-family-icon,
.mida-page #mida-tech .cm-family-card .cm-family-h3,
.mida-page #mida-tech .cm-family-card p,
.mida-page #mida-work .cm-family-card .cm-family-icon,
.mida-page #mida-work .cm-family-card .cm-family-h3,
.mida-page #mida-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.mida-page #mida-tech .cm-family-card:hover .cm-family-icon,
.mida-page #mida-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.mida-page #mida-tech .cm-family-card:hover .cm-family-h3,
.mida-page #mida-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.mida-page #mida-tech .cm-family-card:hover p,
.mida-page #mida-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · medical-imaging-diagnostics-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · patient-data-management.html  (body.pdm-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `pdm-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.pdm-page #pdm-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.pdm-page #pdm-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.pdm-page #pdm-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.pdm-page #pdm-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.pdm-page #pdm-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.pdm-page #pdm-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.pdm-page #pdm-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.pdm-page #pdm-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #pdm-* IDs). */
.pdm-page #pdm-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .pdm-page #pdm-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.pdm-page #pdm-tech .cm-family-card,
.pdm-page #pdm-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.pdm-page #pdm-tech .cm-family-card:hover,
.pdm-page #pdm-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.pdm-page #pdm-tech .cm-family-card .cm-family-icon,
.pdm-page #pdm-tech .cm-family-card .cm-family-h3,
.pdm-page #pdm-tech .cm-family-card p,
.pdm-page #pdm-work .cm-family-card .cm-family-icon,
.pdm-page #pdm-work .cm-family-card .cm-family-h3,
.pdm-page #pdm-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.pdm-page #pdm-tech .cm-family-card:hover .cm-family-icon,
.pdm-page #pdm-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.pdm-page #pdm-tech .cm-family-card:hover .cm-family-h3,
.pdm-page #pdm-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.pdm-page #pdm-tech .cm-family-card:hover p,
.pdm-page #pdm-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · patient-data-management.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · lab-informatics-research-automation.html  (body.lira-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `lira-page`). Tech section has 7 cards — the 7th spans the
   full row so it reads as a banner card rather than an orphan.
   ════════════════════════════════════════════════════════════════════ */

/* 7-card tech grid — 7th card spans the full row */
.lira-page #lira-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
.lira-page #lira-tech .cm-family-grid > .cm-family-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .lira-page #lira-tech .cm-family-grid { grid-template-columns: 1fr; }
    .lira-page #lira-tech .cm-family-grid > .cm-family-card:nth-child(7) {
        grid-column: auto;
    }
}

/* Brand-red hover on tech & work cards */
.lira-page #lira-tech .cm-family-card,
.lira-page #lira-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.lira-page #lira-tech .cm-family-card:hover,
.lira-page #lira-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.lira-page #lira-tech .cm-family-card .cm-family-icon,
.lira-page #lira-tech .cm-family-card .cm-family-h3,
.lira-page #lira-tech .cm-family-card p,
.lira-page #lira-work .cm-family-card .cm-family-icon,
.lira-page #lira-work .cm-family-card .cm-family-h3,
.lira-page #lira-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.lira-page #lira-tech .cm-family-card:hover .cm-family-icon,
.lira-page #lira-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.lira-page #lira-tech .cm-family-card:hover .cm-family-h3,
.lira-page #lira-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.lira-page #lira-tech .cm-family-card:hover p,
.lira-page #lira-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* Use-cases pastel palette (6 cards) rebound to #lira-usecases */
.lira-page #lira-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.lira-page #lira-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.lira-page #lira-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.lira-page #lira-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.lira-page #lira-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.lira-page #lira-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.lira-page #lira-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.lira-page #lira-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.lira-page #lira-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.lira-page #lira-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.lira-page #lira-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.lira-page #lira-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.lira-page #lira-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.lira-page #lira-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.lira-page #lira-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.lira-page #lira-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.lira-page #lira-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.lira-page #lira-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.lira-page #lira-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.lira-page #lira-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · lab-informatics-research-automation.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · defence-national-security-ai.html  (body.dnsai-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `dnsai-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.dnsai-page #dnsai-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.dnsai-page #dnsai-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.dnsai-page #dnsai-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #dnsai-* IDs). */
.dnsai-page #dnsai-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .dnsai-page #dnsai-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.dnsai-page #dnsai-tech .cm-family-card,
.dnsai-page #dnsai-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.dnsai-page #dnsai-tech .cm-family-card:hover,
.dnsai-page #dnsai-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.dnsai-page #dnsai-tech .cm-family-card .cm-family-icon,
.dnsai-page #dnsai-tech .cm-family-card .cm-family-h3,
.dnsai-page #dnsai-tech .cm-family-card p,
.dnsai-page #dnsai-work .cm-family-card .cm-family-icon,
.dnsai-page #dnsai-work .cm-family-card .cm-family-h3,
.dnsai-page #dnsai-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.dnsai-page #dnsai-tech .cm-family-card:hover .cm-family-icon,
.dnsai-page #dnsai-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.dnsai-page #dnsai-tech .cm-family-card:hover .cm-family-h3,
.dnsai-page #dnsai-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.dnsai-page #dnsai-tech .cm-family-card:hover p,
.dnsai-page #dnsai-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · defence-national-security-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · smart-cities-urban-analytics.html  (body.scua-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `scua-page`). The Section 2 tech grid has 7 cards — the 7th
   spans the full row so it doesn't read as an orphan.
   ════════════════════════════════════════════════════════════════════ */

.scua-page #scua-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
.scua-page #scua-tech .cm-family-grid > .cm-family-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .scua-page #scua-tech .cm-family-grid { grid-template-columns: 1fr; }
    .scua-page #scua-tech .cm-family-grid > .cm-family-card:nth-child(7) {
        grid-column: auto;
    }
}

/* Tech & work cards — brand-red hover (rebound to #scua-* IDs). */
.scua-page #scua-tech .cm-family-card,
.scua-page #scua-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.scua-page #scua-tech .cm-family-card:hover,
.scua-page #scua-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.scua-page #scua-tech .cm-family-card .cm-family-icon,
.scua-page #scua-tech .cm-family-card .cm-family-h3,
.scua-page #scua-tech .cm-family-card p,
.scua-page #scua-work .cm-family-card .cm-family-icon,
.scua-page #scua-work .cm-family-card .cm-family-h3,
.scua-page #scua-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.scua-page #scua-tech .cm-family-card:hover .cm-family-icon,
.scua-page #scua-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.scua-page #scua-tech .cm-family-card:hover .cm-family-h3,
.scua-page #scua-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.scua-page #scua-tech .cm-family-card:hover p,
.scua-page #scua-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* Use-cases pastel palette (6 cards) rebound to #scua-usecases */
.scua-page #scua-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.scua-page #scua-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.scua-page #scua-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.scua-page #scua-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.scua-page #scua-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.scua-page #scua-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.scua-page #scua-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.scua-page #scua-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.scua-page #scua-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.scua-page #scua-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.scua-page #scua-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.scua-page #scua-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.scua-page #scua-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.scua-page #scua-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.scua-page #scua-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.scua-page #scua-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.scua-page #scua-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.scua-page #scua-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.scua-page #scua-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.scua-page #scua-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · smart-cities-urban-analytics.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · public-service-automation.html  (body.psa-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `psa-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.psa-page #psa-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.psa-page #psa-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.psa-page #psa-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.psa-page #psa-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.psa-page #psa-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.psa-page #psa-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.psa-page #psa-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.psa-page #psa-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.psa-page #psa-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.psa-page #psa-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.psa-page #psa-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.psa-page #psa-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.psa-page #psa-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.psa-page #psa-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.psa-page #psa-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.psa-page #psa-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.psa-page #psa-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.psa-page #psa-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.psa-page #psa-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.psa-page #psa-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #psa-* IDs). */
.psa-page #psa-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .psa-page #psa-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.psa-page #psa-tech .cm-family-card,
.psa-page #psa-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.psa-page #psa-tech .cm-family-card:hover,
.psa-page #psa-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.psa-page #psa-tech .cm-family-card .cm-family-icon,
.psa-page #psa-tech .cm-family-card .cm-family-h3,
.psa-page #psa-tech .cm-family-card p,
.psa-page #psa-work .cm-family-card .cm-family-icon,
.psa-page #psa-work .cm-family-card .cm-family-h3,
.psa-page #psa-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.psa-page #psa-tech .cm-family-card:hover .cm-family-icon,
.psa-page #psa-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.psa-page #psa-tech .cm-family-card:hover .cm-family-h3,
.psa-page #psa-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.psa-page #psa-tech .cm-family-card:hover p,
.psa-page #psa-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · public-service-automation.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · energy-demand-forecasting.html  (body.edf-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `edf-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.edf-page #edf-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.edf-page #edf-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.edf-page #edf-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.edf-page #edf-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.edf-page #edf-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.edf-page #edf-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.edf-page #edf-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.edf-page #edf-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.edf-page #edf-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.edf-page #edf-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.edf-page #edf-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.edf-page #edf-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.edf-page #edf-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.edf-page #edf-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.edf-page #edf-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.edf-page #edf-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.edf-page #edf-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.edf-page #edf-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.edf-page #edf-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.edf-page #edf-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #edf-* IDs). */
.edf-page #edf-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .edf-page #edf-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.edf-page #edf-tech .cm-family-card,
.edf-page #edf-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.edf-page #edf-tech .cm-family-card:hover,
.edf-page #edf-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.edf-page #edf-tech .cm-family-card .cm-family-icon,
.edf-page #edf-tech .cm-family-card .cm-family-h3,
.edf-page #edf-tech .cm-family-card p,
.edf-page #edf-work .cm-family-card .cm-family-icon,
.edf-page #edf-work .cm-family-card .cm-family-h3,
.edf-page #edf-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.edf-page #edf-tech .cm-family-card:hover .cm-family-icon,
.edf-page #edf-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.edf-page #edf-tech .cm-family-card:hover .cm-family-h3,
.edf-page #edf-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.edf-page #edf-tech .cm-family-card:hover p,
.edf-page #edf-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · energy-demand-forecasting.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · esg-carbon-analytics.html  (body.eca-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `eca-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.eca-page #eca-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.eca-page #eca-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.eca-page #eca-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.eca-page #eca-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.eca-page #eca-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.eca-page #eca-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.eca-page #eca-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.eca-page #eca-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.eca-page #eca-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.eca-page #eca-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.eca-page #eca-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.eca-page #eca-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.eca-page #eca-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.eca-page #eca-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.eca-page #eca-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.eca-page #eca-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.eca-page #eca-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.eca-page #eca-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.eca-page #eca-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.eca-page #eca-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #eca-* IDs). */
.eca-page #eca-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .eca-page #eca-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.eca-page #eca-tech .cm-family-card,
.eca-page #eca-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.eca-page #eca-tech .cm-family-card:hover,
.eca-page #eca-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.eca-page #eca-tech .cm-family-card .cm-family-icon,
.eca-page #eca-tech .cm-family-card .cm-family-h3,
.eca-page #eca-tech .cm-family-card p,
.eca-page #eca-work .cm-family-card .cm-family-icon,
.eca-page #eca-work .cm-family-card .cm-family-h3,
.eca-page #eca-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.eca-page #eca-tech .cm-family-card:hover .cm-family-icon,
.eca-page #eca-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.eca-page #eca-tech .cm-family-card:hover .cm-family-h3,
.eca-page #eca-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.eca-page #eca-tech .cm-family-card:hover p,
.eca-page #eca-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · esg-carbon-analytics.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · smart-grid-ai.html  (body.sga-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `sga-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.sga-page #sga-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.sga-page #sga-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.sga-page #sga-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.sga-page #sga-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.sga-page #sga-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.sga-page #sga-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.sga-page #sga-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.sga-page #sga-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.sga-page #sga-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.sga-page #sga-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.sga-page #sga-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.sga-page #sga-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.sga-page #sga-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.sga-page #sga-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.sga-page #sga-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.sga-page #sga-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.sga-page #sga-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.sga-page #sga-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.sga-page #sga-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.sga-page #sga-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #sga-* IDs). */
.sga-page #sga-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .sga-page #sga-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.sga-page #sga-tech .cm-family-card,
.sga-page #sga-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.sga-page #sga-tech .cm-family-card:hover,
.sga-page #sga-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.sga-page #sga-tech .cm-family-card .cm-family-icon,
.sga-page #sga-tech .cm-family-card .cm-family-h3,
.sga-page #sga-tech .cm-family-card p,
.sga-page #sga-work .cm-family-card .cm-family-icon,
.sga-page #sga-work .cm-family-card .cm-family-h3,
.sga-page #sga-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.sga-page #sga-tech .cm-family-card:hover .cm-family-icon,
.sga-page #sga-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.sga-page #sga-tech .cm-family-card:hover .cm-family-h3,
.sga-page #sga-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.sga-page #sga-tech .cm-family-card:hover p,
.sga-page #sga-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · smart-grid-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · risk-modelling-fraud-detection-ai.html  (body.rmfd-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `rmfd-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.rmfd-page #rmfd-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.rmfd-page #rmfd-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.rmfd-page #rmfd-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #rmfd-* IDs). */
.rmfd-page #rmfd-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .rmfd-page #rmfd-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.rmfd-page #rmfd-tech .cm-family-card,
.rmfd-page #rmfd-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.rmfd-page #rmfd-tech .cm-family-card:hover,
.rmfd-page #rmfd-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.rmfd-page #rmfd-tech .cm-family-card .cm-family-icon,
.rmfd-page #rmfd-tech .cm-family-card .cm-family-h3,
.rmfd-page #rmfd-tech .cm-family-card p,
.rmfd-page #rmfd-work .cm-family-card .cm-family-icon,
.rmfd-page #rmfd-work .cm-family-card .cm-family-h3,
.rmfd-page #rmfd-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.rmfd-page #rmfd-tech .cm-family-card:hover .cm-family-icon,
.rmfd-page #rmfd-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.rmfd-page #rmfd-tech .cm-family-card:hover .cm-family-h3,
.rmfd-page #rmfd-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.rmfd-page #rmfd-tech .cm-family-card:hover p,
.rmfd-page #rmfd-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · risk-modelling-fraud-detection-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · ai-powered-credit-decisioning.html  (body.apcd-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `apcd-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.apcd-page #apcd-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.apcd-page #apcd-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.apcd-page #apcd-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.apcd-page #apcd-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.apcd-page #apcd-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.apcd-page #apcd-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.apcd-page #apcd-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.apcd-page #apcd-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #apcd-* IDs). */
.apcd-page #apcd-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .apcd-page #apcd-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.apcd-page #apcd-tech .cm-family-card,
.apcd-page #apcd-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.apcd-page #apcd-tech .cm-family-card:hover,
.apcd-page #apcd-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.apcd-page #apcd-tech .cm-family-card .cm-family-icon,
.apcd-page #apcd-tech .cm-family-card .cm-family-h3,
.apcd-page #apcd-tech .cm-family-card p,
.apcd-page #apcd-work .cm-family-card .cm-family-icon,
.apcd-page #apcd-work .cm-family-card .cm-family-h3,
.apcd-page #apcd-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.apcd-page #apcd-tech .cm-family-card:hover .cm-family-icon,
.apcd-page #apcd-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.apcd-page #apcd-tech .cm-family-card:hover .cm-family-h3,
.apcd-page #apcd-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.apcd-page #apcd-tech .cm-family-card:hover p,
.apcd-page #apcd-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · ai-powered-credit-decisioning.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · regulatory-reporting-automation.html  (body.rra-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `rra-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs.
   ════════════════════════════════════════════════════════════════════ */

.rra-page #rra-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.rra-page #rra-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.rra-page #rra-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.rra-page #rra-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.rra-page #rra-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.rra-page #rra-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.rra-page #rra-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.rra-page #rra-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.rra-page #rra-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.rra-page #rra-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.rra-page #rra-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.rra-page #rra-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.rra-page #rra-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.rra-page #rra-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.rra-page #rra-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.rra-page #rra-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.rra-page #rra-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.rra-page #rra-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.rra-page #rra-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.rra-page #rra-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

/* Tech & work cards — brand-red hover (rebound to #rra-* IDs). */
.rra-page #rra-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) {
    .rra-page #rra-tech .cm-family-grid { grid-template-columns: 1fr; }
}
.rra-page #rra-tech .cm-family-card,
.rra-page #rra-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.rra-page #rra-tech .cm-family-card:hover,
.rra-page #rra-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.rra-page #rra-tech .cm-family-card .cm-family-icon,
.rra-page #rra-tech .cm-family-card .cm-family-h3,
.rra-page #rra-tech .cm-family-card p,
.rra-page #rra-work .cm-family-card .cm-family-icon,
.rra-page #rra-work .cm-family-card .cm-family-h3,
.rra-page #rra-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.rra-page #rra-tech .cm-family-card:hover .cm-family-icon,
.rra-page #rra-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.rra-page #rra-tech .cm-family-card:hover .cm-family-h3,
.rra-page #rra-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.rra-page #rra-tech .cm-family-card:hover p,
.rra-page #rra-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · regulatory-reporting-automation.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · transportation-logistics.html  (body.tl-page)  ▼▼▼
   Inherits the full mf-page layout (body uses `si-page mf-page tl-page`)
   and rebinds these blocks for the Transportation & Logistics industry
   page:
     · TL-3 proof tiles — text labels instead of stat numbers
     · TL-4 themes grid — three full-width long-form theme cards
     · TL-5 outcomes grid — 4-column, 8-card extended pastel palette
   ════════════════════════════════════════════════════════════════════ */

/* TL-3 — Proof labels are text (not numeric stats), so override the
   default mf-proof-num typography to a smaller uppercase eyebrow scale.
   The four pastel backgrounds come from the inherited mf-proofs palette. */
.tl-page .mf-proofs .mf-proof-num.tl-proof-label {
    font: 800 13px/1.2 'JetBrains Mono', 'Inter', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    margin: 0 0 14px;
}

/* TL-4 — three long-form theme cards stacked full-width.
   Overrides the default si-themes-grid (multi-column) to a single column. */
.tl-page .si-themes-grid.tl-themes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 1180px;
    margin: 36px auto 0;
}
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card {
    padding: 40px 44px 38px;
}

/* TL-5 — 8 outcome cards in a 4-col grid (2 rows of 4).
   Cards 1-6 inherit the mf-outcomes palette; 7-8 extend with mint + lavender. */
.tl-page .mf-outcomes-grid.tl-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 1280px;
    margin: 36px auto 0;
}

.tl-page .mf-outcomes-grid.tl-outcomes-grid > .mf-outcome-card:nth-child(7) {
    background: #d8efe6;
    border-color: rgba(45, 130, 105, 0.22);
}
.tl-page .mf-outcomes-grid.tl-outcomes-grid > .mf-outcome-card:nth-child(7):hover { background: #bfe4d5; }
.tl-page .mf-outcomes-grid.tl-outcomes-grid > .mf-outcome-card:nth-child(7) .mf-outcome-icon { color: #2d8269; }

.tl-page .mf-outcomes-grid.tl-outcomes-grid > .mf-outcome-card:nth-child(8) {
    background: #e7defb;
    border-color: rgba(126, 88, 188, 0.22);
}
.tl-page .mf-outcomes-grid.tl-outcomes-grid > .mf-outcome-card:nth-child(8):hover { background: #d6c5f7; }
.tl-page .mf-outcomes-grid.tl-outcomes-grid > .mf-outcome-card:nth-child(8) .mf-outcome-icon { color: #7e58bc; }

/* TL-4 — primary brand-red hover for full-width theme cards on this page
   (mirrors the mf-page behavior). The default si-page hover keeps cards
   light-on-light; the mf-page rule already binds them to brand-red, but
   add this here too in case the order/specificity ever shifts. */
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.45s ease,
                border-color 0.45s ease,
                box-shadow 0.45s ease,
                color 0.45s ease;
}
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card:hover {
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
    color: #ffffff;
}
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card:hover .si-theme-num,
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card:hover .si-theme-title,
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card:hover .si-theme-tagline,
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card:hover .si-theme-body {
    color: #ffffff;
}
.tl-page .si-themes-grid.tl-themes-grid > .si-theme-card:hover .si-theme-rule {
    background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 1199px) {
    .tl-page .mf-outcomes-grid.tl-outcomes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .tl-page .mf-outcomes-grid.tl-outcomes-grid { grid-template-columns: 1fr; }
    .tl-page .si-themes-grid.tl-themes-grid > .si-theme-card { padding: 30px 26px 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · transportation-logistics.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · smart-mobility-ai.html  (body.sma-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `sma-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs, and
   handles 7-card grids by spanning the 7th card across the full row.
   ════════════════════════════════════════════════════════════════════ */

/* Tech grid — 3 columns, with the 7th card spanning full width. */
.sma-page #sma-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
.sma-page #sma-tech .cm-family-grid > .cm-family-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .sma-page #sma-tech .cm-family-grid { grid-template-columns: 1fr; }
    .sma-page #sma-tech .cm-family-grid > .cm-family-card:nth-child(7) { grid-column: auto; }
}

/* Use cases grid — 3 columns, with the 7th card spanning full width. */
.sma-page #sma-usecases .cm-engagement-grid {
    grid-template-columns: repeat(3, 1fr);
}
.sma-page #sma-usecases .cm-engagement-grid > .cm-engagement-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .sma-page #sma-usecases .cm-engagement-grid { grid-template-columns: 1fr; }
    .sma-page #sma-usecases .cm-engagement-grid > .cm-engagement-card:nth-child(7) { grid-column: auto; }
}

/* Use-case pastel palette — 7 cards across the same 6-color system, with
   a 7th mint accent to round out the row. */
.sma-page #sma-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.sma-page #sma-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.sma-page #sma-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.sma-page #sma-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.sma-page #sma-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.sma-page #sma-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.sma-page #sma-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.sma-page #sma-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

.sma-page #sma-usecases .cm-engagement-card:nth-child(7) { background: #d8efe6; border-color: rgba(45, 130, 105, 0.22); }
.sma-page #sma-usecases .cm-engagement-card:nth-child(7):hover { background: #bfe4d5; }
.sma-page #sma-usecases .cm-engagement-card:nth-child(7) .cm-engagement-icon { background: rgba(45, 130, 105, 0.14); color: #2d8269; }

/* Tech & work cards — brand-red hover (rebound to #sma-* IDs). */
.sma-page #sma-tech .cm-family-card,
.sma-page #sma-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.sma-page #sma-tech .cm-family-card:hover,
.sma-page #sma-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.sma-page #sma-tech .cm-family-card .cm-family-icon,
.sma-page #sma-tech .cm-family-card .cm-family-h3,
.sma-page #sma-tech .cm-family-card p,
.sma-page #sma-work .cm-family-card .cm-family-icon,
.sma-page #sma-work .cm-family-card .cm-family-h3,
.sma-page #sma-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.sma-page #sma-tech .cm-family-card:hover .cm-family-icon,
.sma-page #sma-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.sma-page #sma-tech .cm-family-card:hover .cm-family-h3,
.sma-page #sma-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.sma-page #sma-tech .cm-family-card:hover p,
.sma-page #sma-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · smart-mobility-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · fleet-intelligence-telematics.html  (body.fit-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `fit-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs, and
   handles 7-card grids by spanning the 7th card across the full row.
   ════════════════════════════════════════════════════════════════════ */

/* Tech grid — 3 columns, with the 7th card spanning full width. */
.fit-page #fit-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
.fit-page #fit-tech .cm-family-grid > .cm-family-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .fit-page #fit-tech .cm-family-grid { grid-template-columns: 1fr; }
    .fit-page #fit-tech .cm-family-grid > .cm-family-card:nth-child(7) { grid-column: auto; }
}

/* Use cases grid — 3 columns, with the 7th card spanning full width. */
.fit-page #fit-usecases .cm-engagement-grid {
    grid-template-columns: repeat(3, 1fr);
}
.fit-page #fit-usecases .cm-engagement-grid > .cm-engagement-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .fit-page #fit-usecases .cm-engagement-grid { grid-template-columns: 1fr; }
    .fit-page #fit-usecases .cm-engagement-grid > .cm-engagement-card:nth-child(7) { grid-column: auto; }
}

/* Use-case pastel palette — 7 cards across the same 6-color system, with
   a 7th mint accent to round out the row. */
.fit-page #fit-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.fit-page #fit-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.fit-page #fit-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.fit-page #fit-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.fit-page #fit-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.fit-page #fit-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.fit-page #fit-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.fit-page #fit-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

.fit-page #fit-usecases .cm-engagement-card:nth-child(7) { background: #d8efe6; border-color: rgba(45, 130, 105, 0.22); }
.fit-page #fit-usecases .cm-engagement-card:nth-child(7):hover { background: #bfe4d5; }
.fit-page #fit-usecases .cm-engagement-card:nth-child(7) .cm-engagement-icon { background: rgba(45, 130, 105, 0.14); color: #2d8269; }

/* Tech & work cards — brand-red hover (rebound to #fit-* IDs). */
.fit-page #fit-tech .cm-family-card,
.fit-page #fit-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.fit-page #fit-tech .cm-family-card:hover,
.fit-page #fit-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.fit-page #fit-tech .cm-family-card .cm-family-icon,
.fit-page #fit-tech .cm-family-card .cm-family-h3,
.fit-page #fit-tech .cm-family-card p,
.fit-page #fit-work .cm-family-card .cm-family-icon,
.fit-page #fit-work .cm-family-card .cm-family-h3,
.fit-page #fit-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.fit-page #fit-tech .cm-family-card:hover .cm-family-icon,
.fit-page #fit-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.fit-page #fit-tech .cm-family-card:hover .cm-family-h3,
.fit-page #fit-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.fit-page #fit-tech .cm-family-card:hover p,
.fit-page #fit-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · fleet-intelligence-telematics.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   ▼▼▼  PAGE · supply-chain-warehousing-ai.html  (body.scw-page)  ▼▼▼
   Inherits the full layout from .pm-page (body uses both `pm-page`
   and `scw-page`). The block below rebinds the use-cases palette
   and the tech / work card hover treatment to this page's IDs, and
   handles 7-card grids by spanning the 7th card across the full row.
   ════════════════════════════════════════════════════════════════════ */

/* Tech grid — 3 columns, with the 7th card spanning full width. */
.scw-page #scw-tech .cm-family-grid {
    grid-template-columns: repeat(3, 1fr);
}
.scw-page #scw-tech .cm-family-grid > .cm-family-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .scw-page #scw-tech .cm-family-grid { grid-template-columns: 1fr; }
    .scw-page #scw-tech .cm-family-grid > .cm-family-card:nth-child(7) { grid-column: auto; }
}

/* Use cases grid — 3 columns, with the 7th card spanning full width. */
.scw-page #scw-usecases .cm-engagement-grid {
    grid-template-columns: repeat(3, 1fr);
}
.scw-page #scw-usecases .cm-engagement-grid > .cm-engagement-card:nth-child(7) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .scw-page #scw-usecases .cm-engagement-grid { grid-template-columns: 1fr; }
    .scw-page #scw-usecases .cm-engagement-grid > .cm-engagement-card:nth-child(7) { grid-column: auto; }
}

/* Use-case pastel palette — 7 cards across the same 6-color system, with
   a 7th mint accent to round out the row. */
.scw-page #scw-usecases .cm-engagement-card {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.scw-page #scw-usecases .cm-engagement-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -22px rgba(15, 17, 22, 0.18);
}
.scw-page #scw-usecases .cm-engagement-card:nth-child(1) { background: #ffe8dc; border-color: rgba(200, 95, 50, 0.20); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(1):hover { background: #fdd6c0; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(1) .cm-engagement-icon { background: rgba(200, 95, 50, 0.14); color: #c85f32; }

.scw-page #scw-usecases .cm-engagement-card:nth-child(2) { background: #ece5fb; border-color: rgba(110, 80, 200, 0.20); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(2):hover { background: #dccff5; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(2) .cm-engagement-icon { background: rgba(110, 80, 200, 0.14); color: #6e50c8; }

.scw-page #scw-usecases .cm-engagement-card:nth-child(3) { background: #e3f0d6; border-color: rgba(95, 140, 55, 0.22); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(3):hover { background: #cee5b5; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(3) .cm-engagement-icon { background: rgba(95, 140, 55, 0.14); color: #5f8c37; }

.scw-page #scw-usecases .cm-engagement-card:nth-child(4) { background: #dceffa; border-color: rgba(50, 110, 180, 0.20); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(4):hover { background: #b8dcf2; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(4) .cm-engagement-icon { background: rgba(50, 110, 180, 0.14); color: #326eb4; }

.scw-page #scw-usecases .cm-engagement-card:nth-child(5) { background: #fde0ec; border-color: rgba(177, 64, 114, 0.20); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(5):hover { background: #fbcad8; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(5) .cm-engagement-icon { background: rgba(177, 64, 114, 0.14); color: #b14072; }

.scw-page #scw-usecases .cm-engagement-card:nth-child(6) { background: #fdf2c4; border-color: rgba(138, 106, 31, 0.22); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(6):hover { background: #f9e89a; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(6) .cm-engagement-icon { background: rgba(138, 106, 31, 0.14); color: #8a6a1f; }

.scw-page #scw-usecases .cm-engagement-card:nth-child(7) { background: #d8efe6; border-color: rgba(45, 130, 105, 0.22); }
.scw-page #scw-usecases .cm-engagement-card:nth-child(7):hover { background: #bfe4d5; }
.scw-page #scw-usecases .cm-engagement-card:nth-child(7) .cm-engagement-icon { background: rgba(45, 130, 105, 0.14); color: #2d8269; }

/* Hide the empty <p> in the 7th use-case card (no description provided). */
.scw-page #scw-usecases .cm-engagement-card:nth-child(7) p:empty {
    display: none;
}

/* Tech & work cards — brand-red hover (rebound to #scw-* IDs). */
.scw-page #scw-tech .cm-family-card,
.scw-page #scw-work .cm-family-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}
.scw-page #scw-tech .cm-family-card:hover,
.scw-page #scw-work .cm-family-card:hover {
    transform: translateY(-4px);
    background: var(--brand, #b10f1a);
    border-color: var(--brand, #b10f1a);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, 0.45);
}
.scw-page #scw-tech .cm-family-card .cm-family-icon,
.scw-page #scw-tech .cm-family-card .cm-family-h3,
.scw-page #scw-tech .cm-family-card p,
.scw-page #scw-work .cm-family-card .cm-family-icon,
.scw-page #scw-work .cm-family-card .cm-family-h3,
.scw-page #scw-work .cm-family-card p {
    transition: color 0.4s ease, background 0.4s ease;
}
.scw-page #scw-tech .cm-family-card:hover .cm-family-icon,
.scw-page #scw-work .cm-family-card:hover .cm-family-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
.scw-page #scw-tech .cm-family-card:hover .cm-family-h3,
.scw-page #scw-work .cm-family-card:hover .cm-family-h3 {
    color: #ffffff;
}
.scw-page #scw-tech .cm-family-card:hover p,
.scw-page #scw-work .cm-family-card:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* ════════════════════════════════════════════════════════════════════
   ▲▲▲  END · supply-chain-warehousing-ai.html  ▲▲▲
   ════════════════════════════════════════════════════════════════════ */


/* ---- Responsive ---- */
@media (max-width: 991px) {
    .ct-node {
        padding: 6px 11px;
        font-size: 10px;
        gap: 6px;
    }
    .ct-node-dot { width: 6px; height: 6px; }
}

/* ============================================================
   ▲▲▲  END HOME HERO CIRCUIT OVERLAY  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  FEATURED CASE STUDY · AGENTIC NETWORK STAGE
   Hero-banner-style visual on the home page Featured Case Study
   section (left side). Transparent background, central insurance
   shield, 6 surrounding claim-processing agent badges, animated
   PCB traces with data pulses. Mirrors the hero brain+circuit
   treatment but with Agentic Claims AI content.
   ============================================================ */

/* Reset/override the legacy case-frame/emblem styles when
   .cs-stage is present (the new visual lives in .case-visual.cs-stage). */
.cs-stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    padding-top: 0;
    margin: 0 auto;
    overflow: visible;
}

/* Subtle voxel grid + drifting cubes backdrop */
.cs-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.cs-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(177, 15, 26, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177, 15, 26, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.cs-cube {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #d6404a, #7a0a14);
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.40);
    border: 1px solid rgba(177, 15, 26, 0.30);
    transform: rotate(45deg);
    will-change: transform, opacity;
}
.cs-cube.cb1 { top: 16%; left: 10%; animation: csCubeFloat 6s ease-in-out infinite; }
.cs-cube.cb2 { top: 24%; right: 8%; width: 10px; height: 10px; animation: csCubeFloat 7s ease-in-out infinite 1.2s; }
.cs-cube.cb3 { bottom: 22%; left: 12%; width: 8px; height: 8px; animation: csCubeFloat 5.5s ease-in-out infinite 0.6s; }
@keyframes csCubeFloat {
    0%, 100% { transform: rotate(45deg) translateY(0) scale(1); opacity: 0.55; }
    50%      { transform: rotate(45deg) translateY(-10px) scale(1.06); opacity: 1; }
}

/* SVG layer: traces + junctions + endpoints + pulses */
.cs-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
.cs-traces path {
    stroke-dasharray: 4 6;
    animation: csDashFlow 24s linear infinite;
}
@keyframes csDashFlow { to { stroke-dashoffset: -120; } }

.cs-haloes circle {
    animation: csHalo 3.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.cs-haloes circle:nth-child(1) { animation-delay: 0s; }
.cs-haloes circle:nth-child(2) { animation-delay: 0.4s; }
.cs-haloes circle:nth-child(3) { animation-delay: 0.8s; }
.cs-haloes circle:nth-child(4) { animation-delay: 1.2s; }
.cs-haloes circle:nth-child(5) { animation-delay: 1.6s; }
.cs-haloes circle:nth-child(6) { animation-delay: 2.0s; }
@keyframes csHalo {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}
.cs-pulses circle { filter: drop-shadow(0 0 6px rgba(177, 15, 26, 0.85)); }

/* ---- Central core: insurance shield ---- */
.cs-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 230px;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.cs-core i {
    font-size: 150px;
    background: linear-gradient(180deg, #d6404a 0%, #b10f1a 45%, #7a0a14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter:
        drop-shadow(0 0 12px rgba(177, 15, 26, 0.55))
        drop-shadow(0 0 28px rgba(177, 15, 26, 0.35));
    animation: csBreathe 4.5s ease-in-out infinite;
    will-change: transform, filter;
    z-index: 2;
}
@keyframes csBreathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(177, 15, 26, 0.50)) drop-shadow(0 0 28px rgba(177, 15, 26, 0.30));
    }
    50% {
        transform: scale(1.04);
        filter: drop-shadow(0 0 18px rgba(177, 15, 26, 0.75)) drop-shadow(0 0 42px rgba(177, 15, 26, 0.55));
    }
}
.cs-aura {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 55%, rgba(177, 15, 26, 0.28) 0%, rgba(177, 15, 26, 0.10) 35%, transparent 70%);
    filter: blur(10px);
    z-index: 1;
    animation: csAura 4.5s ease-in-out infinite;
}
@keyframes csAura {
    0%, 100% { transform: scale(0.92); opacity: 0.7; }
    50%      { transform: scale(1.08); opacity: 1; }
}
.cs-pulse {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1.5px solid rgba(177, 15, 26, 0.45);
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.30);
    z-index: 1;
    animation: csPulseRing 3s ease-out infinite;
    will-change: transform, opacity;
}
.cs-pulse.cs-p1 { animation-delay: 0s; }
.cs-pulse.cs-p2 { animation-delay: 1.5s; }
@keyframes csPulseRing {
    0%   { transform: scale(0.65); opacity: 0.85; border-width: 1.5px; }
    100% { transform: scale(1.7);  opacity: 0;    border-width: 0.4px; }
}

/* Tag underneath the shield: "EnAct · Claims AI" */
.cs-core-tag {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 5px 11px;
    background: rgba(177, 15, 26, 0.10);
    border: 1px solid rgba(177, 15, 26, 0.22);
    border-radius: 999px;
    font: 700 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand, #b10f1a);
}

/* ---- 6 agent badges around the central shield ---- */
.cs-agent {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(177, 15, 26, 0.20);
    border-radius: 10px;
    font: 700 11.5px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    box-shadow: 0 8px 22px -10px rgba(177, 15, 26, 0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform;
}
.cs-agent i {
    font-size: 12px;
    color: var(--brand, #b10f1a);
}
.cs-agent .cs-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand, #b10f1a);
    box-shadow: 0 0 6px rgba(177, 15, 26, 0.85);
    animation: csAgentDot 1.8s ease-in-out infinite;
}
@keyframes csAgentDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.7); }
}

/* Position the 6 badges at the trace endpoints (viewBox 560×560) */
/* Endpoint coords: (380,100), (490,280), (380,410), (180,410), (70,280), (180,100) */
.cs-a1 { top: 6%;    left: 67.8%; transform: translate(-50%, -50%); }
.cs-a2 { top: 50%;   left: 87.5%; transform: translate(-50%, -50%); }
.cs-a3 { top: 73.2%; left: 67.8%; transform: translate(-50%, -50%); }
.cs-a4 { top: 73.2%; left: 32.1%; transform: translate(-50%, -50%); }
.cs-a5 { top: 50%;   left: 12.5%; transform: translate(-50%, -50%); }
.cs-a6 { top: 6%;    left: 32.1%; transform: translate(-50%, -50%); }

.cs-agent:hover {
    border-color: rgba(177, 15, 26, 0.55);
    box-shadow: 0 14px 28px -10px rgba(177, 15, 26, 0.45);
}
.cs-a1:hover { transform: translate(-50%, -50%) translateY(-3px) scale(1.04); }
.cs-a2:hover { transform: translate(-50%, -50%) translateX(2px)  scale(1.04); }
.cs-a3:hover { transform: translate(-50%, -50%) translateY(2px)  scale(1.04); }
.cs-a4:hover { transform: translate(-50%, -50%) translateY(2px)  scale(1.04); }
.cs-a5:hover { transform: translate(-50%, -50%) translateX(-2px) scale(1.04); }
.cs-a6:hover { transform: translate(-50%, -50%) translateY(-3px) scale(1.04); }

/* Legacy stat chips collide with the new agent badge layout — the
   metrics are already communicated by the case-points bullet list
   on the right column, so they're hidden inside the cs-stage. */
.cs-stage .case-chip { display: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cs-stage *,
    .cs-stage *::before,
    .cs-stage *::after { animation: none !important; }
}

/* Responsive */
@media (max-width: 991px) {
    .cs-core { width: 200px; height: 200px; }
    .cs-core i { font-size: 130px; }
    .cs-aura { width: 200px; height: 200px; }
    .cs-pulse { width: 120px; height: 120px; }
    .cs-agent { padding: 7px 11px; font-size: 10.5px; gap: 6px; }
    .cs-agent i { font-size: 11px; }
}

/* ============================================================
   ▲▲▲  END FEATURED CASE STUDY STAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  INDUSTRIES · LEFT VISUAL · AGENT NETWORK STAGE
   Each industry's left card becomes a hero-banner-style visual:
   transparent backdrop, central industry icon, 4 spec badges
   (N/E/S/W) at the trace endpoints, animated PCB pulses.
   ============================================================ */

/* Override the legacy red-card surface when iv-stage is applied */
.ind-v-surface.iv-stage {
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    color: inherit;
    display: block;
    box-shadow: none;
    overflow: visible;
}
/* Disable the legacy aura on the active card */
.ind-v.active .ind-v-surface.iv-stage::after,
.ind-v-surface.iv-stage::before,
.ind-v-surface.iv-stage::after { display: none !important; }

/* Backdrop: faint grid + drifting cubes */
.iv-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.iv-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(177, 15, 26, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177, 15, 26, 0.06) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.iv-cube {
    position: absolute;
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, #d6404a, #7a0a14);
    box-shadow: 0 0 10px rgba(177, 15, 26, 0.40);
    border: 1px solid rgba(177, 15, 26, 0.30);
    transform: rotate(45deg);
    will-change: transform, opacity;
}
.iv-cube.cb1 { top: 10%; left: 8%;  animation: ivCubeFloat 6s ease-in-out infinite; }
.iv-cube.cb2 { top: 14%; right: 8%; width: 8px; height: 8px; animation: ivCubeFloat 7s ease-in-out infinite 1s; }
@keyframes ivCubeFloat {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.55; }
    50%      { transform: rotate(45deg) translateY(-8px); opacity: 1; }
}

/* Circuit SVG */
.iv-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
.iv-traces path {
    stroke-dasharray: 4 6;
    animation: ivDashFlow 24s linear infinite;
}
@keyframes ivDashFlow { to { stroke-dashoffset: -120; } }
.iv-haloes circle {
    animation: ivHalo 3.6s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.iv-haloes circle:nth-child(1) { animation-delay: 0s; }
.iv-haloes circle:nth-child(2) { animation-delay: 0.6s; }
.iv-haloes circle:nth-child(3) { animation-delay: 1.2s; }
.iv-haloes circle:nth-child(4) { animation-delay: 1.8s; }
@keyframes ivHalo {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}
.iv-pulses circle { filter: drop-shadow(0 0 6px rgba(177, 15, 26, 0.85)); }

/* Central industry icon */
.iv-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.iv-stage .ind-v-icon {
    position: relative;
    z-index: 2;
    font-size: 110px !important;
    background: linear-gradient(180deg, #d6404a 0%, #b10f1a 45%, #7a0a14 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    filter:
        drop-shadow(0 0 10px rgba(177, 15, 26, 0.55))
        drop-shadow(0 0 24px rgba(177, 15, 26, 0.35)) !important;
    align-self: center;
    opacity: 1;
    will-change: transform, filter;
}

/* Aura behind the icon */
.iv-aura {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 55%,
        rgba(177, 15, 26, 0.28) 0%,
        rgba(177, 15, 26, 0.10) 35%,
        transparent 70%
    );
    filter: blur(8px);
    z-index: 1;
    animation: ivAura 4.5s ease-in-out infinite;
}
@keyframes ivAura {
    0%, 100% { transform: scale(0.92); opacity: 0.7; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* Expanding pulse rings */
.iv-pulse {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1.5px solid rgba(177, 15, 26, 0.45);
    box-shadow: 0 0 12px rgba(177, 15, 26, 0.30);
    z-index: 1;
    pointer-events: none;
    animation: ivPulseRing 3s ease-out infinite;
    will-change: transform, opacity;
}
.iv-pulse.iv-p1 { animation-delay: 0s; }
.iv-pulse.iv-p2 { animation-delay: 1.5s; }
@keyframes ivPulseRing {
    0%   { transform: scale(0.65); opacity: 0.85; border-width: 1.5px; }
    100% { transform: scale(1.7);  opacity: 0;    border-width: 0.4px; }
}

/* 4 spec badges at trace endpoints (N/E/S/W around 50%/50% of viewBox) */
.iv-spec {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(177, 15, 26, 0.20);
    border-radius: 9px;
    font: 700 10.5px/1 'Inter', sans-serif;
    letter-spacing: 0.04em;
    color: #1d1d1f;
    box-shadow: 0 6px 18px -8px rgba(177, 15, 26, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-transform: uppercase;
    transition:
        transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    white-space: nowrap;
}
.iv-spec i {
    font-size: 11px;
    color: var(--brand, #b10f1a);
}

/* Position N/E/S/W badges at SVG endpoint coords (210,70 / 370,252 / 210,434 / 50,252)
   in viewBox 420×504 → percentages */
.iv-n { top: 13.9%; left: 50%;   transform: translate(-50%, -50%); }
.iv-e { top: 50%;   left: 88.1%; transform: translate(-50%, -50%); }
.iv-s { top: 86.1%; left: 50%;   transform: translate(-50%, -50%); }
.iv-w { top: 50%;   left: 11.9%; transform: translate(-50%, -50%); }

.iv-spec:hover {
    border-color: rgba(177, 15, 26, 0.55);
    box-shadow: 0 12px 24px -10px rgba(177, 15, 26, 0.45);
}
.iv-n:hover { transform: translate(-50%, -50%) translateY(-3px) scale(1.04); }
.iv-e:hover { transform: translate(-50%, -50%) translateX(2px)  scale(1.04); }
.iv-s:hover { transform: translate(-50%, -50%) translateY(2px)  scale(1.04); }
.iv-w:hover { transform: translate(-50%, -50%) translateX(-2px) scale(1.04); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .iv-stage *,
    .iv-stage *::before,
    .iv-stage *::after { animation: none !important; }
}

@media (max-width: 991px) {
    .iv-core { width: 140px; height: 140px; }
    .iv-stage .ind-v-icon { font-size: 90px !important; }
    .iv-aura { width: 140px; height: 140px; }
    .iv-pulse { width: 92px; height: 92px; }
    .iv-spec { padding: 6px 10px; font-size: 10px; gap: 6px; }
}

/* ============================================================
   ▲▲▲  END INDUSTRIES VISUAL STAGE  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  FEATURED CASE STUDY — IMAGE VISUAL  ▼▼▼
   ============================================================ */
.case-visual-img {
    padding-top: 0;
    max-width: 480px;
    overflow: visible;
}
.case-visual-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 30px 70px -32px rgba(20, 24, 40, 0.35);
    transform: scale(calc(0.95 + 0.12 * var(--p, 0)));
    transform-origin: center center;
    transition: transform 120ms linear;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .case-visual-img img { transform: none; }
}

.cs-pro {
    position: relative;
    padding-top: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.cs-pro-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 32px;
    pointer-events: none;
    z-index: 0;
}
.cs-pro-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
}
.cs-pro-blob.cs-blob-a {
    width: 360px;
    height: 360px;
    top: -80px;
    left: -100px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.55), transparent 70%);
}
.cs-pro-blob.cs-blob-b {
    width: 320px;
    height: 320px;
    bottom: -100px;
    right: -120px;
    background: radial-gradient(circle, rgba(255, 220, 200, 0.85), transparent 70%);
}
.cs-pro-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 17, 22, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 17, 22, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 88%);
}

/* Main dashboard panel */
.cs-pro-panel {
    position: absolute;
    top: 6%;
    left: 4%;
    right: 4%;
    bottom: 12%;
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid rgba(15, 17, 22, 0.06);
    box-shadow:
        0 40px 90px -40px rgba(15, 17, 22, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
    padding: 22px 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    z-index: 2;
}

.cs-pro-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 17, 22, 0.06);
}
.cs-pro-dots {
    display: inline-flex;
    gap: 6px;
}
.cs-pro-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5e5ea;
}
.cs-pro-dots span:nth-child(1) { background: #ff5f57; }
.cs-pro-dots span:nth-child(2) { background: #ffbd2e; }
.cs-pro-dots span:nth-child(3) { background: #28c940; }
.cs-pro-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 13px/1 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.005em;
}
.cs-pro-title i {
    color: #b10f1a;
    font-size: 14px;
}
.cs-pro-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: rgba(20, 175, 100, 0.10);
    color: #138a52;
    font: 700 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.cs-pro-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #14af64;
    box-shadow: 0 0 0 3px rgba(20, 175, 100, 0.18);
    animation: csProPulse 1.8s ease-in-out infinite;
}
@keyframes csProPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Hero metric */
.cs-pro-hero { display: flex; flex-direction: column; gap: 10px; }
.cs-pro-hero-label {
    font: 600 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15, 17, 22, 0.55);
}
.cs-pro-hero-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}
.cs-pro-hero-num {
    font: 800 clamp(44px, 5.4vw, 64px) / 1 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.040em;
}
.cs-pro-hero-num small {
    font-size: 0.45em;
    color: #b10f1a;
    margin-left: 2px;
    font-weight: 700;
    vertical-align: super;
}
.cs-pro-hero-trend {
    font: 600 12.5px/1.2 'Inter', sans-serif;
    color: #138a52;
    background: rgba(20, 175, 100, 0.10);
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.cs-pro-hero-trend i { font-size: 10px; margin-right: 4px; }
.cs-pro-spark {
    display: block;
    width: 100%;
    height: 52px;
}

/* Agent pipeline bars */
.cs-pro-bars { display: flex; flex-direction: column; gap: 10px; }
.cs-pro-bars-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.cs-pro-section-label {
    font: 600 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(15, 17, 22, 0.55);
}
.cs-pro-section-meta {
    font: 400 11.5px/1.3 'Inter', sans-serif;
    color: rgba(15, 17, 22, 0.45);
}
.cs-pro-bar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-pro-bar-list li {
    display: grid;
    grid-template-columns: 96px 1fr 44px;
    align-items: center;
    gap: 12px;
}
.cs-pro-bar-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 12.5px/1 'Inter', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.005em;
}
.cs-pro-bar-name i {
    width: 14px;
    color: #b10f1a;
    font-size: 11px;
}
.cs-pro-bar-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 17, 22, 0.06);
    overflow: hidden;
}
.cs-pro-bar-fill {
    display: block;
    height: 100%;
    width: var(--w, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, #b10f1a 0%, #d63240 100%);
    box-shadow: 0 0 8px rgba(177, 15, 26, 0.28);
    animation: csProBarGrow 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes csProBarGrow {
    from { width: 0; }
    to   { width: var(--w, 0%); }
}
.cs-pro-bar-num {
    text-align: right;
    font: 700 12.5px/1 'JetBrains Mono', monospace;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}

/* Footer KPIs */
.cs-pro-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 17, 22, 0.06);
}
.cs-pro-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-pro-kpi-num {
    font: 800 22px/1 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.020em;
}
.cs-pro-kpi-label {
    font: 500 11px/1 'Inter', sans-serif;
    color: rgba(15, 17, 22, 0.55);
    letter-spacing: 0.02em;
}

/* Overlay activity card */
.cs-pro-activity {
    position: absolute;
    right: -2%;
    bottom: 2%;
    width: 58%;
    max-width: 320px;
    background: linear-gradient(150deg, #1a1f2e 0%, #0d1018 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 16px 18px 14px;
    box-shadow:
        0 24px 60px -22px rgba(15, 17, 22, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    z-index: 3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cs-pro-activity header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 10px;
}
.cs-pro-activity-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 700 11px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}
.cs-pro-activity-label i { color: #ffb547; font-size: 11px; }
.cs-pro-activity-count {
    font: 500 11px/1 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.55);
}
.cs-pro-activity ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.cs-pro-activity li {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 12px/1.3 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.82);
}
.cs-pro-activity li em {
    color: rgba(255, 255, 255, 0.55);
    font-style: normal;
    font: 600 11.5px/1.3 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}
.cs-pro-agent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}
.cs-pro-agent-dot.cs-dot-a { background: #14af64; }
.cs-pro-agent-dot.cs-dot-b { background: #ffb547; }
.cs-pro-agent-dot.cs-dot-c { background: #56a6ff; }

@media (max-width: 991px) {
    .cs-pro { max-width: 520px; padding-top: 96%; }
    .cs-pro-panel { padding: 20px 22px 16px; gap: 16px; }
    .cs-pro-bar-list li { grid-template-columns: 88px 1fr 40px; }
}
@media (max-width: 575px) {
    .cs-pro-activity { width: 70%; right: 0; bottom: -8px; }
}

/* ============================================================
   ▲▲▲  END FEATURED CASE STUDY VISUAL  ▲▲▲
   ============================================================ */


/* ============================================================
   ▼▼▼  INDUSTRIES — PROFESSIONAL DASHBOARD CARDS (.iv-pro)  ▼▼▼
   File: index.html (.ind-v-surface.iv-pro)
   Each of the 6 industry visuals reuses the same dashboard
   composition introduced by the case-study panel: ambient
   backdrop blobs, a white window-style mock with header,
   hero KPI, 2x2 capability tiles, and a footer KPI strip.
   ============================================================ */

/* Surface override — replace the solid red surface with a clean
   white-on-glow plate scoped to .iv-pro. */
.ind-v-surface.iv-pro {
    background: transparent;
    padding: 0;
    overflow: visible;
    box-shadow: none;
}
.ind-v-surface.iv-pro::before,
.ind-v-surface.iv-pro::after {
    display: none !important;
}

.iv-pro {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 28px;
}

/* Backdrop — soft brand-tinted blobs behind the white panel */
.iv-pro-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 28px;
    pointer-events: none;
    z-index: 0;
}
.iv-pro-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.55;
}
.iv-pro-blob.iv-blob-a {
    width: 280px; height: 280px;
    top: -80px; left: -90px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.55), transparent 70%);
}
.iv-pro-blob.iv-blob-b {
    width: 260px; height: 260px;
    bottom: -90px; right: -100px;
    background: radial-gradient(circle, rgba(255, 220, 200, 0.85), transparent 70%);
}

/* Main panel */
.iv-pro-panel {
    position: relative;
    z-index: 1;
    height: 100%;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(15, 17, 22, 0.06);
    box-shadow:
        0 32px 70px -30px rgba(15, 17, 22, 0.30),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.iv-pro-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.iv-pro-dots {
    display: inline-flex;
    gap: 5px;
}
.iv-pro-dots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: #e5e5ea;
}
.iv-pro-dots span:nth-child(1) { background: #ff5f57; }
.iv-pro-dots span:nth-child(2) { background: #ffbd2e; }
.iv-pro-dots span:nth-child(3) { background: #28c940; }
.iv-pro-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 8px;
    border-radius: 999px;
    background: rgba(20, 175, 100, 0.10);
    color: #138a52;
    font: 700 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.iv-pro-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: #14af64;
    box-shadow: 0 0 0 3px rgba(20, 175, 100, 0.18);
    animation: ivProPulse 1.8s ease-in-out infinite;
}
@keyframes ivProPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Feature block — large industry icon + title + sub */
.iv-pro-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 2px 14px;
    border-bottom: 1px solid rgba(15, 17, 22, 0.06);
}
.iv-pro-feature-icon {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(177, 15, 26, 0.10) 0%, rgba(177, 15, 26, 0.04) 100%);
    border: 1px solid rgba(177, 15, 26, 0.16);
    color: var(--brand, #b10f1a);
    font-size: 36px;
    box-shadow:
        0 12px 26px -14px rgba(177, 15, 26, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
.iv-pro-feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.iv-pro-feature-eyebrow {
    font: 700 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(15, 17, 22, 0.50);
}
.iv-pro-feature-name {
    font: 700 clamp(17px, 1.6vw, 20px) / 1.18 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.020em;
    margin: 0;
}
.iv-pro-feature-sub {
    font: 400 12.5px/1.5 'Inter', sans-serif;
    color: rgba(15, 17, 22, 0.62);
    margin: 0;
    letter-spacing: -0.003em;
}

/* "What we build" label */
.iv-pro-cap-label {
    font: 700 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(15, 17, 22, 0.50);
    margin-top: 2px;
}

/* Capability list — 2×2 grid pulled from the right-side spec data */
.iv-pro-caps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.iv-pro-cap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    background: rgba(177, 15, 26, 0.04);
    border: 1px solid rgba(177, 15, 26, 0.10);
    border-radius: 12px;
    transition: background 0.35s ease, border-color 0.35s ease;
}
.iv-pro-cap:hover {
    background: rgba(177, 15, 26, 0.10);
    border-color: rgba(177, 15, 26, 0.22);
}
.iv-pro-cap > i {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--brand, #b10f1a);
    font-size: 14px;
    text-align: center;
}
.iv-pro-cap > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.iv-pro-cap strong {
    font: 700 12.5px/1.2 'Manrope', sans-serif;
    color: #1d1d1f;
    letter-spacing: -0.010em;
}
.iv-pro-cap span {
    font: 400 11px/1.35 'Inter', sans-serif;
    color: rgba(15, 17, 22, 0.55);
    letter-spacing: -0.002em;
}

@media (prefers-reduced-motion: reduce) {
    .iv-pro-pulse { animation: none; }
}

/* ============================================================
   ▲▲▲  END INDUSTRIES PROFESSIONAL DASHBOARD CARDS  ▲▲▲
   ============================================================ */

/* ============================================================
   GLOBAL SECTION GAP REDUCTION
   Tighter vertical rhythm across every page. Skips hero sections
   (which need top padding to clear the fixed navbar) and pinned
   scroll sections (which set their own runway height in vh).
   ============================================================ */
section:not(.hero):not(.ad-hero):not(.pe-hero):not([class*="-pin"]):not([class*="-hero"]):not([id*="hero"]) {
    padding-top: 56px;
    padding-bottom: 56px;
}

@media (max-width: 991px) {
    section:not(.hero):not(.ad-hero):not(.pe-hero):not([class*="-pin"]):not([class*="-hero"]):not([id*="hero"]) {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}

@media (max-width: 575px) {
    section:not(.hero):not(.ad-hero):not(.pe-hero):not([class*="-pin"]):not([class*="-hero"]):not([id*="hero"]) {
        padding-top: 36px;
        padding-bottom: 36px;
    }
}

/* ============================================================
   LOGISTICS PLATFORM — LP-2 INTRO IMAGE
   ============================================================ */
.lp-banner-visual {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    
}
.lp-banner-visual img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   ============================================================
   |                                                          |
   |   ▼  LOGIN PAGE  ▼                                       |
   |                                                          |
   |   Minimal Apple-style sign-in. Centered editorial        |
   |   header, glass-morphism form card, soft brand orbs.     |
   |                                                          |
   ============================================================
   ============================================================ */

body.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 540px at 8% 0%, rgba(177, 15, 26, 0.06), transparent 60%),
        radial-gradient(700px 420px at 100% 100%, rgba(177, 15, 26, 0.04), transparent 60%),
        linear-gradient(160deg, #fdf3f4 0%, #ffffff 45%, #fef9f5 100%);
    color: var(--ink);
    overflow-x: hidden;
}

/* ---- Top bar ---- */
.login-topbar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 32px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
.login-logo img {
    height: 56px;
    width: auto;
    display: block;
}
.login-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.login-back i { font-size: 11px; }
.login-back:hover {
    border-color: var(--ink-2);
    background: #fff;
    color: var(--ink);
    transform: translateX(-2px);
}

/* ---- Stage ---- */
.login-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 56px;
}
.login-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.login-bg-grid {
    position: absolute;
    inset: -10%;
    background-image:
        linear-gradient(rgba(177, 15, 26, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177, 15, 26, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 25%, transparent 70%);
}
.login-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.6;
}
.login-bg-orb.orb-a {
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.28), transparent 70%);
    top: -22%; right: -12%;
}
.login-bg-orb.orb-b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255, 220, 200, 0.55), transparent 70%);
    bottom: -18%; left: -10%;
}

/* ---- Shell ---- */
.login-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    text-align: center;
}

/* ---- Editorial header ---- */
.login-header { margin-bottom: 32px; }
.login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.login-eyebrow .pulse-dot {
    width: 8px; height: 8px;
    background: var(--brand);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(177, 15, 26, 0.18);
    animation: pe-blink 2.4s ease-in-out infinite;
}
.login-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.038em;
    color: var(--ink);
    margin: 0 0 18px;
}
.login-title .accent {
    background: linear-gradient(120deg, var(--ink) 0%, var(--brand) 55%, var(--brand-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.login-sub {
    font-size: 16px;
    line-height: 1.55;
    color: var(--muted);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Card ---- */
.login-card {
    position: relative;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 30px 80px -30px rgba(17, 17, 19, 0.18),
        0 12px 30px -10px rgba(17, 17, 19, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 36px 32px;
    text-align: left;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- Field ---- */
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: -0.005em;
}
.login-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-forgot {
    font-size: 13px;
    font-weight: 500;
    color: var(--brand);
}
.login-forgot:hover { color: var(--brand-dark); text-decoration: underline; }

.login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-icon {
    position: absolute;
    left: 16px;
    font-size: 14px;
    color: var(--muted-2);
    pointer-events: none;
    transition: color 0.3s var(--ease);
}
.login-field input[type="email"],
.login-field input[type="password"],
.login-field input[type="text"] {
    width: 100%;
    height: 50px;
    padding: 0 16px 0 44px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
    outline: none;
    appearance: none;
}
.login-field input::placeholder { color: var(--muted-2); }
.login-field input:hover { border-color: #cfcfd3; background: #fff; }
.login-field input:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(177, 15, 26, 0.10);
}
.login-field input:focus + .login-toggle-pass,
.login-input-wrap:focus-within .login-input-icon { color: var(--brand); }

.login-toggle-pass {
    position: absolute;
    right: 8px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.login-toggle-pass:hover { color: var(--ink); background: rgba(17, 17, 19, 0.04); }

/* ---- Remember me ---- */
.login-remember {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--ink-2);
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
}
.login-remember input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.login-remember-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid #c8c8cc;
    border-radius: 5px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
    flex-shrink: 0;
    position: relative;
}
.login-remember-box::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s var(--ease);
    margin-bottom: 2px;
}
.login-remember input:checked + .login-remember-box {
    background: var(--brand);
    border-color: var(--brand);
}
.login-remember input:checked + .login-remember-box::after {
    transform: rotate(45deg) scale(1);
}
.login-remember:hover .login-remember-box { border-color: #9b9b9f; }
.login-remember input:focus-visible + .login-remember-box {
    box-shadow: 0 0 0 3px rgba(177, 15, 26, 0.16);
}

/* ---- Submit ---- */
.login-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 52px;
    margin-top: 6px;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #fff;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.005em;
    cursor: pointer;
    background-color: var(--ink);
    background-image: linear-gradient(135deg, #1d1d1f 0%, #0a0a0a 55%, #2a0709 130%);
    box-shadow:
        0 18px 40px -18px rgba(177, 15, 26, 0.50),
        0 10px 24px -10px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
    overflow: hidden;
    transition:
        transform 0.45s var(--ease),
        background 0.35s var(--ease),
        box-shadow 0.45s var(--ease),
        border-color 0.35s var(--ease);
}
.login-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.8s var(--ease);
    pointer-events: none;
}
.login-submit:hover {
    border-color: rgba(255, 255, 255, 0.14);
    background-image: linear-gradient(135deg, #1d1d1f 0%, var(--brand) 70%, var(--brand-dark) 130%);
    box-shadow:
        0 24px 50px -18px rgba(177, 15, 26, 0.70),
        0 14px 32px -10px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.30);
}
.login-submit:hover::before { transform: translateX(100%); }
.login-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.login-submit-label { position: relative; z-index: 1; }
.login-submit-arrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    box-shadow:
        0 6px 14px -6px rgba(177, 15, 26, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transition: transform 0.45s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}
.login-submit:hover .login-submit-arrow {
    background: #fff;
    color: var(--brand);
    transform: rotate(-45deg);
}

/* ---- Divider ---- */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 0;
    color: var(--muted-2);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* ---- SSO ---- */
.login-sso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.login-sso-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition:
        transform 0.25s var(--ease),
        border-color 0.25s var(--ease),
        background 0.25s var(--ease),
        color 0.25s var(--ease),
        box-shadow 0.25s var(--ease);
}
.login-sso-btn i { font-size: 16px; }
.login-sso-btn:hover {
    border-color: var(--ink-2);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(17, 17, 19, 0.18);
}

/* ---- Meta ---- */
.login-meta {
    margin: 22px 0 0;
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
}
.login-meta a {
    color: var(--brand);
    font-weight: 600;
}
.login-meta a:hover { color: var(--brand-dark); text-decoration: underline; }

/* ---- Footer ---- */
.login-foot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 32px 28px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    font-size: 12.5px;
    color: var(--muted);
}
.login-foot nav { display: inline-flex; gap: 10px; align-items: center; }
.login-foot a { color: var(--muted); transition: color 0.25s var(--ease); }
.login-foot a:hover { color: var(--ink); }
.login-foot-sep { color: var(--muted-2); }

/* ---- Reveal ---- */
.login-page .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.login-page .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.login-page .reveal:nth-child(2) { transition-delay: 0.08s; }
.login-page .reveal:nth-child(3) { transition-delay: 0.16s; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .login-topbar { padding: 16px 20px; }
    .login-logo img { height: 44px; }
    .login-back span { display: none; }
    .login-back { padding: 9px 12px; }

    .login-stage { padding: 16px 16px 40px; }
    .login-card { padding: 28px 22px; border-radius: 20px; }
    .login-title { font-size: clamp(30px, 7vw, 40px); }
    .login-sub { font-size: 14.5px; }
    .login-sso { grid-template-columns: 1fr; }
    .login-sso-btn { height: 44px; }
    .login-foot { padding: 18px 20px 24px; flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 380px) {
    .login-card { padding: 24px 18px; }
    .login-field input[type="email"],
    .login-field input[type="password"],
    .login-field input[type="text"] { height: 46px; font-size: 14.5px; }
    .login-submit { height: 48px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-page .reveal { opacity: 1; transform: none; }
    .login-submit:hover { transform: none; }
    .login-submit::before { display: none; }
}

/* ============================================================
   ▲  END · LOGIN PAGE  ▲
   ============================================================ */


/* ============================================================
   INNER-PAGE CONTENT RHYTHM
   Tighten the vertical gap between eyebrow → sub-heading →
   pull-quote → body paragraphs across every inner page so the
   editorial content reads as one block instead of widely spaced
   paragraphs. The home page (plain <body> with no class) is
   excluded via `body[class*="-page"]`.
   ============================================================ */
body[class*="-page"] .pe-lead { margin-bottom: 12px; }
body[class*="-page"] .pe-body { margin-bottom: 10px; }

/* Intro-shell content blocks — eyebrow + pull + body */
body[class*="-page"] [class$="-intro-pull"] {
    margin-top: 16px;
    margin-bottom: 14px;
}
body[class$="-page"] [class$="-intro-body"],
body[class*="-page"] [class$="-intro-body"] {
    margin-top: 0;
    margin-bottom: 12px;
}
body[class*="-page"] [class$="-intro-body"] + [class$="-intro-body"] {
    margin-top: 0;
}

/* "Changes" / "Where" / "Disc" intro sections — same tightening */
body[class*="-page"] [class$="-changes-head"] { margin-bottom: 28px; }
body[class*="-page"] [class$="-changes-pull"] { margin-bottom: 28px; }
body[class*="-page"] [class$="-changes-body"] { margin-bottom: 36px; }
body[class*="-page"] [class$="-changes-body"] p + p { margin-top: 12px; }

/* Generic eyebrow → following heading/paragraph */
body[class*="-page"] .section-eyebrow { margin-bottom: 10px; }

/* Generic paragraph-to-paragraph spacing inside narrative blocks */
body[class*="-page"] .pe-lead + .pe-body,
body[class*="-page"] .pe-body + .pe-body { margin-top: 0; }

/* =========================================================
   INTELLIGENT PLATFORMS · dark-canvas split-stat layout
   Left column: red eyebrow → serif title → rule → "Built,
   deployed, in production." → rule → "3" stat with caption.
   Right column: three card entries with a red vertical
   accent bar on the left edge.
   ========================================================= */
.intelligent-platforms {
    background: #0a0a0c;
    color: #fff;
    padding: 120px 0 140px;
    position: relative;
    overflow: hidden;
}
.intelligent-platforms .ip-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 80px;
    align-items: start;
}
.intelligent-platforms .ip-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--brand);
    text-transform: uppercase;
    margin: 0 0 56px;
}
.intelligent-platforms .ip-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: #fff;
    margin: 0;
}
.intelligent-platforms .ip-rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
    margin: 56px 0 36px;
}
.intelligent-platforms .ip-stat-head {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.15;
    color: #fff;
    margin: 0;
}
.intelligent-platforms .ip-stat-head em { font-style: italic; }
.intelligent-platforms .ip-count-row {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.intelligent-platforms .ip-count-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(64px, 6vw, 96px);
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
}
.intelligent-platforms .ip-count-text {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    max-width: 340px;
    margin: 16px 0 0;
}
.intelligent-platforms .ip-col-cards {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding-top: 28px;
}
.intelligent-platforms .ip-card {
    border-left: 2px solid var(--brand);
    padding-left: 24px;
}
.intelligent-platforms .ip-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: -0.005em;
}
.intelligent-platforms .ip-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991px) {
    .intelligent-platforms { padding: 72px 0 88px; }
    .intelligent-platforms .ip-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .intelligent-platforms .ip-eyebrow { margin-bottom: 32px; }
    .intelligent-platforms .ip-rule { margin: 36px 0 28px; }
    .intelligent-platforms .ip-col-cards { padding-top: 0; gap: 40px; }
}