/* Aglink Professional Website Styles */

/* ============================================================
   DESIGN TOKENS — Light theme (default) + Dark theme
   ============================================================
   Semantic tokens drive the UI. Brand tokens stay constant.
   Legacy --ag-fill-* and --ag-text-* names are kept as aliases
   so existing rules keep working unchanged.
   ============================================================ */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand (constant across themes) */
    --ag-primary: #2D3F52;
    --ag-secondary: #8EC63F;
    --ag-secondary-hover: #7AB12F;
    --ag-secondary-strong: #5C8E1C;   /* AA-compliant on white */
    --ag-accent: #C7493A;
    --ag-dark: #1C2831;

    /* Surfaces */
    --ag-bg: #FFFFFF;
    --ag-bg-alt: #F5F6F7;
    --ag-surface: #FFFFFF;
    --ag-surface-elevated: #FFFFFF;

    /* Text */
    --ag-text: #2D3F52;
    --ag-text-muted: #5A6B7A;        /* darker than #666 for AA */
    --ag-text-on-brand: #FFFFFF;

    /* Lines & shadows */
    --ag-border: #E1E5E9;
    --ag-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --ag-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Navigation (always dark in light theme) */
    --ag-nav-bg: #1C2831;
    --ag-nav-text: #FFFFFF;

    /* Form fields */
    --ag-input-bg: #FFFFFF;
    --ag-input-border: #E1E5E9;

    /* Hero gradient stops — the green anchor uses the deeper AA tone
       so white hero text stays readable across the whole surface */
    --ag-hero-grad-1: #2D3F52;
    --ag-hero-grad-2: #1C2831;
    --ag-hero-grad-3: #5C8E1C;

    /* Motion + radii */
    --ag-transition: all 0.3s ease;
    --ag-border-radius: 12px;
    --ag-border-radius-sm: 6px;
    --ag-border-radius-lg: 16px;

    /* Legacy aliases — do not remove (referenced site-wide) */
    --ag-light: #F8F9FA;
    --ag-fill-1: var(--ag-bg);
    --ag-fill-2: var(--ag-bg-alt);
    --ag-text-primary: var(--ag-text);
    --ag-text-secondary: var(--ag-text-muted);
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Constants restated so they're available regardless of
       cascading-source order. */
    --ag-text-on-brand: #FFFFFF;

    /* Brand stays the same; secondary gets a slightly lighter
       variant so it carries on a dark surface. */
    --ag-secondary-strong: #B7DD6E;

    /* Surfaces */
    --ag-bg: #0F1620;
    --ag-bg-alt: #182230;
    --ag-surface: #1C2935;
    --ag-surface-elevated: #243140;

    /* Text */
    --ag-text: #E8ECF0;
    --ag-text-muted: #A8B2BD;

    /* Lines & shadows */
    --ag-border: #2A3645;
    --ag-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --ag-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    /* Navigation — slightly darker than the page so it has presence */
    --ag-nav-bg: #060B12;
    --ag-nav-text: #FFFFFF;

    /* Form fields */
    --ag-input-bg: #182230;
    --ag-input-border: #2A3645;

    /* Hero — keep brand gradient but anchor in deeper tones */
    --ag-hero-grad-1: #1C2935;
    --ag-hero-grad-2: #0A1018;
    --ag-hero-grad-3: #5C8E1C;

    --ag-light: var(--ag-bg-alt);
    --ag-fill-1: var(--ag-bg);
    --ag-fill-2: var(--ag-bg-alt);
    --ag-text-primary: var(--ag-text);
    --ag-text-secondary: var(--ag-text-muted);
}

/* Respect system preference when no explicit choice has been made */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --ag-text-on-brand: #FFFFFF;
        --ag-secondary-strong: #B7DD6E;
        --ag-bg: #0F1620;
        --ag-bg-alt: #182230;
        --ag-surface: #1C2935;
        --ag-surface-elevated: #243140;
        --ag-text: #E8ECF0;
        --ag-text-muted: #A8B2BD;
        --ag-border: #2A3645;
        --ag-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
        --ag-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
        --ag-nav-bg: #060B12;
        --ag-input-bg: #182230;
        --ag-input-border: #2A3645;
        --ag-hero-grad-1: #1C2935;
        --ag-hero-grad-2: #0A1018;
        --ag-hero-grad-3: #5C8E1C;
        --ag-light: var(--ag-bg-alt);
        --ag-fill-1: var(--ag-bg);
        --ag-fill-2: var(--ag-bg-alt);
        --ag-text-primary: var(--ag-text);
        --ag-text-secondary: var(--ag-text-muted);
    }
}

/* Reduce motion when the user asks for it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth in-page navigation that clears the fixed navbar.
   (prefers-reduced-motion above already forces scroll-behavior: auto.) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

/* Form controls inherit the brand font; 16px floor stops iOS focus zoom */
input,
button,
textarea,
select {
    font: inherit;
}

input[type="checkbox"] {
    accent-color: var(--ag-secondary-strong);
    width: 1.05em;
    height: 1.05em;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: var(--ag-text-primary);
    background-color: var(--ag-fill-1);
    font-size: 16px;
    font-weight: 300;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--ag-text-primary);
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
}

p,
.service-description,
.service-features li,
.benefit-card p,
.approach-content p,
.benefit-content p,
.contact-item-content p,
.industries-grid div,
.footer p,
.footer-bottom p,
.chat-message-content,
.image-caption {
    color: var(--ag-text-secondary);
    line-height: 1.7;
    font-weight: 300;
}

p {
    margin-bottom: 1rem;
}

.lead {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--ag-nav-bg);
    padding: 1rem 0;
    z-index: 1000;
    transition: var(--ag-transition);
    box-shadow: var(--ag-shadow);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ag-nav-text);
    text-decoration: none;
    letter-spacing: 1px;
}

