/* ===========================================================
   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: hidden;
}

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: 30px; }
}

.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: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
.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: flex;
    flex-direction: column;
    padding: 10px 12px;
    margin: 0 -12px 2px;
    border-radius: 10px;
    transition: background 0.25s var(--ease);
    color: var(--ink);
}
.mega-col a strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    display: block;
    margin-bottom: 2px;
}
.mega-col a span {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
}
.mega-col a:hover {
    background: var(--brand-soft);
}
.mega-col a:hover strong { color: var(--brand); }

.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 28px;
    gap: 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.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: 100vh;
    padding: 140px 0 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff;
}

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

.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: calc(100vh - 220px); }
.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 0 36px;
    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: 56px;
    align-self: flex-start;
    display: inline-flex;
}

/* ===== HERO VISUAL (right side) ===== */
.hero-visual-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 560px;
}
.hero-visual {
    position: relative;
    width: 100%;
    max-width: 560px;
    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: 480px; }
    .hero-visual { max-width: 460px; }
    .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) {
    .hero-visual-col { min-height: 420px; margin-top: 32px; }
    .hero-visual { max-width: 400px; }
    .hero-split .hero-title { font-size: clamp(44px, 10vw, 72px); }
    .hero-copy { max-width: 100%; }
}
@media (max-width: 575px) {
    .hero-visual-col { min-height: 340px; }
    .hero-visual { max-width: 320px; }
    .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-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: 96px 0;
    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 {
    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), 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(177, 15, 26, 0.07), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
}
.cap-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.cap-card:hover::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.35s var(--ease), color 0.35s var(--ease);
}
.cap-card:hover .cap-icon {
    background: var(--brand);
    color: #fff;
}

.cap-card h3 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--ink);
}
/* "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-soft);
    color: var(--brand);
    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 {
    background: var(--brand);
    color: #fff;
}
.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;
}
.cap-card p {
    font-size: 15.5px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 28px;
    min-height: 72px;
}
.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 {
    background: var(--brand);
    color: #fff;
    transform: rotate(-45deg);
}

/* =========================================================
   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: 120px;
    }
    .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: linear-gradient(145deg, #111113 0%, #1d1d1f 60%, #2a0708 100%);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.case-grid-bg {
    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: 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 {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(177,15,26,0.55), transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    top: 20%; left: 20%;
    pointer-events: none;
}

.case-emblem {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    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.7);
    margin-bottom: 12px;
}
.case-emblem strong {
    font-size: clamp(34px, 3.6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.case-chip {
    position: absolute;
    padding: 10px 16px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.case-chip.top { top: 28px; left: 28px; }
.case-chip.bottom { bottom: 28px; right: 28px; }
.case-chip i { color: var(--brand); }

.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: 104px;            /* clear the fixed navbar */
    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 native horizontal scroll */
@media (max-width: 767px) {
    .platforms-pin {
        height: auto;
        padding: 60px 0 40px;
    }
    .plt-stage {
        position: static;
        height: auto;
        overflow: visible;
    }
    .plt-header { padding-top: 0; }
    .plt-rail-wrap { overflow: visible; }
    .plt-rail {
        --plt-card-w: 78vw;
        transform: none !important;
        padding: 12px 20px 24px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .plt-rail::-webkit-scrollbar { display: none; }
    .plt-rail .platform-card {
        transform: none !important;
        opacity: 1 !important;
        scroll-snap-align: start;
        height: 520px;
    }
    .plt-progress { display: none; }
}

/* Reduced motion: plain stacked list */
@media (prefers-reduced-motion: reduce) {
    .platforms-pin { height: auto; padding: 80px 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: linear-gradient(180deg, #0f0f11 0%, #1d1d1f 100%);
    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);
    box-shadow: var(--shadow-md);
}
.platform-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 70% 20%, rgba(177, 15, 26, 0.4), transparent 55%);
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 0.5s var(--ease);
}
.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.platform-card:hover::before { opacity: 1; }

.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);
}

.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(177, 15, 26, 0.22);
}

