@import 'services.css';
@import 'galerie.css';

/* ============================================================
VARIABLES & RESET
============================================================ */
    :root {
    --color-black : #fff;
    --color-bg: #f8f7f4; 
    --color-surface: #ffffff; 
    --color-surface-alt: #f0ede8;
    --color-border: #d4cfc8; 
    --color-text: #1a1a18; 
    --color-text-muted: #4a4a44;
    --color-accent: #1a5276; 
    --color-accent-dark: #1a5276; 
    --color-accent-hover: #154360; 
    --color-accent-light: #d6eaf8;
    --color-success: #0c582b; 
    --color-error: #8b1a1a; 
    --color-focus: #0066cc;
    --font-body: 'Georgia', 'Times New Roman', serif;
    --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-dyslexic: 'OpenDyslexic', 'Comic Sans MS', cursive;
    --radius: 4px; 
    --radius-lg: 8px; 
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.12); 
    --transition: 0.2s ease; 
    --max-width: 1100px;
    }

    /* Dark theme */
    [data-theme="dark"] {
    --color-black : #111;
    --color-bg:#0f0f0e; 
    --color-surface:#1c1c1a; 
    --color-surface-alt:#252522;
    --color-border:#3a3a36; 
    --color-text:#e8e6e0; 
    --color-text-muted:#b4b0a9;
    --color-accent:#7eb8e8; 
    --color-accent-hover:#a8d0f0; 
    --color-accent-dark:#1a5b91;
    --color-accent-light:#1a2e3d; 
    --color-focus:#7eb8e8;
    --color-success: #00cc00;
    }

    /* High contrast */
    [data-contrast="high"] { 
    --color-text:#000000; 
    --color-bg:#ffffff; 
    --color-accent:#00008b; 
    --color-border:#000000; 
    }

    [data-theme="dark"][data-contrast="high"] { 
    --color-text:#ffffff; 
    --color-bg:#000000; 
    --color-accent:#ffff00; 
    --color-border:#ffffff; 
    }

    /* Colorblind filters */
    [data-colorblind="deuteranopia"] { 
    filter: url(#deuteranopia); 
    }

    [data-colorblind="protanopia"] { 
    filter: url(#protanopia); 
    }

    [data-colorblind="tritanopia"] { 
    filter: url(#tritanopia); 
    }

    /* Dyslexic font */
    [data-font="dyslexic"] body,
    [data-font="dyslexic"] p,
    [data-font="dyslexic"] li,
    [data-font="dyslexic"] label {
        font-family: var(--font-dyslexic) !important;
        letter-spacing: 0.05em;
        word-spacing: 0.1em;
        line-height: 1.8;
    }


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

    html {
        font-size: 100%;
        scroll-behavior: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
        html { 
            scroll-behavior: auto; 
        }
        *, *::before, *::after { 
            animation-duration: 0.01ms !important; 
            transition-duration: 0.01ms !important; 
        }
    }

    body {
        background-color: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-ui);
        font-size: 1rem;
        line-height: 1.6;
        min-height: 100vh;
    }

/* ============================================================
VISUALLY HIDDEN (screen reader only)
============================================================ */
    .sr-only {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0;
    }

/* ============================================================
SKIP LINKS
============================================================ */
    .skip-links {
        position: absolute;
        top: 0; 
        left: 0;
        z-index: 9999;
        display: flex;
        gap: 4px;
        padding: 4px;
    }
    .skip-link {
        display: inline-block;
        padding: 10px 16px;
        background: var(--color-accent);
        color: #ffffff;
        font-weight: 700;
        text-decoration: none;
        border-radius: var(--radius);
        transform: translateY(-120%);
        transition: transform var(--transition);
        font-size: 0.9rem;
    }
    .skip-link:focus {
        transform: translateY(0);
        outline: 3px solid var(--color-focus);
        outline-offset: 2px;
    }

/* ============================================================
FOCUS STYLES
============================================================ */
    :focus-visible {
        outline: 3px solid var(--color-focus);
        outline-offset: 3px;
        border-radius: var(--radius);
    }

/* ============================================================
TYPOGRAPHY
============================================================ */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-body);
        line-height: 1.2;
        color: var(--color-text);
    }

    h1 { 
        font-size: clamp(1.8rem, 4vw, 2.8rem); 
        margin-bottom: 1rem; 
    }

    h2 { 
        font-size: clamp(1.4rem, 3vw, 2rem); 
        margin-bottom: 0.75rem; 
    }

    h3 { 
        font-size: clamp(1.1rem, 2vw, 1.4rem); 
        margin-bottom: 0.5rem; 
    }

    p { 
        margin-bottom: 1em; 
    }

    a { 
        color: var(--color-accent); 
        text-decoration: underline; 
    }

    a:hover { 
        color: var(--color-accent-hover); 
        text-decoration-thickness: 2px; 
    }

    ul, ol { 
        padding-left: 1.5em; 
        margin-bottom: 1em; 
    }

    li { 
        margin-bottom: 0.4em; 
    }

