/* ═══ TOKENS ═══ */
:root {
    /* ── Premium Apple-style palette ───────────────────────────────────────
       60 % Canvas  · 30 % Structure · 10 % Accent
       ────────────────────────────────────────────────────────────────────── */

    /* Canvas — soft stone white, easy on the eye */
    --white: #F8FAFC;
    --gray-bg: #F1F5F9;    /* maps to --sand in older tokens */
    --gray-light: #F1F5F9;
    --sand: #F1F5F9;
    --sand-dark: #E2E8F0;
    --gray-line: #E2E8F0;

    /* Brand — deep forest green */
    --forest: #0D3B2E;

    /* Structure — deep charcoal slate (replaces raw black) */
    --charcoal: #0F172A;
    --text: #0F172A;
    --text-2: #475569;
    --muted: #475569;

    /* Accent — scientific teal + warm corporate amber */
    --teal: #0D9488;
    --teal-light: #14B8A6;
    --teal-pale: rgba(13, 148, 136, 0.12);
    --amber: #D97706;
    --amber-light: #F59E0B;
    --amber-pale: rgba(217, 119, 6, 0.1);

    /* Typography */
    --fd: "Constantia", Georgia, serif;                                 /* headings */
    --fn: "Constantia", Georgia, serif;                                 /* display / UI labels */
    --fb: "Century", "Century Gothic", system-ui, sans-serif;           /* body copy */

    /* Layout */
    --r: 16px;
    --r-sm: 10px;
    --t: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadow system — slate-tinted, not green */
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow:    0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14);

    /* Glassmorphism (dark hero / nav contexts only) */
    --glass:      rgba(255, 255, 255, 0.68);
    --glass-dark: rgba(15, 23, 42, 0.70);
    --glass-line: rgba(255, 255, 255, 0.24);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
}

body {
    font-family: var(--fb);
    background: var(--white);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: var(--fb);
    cursor: pointer;
    border: none;
    background: none;
}

ul {
    list-style: none;
}

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

/* ═══ GLOBAL TYPOGRAPHY ═══ */
h1, h2, h3, h4,
.div-title, .pb-title, .display, .htitle,
.section-h, .tc-name, .tl-deg {
    font-family: var(--fd);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

p, .sub-body, .tc-bio, .div-intro, .lect-body, .pub-journal {
    font-family: var(--fb);
    font-weight: 400;
    line-height: 1.7;
}


/* ═══ UI ICONS (modern SVG, no emoji) ═══ */
.ui-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--teal-pale);
    color: var(--teal);
    flex-shrink: 0;
}

.ui-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-icon.amber {
    background: var(--amber-pale);
    color: var(--amber);
}

.ui-icon.sm {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

.ui-icon.sm svg {
    width: 21px;
    height: 21px;
}

/* ═══ TYPOGRAPHY ═══ */
.eye {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber);
}

.display {
    font-family: var(--fn);
    line-height: 1.15;
    font-weight: 700;
}

.d2 {
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
}

.lead {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-2);
}

.divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), var(--amber));
    border-radius: 2px;
    margin: 0.8rem 0 2rem;
}

.divider.c {
    margin-left: auto;
    margin-right: auto;
}

section {
    padding: 96px 5%;
}

.si {
    max-width: 1280px;
    margin: 0 auto;
}

