/* ═══════════════════════════════════════════════════════
   LENET — light-forward theme with dark feature sections.
   Colours resolve through the tokens declared in
   assets/tailwind-input.css; `.section-dark` re-declares them,
   so most rules below never name a colour directly.
   ═══════════════════════════════════════════════════════ */

/* ── Skip link (keyboard / screen reader) ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100;
}
.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 0.5rem 1rem;
    background: #fff;
    color: #000;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    outline: 2px solid #1d5394;
    outline-offset: 2px;
}

/* ── Full-Screen Hero ── */
/* Near-total black with one concentrated light source, per the reference:
   most of the frame is empty, the blue is intense over a small area and falls
   off fast. The luminous edge is drawn on the canvas. */
.hero-dark {
    background: #000;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
}

/* Darkens the left third only, so the headline holds without flattening the
   light on the right. */
.hero-gradient-overlay {
    background:
        linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 34%, rgba(0,0,0,0.08) 62%, transparent 100%);
    pointer-events: none;
}

/* ── Scroll Indicator ── */
.scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* ── Page Hero (non-fullscreen, for subpages) ── */
.hero-page {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
    position: relative;
    overflow: hidden;
}
/* Clear the fixed 5rem nav with room to breathe. */
.hero-page.section { padding-top: 8.5rem; }
@media (min-width: 768px) { .hero-page.section { padding-top: 11rem; } }
.hero-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(29, 83, 148, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.section-dark.hero-page {
    background: #000;
}
.section-dark.hero-page::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(147, 179, 222, 0.10) 0%, transparent 70%);
}

/* ── Hero Entrance Animations ── */
.hero-entrance {
    opacity: 0;
    animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-entrance-d1 { animation-delay: 0.12s; }
.hero-entrance-d2 { animation-delay: 0.24s; }
.hero-entrance-d3 { animation-delay: 0.40s; }
.hero-entrance-d4 { animation-delay: 0.55s; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Team Photos ── */
/* The portraits from lenet.com are already monochrome on a light ground, so no
   filter is applied. The class is kept for any colour portrait added later. */
.team-photo {
    filter: grayscale(1);
}

/* ── Assessment Progress Bar ── */
.progress-fill {
    transition: width 0.4s ease;
}

/* ── Assessment Step Entrance ── */
.step-enter {
    animation: fadeSlideIn 0.3s ease forwards;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Plan Step Connector ── */
.plan-connector {
    position: relative;
}
@media (max-width: 767px) {
    .plan-connector::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -1.5rem;
        width: 1px;
        height: 1.5rem;
        background: linear-gradient(to bottom, rgb(var(--accent) / 0.45), transparent);
    }
}
@media (min-width: 768px) {
    .plan-connector::after {
        content: '';
        position: absolute;
        top: 2rem;
        right: -1rem;
        width: 2rem;
        height: 1px;
        background: linear-gradient(to right, rgb(var(--accent) / 0.55), transparent);
    }
}
.plan-connector:last-child::after {
    display: none;
}

/* ── Stat Number Glow (dark sections only — a glow on white is just blur) ── */
.section-dark .stat-glow {
    text-shadow: 0 0 24px rgba(147, 179, 222, 0.45), 0 0 48px rgba(29, 83, 148, 0.25);
}

/* ── Stat Card Accent ── */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgb(var(--accent)), transparent);
    opacity: 0.35;
    transition: opacity 0.3s ease;
}
.stat-card:hover::before {
    opacity: 1;
}

/* ── Typewriter Cursor ── */
[data-typewriter]::after {
    content: '|';
    animation: blink 0.8s step-end infinite;
    color: rgb(var(--accent));
}
@keyframes blink {
    50% { opacity: 0; }
}

/* ── Animated Progress Bars ── */
[data-progress] {
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Image Treatment ── */
.img-float {
    border-radius: 1rem;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.28);
}
.section-dark .img-float {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(29, 83, 148, 0.12);
}

/* ── Gradient Text with Shimmer ── */
.gradient-text {
    background: linear-gradient(
        135deg,
        #1d5394 0%, #3b72b3 40%, #17416f 60%, #1d5394 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 6s ease-in-out infinite;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.section-dark .gradient-text {
    background: linear-gradient(
        135deg,
        #93b3de 0%, #cfe0f5 40%, #bccfe6 60%, #93b3de 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .gradient-text {
        animation: none;
        background-position: 0% 50%;
    }
}

/* ── Subtle Grid Background ── */
.bg-grid {
    background-image:
        linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
}
.section-dark.bg-grid,
.section-dark .bg-grid {
    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);
}

