/* ═══════════════════════════════════════════════════════════════
   AQnix Global — Design System
   Single source of truth for typography, spacing, color, elevation
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
    /* Brand Colors */
    --color-navy:        #0C255C;
    --color-navy-dark:   #052237;
    --color-navy-light:  #1a3a7a;
    --color-teal:        #55B1C6;
    --color-blue:        #0063AA;
    --color-blue-light:  #0d6efd;
    --color-white:       #ffffff;
    --color-off-white:   #f7f9fc;
    --color-gray-100:    #f5f5f5;
    --color-gray-200:    #e9ecef;
    --color-gray-300:    #dee2e6;
    --color-gray-500:    #6c757d;
    --color-gray-700:    #495057;
    --color-text:        #0C255C;
    --color-text-muted:  #4a5568;
    --color-text-light:  rgba(255, 255, 255, 0.88);

    /* Typography Scale — fluid clamp() — no vw raw values */
    --text-xs:    clamp(11px, 0.75vw, 13px);
    --text-sm:    clamp(13px, 0.875vw, 14px);
    --text-base:  clamp(14px, 1vw, 16px);
    --text-md:    clamp(16px, 1.1vw, 18px);
    --text-lg:    clamp(18px, 1.25vw, 20px);
    --text-xl:    clamp(20px, 1.5vw, 24px);
    --text-2xl:   clamp(22px, 1.75vw, 28px);
    --text-3xl:   clamp(26px, 2vw, 34px);
    --text-4xl:   clamp(30px, 2.5vw, 42px);
    --text-5xl:   clamp(36px, 3vw, 52px);
    --text-hero:  clamp(32px, 3.5vw, 56px);

    /* Font Weights */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;

    /* Line Heights */
    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.5;
    --lh-relaxed: 1.6;
    --lh-loose:   1.8;

    /* Letter Spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;
    --tracking-caps:   0.1em;

    /* Spacing Scale (8px grid) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Section Padding — fluid */
    --section-py:       clamp(48px, 5vw, 80px);
    --section-py-sm:    clamp(32px, 3vw, 48px);
    --section-py-lg:    clamp(64px, 7vw, 112px);
    --container-px:     clamp(16px, 5vw, 80px);

    /* Border Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(12, 37, 92, 0.08), 0 1px 2px rgba(12, 37, 92, 0.04);
    --shadow-md:  0 4px 16px rgba(12, 37, 92, 0.12), 0 2px 6px rgba(12, 37, 92, 0.06);
    --shadow-lg:  0 10px 32px rgba(12, 37, 92, 0.16), 0 4px 12px rgba(12, 37, 92, 0.08);
    --shadow-xl:  0 20px 48px rgba(12, 37, 92, 0.2);

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-base:   0.25s ease;
    --transition-slow:   0.4s ease;

    /* Z-index layers */
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-overlay:  100;
    --z-modal:    1000;
    --z-toast:    9999;
}


/* ── GLOBAL TYPOGRAPHY RESET ────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue AQniX', Arial, sans-serif;
    font-weight: var(--weight-regular);
    line-height: var(--lh-snug);
    color: var(--color-navy);
    margin-top: 0;
    margin-bottom: var(--space-5);
}

h1 { font-size: var(--text-hero);  line-height: var(--lh-tight); }
h2 { font-size: var(--text-4xl);   line-height: var(--lh-tight); }
h3 { font-size: var(--text-3xl);   line-height: var(--lh-snug); }
h4 { font-size: var(--text-2xl);   line-height: var(--lh-snug); }
h5 { font-size: var(--text-xl);    line-height: var(--lh-normal); }
h6 { font-size: var(--text-lg);    line-height: var(--lh-normal); }

p {
    font-size: var(--text-base);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin-top: 0;
    margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-navy); }

small, .text-sm { font-size: var(--text-sm); }
.text-xs        { font-size: var(--text-xs); }


/* ── HEADING UTILITY CLASSES ────────────────────────────────── */

.section-title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-tight);
    color: var(--color-navy);
    margin-bottom: var(--space-6);
}