/* ═══ ASUS-STYLE REVEAL ANIMATIONS ═══ */
.rv {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv.in {
    opacity: 1;
    transform: none;
}

.rv-left {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv-left.in {
    opacity: 1;
    transform: none;
}

.rv-right {
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv-right.in {
    opacity: 1;
    transform: none;
}

.rv-scale {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.rv-scale.in {
    opacity: 1;
    transform: scale(1);
}

.d1 {
    transition-delay: 0.1s;
}

.d2x {
    transition-delay: 0.2s;
}

.d3x {
    transition-delay: 0.3s;
}

.d4x {
    transition-delay: 0.4s;
}

/* Cascade stagger for grid children when parent grid reveals */
.why-grid.in>.why-item,
.feat-grid.in>.feat-card,
.fw-grid.in>.fwc,
.test-grid.in>.testc {
    animation: cascade-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.why-grid.in>.why-item:nth-child(1),
.feat-grid.in>.feat-card:nth-child(1),
.fw-grid.in>.fwc:nth-child(1),
.test-grid.in>.testc:nth-child(1) {
    animation-delay: 0.05s;
}

.why-grid.in>.why-item:nth-child(2),
.feat-grid.in>.feat-card:nth-child(2),
.fw-grid.in>.fwc:nth-child(2),
.test-grid.in>.testc:nth-child(2) {
    animation-delay: 0.14s;
}

.why-grid.in>.why-item:nth-child(3),
.feat-grid.in>.feat-card:nth-child(3),
.fw-grid.in>.fwc:nth-child(3),
.test-grid.in>.testc:nth-child(3) {
    animation-delay: 0.23s;
}

.why-grid.in>.why-item:nth-child(4),
.feat-grid.in>.feat-card:nth-child(4),
.fw-grid.in>.fwc:nth-child(4) {
    animation-delay: 0.32s;
}

.why-grid.in>.why-item:nth-child(5),
.fw-grid.in>.fwc:nth-child(5) {
    animation-delay: 0.41s;
}

.why-grid.in>.why-item:nth-child(6) {
    animation-delay: 0.5s;
}

@keyframes cascade-in {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    .why-grid.in>.why-item,
    .feat-grid.in>.feat-card,
    .fw-grid.in>.fwc,
    .test-grid.in>.testc {
        animation: none;
    }
}

/* ═══ BUTTONS ═══ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: var(--t);
}

.btn-p {
    background: var(--amber);
    color: #fff;
}

.btn-p:hover {
    background: var(--amber-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196, 98, 29, 0.35);
}

.btn-ol {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.btn-ol:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

.btn-dk {
    background: var(--forest);
    color: #fff;
}

.btn-dk:hover {
    background: var(--teal);
    transform: translateY(-2px);
}

/* ═══ GRID HELPERS ═══ */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}

@media (max-width: 900px) {

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    .grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* ═══ CARD ═══ */
.card {
    background: var(--white);
    border-radius: var(--r);
    padding: 2.2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-line);
    transition: var(--t);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.card.a {
    border-top: 4px solid var(--amber);
}

.card-title {
    font-family: var(--fn);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 0.8rem;
}

.card-desc {
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.75;
}

:is(.card,
    .feat-card,
    .div-block,
    .sub-card,
    .project-card,
    .tcard,
    .pub-card,
    .lect-card,
    .why-item,
    .testc,
    .mvc,
    .fwc,
    .clc,
    .egc,
    .modal) {
    position: relative;
    overflow: hidden;
    background: var(--white) !important;
    border-color: var(--gray-line) !important;
    box-shadow: var(--shadow) !important;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
}

:is(.card,
    .feat-card,
    .div-block,
    .sub-card,
    .project-card,
    .tcard,
    .pub-card,
    .lect-card,
    .why-item,
    .testc,
    .mvc,
    .fwc,
    .clc,
    .egc,
    .modal)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(135deg,
            rgba(26, 122, 94, 0.04) 0%,
            transparent 60%);
    opacity: 1;
}

:is(.card,
    .feat-card,
    .div-block,
    .sub-card,
    .project-card,
    .tcard,
    .pub-card,
    .lect-card,
    .why-item,
    .testc,
    .mvc,
    .fwc,
    .clc,
    .egc,
    .modal)>* {
    position: relative;
    z-index: 1;
}

:is(.card,
    .feat-card,
    .project-card,
    .tcard,
    .pub-card,
    .lect-card,
    .why-item,
    .testc,
    .mvc,
    .fwc,
    .clc,
    .egc):hover {
    transform: translateY(-8px) !important;
    box-shadow: var(--shadow-lg) !important;
}

:is(.card,
    .feat-card,
    .project-card,
    .tcard,
    .pub-card,
    .lect-card,
    .why-item,
    .testc,
    .mvc,
    .fwc,
    .clc,
    .egc):hover::before {
    opacity: 1;
}

/* Page Banner */
.pbanner {
    background: var(--forest);
    padding: 120px 5% 72px;
    position: relative;
    overflow: hidden;
}

.pb-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.45);
    z-index: 0;
}

.pbanner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 60% 80% at 90% 50%,
            rgba(42, 157, 127, 0.3),
            transparent 70%);
}

.pb-crumb,
.pb-title,
.pb-sub {
    z-index: 2;
}

.pb-crumb {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    position: relative;
}

.pb-crumb a {
    color: rgba(255, 255, 255, 0.5);
}

.pb-title {
    font-family: var(--fn);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1rem;
    position: relative;
}

.pb-title em {
    color: var(--teal);
    font-style: normal;
}

.pb-sub {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
    max-width: 600px;
    position: relative;
}

.pbanner .rv {
    opacity: 1;
    transform: none;
}

.tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 12px;
}

.tag-t {
    background: var(--teal-pale);
    color: var(--teal);
}

.tag-a {
    background: var(--amber-pale);
    color: var(--amber);
}

.r-lg {
    border-radius: var(--r);
}

/* ═══ NAV ═══
   Two states:
   1. Default — sits transparently over the hero/banner: logo + plain text
      links only, no floating pill/card.
   2. .scrolled — applied once the hero/pbanner has scrolled out from under
      the nav (see initNav()'s IntersectionObserver in site.js): becomes the
      floating glass pill. */
#nav {
    position: fixed;
    top: 0;
    left: 50%;
    right: auto;
    z-index: 300;
    height: 88px;
    width: 100%;
    transform: translateX(-50%);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    padding: 0 5%;
    justify-content: space-between;
    gap: 1rem;
    overflow: hidden;
    box-shadow: none;
    transition:
        background 0.45s ease,
        box-shadow 0.45s ease,
        top 0.45s ease,
        width 0.45s ease,
        padding 0.45s ease,
        border-radius 0.45s ease,
        border-color 0.45s ease,
        backdrop-filter 0.45s ease;
}

#nav.scrolled::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 100%);
}

#nav>* {
    position: relative;
    z-index: 1;
}

#nav.scrolled {
    top: 16px;
    width: min(1280px, 90vw);
    padding: 0 14px 0 26px;
    border-radius: 999px;
    background: linear-gradient(135deg,
            rgba(6, 22, 16, 0.88),
            rgba(13, 59, 46, 0.64));
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#nav.scrolled .brand-mark {
    height: 52px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-mark {
    height: 62px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.24));
}

.brand-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.nl-name {
    font-family: var(--fn);
    font-size: 1.18rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
    line-height: 1;
}

.nl-tag {
    font-size: 0.56rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.nl {
    display: flex;
    gap: 1.7rem;
    align-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0;
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        padding 0.4s ease,
        gap 0.4s ease;
}

#nav.scrolled .nl {
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    padding: 5px;
}