/* ── Accent rule under section headers ── */
.glow-accent {
    position: relative;
}
.glow-accent::after {
    content: '';
    display: block;
    width: 48px;
    height: 2px;
    background: rgb(var(--accent));
    margin-top: 1rem;
}
.section-dark .glow-accent::after {
    box-shadow: 0 0 12px rgba(147, 179, 222, 0.5);
}
.glow-accent-center::after {
    margin-left: auto;
    margin-right: auto;
}

/* ── Divider Line ── */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--hairline) / 0.7), transparent);
}
.section-dark .divider {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

/* ── Page Load Fade-In ── */
@media (prefers-reduced-motion: no-preference) {
    body {
        animation: pageIn 0.5s ease-out;
    }
}
@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Scroll offset for the fixed nav: h-20 (5rem) + hairline ── */
[id] {
    scroll-margin-top: 5.5rem;
}

/* ── Nav transitions (classes toggled by site-shell.js) ── */
.nav-transparent {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.nav-solid {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Home sits over a dark hero, so while the nav is transparent its contents
   must read light. Every other page has a light hero and needs no override.
   Scoped to .nav-bar so the opaque white mobile panel — which is also inside
   <nav> — keeps its dark links when opened at the top of the page. */
.nav-over-dark.nav-transparent .nav-bar a,
.nav-over-dark.nav-transparent .nav-bar button {
    color: #fff;
}
.nav-over-dark.nav-transparent .nav-bar .nav-cta {
    background: #fff;
    color: #000;
}
.nav-over-dark.nav-transparent .nav-bar .nav-cta:hover {
    background: #f4f7fa;
}

/* Hero pillar buttons: a gradient hairline drawn as a true ring (masked
   pseudo-element), so the inside stays see-through to the photograph. */
.hero-dark .btn-pillar, .section-dark .btn-pillar {
    position: relative; isolation: isolate;
    background: rgba(29, 83, 148, .16);
    border: 1px solid transparent; color: #fff; backdrop-filter: blur(4px);
    transition: background .3s ease, transform .25s ease;
}
.hero-dark .btn-pillar::before, .section-dark .btn-pillar::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    background: linear-gradient(120deg, #1d5394 0%, #33adca 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
    pointer-events: none;
}
.hero-dark .btn-pillar:hover, .section-dark .btn-pillar:hover { background: rgba(29, 83, 148, .45); transform: translateY(-2px); }

/* ── Rolling stat numbers ── */
.odo { display: inline-flex; align-items: flex-start; line-height: 1; height: 1em; overflow: hidden; vertical-align: top; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: block; transform: translateY(0); transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--odo-delay, 0ms); will-change: transform; }
.odo-strip span, .odo-static { display: block; height: 1em; line-height: 1; }
.odo-static { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .odo-strip { transition: none; } }

/* The stat cards get a little life: the numbers are brand blue, one card is
   solid blue, and a hover tilts them the way a card in the hand would. */
.stat-card::before { opacity: .9; height: 3px; }
.stat-card:hover { transform: translateY(-6px) rotate(-1.5deg); }
.stat-card-blue { background: #1d5394; border-color: #1d5394; color: #fff; }
.stat-card-blue::before { background: linear-gradient(90deg, transparent, #93b3de, transparent); }
.stat-card-blue .text-xs { color: rgba(255,255,255,.8); }
.stat-card-blue:hover { background: #17437a; border-color: #17437a; transform: translateY(-6px) rotate(1.5deg); }

/* ── Credentials band ── */
.cred { background: #000; }
.cred-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(147,179,222,0) 20%, #93b3de 50%, rgba(147,179,222,0) 80%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: credScan 5s cubic-bezier(.4,0,.2,1) infinite; opacity: .9; }
@keyframes credScan { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.cred-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 640px) { .cred-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .cred-grid { grid-template-columns: repeat(5, 1fr); gap: .6rem; max-width: 60rem; margin-left: auto; margin-right: auto; } }
.cred-grid { margin-top: 1.5rem; }
.cred-grid li { border: 1px solid rgba(255,255,255,.14); padding: 1.1rem 1rem; font-family: 'Montserrat', Arial, sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); text-align: center; line-height: 1.35;
    transition: border-color .3s, background .3s, color .3s, transform .3s; }
.cred-grid li:hover { border-color: #93b3de; background: rgba(29,83,148,.35); color: #fff; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cred-scan { animation: none; } }

/* ── Dark-section buttons: gradient hairline, no glow ── */
.section-dark .btn-primary {
    background: linear-gradient(#0b0f16, #0b0f16) padding-box, linear-gradient(120deg, #1d5394, #5fd0ea) border-box;
    border: 1px solid transparent; color: #fff; box-shadow: none;
    transition: background .3s ease, color .3s ease, transform .25s ease;
}
.section-dark .btn-primary:hover { background: linear-gradient(120deg, #1d5394, #2b7bc0) border-box; color: #fff; transform: translateY(-1px); }
.section-dark .btn-secondary { border-color: rgba(255,255,255,.28); color: #fff; box-shadow: none; transition: border-color .3s, background .3s, transform .25s; }
.section-dark .btn-secondary:hover { border-color: #93b3de; background: rgba(255,255,255,.06); transform: translateY(-1px); }

/* ── Closing statement ── */
.cta-final-title { font-family: 'Cardo', Georgia, serif; font-weight: 400; color: #fff; letter-spacing: -.02em; line-height: 1; font-size: clamp(2.6rem, 6.5vw, 5.75rem); }
.cta-final .shimmer {
    background: linear-gradient(90deg, #93b3de 0%, #ffffff 30%, #4f8fdc 55%, #93b3de 80%, #ffffff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 6s linear infinite;
    text-shadow: none;
    filter: drop-shadow(0 0 28px rgba(79,143,220,.45));
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
.btn-xl { padding: 1.25rem 2.5rem; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .cta-final .shimmer { animation: none; } }

/* ── Operations room ── */
.ops { background: radial-gradient(ellipse 80% 60% at 70% 50%, #10264a 0%, #050a14 55%, #000 80%); }
.ops-glow { position: absolute; right: -10%; top: 50%; width: 60vw; max-width: 900px; aspect-ratio: 1; transform: translateY(-50%);
    background: radial-gradient(circle, rgba(70,140,230,.55) 0%, rgba(70,140,230,.18) 40%, transparent 70%); filter: blur(24px); pointer-events: none; }
.ops-globe-wrap { position: relative; width: 100%; max-width: 620px; }
.ops-globe { display: block; width: 100%; height: auto; }
.ops-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; margin-top: 1rem; }
.ops-legend span { font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.9); font-weight: 500; }
.ops-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #93b3de; margin-right: .45rem; vertical-align: middle; box-shadow: 0 0 8px #93b3de; }

.ops-feed { list-style: none; margin: 0; padding: 0; min-height: 9rem; }
.ops-feed li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: baseline; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.08);
    opacity: 0; transform: translateY(-6px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.ops-feed li.is-in { opacity: 1; transform: none; }
.ops-feed li.is-out { opacity: 0; transform: translateY(6px); }
.ops-feed li:first-child { border-top-color: rgba(147,179,222,.5); }
.ops-feed li:first-child .ops-text { color: #fff; }
.ops-time { font-variant-numeric: tabular-nums; font-size: .78rem; color: rgba(147,179,222,.85); }
.ops-text { font-size: .95rem; color: rgba(255,255,255,.7); line-height: 1.45; }

/* ── Who we serve: list with hairlines ── */
.serve-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.serve-list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.serve-list a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1.5rem; padding: 1.4rem 0; text-decoration: none; color: inherit; position: relative; transition: padding-left .35s cubic-bezier(.16,1,.3,1); }
.serve-list a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #93b3de; transform: scaleY(0); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.serve-list a:hover { padding-left: 1.25rem; }
.serve-list a:hover::before { transform: scaleY(1); }
.serve-title { grid-column: 1; font-family: 'Cardo', Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.75rem); color: #fff; line-height: 1.2; }
.serve-text { grid-column: 1; margin-top: .4rem; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 40rem; }
.serve-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.4rem; color: rgba(147,179,222,.6); transition: transform .35s, color .35s; }
.serve-list a:hover .serve-arrow { transform: translateX(6px); color: #fff; }

/* ── Blue break band ── */
.blue-band { background: #fff; color: #111; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.blue-band-title { font-family: 'Cardo', Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.2; letter-spacing: -.01em; color: #111; }
.blue-band-title strong { font-weight: 400; color: #1d5394; }
.blue-band-link { display: inline-flex; align-items: center; padding: .8rem 1.4rem; border: 1px solid #1d5394; border-radius: .75rem; font-size: .85rem; font-weight: 600; color: #1d5394; text-decoration: none; transition: background .3s, color .3s, transform .25s; }
.blue-band-link:hover { background: #1d5394; color: #fff; transform: translateY(-2px); }
.blue-band-link-dark { border-color: rgba(147,179,222,.55); color: #93b3de; }
.blue-band-link-dark:hover { background: #1d5394; border-color: #1d5394; color: #fff; }

/* ── Outcomes row inside the composite section ── */
.outcome-row > div { border-left: 1px solid rgba(147,179,222,.35); padding-left: 1.25rem; }
.outcome-title { font-family: 'Cardo', Georgia, serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: #fff; margin-bottom: .6rem; }

/* Hero "Schedule a meeting": light brand blue so it reads on black, and lets
   the three pillar buttons stay the brighter element. */
.hero-dark .hero-meet { color: #93b3de; border-bottom: 1px solid rgba(147,179,222,.55); }
.hero-dark .hero-meet:hover { color: #bcd3f0; border-bottom-color: #bcd3f0; }
.hero-dark .hero-meet svg { transition: transform .25s; }
.hero-dark .hero-meet:hover svg { transform: translateX(3px); }

/* ── Portrait frames (4:5 photographs used beside copy) ── */
.portrait-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.35); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-frame-short { aspect-ratio: 4 / 4.2; }
.portrait-frame-dark { box-shadow: 0 0 0 1px rgba(147,179,222,.18), 0 30px 80px -30px rgba(29,83,148,.5); background: #000; }
@media (max-width: 1023px) { .portrait-frame { max-height: 60vh; } }

/* Hero photograph sits a little to the right so the headline does not
   fight the central figure. */
.hero-photo { object-position: 62% 50%; transform: translateX(9%) scale(1.14); transform-origin: center; }

/* Credentials on a light ground */
.cred-grid-light li { border-color: rgba(0,0,0,.14); color: #333; }
.cred-grid-light li:hover { border-color: #1d5394; background: rgba(29,83,148,.06); color: #1d5394; }
.portrait-frame-light { background: #fff; box-shadow: none; border: 1px solid rgba(0,0,0,.06); }

/* ── AI across the business: illustrated grid (AI page) ── */
.aig-card { display: block; color: inherit; text-decoration: none; }
.aig-tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, #10264a 0%, #070f20 55%, #000 100%); border: 1px solid rgba(147,179,222,.14); transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .45s; }
.aig-tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 70% 80%, rgba(51,173,202,.14), transparent 70%); pointer-events: none; }
.aig-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(1.05); }
.aig-card:hover .aig-img { transform: scale(1.08); }
.aig-card:hover .aig-tile { transform: translateY(-4px); border-color: rgba(147,179,222,.4); box-shadow: 0 24px 60px -30px rgba(29,83,148,.7); }
.aig-svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; }
.aig-pulse { animation: aigPulse 2.8s ease-in-out infinite; transform-origin: center; }
.aig-d2 { animation-delay: 1.4s; }
.aig-flow { animation: aigFlow 6s linear infinite; }
@keyframes aigPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes aigFlow { to { stroke-dashoffset: -120; } }
.aig-title { font-weight: 700; font-size: 1.05rem; color: #111; margin-top: 1.4rem; margin-bottom: .5rem; }
.aig-text { color: #4b5563; font-size: .95rem; line-height: 1.6; }
.aig-link { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; font-size: .9rem; font-weight: 600; color: #1d5394; transition: color .3s; }
.aig-card:hover .aig-link { color: #33adca; }
@media (prefers-reduced-motion: reduce) { .aig-pulse, .aig-flow { animation: none; } }
/* Home AI teaser section: one symbol, one link */
.aim { color: inherit; text-decoration: none; }
.aim-link { display: inline-flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; color: #93b3de; transition: color .3s, gap .3s; }
.aim:hover .aim-link { color: #33adca; gap: .9rem; }
.aisym { width: 100%; max-width: 480px; height: auto; margin: 0 auto; display: block; overflow: visible; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.aim:hover .aisym { transform: scale(1.03); }
.aisym-spin { transform-origin: 160px 100px; animation: aifSpin 24s linear infinite; }
.aisym-spin-slow { transform-origin: 160px 100px; animation: aifSpin 90s linear infinite reverse; }
.ai-glow { color: #93b3de; text-shadow: 0 0 18px rgba(51,173,202,.55), 0 0 40px rgba(29,83,148,.45); }
@media (prefers-reduced-motion: reduce) { .aisym-spin, .aisym-spin-slow { animation: none; } }

/* Contact: direct-contact column */
.contact-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #6b7280; margin-bottom: .55rem; }
.contact-value { display: inline-block; font-family: 'Cardo', Georgia, serif; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.15; letter-spacing: -.01em; color: #1d5394; text-decoration: none; transition: color .3s; }
.contact-value:hover { color: #33adca; }
/* Click-to-play YouTube embed */
.yt-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid rgba(147,179,222,.18); box-shadow: 0 30px 80px -40px rgba(29,83,148,.8); }
.yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.yt-embed:hover .yt-poster { transform: scale(1.03); }
.yt-embed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 100%); pointer-events: none; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(6,14,30,.55); color: #fff; backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background .3s, transform .3s, border-color .3s; }
.yt-play svg { width: 34px; height: 34px; margin-left: 4px; }
.yt-play:hover { background: #1d5394; border-color: #33adca; transform: scale(1.06); }
.yt-caption { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.2rem; z-index: 2; font-size: .9rem; color: rgba(255,255,255,.85); pointer-events: none; }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.yt-embed.is-playing .yt-poster, .yt-embed.is-playing .yt-play, .yt-embed.is-playing .yt-caption, .yt-embed.is-playing::after { opacity: 0; pointer-events: none; }
/* Why AI-first hero: photo with a moving ring */
.aif-visual { position: relative; max-width: 440px; margin: 0 auto; padding-bottom: 3.5rem; }
.aif-frame { aspect-ratio: 4 / 5; }
.aif-photo { animation: aifKen 34s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes aifKen { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.aif-ring { position: absolute; left: -3.6rem; bottom: 0; width: 240px; height: 200px; overflow: visible; }
.aif-ring-arc { transform-origin: 100px 100px; animation: aifSpin 18s linear infinite; }
.aif-ring-spin { transform-origin: 100px 100px; animation: aifSpin 60s linear infinite reverse; }
.aif-pulse { animation: aigPulse 3s ease-in-out infinite; }
@keyframes aifSpin { to { transform: rotate(360deg); } }
@media (max-width: 1023px) { .aif-visual { max-width: 360px; } .aif-ring { left: -1rem; width: 150px; height: 150px; } }
@media (prefers-reduced-motion: reduce) { .aif-photo, .aif-ring-arc, .aif-ring-spin, .aif-pulse { animation: none; } }
/* AI page: five steps row */
.aistep { position: relative; padding-top: 1.1rem; border-top: 2px solid rgba(29,83,148,.18); }
.aistep-n { display: block; font-family: 'Cardo', Georgia, serif; font-size: 2rem; line-height: 1; color: #1d5394; margin-bottom: .8rem; }
/* AI page: guide for leaders */
.guide-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.08); }
.guide-list li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.guide-n { font-family: 'Cardo', Georgia, serif; font-size: 2.2rem; line-height: 1; color: #1d5394; }
.guide-title { font-family: 'Cardo', Georgia, serif; font-size: 1.45rem; line-height: 1.25; color: #111; margin-bottom: .7rem; }
.guide-ask { margin-top: .9rem; padding-left: 1rem; border-left: 2px solid #33adca; font-size: .92rem; color: #1d5394; }
.guide-quote { font-family: 'Cardo', Georgia, serif; font-size: 1.15rem; line-height: 1.5; color: #333; }
.guide-quote footer { margin-top: 1rem; font-family: 'Montserrat', system-ui, sans-serif; font-size: .8rem; color: #6b7280; }
.guide-check { list-style: none; margin: 0; padding: 0; counter-reset: gc; }
.guide-check li { counter-increment: gc; position: relative; padding: .9rem 0 .9rem 2.4rem; border-top: 1px solid rgba(0,0,0,.08); color: #333; font-size: .98rem; line-height: 1.5; }
.guide-check li:last-child { border-bottom: 1px solid rgba(0,0,0,.08); }
.guide-check li::before { content: counter(gc); position: absolute; left: 0; top: .85rem; font-family: 'Cardo', Georgia, serif; font-size: 1.3rem; line-height: 1; color: #1d5394; }

/* Insights strip: editorial cards over the site's own imagery */
.insights { background: #000; }
.insight-card { position: relative; display: block; min-height: 340px; overflow: hidden; color: #fff; text-decoration: none; border: 1px solid rgba(147,179,222,.14); background: #050a14; transition: border-color .3s, transform .5s cubic-bezier(.2,.7,.2,1); }
.insight-card:hover { border-color: rgba(147,179,222,.4); transform: translateY(-4px); }
.insight-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .6s; }
.insight-card:hover .insight-img { transform: scale(1.08); opacity: .7; }
.insight-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.88) 100%); }
.insight-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.8rem; }
.insight-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #93b3de; margin-bottom: .7rem; }
.insight-title { font-size: 1.25rem; line-height: 1.35; font-weight: 600; color: #fff; }
.insight-title span { color: #33adca; margin-left: .15rem; }
@media (min-width: 768px) { .md\:grid-cols-4 .insight-card, .insights .grid > .insight-card { min-height: 380px; } }
.aif-visual .aisym-light { max-width: 620px; }
@media (min-width: 1024px) { .aif-visual { max-width: none; padding-bottom: 0; } }
/* Services: compact hero with a small line drawing */
.hero-page.section.hero-compact { padding-top: 7.5rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) { .hero-page.section.hero-compact { padding-top: 8.5rem; padding-bottom: 3rem; } }
.svc-line { width: 100%; max-width: 300px; height: auto; margin-left: auto; display: block; overflow: visible; }

/* ── Why AI-first dropdown (desktop). CSS only: opens on hover and on
   keyboard focus within, so no script and nothing to fail. The panel keeps
   its own top padding so the pointer can cross the gap without closing it. */
.nav-dd { position: relative; }
.nav-dd-panel {
    position: absolute; left: -1rem; top: 100%; padding-top: .85rem; width: 21rem;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: none; }
.nav-dd-card {
    background: rgba(255, 255, 255, .98); border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem; padding: .5rem; backdrop-filter: blur(16px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 20px 40px -12px rgba(29, 83, 148, .18);
}
.nav-dd-card a {
    display: block; padding: .6rem .75rem; border-radius: .5rem;
    color: #333; font-size: .875rem; font-weight: 600; transition: background .15s, color .15s;
}
.nav-dd-card a span {
    display: block; margin-top: .1rem; color: #5c5c5c;
    font-size: .75rem; font-weight: 400; line-height: 1.4;
}
.nav-dd-card a:hover, .nav-dd-card a:focus-visible { background: #f4f7fa; color: #1d5394; }
.nav-dd-sep { height: 1px; margin: .35rem .5rem; background: rgba(0, 0, 0, .08); }
.nav-dd-chevron { transition: transform .18s ease; }
.nav-dd:hover .nav-dd-chevron,
.nav-dd:focus-within .nav-dd-chevron { transform: rotate(180deg); }
/* Home at the top: the bar reads white over the dark hero, but the panel is
   an opaque white card, so its links must stay dark. */
.nav-over-dark.nav-transparent .nav-bar .nav-dd-card a { color: #333; }
.nav-over-dark.nav-transparent .nav-bar .nav-dd-card a:hover,
.nav-over-dark.nav-transparent .nav-bar .nav-dd-card a:focus-visible { color: #1d5394; }

/* ── Hero on phones: show the whole photograph, text beneath it ── */
@media (max-width: 767px) {
    .hero-dark .hero-photo {
        position: relative !important;
        inset: auto !important;
        display: block;
        width: 100%;
        height: auto !important;
        object-fit: contain;
        object-position: 50% 50%;
        transform: none;
        opacity: 1;
        margin-top: 4.5rem;              /* clears the fixed nav */
        z-index: 1;
    }
    .hero-dark .hero-gradient-overlay { background: none; }
    .hero-dark > .relative.z-10 { min-height: 0 !important; padding-top: 1.5rem !important; padding-bottom: 6rem !important; }
    .hero-dark .hero-entrance-d1 { font-size: 2.25rem; line-height: 1.12; }
    .hero-dark .scroll-indicator { display: none; }
}