.navbar-nav {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.navbar-nav a {
    color: var(--ag-nav-text);
    text-decoration: none;
    font-weight: 400;
    transition: var(--ag-transition);
    padding: 0.5rem 0;
}

.navbar-nav a:hover {
    color: var(--ag-secondary);
}

/* Active-page indicator (markup sets aria-current="page") */
.navbar-nav a[aria-current="page"] {
    color: var(--ag-secondary);
    font-weight: 600;
    border-bottom: 2px solid var(--ag-secondary);
}

.mobile-menu a[aria-current="page"] {
    color: var(--ag-secondary);
    font-weight: 600;
}

/* Between the mobile collapse (768px) and roomy desktop, tighten the nav
   so six items + the theme toggle fit without wrapping. */
@media (min-width: 769px) and (max-width: 992px) {
    .navbar-nav {
        gap: 1.1rem;
    }

    .navbar-nav a {
        font-size: 0.95rem;
    }
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--ag-nav-text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem 0.65rem;
    line-height: 1;
}

.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--ag-nav-bg);
    padding: 1rem;
    box-shadow: var(--ag-shadow-lg);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
}

.mobile-menu a {
    display: block;
    color: var(--ag-nav-text);
    text-decoration: none;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu.show {
    display: block;
}

/* Skip-to-content link for keyboard users */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--ag-secondary);
    color: var(--ag-dark);
    padding: 0.75rem 1.25rem;
    z-index: 2000;
    border-radius: 0 0 var(--ag-border-radius-sm) 0;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Theme toggle button (lives inside the nav) */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--ag-nav-text);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--ag-transition);
    line-height: 1;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--ag-secondary);
    color: var(--ag-secondary);
}

.theme-toggle .theme-toggle-sun {
    display: none;
}

.theme-toggle .theme-toggle-moon {
    display: inline-flex;
}

[data-theme="dark"] .theme-toggle .theme-toggle-sun {
    display: inline-flex;
}

[data-theme="dark"] .theme-toggle .theme-toggle-moon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .theme-toggle-sun {
        display: inline-flex;
    }
    :root:not([data-theme]) .theme-toggle .theme-toggle-moon {
        display: none;
    }
}

.mobile-menu .theme-toggle {
    margin: 0.75rem 0;
}

/* Hero Section */
.hero-section {
    padding: 120px 0 80px;
    text-align: center;
    background: linear-gradient(135deg, var(--ag-primary) 0%, var(--ag-dark) 100%);
    color: var(--ag-text-on-brand);
}

.hero-gradient {
    background: linear-gradient(135deg, var(--ag-hero-grad-1) 0%, var(--ag-hero-grad-2) 50%, var(--ag-hero-grad-3) 100%);
}

.hero-content h1 {
    color: var(--ag-text-on-brand);
    margin-bottom: 1.5rem;
    font-size: 3rem;
}

.hero-content .lead {
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* All hero copy sits on the dark gradient — never the muted slate */
.hero-content p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-content .btn-row {
    margin-top: 2rem;
}

/* Pill anchors under a hero for jumping to long page sections */
.jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.jump-nav a {
    color: var(--ag-text-on-brand);
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.08);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: var(--ag-transition);
}

.jump-nav a:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--ag-secondary);
}

/* Sections */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: var(--ag-text-primary);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--ag-text-secondary);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

/* Alternating section background (replaces per-page inline styles) */
.section-alt {
    background-color: var(--ag-fill-2);
}

/* Generic responsive card grid. min(100%, …) prevents horizontal
   overflow on narrow phones that fixed minmax() track sizes caused. */
.card-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min, 280px)), 1fr));
}

.card-grid-sm { --card-min: 250px; }
.card-grid-md { --card-min: 300px; }
.card-grid-lg { --card-min: 340px; }

.card-grid > .info-card,
.card-grid > .document-card {
    margin: 0;
}

/* Centred intro panel used at the top of most pages
   (was repeated inline style="max-width:900px; …" markup) */
.intro-panel {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem;
    border-radius: var(--ag-border-radius);
    text-align: left;
}

@media (max-width: 480px) {
    .intro-panel {
        padding: 1.75rem 1.5rem;
    }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 13px 25px; /* +1px compensates the thinner border, keeping size */
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--ag-border-radius-sm);
    transition: var(--ag-transition);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

/* Dark label on the brand green: 7.9:1 contrast in both themes
   (white on #8EC63F was 2.0:1 and failed WCAG AA). */
.btn-primary {
    background-color: var(--ag-secondary);
    color: var(--ag-dark);
    border-color: var(--ag-secondary);
}

.btn-primary:hover,
.chat-send:hover {
    background-color: var(--ag-secondary-hover);
    transform: translateY(-2px);
    box-shadow: var(--ag-shadow-lg);
}

.btn-primary:hover {
    border-color: var(--ag-secondary-hover);
    color: var(--ag-dark);
}

.btn-secondary {
    background-color: transparent;
    color: var(--ag-text-primary);
    border-color: var(--ag-primary);
}

.btn-secondary:hover {
    background-color: var(--ag-primary);
    color: var(--ag-text-on-brand);
}

/* Buttons that sit on dark gradient panels (hero, newsletter, CTA bands) */
.hero-section .btn-secondary,
.newsletter-section .btn-secondary,
.gradient-bg .btn-secondary {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.75);
}

.hero-section .btn-secondary:hover,
.newsletter-section .btn-secondary:hover,
.gradient-bg .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* Side-by-side CTAs that wrap cleanly on small screens */
.btn-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* Cards - Common Styles */
.service-card,
.service-detail-card,
.benefit-card,
.approach-item,
.case-study-card {
    background: var(--ag-fill-1);
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    transition: var(--ag-transition);
}

.service-card:hover,
.benefit-card:hover,
.approach-item:hover,
.case-study-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ag-shadow-lg);
}

.service-card,
.benefit-card {
    padding: 2rem;
    text-align: center;
    height: 100%;
    border: 1px solid var(--ag-border);
}

.service-card:hover {
    transform: translateY(-5px);
}

/* Service Cards */
.service-card h3 {
    margin-bottom: 1rem;
    color: var(--ag-text-primary);
}

.service-card p {
    margin-bottom: 1.5rem;
}

/* Service Detail Cards */
.service-detail-card {
    padding: 3rem;
    margin-bottom: 3rem;
}

.service-detail-bg {
    background: var(--ag-fill-1);
    border: 1px solid var(--ag-border);
}

.service-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.service-header .service-icon {
    margin: 0;
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
}