.nl a {
    font-size: 0.72rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: var(--t);
    position: relative;
    padding: 6px 3px;
    border-radius: 999px;
    white-space: nowrap;
}

#nav.scrolled .nl a {
    padding: 8px 14px;
}

/* Underline-draw hover for the minimal (transparent) state */
.nl a::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 2px;
    height: 1.5px;
    background: var(--teal-light);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

#nav.scrolled .nl a::after {
    display: none;
}

.nl a:hover {
    color: #fff;
}

.nl a:hover::after,
.nl a.act::after {
    transform: scaleX(1);
}

#nav.scrolled .nl a:hover,
#nav.scrolled .nl a.act {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.nl a.act {
    color: #fff;
}

.nc {
    background: linear-gradient(135deg, var(--amber), var(--amber-light));
    color: #fff;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    transition: var(--t);
    box-shadow: 0 10px 24px rgba(196, 98, 29, 0.28);
    white-space: nowrap;
}

.nc:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(196, 98, 29, 0.38);
}

/* Minimal state: only logo + text links show over the hero/banner.
   CTA button and social icons appear once the nav becomes the scrolled pill. */
.nav-actions {
    display: none;
}

#nav.scrolled .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    animation: navActionsIn 0.4s ease;
}

@keyframes navActionsIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-social {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bur {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    margin-left: auto;
}

.bur span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--t);
}

.bur.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.bur.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.bur.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Social buttons */
.social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition:
        transform 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}

.social-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.28s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
    background: rgba(42, 157, 127, 0.22);
    border-color: rgba(42, 157, 127, 0.55);
    box-shadow: 0 10px 28px rgba(42, 157, 127, 0.18);
    color: #fff;
}

.social-btn:hover svg {
    transform: scale(1.08);
}

.social-sm {
    padding: 0;
    width: 36px;
    height: 36px;
}

.social-sm span {
    display: none;
}

.mn-social {
    margin-top: 1rem;
}

/* Brand-fill social icons (sitewide - nav, mobile menu, footer) */
.si-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition:
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.si-icon svg {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 2;
    fill: currentColor;
}

.si-icon::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-radius: 50%;
    transition: height 0.3s ease;
    z-index: 1;
}

.si-icon:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.si-icon:hover::before {
    height: 100%;
}

.si-icon.si-sm {
    width: 36px;
    height: 36px;
}

.si-icon.si-sm svg {
    width: 16px;
    height: 16px;
}

.si-mail::before {
    background: linear-gradient(135deg, var(--teal), #0f5c45);
}

.si-whats::before {
    background: #25d366;
}

.si-x::before {
    background: #000;
}

.si-link::before {
    background: #0274b3;
}

.si-insta::before {
    background: linear-gradient(40deg, #0000ff, #f56040);
}

/* Name tooltip on hover - only used where the icon has room to overflow (footer, mobile menu) */
.si-tip-wrap {
    position: relative;
}

.si-tip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.si-tip-wrap:hover .si-tip {
    transform: translateX(-50%) scale(1);
}

.si-tip-wrap.sw-mail:hover .si-tip {
    background: linear-gradient(135deg, var(--teal), #0f5c45);
}

.si-tip-wrap.sw-whats:hover .si-tip {
    background: #25d366;
}

.si-tip-wrap.sw-x:hover .si-tip {
    background: #000;
}

.si-tip-wrap.sw-link:hover .si-tip {
    background: #0274b3;
}

.si-tip-wrap.sw-insta:hover .si-tip {
    background: linear-gradient(30deg, #0000ff, #f56040);
}

/* Mobile menu */
.mn {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 250;
    background: rgba(5, 18, 13, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.mn.open {
    display: flex;
}

.mn a {
    font-family: var(--fn);
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s;
}

.mn a:hover,
.mn a.act {
    color: var(--teal);
}

/* ═══ HERO ═══ */
#hero {
    min-height: 100vh;
    background: var(--forest);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 130px 5% 64px;
    position: relative;
    overflow: hidden;
    perspective: 1200px;
}

.hero-mesh {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%,
            rgba(42, 157, 127, 0.28),
            transparent 42%),
        radial-gradient(circle at 78% 18%,
            rgba(196, 98, 29, 0.18),
            transparent 38%),
        radial-gradient(circle at 62% 82%,
            rgba(42, 157, 127, 0.14),
            transparent 40%);
    animation: meshDrift 18s ease-in-out infinite alternate;
    filter: blur(2px);
}

.hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    animation: orbFloat 14s ease-in-out infinite;
}

.hero-orb.o1 {
    width: 280px;
    height: 280px;
    top: 8%;
    right: 6%;
    background: radial-gradient(circle,
            rgba(42, 157, 127, 0.22),
            transparent 70%);
    animation-duration: 16s;
}

.hero-orb.o2 {
    width: 180px;
    height: 180px;
    left: 4%;
    bottom: 18%;
    background: radial-gradient(circle,
            rgba(196, 98, 29, 0.18),
            transparent 70%);
    animation-duration: 12s;
    animation-delay: -4s;
}

.hero-orb.o3 {
    width: 120px;
    height: 120px;
    right: 28%;
    bottom: 8%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.12),
            transparent 70%);
    animation-duration: 10s;
    animation-delay: -2s;
}

@keyframes meshDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-2%, 3%, 0) scale(1.06);
    }
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -18px, 0);
    }
}