.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: center;
    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: 112px;     /* clears the fixed navbar so the header isn't hidden */
    padding-bottom: 88px;
}

.ind-header {
    text-align: left;
    margin-bottom: 40px;
    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: 460px;
    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: 460px;
}

.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: linear-gradient(160deg, #0f0f11 0%, #1a1a1d 55%, #2a0708 100%);
    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 */
}
.ind-v-surface::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(177, 15, 26, 0.38) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
}
.ind-v-surface::after {
    content: "";
    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: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 20%, transparent 80%);
    pointer-events: none;
}

.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; }
}

/* 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: 100px 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: 96px 0;
    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);
}
.service-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 4px; height: 0;
    background: var(--brand);
    transition: height 0.5s var(--ease);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: #ddd;
}
.service-card:hover::before { height: 100%; }

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

/* =========================================================
   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: 360vh;           /* 3 chapters × ~87vh 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: radial-gradient(ellipse at 70% 30%, #1a0306 0%, #0a0a0d 50%, #060607 100%);
    box-shadow: 0 40px 80px -30px rgba(177, 15, 26, 0.25);
}
.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: 118px 72px 8px;   /* extra L/R = breathing room inside the card */
    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; }
}

/* Reduced motion: stack chapters statically */
@media (prefers-reduced-motion: reduce) {
    .insights-pin { height: auto; padding: 100px 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);
}

.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 {
    background: #0b0b0c;
    color: rgba(255,255,255,0.7);
    padding: 72px 0 28px;
}

.footer-top {
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
    color: #fff;
    margin-bottom: 20px;
}
.footer-logo-img {
    height: 48px;
    /* Logo was designed for light backgrounds; invert dark pixels on the
       dark footer so the text reads white while the red stays red. */
    /* filter: invert(1) hue-rotate(180deg); */
}

.footer-pitch {
    color: rgba(255,255,255,0.6);
    max-width: 320px;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap: 10px;
}
.footer-social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.footer-social a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.footer h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer ul li { margin-bottom: 12px; }
.footer ul a {
    font-size: 14.5px;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s var(--ease);
}
.footer ul a:hover { color: #fff; }

.footer-bottom {
    padding-top: 28px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.45);
}
.footer-legal {
    display: flex;
    gap: 24px;
}
.footer-legal a {
    color: rgba(255,255,255,0.6);
}
.footer-legal a:hover { color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
    .hero { padding-top: 120px; min-height: auto; }
    .hero-scroll { margin-top: 48px; }
    .capabilities, .case-study, .platforms, .industries, .services, .insights { padding: 64px 0; }
    .impact { padding: 64px 0; }
    .cta-card { padding: 72px 40px; }
    .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
   ========================================================= */
.pe-hero {
    position: relative;
    padding: 120px 0 60px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff;
}
.pe-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.pe-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% 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.35), transparent 70%);
    top: -22%; right: -12%;
}
.pe-orb-b {
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(177,15,26,0.18), transparent 70%);
    bottom: -18%; left: -10%;
}

.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;
}

.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; }

/* =========================================================
   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: 110px;          /* clear fixed navbar */
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
}

.pe-pillars-head {
    max-width: 760px;
    margin-bottom: 32px;
    flex-shrink: 0;
}
.pe-pillars-title {
    font-family: 'Inter', 'Manrope', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 14px 0 0;
}
.pe-pillars-title .muted { color: var(--muted); font-weight: 500; }

/* 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: center;
    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: center;
    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: 56px; height: 56px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 28px;
    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(28px, 3vw, 44px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.08;
}

.pe-pillar-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: 0.02em;
    margin: 0 0 28px;
    /* Subtle red rule under the tag */
    padding-bottom: 16px;
    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: 16px;
    color: var(--muted);
    line-height: 1.7;
    margin: 0 0 16px;
    max-width: 600px;
}
.pe-pillar-body:last-child { margin-bottom: 0; }

/* ---- Bottom progress nav: 4 dots only ---- */
.pe-pillar-nav {
    margin-top: 32px;
    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: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.pe-benefit-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}