.service-header h3 {
    margin: 0;
    font-size: 2rem;
}

.service-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 75ch;
}

/* Icon Circles - Common Styles */
.service-icon,
.benefit-icon,
.approach-icon {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-text-on-brand);
    flex-shrink: 0;
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--ag-primary), var(--ag-secondary));
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    aspect-ratio: 1 / 1;
    min-width: 60px;
    min-height: 60px;
    max-width: 100px;
    max-height: 100px;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--ag-secondary), var(--ag-primary));
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.approach-icon {
    width: 60px;
    height: 60px;
    background: var(--ag-secondary);
    font-size: 1.5rem;
}

/* Service Benefits Section */
.service-benefits {
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--ag-fill-2);
    border-radius: var(--ag-border-radius);
    border: 1px solid var(--ag-border);
}

.service-benefits h4 {
    color: var(--ag-text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    text-align: center;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.benefit-card h5 {
    color: var(--ag-text-primary);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.benefit-card p {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Service Features */
.service-features {
    margin-top: 2rem;
}

.service-features h4 {
    color: var(--ag-text-primary);
    margin-bottom: 1rem;
}

.service-features ul {
    list-style: none;
    padding: 0;
}

.service-features li {
    padding: 0.75rem 0 0.75rem 2rem;
    position: relative;
    border-bottom: 1px solid var(--ag-border);
}

.service-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ag-secondary);
    font-weight: bold;
    font-size: 1.2rem;
}

.service-features li:last-child {
    border-bottom: none;
}

/* Images - Common Base Styles */
.service-image,
.diagram-image,
.service-section-image,
.case-study-image,
.approach-image,
.comparison-image {
    width: 100%;
    height: auto;
    border-radius: var(--ag-border-radius-sm);
    box-shadow: var(--ag-shadow);
    border: 1px solid var(--ag-border);
}

.service-image {
    max-width: 300px;
    margin: 2rem 0;
    transition: var(--ag-transition);
}

.service-image img,
.service-image video {
    width: 100%;
    display: block;
}

.service-intro-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.service-intro-image {
    flex: 0 0 40%;
    max-width: 40%;
    border-radius: var(--ag-border-radius);
    overflow: hidden;
    box-shadow: var(--ag-shadow);
    border: 1px solid var(--ag-border);
    /* Constant light canvas so the brand-coloured SVG illustrations
       always have a known, legible background regardless of theme. */
    background: #F5F6F7;
    padding: 1.25rem;
}

/* Standalone illustration block (e.g. approach-cycle hero) */
.approach-illustration {
    max-width: 720px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    background: #F5F6F7;
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
}

.approach-illustration img {
    width: 100%;
    height: auto;
    display: block;
}

.service-intro-image img {
    width: 100%;
    display: block;
}

.service-intro-row .service-description {
    flex: 1;
    margin: 0;
}

.service-image:hover,
.image-container img:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.diagram-image {
    max-width: 1000px;
    margin: 1.5rem 0;
}

.process-diagram {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 2rem 0;
    border-radius: 10px;
}

.service-section-image {
    max-width: 800px;
    margin: 1.5rem auto;
    display: block;
}

.case-study-image {
    max-width: 600px;
    margin: 1.5rem 0;
}

.approach-image {
    max-width: 500px;
    margin: 1rem 0;
}

/* Image Containers */
.diagram-container {
    margin: 3rem 0;
    text-align: center;
}

.diagram-placeholder {
    background: var(--ag-fill-2);
    border: 2px dashed var(--ag-border);
    padding: 3rem;
    margin: 2rem 0;
    border-radius: var(--ag-border-radius-sm);
    color: var(--ag-text-secondary);
    font-style: italic;
}

.image-container {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem;
}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    transition: var(--ag-transition);
}

.image-container img:hover {
    transform: scale(1.02);
}

/* Specialized Images */
.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
}

.icon-image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: block;
}

.gallery-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--ag-border-radius-sm);
    margin-bottom: 1rem;
    box-shadow: var(--ag-shadow);
    transition: var(--ag-transition);
    cursor: pointer;
}

.gallery-image:hover {
    transform: scale(1.05);
    box-shadow: var(--ag-shadow-lg);
}

.comparison-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.comparison-label {
    text-align: center;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--ag-text-primary);
}

.team-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: var(--ag-shadow);
    border: 3px solid var(--ag-secondary);
}

.tech-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 1rem;
    filter: grayscale(100%);
    transition: var(--ag-transition);
}

.tech-image:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.image-caption {
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
}

/* Lazy Loading Images */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-image.loaded {
    opacity: 1;
}

.image-placeholder {
    background: linear-gradient(90deg, var(--ag-fill-2) 25%, transparent 50%, var(--ag-fill-2) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: var(--ag-border-radius-sm);
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Charts */
.chart-container {
    position: relative;
    height: 400px;
    margin: 2rem 0;
}

/* Process Flow */
.process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.process-step {
    text-align: center;
    max-width: 150px;
}

.process-step-circle {
    width: 60px;
    height: 60px;
    background: var(--ag-primary);
    color: var(--ag-text-on-brand);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-weight: bold;
    font-size: 1.2rem;
}

.process-step h4 {
    color: var(--ag-text-primary);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.process-step p {
    font-size: 0.9rem;
    margin: 0;
}

.process-arrow {
    color: var(--ag-secondary);
    font-size: 2rem;
    font-weight: bold;
}

/* Approach Section */
.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.approach-item {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
}

.approach-content h4 {
    margin-bottom: 0.75rem;
    color: var(--ag-text-primary);
}

.approach-content p {
    margin: 0;
    font-size: 0.95rem;
}

/* Case Studies */
.case-study-card {
    padding: 2rem;
    border-left: 4px solid var(--ag-secondary);
}

.case-study-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.case-study-header i {
    color: var(--ag-secondary);
    font-size: 1.5rem;
}

.case-study-header h4 {
    margin: 0;
    color: var(--ag-text-primary);
}

.case-study-result {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--ag-fill-2);
    border-radius: var(--ag-border-radius-sm);
    border-left: 3px solid var(--ag-secondary);
}

.case-study-result p {
    margin: 0;
    color: var(--ag-secondary);
    font-weight: 600;
}

.case-study-result h4 {
    color: var(--ag-text-primary);
    margin-bottom: 1rem;
}

/* Headline stats inside case studies */
.result-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1.5rem;
}

.result-stat {
    text-align: center;
}

.result-stat .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ag-secondary-strong);
    line-height: 1.2;
}