/* ═══ AMBIENT BACKGROUND ORBS ═══
   Reusable, subtle motion for section backgrounds — professional, brand-
   colored glows rather than decorative icons, so they read as polished
   corporate texture rather than playful illustration. Drop `.bg-orbs`
   (optionally `.on-dark` for dark sections) as the first child of any
   `position: relative; overflow: hidden;` section. */
.bg-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    animation: orbDrift 20s ease-in-out infinite;
    will-change: transform;
}

.bg-orb.bo1 {
    width: 30vw;
    max-width: 420px;
    height: 30vw;
    max-height: 420px;
    top: -10%;
    right: -8%;
    background: radial-gradient(circle, rgba(42, 157, 127, 0.14), transparent 72%);
    animation-duration: 22s;
}

.bg-orb.bo2 {
    width: 20vw;
    max-width: 300px;
    height: 20vw;
    max-height: 300px;
    left: -6%;
    bottom: -8%;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.1), transparent 72%);
    animation-duration: 17s;
    animation-delay: -6s;
}

.bg-orb.bo3 {
    width: 15vw;
    max-width: 220px;
    height: 15vw;
    max-height: 220px;
    left: 42%;
    top: 12%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.09), transparent 72%);
    animation-duration: 25s;
    animation-delay: -10s;
}

/* Brighter variant for dark section backgrounds (e.g. .team-cta, .iq) */
.bg-orbs.on-dark .bg-orb.bo1 {
    background: radial-gradient(circle, rgba(42, 157, 127, 0.28), transparent 72%);
}

.bg-orbs.on-dark .bg-orb.bo2 {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 72%);
}

.bg-orbs.on-dark .bg-orb.bo3 {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.22), transparent 72%);
}

@keyframes orbDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(2%, -3%, 0) scale(1.08);
    }
    66% {
        transform: translate3d(-2%, 2%, 0) scale(0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-orb {
        animation: none;
    }
}

/* Generic helper for anonymous/inline-styled sections that need the
   .bg-orbs layer to sit correctly behind their content. */
.motion-section {
    position: relative;
    overflow: hidden;
}

.motion-section > .si {
    position: relative;
    z-index: 1;
}

.hg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 55% at 80% 15%,
            rgba(26, 122, 94, 0.28) 0%,
            transparent 60%),
        radial-gradient(ellipse 40% 40% at 8% 85%,
            rgba(196, 98, 29, 0.15) 0%,
            transparent 55%);
}

/* Animated grid lines */
.hg::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 80px 80px;
}

.hero-3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}

.h-orbit {
    position: absolute;
    inset: 12% 4% 14%;
    transform-style: preserve-3d;
    animation: heroFloat 12s ease-in-out infinite;
}

.h-plane {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 24px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.035));
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.h-plane.p1 {
    width: 310px;
    height: 190px;
    right: 8%;
    top: 12%;
    transform: rotateY(-28deg) rotateX(12deg) translateZ(80px);
}

.h-plane.p2 {
    width: 220px;
    height: 140px;
    left: 7%;
    bottom: 16%;
    transform: rotateY(24deg) rotateX(-10deg) translateZ(44px);
}

.h-plane.p3 {
    width: 160px;
    height: 160px;
    right: 22%;
    bottom: 10%;
    border-radius: 50%;
    transform: rotateX(68deg) rotateZ(28deg) translateZ(20px);
}

.h-plane::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: inherit;
    border: 1px solid rgba(42, 157, 127, 0.26);
}

.h-plane::after {
    content: "";
    position: absolute;
    width: 42%;
    height: 4px;
    left: 24px;
    top: 28px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            var(--teal),
            rgba(255, 255, 255, 0.22));
    box-shadow:
        0 22px 0 rgba(255, 255, 255, 0.14),
        0 44px 0 rgba(255, 255, 255, 0.08);
}

.h-ring {
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    margin: -260px 0 0 -260px;
    border-radius: 50%;
    border: 1px solid rgba(42, 157, 127, 0.22);
    transform: rotateX(72deg) rotateZ(-18deg);
    box-shadow: 0 0 50px rgba(42, 157, 127, 0.1);
}

.h-ring::before,
.h-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 56px;
    border: 1px solid rgba(196, 98, 29, 0.18);
}

.h-ring::after {
    inset: 116px;
    border-color: rgba(255, 255, 255, 0.1);
}

@keyframes heroFloat {

    0%,
    100% {
        transform: rotateX(0) rotateY(0) translateY(0);
    }

    50% {
        transform: rotateX(3deg) rotateY(-4deg) translateY(-16px);
    }
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.5rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
}


.hero-panel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-panel-card {
    width: 100%;
    max-width: 380px;
    padding: 2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.03));
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: panelPulse 6s ease-in-out infinite;
}

.hero-panel-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1rem;
}

.hero-panel-list {
    list-style: none;
    display: grid;
    gap: 0.85rem;
}

.hero-panel-list li {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.72);
    padding-left: 1rem;
    border-left: 2px solid rgba(26, 122, 94, 0.45);
}

.hero-panel-list strong {
    color: #fff;
    font-family: var(--fn);
    font-size: 1.05rem;
    margin-right: 0.35rem;
}

@keyframes panelPulse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.8rem;
}

.hero-chip {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
}

.hero-enter {
    opacity: 0;
    transform: translateY(28px);
}

#hero.hero-ready .hero-enter {
    animation: heroEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