/* ============================================================
LAYOUT
============================================================ */
    .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 1.25rem;
    }

    .section { 
        padding: 4rem 0; 
    }

    .section-alt { 
        background-color: var(--color-surface-alt); 
    }

/* ============================================================
HEADER & NAV
============================================================ */
    .site-header {
        background-color: var(--color-surface);
        border-bottom: 2px solid var(--color-border);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1.25rem;
        max-width: var(--max-width);
        margin: 0 auto;
        gap: 1rem;
    }

    .site-logo {
        font-family: var(--font-body);
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--color-text);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .logo-icon {
        width:36px;
        height:36px;
        background:var(--color-accent-dark);
        color:#fff;
        border-radius:var(--radius);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:1.1rem;
        font-family:var(--font-ui);
        font-weight:900;
        flex-shrink:0;
    }

    .site-logo:focus-visible { 
        outline-offset: 4px; 
    }

    /* Hamburger */
    .nav-toggle {
        display:none;
        background:none;
        border:2px solid var(--color-border);
        border-radius:var(--radius);
        padding:8px;
        cursor:pointer;
        color:var(--color-text);
        font-size:1.4rem;
        line-height:1;
    }

    @media(max-width:768px) {
        .nav-toggle {
            display:flex;
            align-items:center;
        }
    }

    .main-nav {
        display:flex;
        align-items:center;
    }

    .nav-list {
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        gap:.25rem;
        align-items:center;
    }

    .nav-link {
        display:block;
        padding:.5rem .75rem;
        color:var(--color-text);
        text-decoration:none;
        font-size:.95rem;
        border-radius:var(--radius);
        transition:background var(--transition), color var(--transition);
        border-bottom:2px solid transparent;
    }

    .nav-link:hover {
        background:var(--color-accent-light);
    }

    .nav-link[aria-current="page"] {
        color:var(--color-accent);
        border-bottom-color:var(--color-accent);
        font-weight:600;
    }

    @media(max-width:768px) {
        .main-nav {
            position:absolute;
            top:100%;
            left:0;
            right:0;
            background:var(--color-surface);
            border-bottom:2px solid var(--color-border);
            flex-direction:column;
            padding:1rem;
            display:none;
        }
        .main-nav.open {
            display:flex;
        }
        .nav-list {
            flex-direction:column;
            width:100%;
            gap:.25rem;
        }
        .nav-link {
            padding:.75rem 1rem;
            width:100%;
        }
    }