.result-stat p {
    margin: 0;
    font-weight: 500;
}

/* Small context chips on case-study headers (industry · scope) */
.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.case-meta span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ag-text-secondary);
    background: var(--ag-fill-2);
    border: 1px solid var(--ag-border);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, var(--ag-primary), var(--ag-dark));
    padding: 60px 0;
    color: var(--ag-text-on-brand);
}

/* Headings inherit the global navy text colour, which disappears on
   these dark gradient panels — pin them to the on-brand colour. */
.newsletter-section h2,
.gradient-bg h2 {
    color: var(--ag-text-on-brand);
}

.newsletter-section p,
.gradient-bg p {
    color: var(--ag-text-on-brand);
}

.newsletter-form {
    display: flex;
    max-width: 440px;
    margin: 0 auto;
    gap: 1rem;
}

.newsletter-input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: var(--ag-border-radius-sm);
    font-size: 1rem;
}

.newsletter-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 1rem auto 0;
    max-width: 440px;
}

.newsletter-note a {
    color: rgba(255, 255, 255, 0.9);
}

/* Inline submission feedback (replaces alert() popups) */
.form-status {
    margin-top: 0.85rem;
    font-weight: 500;
    min-height: 1.2em;
}

.form-status.success {
    color: var(--ag-secondary-strong);
}

.form-status.error {
    color: var(--ag-accent);
}

/* The newsletter band is always dark — use light feedback tints there */
.newsletter-section .form-status.success {
    color: #B7DD6E;
}

.newsletter-section .form-status.error {
    color: #F2B8B5;
}

.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color: var(--ag-accent);
}

/* Consent checkbox row on contact forms */
.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--ag-text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.consent-label a {
    color: var(--ag-secondary-strong);
    font-weight: 600;
}

/* Contact Section */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
}

.contact-form {
    background: var(--ag-fill-1);
    padding: 2.5rem;
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
}

.contact-info {
    background: var(--ag-fill-2);
    padding: 2.5rem;
    border-radius: var(--ag-border-radius);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 400;
    color: var(--ag-text-primary);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--ag-border);
    border-radius: var(--ag-border-radius-sm);
    font-size: 1rem;
    transition: var(--ag-transition);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--ag-secondary);
}

.form-textarea {
    height: 120px;
    resize: vertical;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-item i {
    color: var(--ag-secondary);
    font-size: 1.2rem;
    margin-top: 0.3rem;
}

.contact-item-content h5 {
    margin-bottom: 0.25rem;
    color: var(--ag-text-primary);
    font-weight: 500;
}

.contact-item-content p {
    margin: 0;
}

.contact-item-content a {
    color: var(--ag-text-secondary);
    text-decoration: underline;
    text-decoration-color: var(--ag-secondary);
    text-underline-offset: 3px;
    transition: var(--ag-transition);
}

.contact-item-content a:hover {
    color: var(--ag-secondary-strong);
}

.industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.industries-grid div {
    font-size: 0.95rem;
}

/* Footer */
.footer {
    background-color: var(--ag-dark);
    color: var(--ag-text-on-brand);
    padding: 60px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 3rem;
    margin-bottom: 2rem;
}

/* Text-style action button used in the footer (chatbot modal trigger) */
.footer-text-btn {
    background: none;
    border: none;
    color: var(--ag-secondary);
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 0;
}

.footer-text-btn:hover {
    color: var(--ag-secondary-hover);
    text-decoration: underline;
}

.footer h5 {
    color: var(--ag-text-on-brand);
    margin-bottom: 1rem;
}

.footer ul {
    list-style: none;
}

.footer li {
    margin-bottom: 0.5rem;
}

.footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--ag-transition);
}

.footer a:hover {
    color: var(--ag-secondary);
}

.footer-divider {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 2rem 0;
}

.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

/* Floating Chatbot */
.floating-chat {
    position: fixed;
    bottom: max(30px, env(safe-area-inset-bottom, 0px));
    right: max(30px, env(safe-area-inset-right, 0px));
    z-index: 1001;
}

.chat-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ag-secondary), var(--ag-primary));
    border: none;
    color: var(--ag-text-on-brand);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--ag-shadow-lg);
    transition: var(--ag-transition);
}

.chat-button:hover {
    transform: scale(1.1);
}

.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    height: min(560px, calc(100vh - 120px));
    background: var(--ag-surface);
    border-radius: var(--ag-border-radius-lg);
    box-shadow: var(--ag-shadow-lg);
    border: 1px solid var(--ag-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-window.hidden {
    display: none;
}

.chat-header {
    background: var(--ag-primary);
    color: var(--ag-text-on-brand);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ag-text-on-brand); /* global heading navy = header bg navy */
}

/* Honest framing: the assistant is a scripted demo, say so up front */
.chat-header-note {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 300;
}

.chat-close {
    background: none;
    border: none;
    color: var(--ag-text-on-brand);
    cursor: pointer;
    font-size: 1.2rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -10px -10px -10px 0;
}

.chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background: var(--ag-fill-2);
}

.chat-message {
    margin-bottom: 1rem;
}

.chat-message.user .chat-message-content {
    background: var(--ag-secondary);
    color: var(--ag-dark);
    margin-left: 2rem;
}

.chat-message.bot .chat-message-content {
    background: var(--ag-fill-1);
    margin-right: 2rem;
}

.chat-message-content {
    padding: 0.75rem 1rem;
    border-radius: var(--ag-border-radius);
    font-size: 0.9rem;
    line-height: 1.4;
}

.chat-input-area {
    padding: 1rem;
    background: var(--ag-fill-1);
    display: flex;
    gap: 0.5rem;
}

.chat-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--ag-border);
    border-radius: 20px;
    outline: none;
    font-size: 1rem; /* 16px floor prevents iOS focus zoom */
    min-width: 0;
}

