/* ==========================================================================
   1. BRAND DESIGN SYSTEM & CSS VARIABLES
   Palette and components now follow the Industry Takeover page, so every
   page on the site shares one look. Legacy variable names are kept as
   aliases so existing pages do not break.
   ========================================================================== */
:root {
    /* Core palette (matches Industry Takeover) */
    --primary: #0284c7;
    --primary-hover: #0369a1;
    --dark-navy: #071b33;
    --slate-bg: #0f172a;
    --accent-blue: #7dd3fc;
    --soft-blue: #eaf6fc;
    --light-bg: #f8fafc;
    --card-border: #e2e8f0;

    /* Surfaces & text */
    --bg-main: #F3F4F6;
    --bg-surface: #FFFFFF;
    --bg-dark: var(--dark-navy);
    --text-primary: #334155;
    --text-dark: #0f172a;
    --text-muted: #475569;
    --text-light: #FFFFFF;
    --border-color: var(--card-border);

    /* Legacy aliases (older pages still reference these) */
    --accent-royal: var(--primary);
    --accent-cyan: var(--primary-hover);
    --accent-aqua: var(--accent-blue);

    /* Layout & spacing */
    --max-width: 1140px;
    --nav-height: 80px;
    --radius-sm: 7px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-subtle: 0 4px 20px rgba(15, 23, 42, 0.06);
    --shadow-card: 0 14px 30px -15px rgba(15, 23, 42, 0.22);
}

/* ==========================================================================
   2. RESET & GLOBAL BASE STYLES
   ========================================================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-main);
    line-height: 1.6;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

ul, ol {
    list-style: none;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

/* Visible keyboard focus everywhere */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* GLOBAL NAVBAR & LOGO LOCK */
.navbar .logo img,
.nav-brand img,
#navbar-placeholder img {
    height: 40px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   3. TYPOGRAPHY & REUSABLE UTILITIES
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* Section spacing: .page-section is the Industry Takeover name,
   .section-padding is kept for older pages. They behave the same. */
.page-section,
.section-padding {
    padding: 100px 0;
}

.section-padding {
    border-bottom: 1px solid var(--border-color);
}

.section-alt {
    background: var(--light-bg);
}

/* Small label above headings: .section-tag (new) and .kicker (legacy) */
.section-tag,
.kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.08em;
}

.section-title {
    max-width: 800px;
    margin: 0 0 18px;
    color: var(--text-dark);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.section-desc {
    max-width: 760px;
    margin: 0 0 48px;
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.lead-text {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    color: var(--text-primary);
    line-height: 1.7;
    max-width: 760px;
    margin-bottom: 24px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 25px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background-color: var(--primary);
    color: var(--text-light);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), transform var(--transition-fast);
    touch-action: manipulation;
}

.btn:hover {
    background-color: var(--primary-hover);
    color: var(--text-light);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--primary);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

/* Secondary on light backgrounds (outline) */
.btn-secondary {
    background-color: transparent;
    color: var(--text-dark);
    border-color: var(--card-border);
}

.btn-secondary:hover {
    background-color: var(--bg-surface);
    border-color: var(--primary);
    color: var(--primary);
}

/* Secondary on dark/photo backgrounds (glass) */
.hero .btn-secondary,
.takeover-hero .btn-secondary,
.on-dark .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero .btn-secondary:hover,
.takeover-hero .btn-secondary:hover,
.on-dark .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
}

.btn-full {
    width: 100%;
}

/* ---------- Shared hero pattern (for any page) ---------- */
.hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 120px 0 100px;
    background: var(--dark-navy);
    color: #ffffff;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent-blue));
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--accent-blue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.hero-badge::before {
    content: "";
    width: 34px;
    height: 1px;
    background: var(--accent-blue);
}

.hero-title {
    max-width: 900px;
    margin: 0 0 26px;
    color: #ffffff;
    font-size: clamp(2.6rem, 7vw, 5.8rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.hero-title span {
    color: var(--accent-blue);
}

.hero-lead {
    max-width: 760px;
    margin: 0 0 34px;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ==========================================================================
   4. NAVIGATION BAR & MOBILE MENU
   ========================================================================== */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    display: flex;
    align-items: center;
}

.nav-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    position: relative;
    padding: 8px 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary);
    border-radius: 2px;
}

/* Mobile toggle (hamburger) */
.nav-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    margin-right: -8px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background-color: var(--text-dark);
    transition: transform var(--transition-smooth), opacity var(--transition-fast);
}

.nav-toggle.is-active span:nth-child(1),
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2),
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active span:nth-child(3),
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   5. GRID LAYOUTS & CARDS
   ========================================================================== */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 56px;
    align-items: start;
}

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

/* Grid children may shrink instead of forcing sideways scroll */
.grid-2 > *,
.grid-3 > * {
    min-width: 0;
}

/* Generic card (same feel as the Industry Takeover cards) */
.card {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background-color: var(--bg-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
}

.card h3 {
    margin-bottom: 12px;
    color: var(--text-dark);
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
}

.card p {
    color: var(--text-muted);
    font-size: 0.97rem;
    line-height: 1.65;
}

/* Leadership feature card */
.leadership-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    overflow: hidden;
    background-color: var(--bg-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-subtle);
}

.leadership-img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    background-color: var(--dark-navy);
}

.leadership-info {
    padding: 48px;
}

/* Styled list */
.policy-list {
    list-style: none;
    margin-top: 24px;
}

.policy-list li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 28px;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
}

.policy-list li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}

/* ==========================================================================
   6. FOOTER STYLES
   ========================================================================== */
footer {
    padding: 48px 0;
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9rem;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* ==========================================================================
   7. MOBILE & TABLET RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet (max 992px) */
@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-2 {
        gap: 36px;
    }

    .leadership-card {
        grid-template-columns: 280px 1fr;
    }

    .leadership-info {
        padding: 36px;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    :root {
        --nav-height: 70px;
    }

    .container,
    .nav-container {
        padding: 0 20px;
    }

    .page-section,
    .section-padding {
        padding: 70px 0;
    }

    .section-desc {
        margin-bottom: 36px;
    }

    .hero {
        min-height: 590px;
        padding: 100px 0 80px;
    }

    /* Mobile navigation drawer */
    .nav-toggle {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        max-height: calc(100vh - var(--nav-height));
        max-height: calc(100dvh - var(--nav-height));
        overflow-y: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 20px 28px;
        background-color: var(--bg-surface);
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-card);
        transform: translateY(-150%);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--transition-smooth), opacity var(--transition-fast), visibility var(--transition-fast);
    }

    .nav-links.is-active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 8px 0;
        font-size: 1.1rem;
    }

    .nav-links a.active::after {
        bottom: 0;
    }

    /* Stack grids and the leadership card */
    .grid-2,
    .grid-3,
    .leadership-card {
        grid-template-columns: 1fr;
    }

    .grid-3 {
        gap: 18px;
    }

    .leadership-img {
        min-height: 260px;
        max-height: 340px;
    }

    .leadership-info {
        padding: 28px 22px;
    }

    .card {
        padding: 24px;
    }

    footer .container {
        flex-direction: column;
        text-align: center;
    }
}

/* Small phones (max 480px) */
@media (max-width: 480px) {
    .page-section,
    .section-padding {
        padding: 56px 0;
    }

    .hero {
        min-height: 560px;
        padding: 90px 0 64px;
    }

    .hero-badge {
        font-size: 0.72rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn,
    .btn {
        width: 100%;
    }

    .card {
        padding: 22px 20px;
    }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}