.pe-benefit-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
    transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.pe-benefit-card:hover .pe-benefit-icon {
    background: var(--brand);
    color: #fff;
}
.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; }
}
@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 56px;
    max-width: 620px;
}

/* ---- Magnetic primary CTA + aurora ---- */
.pe-cta-hero-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 56px;
    /* Roomy hit area for magnetic effect */
    padding: 60px;
    margin-left: -60px;
    margin-right: -60px;
    margin-top: -20px;
}
/* Pulsing aurora glow behind the button */
.pe-cta-aurora {
    position: absolute;
    width: 360px;
    height: 200px;
    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: 16px;
    padding: 22px 32px 22px 36px;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 600;
    letter-spacing: -0.005em;
    border: 1px solid var(--ink);
    box-shadow:
        0 24px 50px -16px rgba(177, 15, 26, 0.55),
        0 16px 32px -10px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s var(--ease),
        box-shadow 0.4s var(--ease);
    overflow: hidden;
    /* Subtle inner gradient */
    background-image:
        linear-gradient(135deg, var(--ink) 0%, #2a0708 60%, var(--brand-dark) 130%);
}
.pe-cta-hero-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pe-cta-hero-btn:hover {
    color: #fff;
    background-image:
        linear-gradient(135deg, var(--ink) 0%, var(--brand) 70%, var(--brand-dark) 130%);
    box-shadow:
        0 30px 60px -16px rgba(177, 15, 26, 0.65),
        0 20px 40px -10px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pe-cta-hero-btn:hover::before { transform: translateX(100%); }

.pe-cta-hero-label { position: relative; z-index: 1; }
.pe-cta-hero-arrow {
    position: relative;
    z-index: 1;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s var(--ease), background 0.3s 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;
}

/* =========================================================
   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: 40px; margin-left: -40px; margin-right: -40px; }
    .pe-cta-aurora { width: 280px; height: 160px; }

    /* Pinned filmstrip: unpin, stack chapters as a normal flow on tablet+below */
    .pe-pillars-pin { height: auto; }
    .pe-pillars-stage {
        position: static;
        height: auto;
        display: block;
    }
    .pe-pillars-stage::before { display: none; }
    .pe-pillars-shell { padding: 96px 0 64px; height: auto; }
    .pe-pillar-chapters {
        flex: none;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .pe-pillar-chapter {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        padding: 56px 0;
        border-top: 1px solid var(--line);
        --p: 1;        /* show fully filled state in static layout */
    }
    .pe-pillar-chapter:first-of-type { border-top: 1px solid var(--line); margin-top: 24px; }
    .pe-pillar-row {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pe-pillar-num { font-size: clamp(120px, 22vw, 200px); }
    .pe-pillar-tick { max-width: 160px; margin-top: 22px; }
    .pe-pillar-nav { display: none; }      /* dots/progress only relevant when pinned */

    /* 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: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .pe-method-chip {
        position: static;
        width: 100%;
        max-width: none;
    }
    .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: 40px; }
    .pe-cta-hero-wrap { margin-bottom: 40px; padding: 30px; margin-left: -30px; margin-right: -30px; }
    .pe-cta-hero-btn { padding: 18px 24px 18px 28px; gap: 12px; }
    .pe-cta-hero-arrow { width: 34px; height: 34px; }
    .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); }
}

@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; }
    .pe-cta-eyebrow { font-size: 11px; padding: 6px 14px; margin-bottom: 24px; }
    .pe-cta-hero-btn { padding: 16px 20px 16px 24px; font-size: 15px; }
    .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-pin { height: 180vh; }
    .pe-adv-shell { padding: 88px 24px 40px; }
    .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; }
}

/* ============================================================
   ▲  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; }
}
@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-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: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    transition:
        transform 0.4s var(--ease),
        box-shadow 0.4s var(--ease),
        border-color 0.4s var(--ease);
}
.pd-adv-step:hover .pd-adv-step-card {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}
.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; }
}

/* ============================================================
   ▲  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-page .pe-pillars-pin { height: 480vh; }

/* Aggressive vertical compaction — each chapter has 4 long
   paragraphs and chapter 03 is the tallest; everything below
   targets a worst-case 800px viewport. */
.aic-page .pe-pillars-shell { padding-top: 84px; padding-bottom: 20px; }
.aic-page .pe-pillars-head { margin-bottom: 12px; }
.aic-page .pe-pillars-title {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.08;
}
.aic-page .pe-pillars-head .section-eyebrow { margin-bottom: 6px; }

/* Anchor chapter content to the TOP of the chapters area, not centred */
.aic-page .pe-pillar-chapter { align-items: flex-start; }

/* Restore PE / PD left-column scale — big "01" / "02" / "03" / "04"
   exactly like the other service pages. Right column stays compact
   so chapter body still fits in 100vh. */
.aic-page .pe-pillar-row {
    grid-template-columns: minmax(260px, 40%) 1fr;
    gap: 56px;
    align-items: flex-start;
}

/* Vertically centre the number block against the tall right-side body
   so the giant "01 / 02 / 03 / 04" sits in the middle, not pinned to top */
.aic-page .pe-pillar-aside { align-self: center; }

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

/* Right-column compaction — every block trimmed */
.aic-page .pe-pillar-main {
    max-width: 760px;
    padding-right: 4px;
}
.aic-page .pe-pillar-icon {
    width: 42px;
    height: 42px;
    font-size: 16px;
    margin-bottom: 12px;
    border-radius: 11px;
}
.aic-page .pe-pillar-h3 {
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.12;
    margin-bottom: 6px;
}
.aic-page .pe-pillar-tag {
    font-size: 12.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
}
.aic-page .pe-pillar-body {
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 8px;
    max-width: 720px;
}

/* Pull the bottom dots in so chapters get every available px */
.aic-page .pe-pillar-nav { margin-top: 12px; }


/* =========================================================
   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; }
}


/* ============================================================
   ▲  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: #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),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
    overflow: hidden;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.od-value-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;
}

.od-value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 26px 60px -28px rgba(177, 15, 26, .35);
}
.od-value-card:hover::before { opacity: 1; }

.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;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 24px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.od-value-card:hover .od-value-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.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 */
    .od-cinema { height: auto; }
    .od-cinema-stage { position: static; height: auto; padding-bottom: 80px; }
    .od-cinema-head { padding: 90px 0 24px; }
    .od-cinema-track-wrap { padding: 0 24px; overflow: visible; }
    .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;
        padding: 44px 32px;
        transform: none;
        opacity: 1;
    }
    .od-cinema-slide p { opacity: 1; }
    .od-cinema-icon { transform: none; }
    .od-cinema-foot { display: none; }

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

@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),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
    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;
}

.sa-advantage-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}
.sa-advantage-card:hover::before { opacity: 1; }