.chat-send {
    background: var(--ag-secondary);
    border: none;
    color: var(--ag-dark);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--ag-transition);
    flex-shrink: 0;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay.hidden {
    display: none;
}

.modal-content {
    background: var(--ag-fill-1);
    border-radius: var(--ag-border-radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--ag-shadow-lg);
}

.modal-header {
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid var(--ag-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    color: var(--ag-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--ag-text-secondary);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -10px -10px -10px 0;
}

.modal-body {
    padding: 2rem;
}

.modal-section {
    margin-bottom: 2rem;
}

.modal-section h4 {
    color: var(--ag-text-primary);
    margin-bottom: 1rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--ag-fill-2);
    border-radius: var(--ag-border-radius-sm);
    margin-bottom: 1rem;
}

.benefit-item i {
    color: var(--ag-secondary);
    font-size: 1.2rem;
}

.benefit-content h5 {
    margin-bottom: 0.25rem;
    color: var(--ag-text-primary);
}

.benefit-content p {
    margin: 0;
    font-size: 0.9rem;
}

/* CTA Section — ends on the dark brand tone so white copy passes AA
   across the whole band (previously ended on full-saturation green). */
.gradient-bg {
    background: linear-gradient(135deg, var(--ag-primary) 0%, var(--ag-dark) 70%, var(--ag-hero-grad-3) 130%);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 2rem;
}

.mb-6 {
    margin-bottom: 3rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-6 {
    margin-top: 3rem;
}

.ml-3 {
    margin-left: 1rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.hidden {
    display: none;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.6s ease-in;
}

/* JS adds .pre-fade before observing, so scroll-reveal elements start
   genuinely hidden and only animate in once. Without JS nothing is
   hidden and the page renders normally. */
.pre-fade {
    opacity: 0;
}

.pre-fade.fade-in {
    opacity: 1;
}

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

/* FAQ accordion built on native <details>/<summary> — keyboard and
   screen-reader operable with no JavaScript. */
.faq-item {
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ag-text-primary);
    user-select: none;
    transition: var(--ag-transition);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--ag-secondary-strong);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item[open] summary::before {
    transform: rotate(90deg);
}

.faq-item summary:hover {
    background: rgba(142, 198, 63, 0.08);
}

.faq-answer {
    padding: 0 2rem 1.5rem;
}

.faq-answer p {
    color: var(--ag-text-secondary);
    margin: 0;
}

@media (max-width: 480px) {
    .faq-item summary {
        padding: 1.1rem 1.25rem;
    }

    .faq-answer {
        padding: 0 1.25rem 1.1rem;
    }
}

/* Long-form legal/policy pages (privacy) */
.legal-content {
    max-width: 820px;
}

.legal-content h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
    scroll-margin-top: 100px;
}

.legal-content ul {
    padding-left: 1.5rem;
    line-height: 1.8;
    color: var(--ag-text-secondary);
    margin-bottom: 1rem;
}

.legal-content a {
    color: var(--ag-secondary-strong);
    font-weight: 600;
}

.legal-toc {
    background: var(--ag-fill-2);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-border-radius);
    padding: 1.5rem 2rem;
    margin: 1.5rem 0 0;
}

.legal-toc ol {
    columns: 2;
    column-gap: 2.5rem;
    padding-left: 1.25rem;
    margin: 0;
}

.legal-toc li {
    margin-bottom: 0.4rem;
}

.legal-toc a {
    color: var(--ag-text-secondary);
    text-decoration: none;
    font-weight: 400;
}

.legal-toc a:hover {
    color: var(--ag-secondary-strong);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .legal-toc ol {
        columns: 1;
    }
}

/* Responsive Design */

/* Medium Tablet */
@media (max-width: 1024px) {
    .service-icon {
        width: 75px;
        height: 75px;
        font-size: 1.9rem;
    }
}

@media (max-width: 900px) {
    .service-icon {
        width: 72px;
        height: 72px;
        font-size: 1.8rem;
    }
}

/* Tablet and Mobile */
@media (max-width: 768px) {
    .service-intro-row {
        flex-direction: column;
    }

    .service-intro-image {
        flex: none;
        max-width: 100%;
    }

    .mobile-menu-btn {
        display: block;
    }

    .navbar-nav {
        display: none;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .benefits-grid,
    .approach-grid,
    .industries-grid {
        grid-template-columns: 1fr;
    }

    .process-flow {
        flex-direction: column;
    }

    .process-arrow {
        transform: rotate(90deg);
    }

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

    .newsletter-form {
        flex-direction: column;
    }

    .chat-window {
        width: calc(100vw - 40px);
        max-width: 360px;
        height: 70vh;
        max-height: 520px;
    }

    .floating-chat {
        bottom: 20px;
        right: 20px;
    }

    .service-icon {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
        margin: 0 auto 1.25rem;
    }

    .service-image {
        max-width: 100%;
        margin: 1.5rem 0;
        border-radius: var(--ag-border-radius-sm);
    }

    .diagram-image {
        max-width: 100%;
        margin: 1rem 0;
    }

    .comparison-container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .team-image {
        width: 150px;
        height: 150px;
    }

    .tech-image {
        width: 60px;
        height: 60px;
        margin: 0.5rem;
    }

    .gallery-image {
        height: 200px;
    }

    .hero-image {
        height: 250px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .service-detail-card {
        padding: 2rem 1.5rem;
    }

    .service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .service-header h3 {
        font-size: 1.5rem;
    }

    .service-benefits {
        padding: 1.5rem;
    }

    .benefit-card {
        padding: 1.25rem;
    }

    .modal-content {
        margin: 1rem;
    }

    .modal-header,
    .modal-body {
        padding: 1.5rem;
    }

    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin: 0 auto 1rem;
        min-width: 60px;
        min-height: 60px;
    }

    .service-image,
    .diagram-image,
    .case-study-image {
        margin: 1rem 0;
        border-radius: var(--ag-border-radius-sm);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .diagram-image {
        margin: 0.75rem 0;
    }

    .team-image {
        width: 120px;
        height: 120px;
    }

    .tech-image {
        width: 50px;
        height: 50px;
        margin: 0.25rem;
    }

    .gallery-image {
        height: 150px;
    }

    .hero-image {
        height: 200px;
    }

    .icon-image {
        width: 48px;
        height: 48px;
    }
}

/* ========================================
   ISO MANAGEMENT SYSTEM PAGES
   ======================================== */

/* ISO Page Layout */
.iso-page {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 3rem;
    max-width: 1400px;
    margin: 80px auto 0;
    padding: 2rem;
}

.iso-main-content {
    min-width: 0;
}

/* ISO Navigation Sidebar */
.nav-sidebar {
    position: sticky;
    top: 100px;
    background: var(--ag-fill-2);
    padding: 2rem;
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    height: fit-content;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.nav-sidebar h4 {
    color: var(--ag-text-primary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ag-secondary);
}

.nav-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--ag-text-primary);
    text-decoration: none;
    border-radius: var(--ag-border-radius-sm);
    margin-bottom: 0.5rem;
    transition: var(--ag-transition);
    font-size: 0.95rem;
}

.nav-link:hover {
    background: var(--ag-fill-1);
    color: var(--ag-secondary);
    transform: translateX(5px);
}

.nav-link-sub {
    padding-left: 2rem;
    font-size: 0.9rem;
    color: var(--ag-text-secondary);
}

/* ISO Content Sections */
.section-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid var(--ag-secondary);
}