/* ============================================================
A11Y PANEL TOGGLE
============================================================ */
    .a11y-trigger {
        background:var(--color-accent-dark);
        color:#fff;
        border:none;
        border-radius:var(--radius);
        padding:8px 12px;
        font-size:.85rem;
        cursor:pointer;
        display:flex;
        align-items:center;
        gap:6px;
        white-space:nowrap;
        font-weight:600;
        transition:background var(--transition);
    }

    .a11y-trigger:hover {
        background:#fff;
        color:var(--color-accent-dark);
    }

    .a11y-trigger svg {
        width:18px;
        height:18px;
        flex-shrink:0;
    }

/* ============================================================
A11Y PANEL
============================================================ */
    .a11y-panel {
        position:fixed;
        top:0;
        right:-340px;
        width:320px;
        height:100vh;
        background:var(--color-surface);
        border-left:2px solid var(--color-border);
        z-index:9000;
        overflow-y:auto;
        transition:right .3s ease;
        padding:1.5rem;
        box-shadow:var(--shadow-lg);
    }

    .a11y-panel.open {
        right:0;
    }

    .a11y-panel-header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        margin-bottom:1.5rem;
        padding-bottom:1rem;
        border-bottom:1px solid var(--color-border);
    }

    .a11y-panel h2 {
        font-size:1.1rem;
        margin:0;
    }

    .a11y-close {
        background:none;
        border:2px solid var(--color-border);
        border-radius:var(--radius);
        padding:6px 10px;
        cursor:pointer;
        color:var(--color-text);
        font-size:1.2rem;
        line-height:1;
        transition:background var(--transition);
    }

    .a11y-close:hover {
        background:var(--color-surface-alt);
    }

    .a11y-section {
        margin-bottom:1.5rem;
    }

    .a11y-section h3 {
        font-size:.85rem;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:var(--color-text-muted);
        margin-bottom:.75rem;
        font-family:var(--font-ui);
    }

    .a11y-btn-group {
        display:flex;
        flex-wrap:wrap;
        gap:.4rem;
    }

    .a11y-btn {
        padding:6px 12px;
        border:2px solid var(--color-border);
        background:var(--color-surface-alt);
        color:var(--color-text);
        border-radius:var(--radius);
        cursor:pointer;
        font-size:.85rem;
        transition:all var(--transition);
    }

    .a11y-btn:hover {
        border-color:var(--color-accent-dark);
    }

    .a11y-btn.active {
        background:var(--color-accent-dark);
        color:#fff;
        border-color:var(--color-accent-dark);
    }

    .a11y-slider-group {
        display:flex;
        align-items:center;
        gap:.75rem;
    }

    .a11y-slider-group label {
        font-size:.85rem;
        flex:1;
        min-width:70px;
    }

    .a11y-slider {
        flex:2;
        height:4px;
        accent-color:var(--color-accent);
    }

    .a11y-slider-val {
        font-size:.8rem;
        min-width:36px;
        text-align:right;
    }

    .a11y-overlay {
        display:none;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.5);
        z-index:8999;
    }

    .a11y-overlay.open {
        display:block;
    }

/* ============================================================
SVG COLOR FILTERS (hidden)
============================================================ */
    .svg-filters {
        position:absolute;
        width:0;
        height:0;
        overflow:hidden;
    }