.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;
}

.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: var(--brand, #b10f1a);
    color: #fff;
    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;
}

.sa-advantage-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #555;
}


/* 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; }
}


/* ============================================================
   ▲  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: #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),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

.li-expertise-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 26px 60px -28px rgba(177, 15, 26, .35);
}

.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;
    background: rgba(177, 15, 26, .08);
    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;
}

.li-expertise-card:hover .li-expertise-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
}

.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: #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),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 100px;
}

.li-service-card:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 15, 26, .3);
    box-shadow: 0 22px 50px -24px rgba(177, 15, 26, .3);
}

.li-service-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;
    flex-shrink: 0;
}

.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, border-color .35s ease, box-shadow .35s ease;
}

.li-ops-grid li:hover {
    transform: translateY(-3px);
    border-color: rgba(177, 15, 26, .3);
    box-shadow: 0 16px 32px -20px rgba(177, 15, 26, .25);
}

.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;
}

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


/* =========================================================
   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)
   Same compaction strategy as SA / OD pages.
   ========================================================= */
.li-page .pe-pillars-pin { height: 320vh; }
.li-page .pe-pillars-stage { height: 56vh; min-height: 520px; }

.li-page .pe-pillars-shell {
    padding-top: 90px;
    padding-bottom: 24px;
    justify-content: flex-start;
}
.li-page .pe-pillars-head { margin-bottom: 14px; }
.li-page .pe-pillars-head .section-eyebrow { margin-bottom: 4px; }

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

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

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