.section-header h1 {
    color: var(--ag-text-primary);
    font-size: 2.5rem;
    margin: 0;
}

.content-section {
    margin-bottom: 3rem;
}

/* ISO content sections use a left-bordered title; renamed to
   avoid colliding with the centered .section-title used elsewhere. */
.iso-section-title,
.iso-page .section-title {
    color: var(--ag-text-primary);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--ag-secondary);
    text-align: left;
}

.subsection-title {
    color: var(--ag-text-primary);
    font-size: 1.3rem;
    margin: 2rem 0 1rem;
    font-weight: 600;
}

.content-body {
    line-height: 1.8;
}

.content-body p {
    margin-bottom: 1.5rem;
}

/* ISO Info Boxes */
.highlight-box,
.scope-box,
.climate-box,
.process-box {
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: var(--ag-border-radius);
    border-left: 4px solid var(--ag-secondary);
}

.highlight-box {
    background: linear-gradient(135deg, rgba(142, 198, 63, 0.1), rgba(45, 63, 82, 0.05));
    font-style: italic;
    color: var(--ag-text-primary);
}

.scope-box {
    background: var(--ag-fill-2);
    border-left-color: var(--ag-primary);
}

.climate-box {
    background: rgba(142, 198, 63, 0.15);
    border-left-color: var(--ag-secondary);
}

.process-box {
    background: var(--ag-fill-2);
    border-left-color: var(--ag-accent);
}

.info-card,
.document-card {
    background: var(--ag-fill-1);
    padding: 1.5rem;
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    margin: 1.5rem 0;
    border: 1px solid var(--ag-border);
}

.info-card h4,
.document-card h4 {
    color: var(--ag-text-primary);
    margin-top: 0;
    margin-bottom: 1rem;
}

.info-card ul,
.document-card ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
    color: var(--ag-text-secondary);
}

.info-card li,
.document-card li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Requirement Lists */
.requirement-list {
    margin: 1.5rem 0;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: var(--ag-fill-2);
    border-radius: var(--ag-border-radius-sm);
    transition: var(--ag-transition);
}

.requirement-item:hover {
    background: var(--ag-fill-1);
    box-shadow: var(--ag-shadow);
}

.step-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: var(--ag-secondary);
    color: var(--ag-text-on-brand);
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Tab System */
.tab-container {
    margin: 2rem 0;
    background: var(--ag-fill-1);
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    overflow: hidden;
}

.tab-header {
    display: flex;
    background: var(--ag-fill-2);
    border-bottom: 2px solid var(--ag-border);
}

.tab-button {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--ag-text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ag-transition);
    font-size: 1rem;
    border-bottom: 3px solid transparent;
}

.tab-button:hover {
    background: rgba(142, 198, 63, 0.1);
    color: var(--ag-text-primary);
}

.tab-button.active {
    background: var(--ag-fill-1);
    color: var(--ag-text-primary);
    border-bottom-color: var(--ag-secondary);
}

.tab-content {
    padding: 2rem;
    display: none;
}

.tab-section-header {
    color: var(--ag-text-primary);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ag-border);
}

/* Dividers */
.divider {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--ag-border), transparent);
    margin: 3rem 0;
}

/* ISO Tables */
.iso-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: var(--ag-fill-1);
    box-shadow: var(--ag-shadow);
    border-radius: var(--ag-border-radius);
    overflow: hidden;
}

.iso-table thead {
    background: var(--ag-primary);
    color: var(--ag-text-on-brand);
}

.iso-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.iso-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--ag-border);
    color: var(--ag-text-secondary);
}

.iso-table tbody tr:hover {
    background: var(--ag-fill-2);
}

.iso-table tbody tr:last-child td {
    border-bottom: none;
}

/* ISO Breadcrumbs */
.iso-breadcrumb {
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.iso-breadcrumb a {
    color: var(--ag-text-secondary);
    text-decoration: none;
    transition: var(--ag-transition);
}

.iso-breadcrumb a:hover {
    color: var(--ag-secondary);
}

.iso-breadcrumb span {
    margin: 0 0.5rem;
    color: var(--ag-text-secondary);
}

/* ISO Action Boxes */
.action-box {
    background: linear-gradient(135deg, var(--ag-primary), var(--ag-dark));
    color: var(--ag-text-on-brand);
    padding: 2rem;
    border-radius: var(--ag-border-radius);
    margin: 2rem 0;
}

.action-box h4 {
    color: var(--ag-text-on-brand);
    margin-top: 0;
}

/* ISO Warning/Note Boxes */
.warning-box {
    background: rgba(199, 73, 58, 0.1);
    border-left: 4px solid var(--ag-accent);
    padding: 1.5rem;
    border-radius: var(--ag-border-radius);
    margin: 1.5rem 0;
}

.note-box {
    background: rgba(142, 198, 63, 0.1);
    border-left: 4px solid var(--ag-secondary);
    padding: 1.5rem;
    border-radius: var(--ag-border-radius);
    margin: 1.5rem 0;
}

/* ========================================
   IMS TOOLS SECTION
   ======================================== */

/* IMS Tool Cards Grid */
.ims-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Individual Tool Card */
.ims-tool-card {
    background: var(--ag-fill-1);
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    border: 1px solid var(--ag-border);
    overflow: hidden;
    transition: var(--ag-transition);
}

.ims-tool-card:hover {
    box-shadow: var(--ag-shadow-lg);
}

/* Tool Card Header */
.ims-tool-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 0.75rem;
}