#hero.hero-ready .hero-panel {
    animation: heroEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
    opacity: 0;
    transform: translateY(28px);
}

@keyframes heroEnter {
    to {
        opacity: 1;
        transform: none;
    }
}

.hgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
    transform-style: preserve-3d;
}

.hgrid>div {
    padding: 2.7rem 2.4rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 28px;
    background: linear-gradient(145deg,
            rgba(13, 59, 46, 0.34),
            rgba(255, 255, 255, 0.05));
    box-shadow:
        0 38px 100px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: rotateX(2deg) translateZ(56px);
}

.hpill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(26, 122, 94, 0.14);
    border: 1px solid rgba(26, 122, 94, 0.30);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--teal);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hpill span {
    width: 7px;
    height: 7px;
    background: var(--teal);
    border-radius: 50%;
    animation: blink 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

.htitle {
    font-family: var(--fn);
    font-size: clamp(3rem, 5.5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.08;
    color: #fff;
    margin-bottom: 1.4rem;
}

.htitle .hl {
    color: var(--teal);
}

.hsub {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.85;
    margin-bottom: 1.6rem;
    max-width: 700px;
}

.hbtns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.hstats {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding-top: 2.5rem;
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
    z-index: 2;
}

.hstat-card {
    text-align: center;
    padding: 1.2rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    animation: statIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.hstat-card:nth-child(1) {
    animation-delay: 0.55s;
}

.hstat-card:nth-child(2) {
    animation-delay: 0.65s;
}

.hstat-card:nth-child(3) {
    animation-delay: 0.75s;
}

.hstat-card:nth-child(4) {
    animation-delay: 0.85s;
}

#hero.hero-ready .hstat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(26, 122, 94, 0.40);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

@keyframes statIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 1.4rem;
    transform: translateX(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    animation: scrollCue 2.2s ease-in-out infinite;
}

.hero-scroll span {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

@keyframes scrollCue {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.55;
    }

    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}

.si-num {
    font-family: var(--fn);
    font-size: 2.3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.si-num em {
    color: var(--teal);
    font-style: normal;
}

.si-lbl {
    font-size: 0.71rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ═══ TRUST BAR ═══ */
/* Container framework */
.session-container {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* Prevents large center logos from clipping */
    background: #ffffff;
    /* Works beautifully on dark or light themes */
    position: relative;
}

/* Keep the title aligned with the same 5% gutter used by every other
   section, since .session-container itself has no horizontal padding
   (the logo marquee needs to bleed edge-to-edge). */
.session-container .si {
    padding: 0 5%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .session-container .si {
        padding: 0 5%;
    }
}

@media (max-width: 480px) {
    .session-container .si {
        padding: 0 6%;
    }
}

/* Moving conveyor belt */
.logo-track {
    display: flex;
    width: max-content;
    animation: scrollSession 45s linear infinite;

    margin-top: -35px;
}

/* DEFAULT STATE: Faded and Grayscale */
.logo-item {
    width: 200px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.3s ease;

    transform: scale(1.05);
    opacity: 0.5;
    filter: grayscale(50%);
}

.logo-item img {
    max-width: 140px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 900px) {
    .logo-item {
        width: 160px;
        height: 100px;
    }
    .logo-item img {
        max-width: 110px;
        max-height: 60px;
    }
    .logo-item.is-centered, .logo-item:hover {
        transform: scale(1.5) !important;
    }
}

@media (max-width: 600px) {
    .logo-item {
        width: 120px;
        height: 80px;
    }
    .logo-item img {
        max-width: 90px;
        max-height: 50px;
    }
    .logo-item.is-centered, .logo-item:hover {
        transform: scale(1.3) !important;
    }
}

/* CENTER STATE: Triggered by JavaScript when passing screen center */
.logo-item.is-centered {
    transform: scale(1.8) !important;
    filter: grayscale(0%) !important;
    opacity: 1;
}

/* HOVER STATE Override: Only adds color, strips out the size increase */
.logo-item:hover {
    filter: grayscale(0%) !important;
    transform: scale(1.8);
    opacity: 1;
    /* Leaves transform at its current scale state (doesn't force 1.2x if it isn't in center) */
}

/* Loop Animation */
@keyframes scrollSession {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ═══ FEATURE SPOTLIGHT (ASUS-style full-bleed sections) ═══ */
.spot {
    padding: 0;
    overflow: hidden;
}

.spot-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
}

.spot-inner.flip {
    direction: rtl;
}

.spot-inner.flip>* {
    direction: ltr;
}

.spot-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5rem 6%;
}

.spot-dark, .spot-dark .spot-text {
    background: var(--forest);
}

.spot-light, .spot-light .spot-text {
    background: var(--gray-bg);
}

.spot-visual {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    margin: 2.5rem;
    border-radius: var(--r-xl, 24px);
    box-shadow: 0 24px 48px rgba(0,0,0,0.15);
}

@media (max-width: 900px) {
    .spot-visual {
        margin: 1.5rem;
        border-radius: var(--r-lg, 16px);
        min-height: 320px;
    }
}

.spot-visual-bg {
    position: absolute;
    inset: 0;
    background-size: 150%;
    background-position: center;
    transition: transform 8s ease;
}

.spot:hover .spot-visual-bg {
    transform: scale(1.00);
}

.spot-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 59, 46, 0.6), transparent 60%);
}

.spot-num {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.spot-dark .spot-num {
    color: var(--teal);
}

.spot-light .spot-num {
    color: var(--amber);
}

.spot-title {
    font-family: var(--fn);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.spot-dark .spot-title {
    color: #fff;
}

.spot-light .spot-title {
    color: var(--forest);
}

.spot-body {
    font-size: 0.95rem;
    line-height: 1.85;
    margin-bottom: 1.8rem;
}

.spot-dark .spot-body {
    color: rgba(255, 255, 255, 0.65);
}

.spot-light .spot-body {
    color: var(--text-2);
}

.spot-stat-row {
    display: flex;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

.spot-stat-num {
    font-family: var(--fn);
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.spot-dark .spot-stat-num {
    color: var(--teal);
}

.spot-light .spot-stat-num {
    color: var(--amber);
}

.spot-stat-lbl {
    font-size: 0.72rem;
    color: white;
    opacity: 0.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 800px) {

    .spot-inner,
    .spot-inner.flip {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .spot-visual {
        min-height: 260px;
    }

    .spot-text {
        padding: 3.5rem 5%;
    }
}

/* ═══ SECTION NAV (ASUS sticky section pill) ═══ */
.sec-nav {
    position: sticky;
    top: 68px;
    z-index: 100;
    background: rgba(5, 18, 13, 0.95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 5%;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.sec-nav::-webkit-scrollbar {
    display: none;
}

.sn-btn {
    padding: 16px 22px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    transition: var(--t);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    background: none;
    cursor: pointer;
}

.sn-btn:hover {
    color: #fff;
}

.sn-btn.active {
    color: var(--teal);
    border-bottom-color: var(--teal);
}

/* ═══ MISSION / VISION ═══ */
.mv-s {
    background: var(--gray-bg);
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

.mvc {
    background: var(--white);
    border-radius: var(--r);
    padding: 2.4rem;
    border-left: 4px solid var(--teal);
    box-shadow: var(--shadow-sm);
    transition: var(--t);
}

.mvc:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.mvc.a {
    border-left-color: var(--amber);
}

.mvc-ic {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    background: var(--teal-pale);
}

.mvc.a .mvc-ic {
    background: var(--amber-pale);
}

.mvc-title {
    font-family: var(--fn);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 0.9rem;
}

.mvc p {
    font-size: 0.95rem;
    color: var(--text-2);
    line-height: 1.85;
}

.iq {
    background: var(--forest);
    border-radius: var(--r);
    padding: 2.5rem 3rem;
    position: relative;
    overflow: hidden;
}

.iq::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 20px;
    font-family: var(--fn);
    font-size: 10rem;
    color: rgba(42, 157, 127, 0.1);
    line-height: 1;
    pointer-events: none;
}

.iq p {
    font-family: var(--fn);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
    position: relative;
    z-index: 1;
}

.iq p em {
    color: var(--teal);
    font-style: normal;
    font-weight: 600;
}

.iq .attr {
    margin-top: 1rem;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ═══ PROCESS ═══ */
.proc-s {
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.proc-s .si {
    position: relative;
    z-index: 1;
}

.psteps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 3rem;
    position: relative;
}

.psteps::before {
    content: "";
    position: absolute;
    top: 27px;
    left: calc(10% + 27px);
    right: calc(10% + 27px);
    height: 2px;
    background: rgba(26, 122, 94, 0.18);
    z-index: 0;
}

/* traveling glow orb - sits BEHIND dots now */
.psteps::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 10%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: radial-gradient(circle,
            #eafff6 0%,
            #6bffcf 35%,
            rgba(42, 157, 127, 0.55) 70%,
            transparent 100%);
    filter: drop-shadow(0 0 10px rgba(42, 157, 127, 0.9)) drop-shadow(0 0 20px rgba(107, 255, 207, 0.55));
    z-index: 0;
    animation: lineTravel 5s linear infinite;
}

/* percentages computed to land exactly on each dot at its glow peak */
@keyframes lineTravel {
    0% {
        left: 10%;
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    8% {
        left: 10%;
    }

    26% {
        left: 30%;
    }

    44% {
        left: 50%;
    }

    62% {
        left: 70%;
    }

    80% {
        left: 90%;
        opacity: 1;
    }

    86% {
        opacity: 0;
    }

    100% {
        left: 10%;
        opacity: 0;
    }
}

.ps {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 0.4rem;
}

.ps-dot {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--forest);
    border: 3px solid var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-family: var(--fn);
    font-size: 1rem;
    font-weight: 700;
    color: var(--teal);
    position: relative;
    z-index: 2;
    transition: var(--t);
    animation: dotGlow 5s ease-in-out infinite;
}

.ps:nth-child(1) .ps-dot {
    animation-delay: 0s;
}

.ps:nth-child(2) .ps-dot {
    animation-delay: 0.9s;
}

.ps:nth-child(3) .ps-dot {
    animation-delay: 1.8s;
}

.ps:nth-child(4) .ps-dot {
    animation-delay: 2.7s;
}

.ps:nth-child(5) .ps-dot {
    animation-delay: 3.6s;
}

@keyframes dotGlow {

    0%,
    92%,
    100% {
        background: var(--forest);
        color: var(--teal);
        border-color: var(--teal);
        box-shadow: none;
        transform: scale(1);
    }

    8% {
        background: var(--teal);
        color: #fff;
        border-color: var(--teal);
        box-shadow: 0 0 22px 6px rgba(42, 157, 127, 0.55);
        transform: scale(1.1);
    }

    16% {
        background: var(--forest);
        color: var(--teal);
        border-color: var(--teal);
        box-shadow: none;
        transform: scale(1);
    }
}

.ps:hover .ps-dot {
    background: var(--teal);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(42, 157, 127, 0.4);
}

@media (prefers-reduced-motion: reduce) {

    .psteps::after,
    .ps-dot {
        animation: none;
    }
}

.ps-t {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 0.3rem;
}

.ps-d {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ═══ ESG ═══ */
.esg-s {
    background: var(--gray-bg);
}

.fw-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.fwc {
    text-align: center;
    padding: 1.6rem 0.8rem;
    border-radius: var(--r-sm);
    background: var(--white);
    border: 1.5px solid transparent;
    transition: var(--t);
    cursor: default;
    box-shadow: var(--shadow-sm);
}

.fwc:hover {
    border-color: var(--teal);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.fw-a {
    font-family: var(--fn);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 0.3rem;
}

.fw-n {
    font-size: 0.75rem;
    color: var(--text-2);
    line-height: 1.5;
}

.esg-deep {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 3rem;
}

.egc {
    background: var(--white);
    border-radius: var(--r);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--t);
    border-top: 4px solid var(--teal);
}

.egc:last-child {
    border-top-color: var(--amber);
}

.egc:hover {
    box-shadow: var(--shadow);
}

.egc-t {
    font-family: var(--fn);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--forest);
    margin-bottom: 1.2rem;
}

.egf {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.88rem;
    color: var(--text-2);
    margin-bottom: 0.8rem;
}

.egf::before {
    content: "✓";
    color: var(--teal);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ═══ CLIENTS ═══ */
.cl-s {
    background: var(--white);
}

.cl-hd {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.cl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.clc {
    background: var(--gray-bg);
    border-radius: var(--r);
    padding: 1.8rem;
    text-align: center;
    border: 1.5px solid transparent;
    transition: var(--t);
    box-shadow: var(--shadow-sm);
}

.clc:hover {
    border-color: var(--teal);
    background: var(--white);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.cl-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.b-m {
    background: var(--amber-pale);
    color: var(--amber);
}

.b-i {
    background: var(--teal-pale);
    color: var(--teal);
}

.b-g {
    background: rgba(13, 59, 46, 0.1);
    color: var(--forest);
}

.b-e {
    background: rgba(50, 130, 30, 0.1);
    color: #3b7a12;
}

.cl-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--forest);
    margin-bottom: 0.3rem;
    font-family: var(--fn);
}

.cl-sub {
    font-size: 0.8rem;
    color: var(--text-2);
}

/* ═══ TESTIMONIALS ═══ */
.test-s {
    background: var(--gray-bg);
}

.test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
    margin-top: 2.5rem;
}

.testc {
    background: var(--white);
    border-radius: var(--r);
    padding: 2.2rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: var(--t);
    border-bottom: 4px solid var(--teal);
}

.testc:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.testc::before {
    content: '"';
    position: absolute;
    top: 12px;
    right: 18px;
    font-family: var(--fn);
    font-size: 4rem;
    color: var(--teal-pale);
    line-height: 1;
    pointer-events: none;
}

.test-q {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 1.8rem;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.test-attr {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.test-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--forest);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fn);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--teal);
    flex-shrink: 0;
}

.test-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--forest);
}

.test-org {
    font-size: 0.78rem;
    color: var(--text-2);
}

/* ═══ FOOTER ═══ */
#footer {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42, 157, 127, 0.18), transparent 65%),
        linear-gradient(165deg, var(--forest) 0%, #081f18 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.ft-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4);
    z-index: 0;
}

/* Pre-footer CTA banner — the last conversion opportunity on the page */
.ft-cta {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 5% 2.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.ft-cta-title {
    font-family: var(--fn);
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    max-width: 560px;
    line-height: 1.3;
}

.ft-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    border-radius: 999px;
    background: var(--amber);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: var(--t);
    white-space: nowrap;
}

.ft-cta-btn:hover {
    background: var(--amber-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(196, 98, 29, 0.35);
}

.ft-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 5%;
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.ft-logo-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ft-big-logo {
    height: 150px;
    width: auto;
    max-width: 100%;
}

.ft-contact-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.ft-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.ft-icon-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ft-icon-btn:hover {
    transform: translateY(-3px);
    background: rgba(42, 157, 127, 0.22);
    border-color: rgba(42, 157, 127, 0.55);
    box-shadow: 0 8px 24px rgba(42, 157, 127, 0.18);
    color: #fff;
}

.ft-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.ft-col {
    display: flex;
    flex-direction: column;
}

.ft-ct {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: whitesmoke;
    margin-bottom: 1rem;
}

.ftl {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Underline-draw hover instead of a plain color change */
.ftl a {
    font-size: 0.79rem;
    color: rgba(255, 255, 255, 0.48);
    transition: color 0.2s;
    position: relative;
    width: fit-content;
}

.ftl a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--teal-light);
    transition: width 0.3s ease;
}

.ftl a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.ftl a:hover::after {
    width: 100%;
}

/* Inline newsletter capture */
.ft-news-form {
    display: flex;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1.2rem;
    transition: var(--t);
}

.ft-news-form:focus-within {
    border-color: var(--teal-light);
}

.ft-news-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.85rem;
    padding: 8px 0;
    font-family: var(--fb);
}

.ft-news-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ft-news-btn {
    background: none;
    border: none;
    color: var(--teal-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    transition: transform 0.25s ease;
}

.ft-news-btn:hover {
    transform: translateX(4px);
}

.ft-bottom-row {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.1rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.ft-bar {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
}

.ft-top-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--t);
}

.ft-top-btn:hover {
    background: var(--teal);
    border-color: var(--teal);
    transform: translateY(-3px);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {

    .nl,
    .nc,
    .nav-social {
        display: none;
    }

    .bur {
        display: flex;
    }

    #nav {
        top: 0;
        height: 72px;
        width: 100%;
        padding: 0 5%;
    }

    #nav.scrolled {
        top: 10px;
        width: 92vw;
        padding: 0 12px 0 20px;
    }

    .nl-name {
        font-size: 1rem;
    }

    .nl-tag {
        font-size: 0.5rem;
    }
}

@media (max-width: 900px) {
    section {
        padding: 64px 5%;
    }

    .mv-grid,
    .cl-hd,
    .esg-deep {
        grid-template-columns: 1fr;
    }

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero-copy {
        text-align: center;
        padding: 2rem 1.4rem;
        border-radius: 22px;
    }

    .hero-panel {
        order: -1;
    }

    .hero-panel-card {
        max-width: 100%;
    }

    .hbtns {
        justify-content: center;
    }

    .hero-chips {
        justify-content: center;
    }

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

    .test-grid,
    .cl-grid {
        grid-template-columns: 1fr 1fr;
    }

    .fw-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ft-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ft-logo-side {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

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

    #hero {
        padding-top: 112px;
        padding-bottom: 5rem;
    }

    .h-plane.p1 {
        right: -18%;
        top: 8%;
        opacity: 0.55;
    }

    .h-plane.p2 {
        left: -22%;
        bottom: 22%;
        opacity: 0.5;
    }

    .h-ring {
        width: 390px;
        height: 390px;
        margin: -195px 0 0 -195px;
    }

    .hero-scroll {
        bottom: 1rem;
    }
}

@media (max-width: 480px) {
    #nav {
        width: 90vw;
        padding-left: 18px;
    }

    .pbanner {
        padding-top: 130px;
    }

    .pb-title {
        font-size: 2.18rem;
        max-width: 90vw;
    }

    .pb-title em {
        display: block;
    }

    .pb-sub {
        max-width: 88vw;
    }

    .brand {
        max-width: 72%;
    }

    .brand-mark {
        width: auto;
        height: 44px;
    }

    .nl-name {
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
    .psteps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .psteps::before {
        display: none;
    }

    .test-grid,
    .cl-grid {
        grid-template-columns: 1fr;
    }

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

    .ft-inner {
        padding: 3rem 5% 2.5rem;
    }

    .ft-cols {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .ft-big-logo {
        height: 140px;
        width: auto;
        max-width: 100%;
    }

    .ft-cta-title {
        font-size: 1.3rem;
    }

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

    .htitle {
        font-size: 2.65rem;
    }

    .hsub {
        font-size: 0.98rem;
    }

    .hero-3d {
        opacity: 0.65;
    }

    .h-plane.p1 {
        width: 220px;
        height: 140px;
    }

    .h-plane.p2 {
        width: 170px;
        height: 110px;
    }

    .h-plane.p3 {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .h-orbit,
    .logo-track,
    .impact-track,
    .hero-mesh,
    .hero-orb,
    .hero-panel-card,
    .hero-scroll,
    .logo-item {
        animation: none;
    }

    .logo-item {
        opacity: 1;
        transform: none;
    }

    .hero-enter,
    #hero.hero-ready .hero-panel,
    .hstat-card {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .rv,
    .rv-left,
    .rv-right,
    .rv-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    :is(.card,
        .feat-card,
        .project-card,
        .tcard,
        .pub-card,
        .lect-card,
        .why-item,
        .testc,
        .mvc,
        .fwc,
        .clc,
        .egc):hover {
        transform: translateY(-4px) !important;
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 400;
}

/* ============================================================
   HORIZONTAL SNAP CAROUSEL — Services Division Showcase
   Vertical scroll passes through the page normally.
   Side-scroll / trackpad swipe / HUD arrows navigate cards.
   ============================================================ */
.carousel-session-wrapper {
    width: 100%;
    position: relative;
    background: var(--gray-bg);
    /* No artificial height — section flows naturally in the page */
}

.carousel-sticky {
    position: relative;
    width: 100%;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 0 4rem;
}

/* Horizontal scroll track with CSS snap */
.carousel-track {
    position: relative;             /* makes .div-block.offsetLeft relative to the track */
    display: flex;
    gap: 0;                         /* gap handled by card's own padding so neighbours
                                       never bleed into the visible scrollport */
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    padding: 1.5rem 0 2rem;
    box-sizing: border-box;
}
.carousel-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.carousel-track .div-block {
    width: 100%;                    /* exactly one card per viewport width — no peek */
    max-width: 100%;
    flex-shrink: 0;
    margin: 0 !important;
    opacity: 1;
    transform: none;
    scroll-snap-align: start;       /* left edge snaps flush to left of scrollport */
    transition: box-shadow 0.3s ease;
}

/* Active card gets a subtle elevation highlight */
.carousel-track .div-block.active-slide {
    box-shadow: 0 8px 32px rgba(13,59,46,.12);
}

/* is-visible class is no longer used for transforms — keep safe no-op */
.carousel-track .div-block.is-visible,
.carousel-track .div-block.active-slide.is-visible {
    opacity: 1;
    transform: none;
}