.section-subtitle {
    font-size: var(--text-md);
    line-height: var(--lh-relaxed);
    color: var(--color-text-muted);
    margin-bottom: var(--space-10);
    max-width: 680px;
}

.eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: var(--space-3);
    display: block;
}

.hero-title {
    font-size: var(--text-hero);
    font-weight: var(--weight-regular);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
}

.card-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--lh-snug);
    color: var(--color-navy);
    margin-bottom: var(--space-3);
}

.body-large  { font-size: var(--text-lg);  line-height: var(--lh-relaxed); }
.body-normal { font-size: var(--text-base); line-height: var(--lh-relaxed); }
.body-small  { font-size: var(--text-sm);  line-height: var(--lh-normal); }


/* ── SECTION SPACING ────────────────────────────────────────── */

.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

.section-sm {
    padding-top: var(--section-py-sm);
    padding-bottom: var(--section-py-sm);
}

.section-lg {
    padding-top: var(--section-py-lg);
    padding-bottom: var(--section-py-lg);
}

/* Override existing inconsistent section padding */
.benefits-section,
.company-description,
.content-section,
.vision-mission-values,
.therapeutic-areas-dropdowns {
    padding-top: var(--section-py) !important;
    padding-bottom: var(--section-py) !important;
}

.white-section { background-color: var(--color-white); }
.blue-section  { background-color: var(--color-navy); }
.gray-section  { background-color: var(--color-off-white); }

.blue-section h1,
.blue-section h2,
.blue-section h3,
.blue-section h4,
.blue-section h5,
.blue-section h6,
.blue-section p,
.blue-section li,
.blue-section span:not(.bi),
.blue-section .value-item,
.blue-section .about1 {
    color: #ffffff !important;
}


/* ── CONTAINER ──────────────────────────────────────────────── */

.aq-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}


/* ── BUTTONS — UNIFIED ──────────────────────────────────────── */

.btn {
    font-family: 'Helvetica Neue AQniX', Arial, sans-serif;
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: 1.4 !important;
    letter-spacing: var(--tracking-caps) !important;
    text-transform: uppercase;
    padding: 12px 28px !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
    color: var(--color-white) !important;
}
.btn-primary:hover {
    background-color: var(--color-navy-light) !important;
    border-color: var(--color-navy-light) !important;
    color: var(--color-white) !important;
}

.btn-outline {
    background-color: transparent;
    border: 1.5px solid var(--color-navy);
    color: var(--color-navy);
}
.btn-outline:hover {
    background-color: var(--color-navy);
    color: var(--color-white);
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--color-navy);
    padding: 8px 0;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-sm);
}


/* ── CARD COMPONENT ─────────────────────────────────────────── */

.aq-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.aq-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.aq-card-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    color: var(--color-navy);
    margin-bottom: var(--space-3);
}

.aq-card-body {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
}


/* ── BENEFIT / RESULT ITEMS ─────────────────────────────────── */

.benefit-item {
    font-size: var(--text-base) !important;
    line-height: var(--lh-relaxed) !important;
    margin-bottom: var(--space-5) !important;
}

.benefit-item strong {
    font-size: var(--text-base) !important;
    font-weight: var(--weight-semibold) !important;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.benefit-item p {
    font-size: var(--text-sm) !important;
    color: var(--color-text-muted);
    margin-left: calc(var(--space-6) + var(--space-2));
}

.benefits-title h3 {
    font-size: var(--text-3xl) !important;
    margin-bottom: var(--space-8) !important;
}


/* ── FORMS ──────────────────────────────────────────────────── */

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-navy);
    margin-bottom: var(--space-2);
    display: block;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.form-control,
.form-select {
    font-size: var(--text-base) !important;
    line-height: var(--lh-normal) !important;
    padding: 10px 14px !important;
    border: 1.5px solid var(--color-gray-300) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-navy) !important;
    transition: border-color var(--transition-fast) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-navy) !important;
    box-shadow: 0 0 0 3px rgba(12, 37, 92, 0.08) !important;
    outline: none !important;
}

.form-message {
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    display: none;
}


/* ── NAVIGATION ─────────────────────────────────────────────── */