.ims-tool-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--ag-text-on-brand);
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ims-tool-title-group h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--ag-text-primary);
}

.ims-tool-title-group .ims-tool-alignment {
    margin: 0.25rem 0 0 0;
    font-size: 0.85rem;
    color: var(--ag-text-secondary);
    font-style: italic;
    line-height: 1.4;
}

/* Tool Purpose Paragraph */
.ims-tool-purpose {
    color: var(--ag-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

/* Collapsible IPO Sections */
.ims-tool-body {
    padding: 0.5rem 1.5rem 1.5rem;
}

.ims-ipo-section {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-border-radius-sm);
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.ims-ipo-section:last-child {
    margin-bottom: 0;
}

.ims-ipo-section summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ag-text-primary);
    background: var(--ag-fill-2);
    transition: var(--ag-transition);
    list-style: none;
    user-select: none;
}

.ims-ipo-section summary::-webkit-details-marker {
    display: none;
}

.ims-ipo-section summary::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--ag-text-secondary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.ims-ipo-section[open] summary::before {
    transform: rotate(90deg);
}

.ims-ipo-section summary:hover {
    background: rgba(142, 198, 63, 0.1);
}

.ims-ipo-section summary .ims-ipo-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ag-border-radius-sm);
    color: var(--ag-text-on-brand);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ims-ipo-section summary .ims-ipo-icon.ims-input-icon {
    background: #1976D2;
}

.ims-ipo-section summary .ims-ipo-icon.ims-process-icon {
    background: #7B1FA2;
}

.ims-ipo-section summary .ims-ipo-icon.ims-output-icon {
    background: #2E7D32;
}

.ims-ipo-content {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ag-border);
}

.ims-ipo-content ul {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--ag-text-secondary);
}

.ims-ipo-content li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
    font-size: 0.92rem;
}

.ims-ipo-content li:last-child {
    margin-bottom: 0;
}