.li-page .pe-pillar-chapters {
    flex: 0 0 auto;
    min-height: 320px;
}

.li-page .pe-pillar-main {
    max-width: 760px;
    /* Override the shared scrub fade — chapter content is always
       fully readable once its chapter becomes active, instead of
       animating from 35 % opacity as the user scrolls. */
    opacity: 1;
    transform: none;
}

/* Same idea for the giant number, tick line, counter — show them
   in full when the chapter is active rather than scrubbing in. */
.li-page .pe-pillar-num-fill {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}
.li-page .pe-pillar-tick span { width: 100%; }
.li-page .pe-pillar-counter { opacity: 1; transform: none; }
.li-page .pe-pillar-icon { transform: none; }
.li-page .pe-pillar-icon {
    width: 42px; height: 42px; font-size: 16px;
    margin-bottom: 12px; border-radius: 11px;
}
.li-page .pe-pillar-h3 {
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.12;
    margin-bottom: 8px;
}
.li-page .pe-pillar-body {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
    max-width: 720px;
}
.li-page .pe-pillar-lead {
    color: var(--brand, #b10f1a);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    max-width: 720px;
}
.li-page .pe-pillar-nav { margin-top: 18px; }


/* =========================================================
   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),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 180px;
    text-decoration: none;
    color: inherit;
}

.li-engagement-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 26px 60px -28px rgba(177, 15, 26, .35);
}

.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;
}

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

.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;
}

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


/* =========================================================
   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: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    box-shadow: 0 18px 48px -32px rgba(0, 0, 0, .25);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1),
        box-shadow .5s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease;
}

.li-case-card:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .3);
    box-shadow: 0 32px 70px -28px rgba(177, 15, 26, .35);
}

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

.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),
        box-shadow .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease, background .35s ease;
}

.li-ai-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    background: #fff;
    box-shadow: 0 30px 60px -28px rgba(177, 15, 26, .35);
}

.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;
}

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

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

.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;
}

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


/* =========================================================
   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); }
    .li-delivery-eyebrow { padding: 10px 14px; font-size: 12.5px; }
    .li-delivery-pillar { padding: 26px 22px 22px; }
}


/* ============================================================
   ▲  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),
        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;
}

.ts-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}

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

.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);
}

.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: var(--brand, #b10f1a);
    color: #fff;
    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;
}

.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);
}

.ts-card-body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: #555;
}


/* =========================================================
   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),
        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;
}

.dc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}

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

.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);
}

.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: var(--brand, #b10f1a);
    color: #fff;
    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;
}

.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);
}

.dc-card-body {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: #555;
}


/* 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-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: #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),
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.hp-clinical-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;
}

.hp-clinical-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 28px 64px -28px rgba(177, 15, 26, .35);
}

.hp-clinical-card:hover::before { opacity: 1; }

.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;
    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: 22px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.hp-clinical-card:hover .hp-clinical-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.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; }

    .hp-enheal-visual { margin: 40px auto 0; max-width: 480px; }
    .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; }
}

@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 { padding: 24px; border-radius: 24px; max-width: 360px; }
    .hp-enheal-core { width: 130px; height: 130px; }
    .hp-enheal-core i { font-size: 28px; }
    .hp-enheal-core strong { font-size: 14px; }
    .hp-enheal-node { min-width: 130px; padding: 10px 12px; }
    .hp-enheal-node span { font-size: 11.5px; }
    .hp-enheal-node i { width: 26px; height: 26px; 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); }


/* ============================================================
   ▲  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: hidden;
}

.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;
}

.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 {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: clamp(19px, 1.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.014em !important;
}

.pp-intro-pull::before {
    content: "“";
    font-family: "Manrope", "Inter", serif;
    font-size: 60px;
    line-height: .8;
    color: var(--brand, #b10f1a);
    display: inline-block;
    margin-right: 4px;
    vertical-align: -16px;
    opacity: .85;
}


/* ---- 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: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 22px;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    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);
}

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

.pp-intro-cap-card:hover {
    transform: translateY(-8px);
    background: #fff;
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
}

.pp-intro-cap-card:hover::before { opacity: 1; }

.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;
    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, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.pp-intro-cap-card:hover i {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.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: hidden;
}

.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;
}

.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;
}

.pp-fed-flow-step:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    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);
}

.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: var(--brand, #b10f1a);
    color: #fff;
}

.pp-fed-flow-step h4 {
    margin: 0 0 10px;
    font: 600 19px/1.25 "Inter", sans-serif;
    color: #0a0a0a;
    letter-spacing: -.018em;
}

.pp-fed-flow-step p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: #555;
}

/* 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);
}

.pp-fed-vs-card:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: rgba(177, 15, 26, .35);
    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: var(--brand, #b10f1a);
    color: #fff;
}

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

.pp-fed-vs-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: #555;
}

/* "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: #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),
        border-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);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 24px 56px -28px rgba(177, 15, 26, .35);
}

.pp-compliance-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background .35s ease, color .35s ease;
}

.pp-compliance-card:hover .pp-compliance-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
}

.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; vertical-align: -12px; }

    .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;
}

.tp-intro-pull::before {
    content: "“";
    font-family: "Manrope", "Inter", serif;
    font-size: 60px;
    line-height: .8;
    color: var(--brand, #b10f1a);
    display: inline-block;
    margin-right: 4px;
    vertical-align: -16px;
    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: linear-gradient(180deg, #fafafa 0%, #f3f3f4 100%);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 22px;
    text-align: left;
    overflow: hidden;
    isolation: isolate;
    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);
}

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

.tp-intro-stake-card:hover {
    transform: translateY(-8px);
    background: #fff;
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
}

.tp-intro-stake-card:hover::before { opacity: 1; }

.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;
    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, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-intro-stake-card:hover i {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.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%;  }


/* =========================================================
   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: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    text-align: center;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1),
        border-color .35s ease,
        box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-mm-arch-step:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 22px 44px -22px rgba(177, 15, 26, .35);
}

.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;
    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: 17px;
    margin-bottom: 12px;
    transition: background .35s ease, color .35s ease;
}

.tp-mm-arch-step:hover > i {
    background: var(--brand, #b10f1a);
    color: #fff;
}

.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: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .2);
    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);
}

.tp-its-pillar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--brand, #b10f1a), transparent);
    opacity: 0;
    transition: opacity .4s ease;
}

.tp-its-pillar:hover {
    transform: translateY(-8px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 32px 64px -28px rgba(177, 15, 26, .35);
}

.tp-its-pillar:hover::after { opacity: 1; }

.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;
    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: 24px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}

.tp-its-pillar:hover .tp-its-pillar-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.06);
}

.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; vertical-align: -12px; }

    .tp-analytics-card { padding: 44px 22px 36px; border-radius: 20px; }
    .tp-analytics-mark { width: 52px; height: 52px; font-size: 22px; }

    .tp-entran-visual { padding: 24px; border-radius: 24px; max-width: 360px; }
    .tp-entran-core { width: 140px; height: 140px; }
    .tp-entran-core i { font-size: 28px; }
    .tp-entran-core strong { font-size: 16px; }
    .tp-entran-node { min-width: 130px; padding: 10px 12px; }
    .tp-entran-node span { font-size: 11.5px; }
    .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
   Reuses .pe-pillars-pin from product-engineering.html.
   Five solutions swap in place inside a sticky stage.
   ========================================================= */
.lp-page .pe-pillars-pin { height: 480vh; }
.lp-page .pe-pillars-stage { height: 86vh; min-height: 760px; }

.lp-page .pe-pillars-shell {
    padding-top: 88px;
    padding-bottom: 24px;
    justify-content: flex-start;
}
.lp-page .pe-pillars-head { margin-bottom: 14px; }
.lp-page .pe-pillars-head .section-eyebrow { margin-bottom: 4px; }

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

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

.lp-page .pe-pillar-aside { align-self: start; }
.lp-page .pe-pillar-num { font-size: clamp(110px, 14vw, 220px); }
.lp-page .pe-pillar-tick { margin-top: 22px; max-width: 220px; }
.lp-page .pe-pillar-counter { margin-top: 12px; font-size: 12px; }

.lp-page .pe-pillar-chapters {
    flex: 0 0 auto;
    min-height: 420px;
}

.lp-page .pe-pillar-main { max-width: 760px; padding-right: 4px; }

.lp-page .pe-pillar-icon {
    width: 44px; height: 44px; font-size: 17px;
    margin-bottom: 14px; border-radius: 12px;
}
.lp-page .pe-pillar-h3 {
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.12;
    margin-bottom: 8px;
}
.lp-page .pe-pillar-tag {
    color: var(--brand, #b10f1a);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    max-width: 720px;
}
.lp-page .pe-pillar-tag::after { display: none; }
.lp-page .pe-pillar-body {
    font-size: 14.6px;
    line-height: 1.6;
    margin-bottom: 10px;
    max-width: 720px;
}

.lp-page .pe-pillar-nav { margin-top: 18px; }


/* =========================================================
   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 {
    color: #0a0a0a !important;
    font-weight: 500 !important;
    font-size: clamp(19px, 1.6vw, 22px) !important;
    line-height: 1.45 !important;
    letter-spacing: -.014em !important;
}

.lp-intro-pull::before {
    content: "“";
    font-family: "Manrope", "Inter", serif;
    font-size: 60px;
    line-height: .8;
    color: var(--brand, #b10f1a);
    display: inline-block;
    margin-right: 4px;
    vertical-align: -16px;
    opacity: .85;
}


/* =========================================================
   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: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 22px;
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .2);
    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);
}

.lp-ai-pillar:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .35);
    box-shadow: 0 28px 60px -28px rgba(177, 15, 26, .35);
}

.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;
    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: 19px;
    transition: background .35s ease, color .35s ease;
}

.lp-ai-pillar:hover .lp-ai-pillar-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
}

.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;
}


/* =========================================================
   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; vertical-align: -12px; }
}


/* ============================================================
   ▲  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: hidden;
}

.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);
}


/* =========================================================
   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: #fff;
    border-radius: 22px;
    padding: 36px 32px 32px;
    box-shadow:
        0 18px 44px -22px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(0, 0, 0, .04) inset;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease;
}
.rp-reco-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 28px 60px -22px rgba(177, 15, 26, .25),
        0 0 0 1px rgba(177, 15, 26, .14) inset;
}

.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;
    background: linear-gradient(135deg, var(--brand, #b10f1a) 0%, #d4202d 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 17px;
    box-shadow: 0 10px 22px -10px rgba(177, 15, 26, .55);
}
.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: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
    flex-shrink: 0;
}
.rp-caps-card:hover .rp-caps-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.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-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: #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;
}
.ga-diff-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;
}

.ga-diff-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);
}
.ga-diff-card:hover .ga-diff-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.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: #fafafa;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    padding: 26px 28px 24px;
    transition:
        transform .45s cubic-bezier(.2, .8, .2, 1),
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}
.ga-changes-case:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 22px 44px -22px rgba(177, 15, 26, .25);
}

.ga-changes-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 13px;
    font-size: 17px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ga-changes-case:hover .ga-changes-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}

.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 (Orion 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 (Orion 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 (Orion 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 (Orion 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 (Orion 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-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), border-color .45s ease, box-shadow .45s ease;
}
.aa-where-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.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: var(--brand, #b10f1a);
    color: #fff;
    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);
}
.aa-where-card p {
    font: 400 14.5px/1.68 "Inter", sans-serif;
    color: #2a2a2a;
    margin: 0;
}


/* =========================================================
   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: #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;
}
.aa-diff-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;
}
.aa-diff-wide { grid-column: 1 / -1; }

.aa-diff-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-diff-card:hover .aa-diff-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.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: #fafafa;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    padding: 26px 28px;
    text-decoration: none;
    color: inherit;
    transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aa-shortcut-card:hover {
    transform: translateX(6px);
    background: #fff;
    border-color: rgba(177, 15, 26, .25);
    text-decoration: none;
    color: inherit;
}

.aa-shortcut-arrow {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    font-size: 11px;
    transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.aa-shortcut-card:hover .aa-shortcut-arrow {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: translateX(4px);
}

.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 (Rigel 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 (Rigel 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 (Rigel 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 (Rigel 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-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: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    padding: 26px 28px 24px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.ml-example-card:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 22px 44px -22px rgba(177, 15, 26, .22);
}
.ml-example-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 13px;
    font-size: 17px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ml-example-card:hover .ml-example-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.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: #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;
}
.ml-diff-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;
}

.ml-diff-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);
}
.ml-diff-card:hover .ml-diff-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.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 (Mintaka) → 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 (Mintaka) → 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 (Mintaka) → 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 (Mintaka) → 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-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: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    padding: 26px 28px 24px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s ease, box-shadow .45s ease;
}
.da-example-card:hover {
    transform: translateY(-4px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 22px 44px -22px rgba(177, 15, 26, .22);
}
.da-example-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: rgba(177, 15, 26, .08);
    color: var(--brand, #b10f1a);
    border-radius: 13px;
    font-size: 17px;
    transition: background .45s ease, color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.da-example-card:hover .da-example-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.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: #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;
}
.da-diff-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;
}

.da-diff-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);
}
.da-diff-card:hover .da-diff-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
    transform: scale(1.05);
}
.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 — Meissa — 1.5)  ▼▼▼
   ════════════════════════════════════════════════════════════════════════════
   File:        semantic-intelligence.html
   Body class:  .si-page
   Practice:    EnWise · Codename Meissa
   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-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: #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;
}
.si-value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.si-value-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-value-card:hover .si-value-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.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),
                border-color .45s ease,
                box-shadow .45s ease;
}
.si-work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.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: var(--brand, #b10f1a);
    color: #fff;
}
.si-work-h3 {
    font: 700 18px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.si-work-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── SI · CTA · 4 SUB-DISCIPLINE PATHS ─────────────────── */
.si-page .si-engage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 880px;
    margin: 36px auto 44px;
}
.si-page .si-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);
}
.si-page .si-engage-chip:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    transform: translateY(-2px);
}
.si-page .si-engage-num {
    font: 700 12px/1 "JetBrains Mono", monospace;
    color: rgba(255, 255, 255, .55);
    letter-spacing: .14em;
    flex-shrink: 0;
}
.si-page .si-engage-label {
    font: 600 14.5px/1.3 "Inter", sans-serif;
    flex-grow: 1;
}
.si-page .si-engage-tail {
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    flex-shrink: 0;
}
.si-page .si-engage-chip:hover .si-engage-tail { transform: translateX(4px); }