/* ============================================================
HERO
============================================================ */
    .hero {
        background: var(--color-surface);
        padding: 5rem 0 4rem;
        border-bottom: 1px solid var(--color-border);
    }

    .hero-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
    }

    @media (max-width: 768px) { 
        .hero-inner { 
            grid-template-columns: 1fr; 
        } 
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--color-black);
        color: var(--color-accent);
        padding: 4px 12px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 1rem;
        border: 1px solid var(--color-accent);
    }

    .hero-title { 
        margin-bottom: 1rem; 
    }

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

    .hero-lead {
        font-size: 1.1rem;
        color: var(--color-text-muted);
        margin-bottom: 2rem;
        font-family: var(--font-body);
    }

    .hero-cta { 
        display: flex; 
        gap: 1rem; 
        flex-wrap: wrap; 
    }

    .hero-visual {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .hero-card {
        background: var(--color-surface-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 1.25rem;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }

    .hero-card-icon {
        width: 44px; 
        height: 44px;
        background: var(--color-accent);
        border-radius: var(--radius);
        display: flex; 
        align-items: center; 
        justify-content: center;
        color: var(--color-bg);
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .hero-card h3 { 
        font-size: 0.95rem; 
        margin-bottom: 0.25rem; 
    }

    .hero-card p { 
        font-size: 0.85rem; 
        color: var(--color-text-muted); 
        margin: 0; 
    }
    
/* ============================================================
BUTTONS
============================================================ */
    .btn {
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:12px 24px;
        border-radius:var(--radius);
        font-size:1rem;
        font-weight:700;
        text-decoration:none;
        border:2px solid transparent;
        cursor:pointer;
        transition:all var(--transition);
        line-height:1;
        font-family:var(--font-ui);
    }

    .btn-primary {
        background:var(--color-accent-dark);
        color:#fff;
        border-color:var(--color-accent-dark);
    }

    .btn-primary:hover {
        background:#fff;
        border-color:var(--color-accent-dark);
        color:var(--color-accent-dark);
        text-decoration:none;
    }

    .btn-secondary {
        background:transparent;
        color:var(--color-accent);
        border-color:var(--color-accent);
    }

    .btn-secondary:hover {
        background:var(--color-accent-light);
        text-decoration:none;
    }

    .btn-sm {
        padding:8px 16px;
        font-size:.9rem;
    }

/* ============================================================
STATS
============================================================ */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }

    .stat-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
        text-align: center;
    }

    .stat-number {
        font-family: var(--font-body);
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--color-accent);
        display: block;
        line-height: 1;
        margin-bottom: 0.25rem;
    }

    .stat-label { 
        font-size: 0.9rem; 
        color: var(--color-text-muted); 
    }

/* ============================================================
SERVICES PREVIEW
============================================================ */
    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }

    .service-card {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 1.75rem;
        transition: box-shadow var(--transition), transform var(--transition);
        display: flex;
        flex-direction: column;
    }

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

    @media (prefers-reduced-motion: reduce) {
        .service-card:hover { 
            transform: none; 
        }
    }

    .service-icon {
        width: 48px; height: 48px;
        background: var(--color-accent-light);
        border-radius: var(--radius);
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        color: var(--color-accent);
    }

    .service-card h3 { 
        margin-bottom: 0.5rem; 
    }

    .service-card p { 
        color: var(--color-text-muted); 
        font-size: 0.9rem; 
        flex: 1; 
    }

    .service-card .btn { 
        margin-top: 1.25rem; 
        align-self: flex-start; 
    }

/* ============================================================
ENGAGEMENT / WHY US
============================================================ */
    .why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: center;
    }

    @media (max-width: 768px) { 
        .why-grid { 
            grid-template-columns: 1fr; 
        } 
    }

    .why-list { 
        list-style: none; 
        padding: 0; 
    }

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

    .why-check {
        width: 28px; 
        height: 28px;
        background: var(--color-success);
        color: var(--color-black);
        border-radius: 50%;
        display: flex; 
        align-items: center; 
        justify-content: center;
        font-size: 0.8rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .why-item p { 
        margin: 0; 
        font-size: 0.95rem; 
    }

    .why-item strong { 
        display: block; 
        margin-bottom: 0.2rem; 
    }

    .compliance-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .badge {
        background: var(--color-surface);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 1.25rem 1.5rem;
        text-align: center;
        flex: 1;
        min-width: 130px;
    }

    .badge-title {
        font-family: var(--font-body);
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--color-accent);
        display: block;
    }

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