/* IMS Section Intro */
.ims-intro-text {
    max-width: 900px;
    margin: 0 auto 1rem;
    color: var(--ag-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
}

/* IMS Responsive */
@media (max-width: 768px) {
    .ims-tools-grid {
        grid-template-columns: 1fr;
    }

    .ims-tool-header {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .ims-tool-body {
        padding: 0.5rem 1.25rem 1.25rem;
    }

    .ims-tool-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .ims-tool-title-group h3 {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .ims-tools-grid {
        grid-template-columns: 1fr;
    }

    .ims-tool-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ISO Responsive Design */
@media (max-width: 1024px) {
    .iso-page {
        grid-template-columns: 1fr;
    }

    .nav-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .iso-page {
        padding: 1rem;
        margin-top: 60px;
    }

    .section-header h1 {
        font-size: 2rem;
    }

    /* Scoped to ISO pages — previously leaked onto every page's
       centred .section-title and overrode the intended 2rem rule. */
    .iso-section-title,
    .iso-page .section-title {
        font-size: 1.5rem;
    }

    .tab-header {
        flex-direction: column;
    }

    .tab-button {
        border-bottom: 1px solid var(--ag-border);
        border-left: 3px solid transparent;
    }

    .tab-button.active {
        border-left-color: var(--ag-secondary);
        border-bottom-color: var(--ag-border);
    }

    .iso-table {
        font-size: 0.9rem;
    }

    .iso-table th,
    .iso-table td {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .requirement-item {
        flex-direction: column;
        gap: 0.5rem;
    }

    .step-counter {
        align-self: flex-start;
    }

    .nav-sidebar {
        padding: 1.5rem;
    }
}

/* ============================================================
   THIRD-PARTY LOGOS — keep their canvas constant across themes
   ============================================================ */

/* The Forward ERP mark is fixed-colour artwork (navy + red on
   white). Pin it on a constant white pill so it reads on dark
   surface cards too. */
.erp-logo-link {
    display: inline-block;
    background: #FFFFFF;
    padding: 1.25rem 1.75rem;
    border-radius: var(--ag-border-radius);
    box-shadow: var(--ag-shadow);
    border: 1px solid var(--ag-border);
    transition: var(--ag-transition);
}

.erp-logo-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--ag-shadow-lg);
}

.erp-logo {
    max-width: 320px;
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   ACCESSIBILITY — visible focus, contrast fixes
   ============================================================ */

/* Single, consistent focus ring for keyboard users.
   The previous styles used `outline: none` without a replacement,
   which fails WCAG 2.4.7. */
:focus-visible {
    outline: 2px solid var(--ag-secondary);
    outline-offset: 2px;
    border-radius: 2px;
}

.btn:focus-visible,
.theme-toggle:focus-visible,
.chat-button:focus-visible,
.chat-send:focus-visible,
.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--ag-secondary);
    outline-offset: 3px;
}

.form-input:focus,
.form-textarea:focus,
.chat-input:focus,
.newsletter-input:focus {
    outline: 2px solid var(--ag-secondary);
    outline-offset: 1px;
    border-color: var(--ag-secondary);
}

/* Use the AA-compliant secondary tone for green text on light surfaces.
   #8EC63F on white = 2.0:1 (fail). #5C8E1C on white = 4.6:1 (pass). */
.case-study-result p,
.footer a:hover,
.navbar-nav a:hover,
.nav-link:hover,
.iso-breadcrumb a:hover {
    color: var(--ag-secondary-strong);
}

/* ============================================================
   DARK THEME — targeted overrides
   ============================================================ */

[data-theme="dark"] body {
    background-color: var(--ag-bg);
    color: var(--ag-text);
}

[data-theme="dark"] .hero-section,
[data-theme="dark"] .hero-gradient {
    background: linear-gradient(135deg, var(--ag-hero-grad-1) 0%, var(--ag-hero-grad-2) 50%, var(--ag-hero-grad-3) 100%);
}

[data-theme="dark"] .newsletter-section,
[data-theme="dark"] .gradient-bg,
[data-theme="dark"] .action-box {
    background: linear-gradient(135deg, var(--ag-surface), var(--ag-bg));
}

[data-theme="dark"] .footer {
    background-color: var(--ag-nav-bg);
}

[data-theme="dark"] .service-card,
[data-theme="dark"] .service-detail-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .approach-item,
[data-theme="dark"] .case-study-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .document-card,
[data-theme="dark"] .ims-tool-card,
[data-theme="dark"] .contact-form,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .chat-window,
[data-theme="dark"] .tab-container,
[data-theme="dark"] .iso-table {
    background: var(--ag-surface);
    border-color: var(--ag-border);
}

[data-theme="dark"] .contact-info,
[data-theme="dark"] .service-benefits,
[data-theme="dark"] .scope-box,
[data-theme="dark"] .process-box,
[data-theme="dark"] .requirement-item,
[data-theme="dark"] .benefit-item,
[data-theme="dark"] .case-study-result,
[data-theme="dark"] .nav-sidebar,
[data-theme="dark"] .ims-ipo-section summary,
[data-theme="dark"] .tab-button,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-input-area {
    background: var(--ag-bg-alt);
}

[data-theme="dark"] .chat-message.bot .chat-message-content {
    background: var(--ag-surface-elevated);
    color: var(--ag-text);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .chat-input,
[data-theme="dark"] .newsletter-input {
    background: var(--ag-input-bg);
    border-color: var(--ag-input-border);
    color: var(--ag-text);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder,
[data-theme="dark"] .chat-input::placeholder,
[data-theme="dark"] .newsletter-input::placeholder {
    color: var(--ag-text-muted);
    opacity: 0.7;
}

/* Outline button — invert in dark so it stays visible. */
[data-theme="dark"] .btn-secondary {
    color: var(--ag-text);
    border-color: var(--ag-text);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--ag-text);
    color: var(--ag-bg);
}

/* The ISO standards section inlines bright Material colours for
   icons (#1976D2, #2E7D32, #FF6F00, #7B1FA2). They survive on dark
   thanks to their saturation, but the hard-coded #666 ordered-list
   text in the chatbot modal needs a swap. */
[data-theme="dark"] .modal-body ol[style*="color: #666"],
[data-theme="dark"] .modal-body p[style*="color: #666"] {
    color: var(--ag-text-muted) !important;
}

[data-theme="dark"] .iso-table thead {
    background: var(--ag-surface-elevated);
}

[data-theme="dark"] .iso-table tbody tr:hover {
    background: var(--ag-surface);
}

/* Highlight boxes use rgba mixed onto light background — flatten
   to a solid surface in dark for legibility. */
[data-theme="dark"] .highlight-box,
[data-theme="dark"] .climate-box,
[data-theme="dark"] .note-box,
[data-theme="dark"] .warning-box {
    background: var(--ag-bg-alt);
    color: var(--ag-text);
}

[data-theme="dark"] .image-placeholder {
    background: linear-gradient(90deg, var(--ag-bg-alt) 25%, transparent 50%, var(--ag-bg-alt) 75%);
}

/* Tech images go full-saturation in dark (grayscale + dark = mud) */
[data-theme="dark"] .tech-image {
    filter: grayscale(0%) brightness(0.95);
}

/* System-preference dark — same overrides when no explicit theme is set. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) body {
        background-color: var(--ag-bg);
        color: var(--ag-text);
    }

    :root:not([data-theme]) .hero-section,
    :root:not([data-theme]) .hero-gradient {
        background: linear-gradient(135deg, var(--ag-hero-grad-1) 0%, var(--ag-hero-grad-2) 50%, var(--ag-hero-grad-3) 100%);
    }

    :root:not([data-theme]) .newsletter-section,
    :root:not([data-theme]) .gradient-bg,
    :root:not([data-theme]) .action-box {
        background: linear-gradient(135deg, var(--ag-surface), var(--ag-bg));
    }

    :root:not([data-theme]) .footer {
        background-color: var(--ag-nav-bg);
    }

    :root:not([data-theme]) .service-card,
    :root:not([data-theme]) .service-detail-card,
    :root:not([data-theme]) .benefit-card,
    :root:not([data-theme]) .approach-item,
    :root:not([data-theme]) .case-study-card,
    :root:not([data-theme]) .info-card,
    :root:not([data-theme]) .document-card,
    :root:not([data-theme]) .ims-tool-card,
    :root:not([data-theme]) .contact-form,
    :root:not([data-theme]) .modal-content,
    :root:not([data-theme]) .chat-window,
    :root:not([data-theme]) .tab-container,
    :root:not([data-theme]) .iso-table {
        background: var(--ag-surface);
        border-color: var(--ag-border);
    }

    :root:not([data-theme]) .contact-info,
    :root:not([data-theme]) .service-benefits,
    :root:not([data-theme]) .scope-box,
    :root:not([data-theme]) .process-box,
    :root:not([data-theme]) .requirement-item,
    :root:not([data-theme]) .benefit-item,
    :root:not([data-theme]) .case-study-result,
    :root:not([data-theme]) .nav-sidebar,
    :root:not([data-theme]) .ims-ipo-section summary,
    :root:not([data-theme]) .tab-button,
    :root:not([data-theme]) .chat-messages,
    :root:not([data-theme]) .chat-input-area {
        background: var(--ag-bg-alt);
    }

    :root:not([data-theme]) .form-input,
    :root:not([data-theme]) .form-textarea,
    :root:not([data-theme]) .chat-input,
    :root:not([data-theme]) .newsletter-input {
        background: var(--ag-input-bg);
        border-color: var(--ag-input-border);
        color: var(--ag-text);
    }

    :root:not([data-theme]) .btn-secondary {
        color: var(--ag-text);
        border-color: var(--ag-text);
    }

    :root:not([data-theme]) .btn-secondary:hover {
        background-color: var(--ag-text);
        color: var(--ag-bg);
    }
}