/* ── 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 { grid-template-columns: 1fr; }
}

/* ── 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 — Meissa — 1.5)  ▲▲▲
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   ▼▼▼  START · AI ETHICS, PRIVACY & GOVERNANCE PAGE (EnTrust — Saiph — 1.6)  ▼▼▼
   ════════════════════════════════════════════════════════════════════════════
   File:        ai-ethics-privacy-governance.html
   Body class:  .ae-page
   Practice:    EnTrust · Codename Saiph
   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-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: #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;
}
.ae-value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.ae-value-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-value-card:hover .ae-value-icon {
    background: var(--brand, #b10f1a);
    color: #fff;
}
.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),
                border-color .45s ease,
                box-shadow .45s ease;
}
.ae-work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 15, 26, .25);
    box-shadow: 0 28px 56px -22px rgba(177, 15, 26, .22);
}
.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: var(--brand, #b10f1a);
    color: #fff;
}
.ae-work-h3 {
    font: 700 18px/1.3 "Manrope", sans-serif;
    color: #1d1d1f;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}
.ae-work-card p {
    font: 400 14.5px/1.65 "Inter", sans-serif;
    color: #424245;
    margin: 0;
}

/* ── 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 — Saiph — 1.6)  ▲▲▲
   ════════════════════════════════════════════════════════════════════════════ */