.navbar .nav-link {
    font-size: var(--text-sm) !important;
    font-weight: var(--weight-medium) !important;
    letter-spacing: var(--tracking-wide) !important;
    text-transform: uppercase !important;
}

.dropdown-item {
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal) !important;
    padding: var(--space-2) var(--space-6) !important;
}


/* ── FOOTER ─────────────────────────────────────────────────── */

footer h5, footer h6 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

footer p, footer a, footer li {
    font-size: var(--text-sm);
    line-height: var(--lh-relaxed);
}


/* ── ICON SIZING ────────────────────────────────────────────── */

.icon-xs  { width: 16px; height: 16px; }
.icon-sm  { width: 20px; height: 20px; }
.icon-md  { width: 24px; height: 24px; }
.icon-lg  { width: 32px; height: 32px; }
.icon-xl  { width: 48px; height: 48px; }

i.benefit-icon,
i.solution-icon {
    font-size: 1rem !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.section-heading-icon {
    font-size: 1.4rem;
    margin-right: var(--space-2);
    vertical-align: middle;
}


/* ── HERO SECTIONS ──────────────────────────────────────────── */

.therapeutic-hero,
.fsp-hero {
    min-height: clamp(280px, 35vw, 520px);
    position: relative;
}

.hero-section-title {
    font-size: clamp(24px, 2.8vw, 44px) !important;
    line-height: var(--lh-tight) !important;
    font-weight: var(--weight-regular) !important;
}

.hero-subtitle,
.hero-conteent p {
    font-size: var(--text-md) !important;
    line-height: var(--lh-relaxed) !important;
    max-width: 640px;
}


/* ── BREADCRUMBS ────────────────────────────────────────────── */

.breadcrumb {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    margin-bottom: 0;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--color-text-light); }
.breadcrumb-item.active { color: var(--color-white); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-light); }


/* ── TABS / ACCORDIONS ──────────────────────────────────────── */

.tabs-summary span,
.accordion-tagline {
    font-size: var(--text-sm) !important;
    line-height: var(--lh-normal) !important;
}


/* ── CAREER FORM ────────────────────────────────────────────── */
.form-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* ── ACCESSIBILITY ──────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
}

/* Ensure sufficient contrast on muted text */
.text-muted { color: var(--color-text-muted) !important; }


/* ── RESPONSIVE OVERRIDES ───────────────────────────────────── */

/* Tablet — 768px to 1024px */
@media (max-width: 1024px) {
    :root {
        --section-py:    clamp(40px, 4vw, 64px);
        --container-px:  clamp(16px, 3vw, 40px);
    }
    h1 { font-size: clamp(28px, 3.5vw, 42px); }
    h2 { font-size: clamp(22px, 3vw, 34px); }
    h3 { font-size: clamp(18px, 2.5vw, 26px); }
}

/* Mobile — up to 767px */
@media (max-width: 767px) {
    :root {
        --section-py:    clamp(32px, 6vw, 48px);
        --container-px:  16px;
        --text-hero:     clamp(26px, 6vw, 36px);
        --text-4xl:      clamp(22px, 5vw, 28px);
        --text-3xl:      clamp(18px, 4vw, 22px);
        --text-2xl:      clamp(16px, 3.5vw, 20px);
        --text-base:     15px;
    }

    h1 { font-size: clamp(24px, 6vw, 34px) !important; }
    h2 { font-size: clamp(20px, 5vw, 26px) !important; }
    h3 { font-size: clamp(17px, 4vw, 20px) !important; }
    h4 { font-size: clamp(15px, 3.5vw, 18px) !important; }

    .hero-section-title {
        font-size: clamp(22px, 5.5vw, 32px) !important;
    }

    .section-title { font-size: clamp(20px, 5vw, 26px) !important; }

    .benefit-item p { margin-left: 0 !important; }

    .btn {
        font-size: 12px !important;
        padding: 10px 20px !important;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    :root {
        --section-py: 32px;
    }
    h1 { font-size: clamp(22px, 7vw, 30px) !important; }
    h2 { font-size: clamp(18px, 6vw, 24px) !important; }
}