/* ============================================================
SECTION HEADER
============================================================ */
    .section-header {
        max-width:600px;
        margin-bottom:2.5rem;
    }

    .section-header.centered {
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

    .section-tag {
        display:inline-block;
        font-size:.78rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.1em;
        color:var(--color-accent);
        margin-bottom:.5rem;
    }

    .section-header p {
        color:var(--color-text-muted);
        margin:0;
    }


/* ============================================================
CTA SECTION
============================================================ */
    .cta-section {
        background:var(--color-accent-dark);
        color:#fff;
        padding:4rem 0;
        text-align:center;
    }

    .cta-section h2 {
        color:#fff;
        margin-bottom:1rem;
    }

    .cta-section p {
        color:rgba(255,255,255,1);
        margin-bottom:2rem;
        font-size:1.1rem;
    }

    .btn-cta-white {
        background:#fff;
        color:var(--color-accent-dark);
        border-color:#fff;
        font-weight:700;
    }

    .btn-cta-white:hover {
        background:var(--color-accent-dark);
        color:white;
        text-decoration:none;
    }

    .btn-cta-outline {
        background: transparent;
        color: #fff;
        border-color: rgba(255,255,255,0.7);
    }

    .btn-cta-outline:hover { 
        background: rgba(255,255,255,0.15); 
        text-decoration: none; 
        color: #fff; 
    }

    .cta-btns {
        display:flex;
        gap:1rem;
        justify-content:center;
        flex-wrap:wrap;
    }

/* ============================================================
FOOTER
============================================================ */
    .site-footer {
        background:var(--color-surface);
        border-top:2px solid var(--color-border);
        padding:3rem 0 1.5rem;
    }

    .footer-grid {
        display:grid;
        grid-template-columns:2fr 1fr 1fr 1fr;
        gap:2rem;
        margin-bottom:2rem;
    }

    @media(max-width:900px) {
        .footer-grid{grid-template-columns:1fr 1fr;}
    }

    @media(max-width:540px) {
        .footer-grid{grid-template-columns:1fr;}
    }

    .footer-brand p {
        font-size:.9rem;
        color:var(--color-text-muted);
        margin-top:.75rem;
    }

    .footer-col h3 {
        font-size:.85rem;
        text-transform:uppercase;
        letter-spacing:.08em;
        margin-bottom:.75rem;
        font-family:var(--font-ui);
        color:var(--color-text-muted);
    }

    .footer-nav {
        list-style:none;
        padding:0;
    }

    .footer-nav li {
        margin-bottom:.4rem;
    }

    .footer-nav a {
        color:var(--color-text);
        text-decoration:none;
        font-size:.9rem;
    }

    .footer-nav a:hover {
        color:var(--color-accent);
        text-decoration:underline;
    }

    .footer-bottom {
        border-top:1px solid var(--color-border);
        padding-top:1.5rem;
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        gap:1rem;
    }

    .footer-legal {
        display:flex;
        gap:1.25rem;
        flex-wrap:wrap;
    }

    .footer-legal a {
        font-size:.8rem;
        color:var(--color-text-muted);
        text-decoration:underline;
    }

    .footer-bottom p {
        font-size:.8rem;
        color:var(--color-text-muted);
    }

    /* ============================================================
PAGE
============================================================ */
    .page-hero {
        background:var(--color-surface);
        padding:3.5rem 0 3rem;
        border-bottom:1px solid var(--color-border);
    }

    .page-hero h1 {
        margin-bottom:.75rem;
    }

    .page-hero .lead {
        font-size:1.1rem;
        color:var(--color-text-muted);
        font-family:var(--font-body);
        max-width:600px;
        margin-bottom:0;
    }

    .breadcrumb {
        display:flex;
        align-items:center;
        gap:.5rem;
        font-size:.85rem;
        color:var(--color-text-muted);
        margin-bottom:1rem;
        list-style:none;
        padding:0;
        flex-wrap:wrap;
    }

    .breadcrumb li+li::before {
        content:"›";
        margin-right:.5rem;
    }

    .breadcrumb a {
        color:var(--color-text-muted);
    }