/**
 * De Hoeve Multipower B.V. - Main Stylesheet
 * 
 * Professional B2B design with Font Awesome icons
 * Left-aligned text on desktop, centered on mobile
 * 
 * @package DeHoeve
 * @version 2.0.0
 */

/* ===========================================
   CSS CUSTOM PROPERTIES
   =========================================== */
:root {
    /* Brand Colors */
    --color-primary: #1a1a1a;
    --color-accent: #a12122;
    --color-accent-hover: #8a1b1c;
    --color-accent-light: rgba(161, 33, 34, 0.08);
    --color-gray: #797979;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* Typography */
    --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    
    /* Layout */
    --container-max: 1200px;
    --container-wide: 1400px;
    --header-height: 72px;
    --header-top-height: 44px;
    
    /* Borders & Shadows */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    /* Anchor-jump offset: clears the fixed header so #target sections aren't hidden behind it */
    scroll-padding-top: calc(var(--header-height) + var(--header-top-height) + var(--spacing-4));
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent pull-to-refresh on mobile — legacy Edge uses -ms-scroll-chaining */
    -ms-scroll-chaining: none;
    overscroll-behavior-y: contain;
}

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

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-800);
    background-color: #fff;
    padding-top: calc(var(--header-height) + var(--header-top-height));
    /* iPhone X+ safe area support — constant() for iOS 11.0, env() for iOS 11.2+ */
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

body.menu-open {
    overflow: hidden;
    /* iOS Safari: overflow:hidden alone does not prevent body scroll.
       position:fixed locks it. JS saves/restores scrollY so the page
       doesn't jump to the top when the menu is closed. */
    position: fixed;
    width: 100%;
    /* body.style.top is set dynamically in main.js: '-' + scrollY + 'px' */
}

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

a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-900);
}

/* ===========================================
   UTILITIES
   =========================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
}

.container-wide {
    max-width: var(--container-wide);
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: #fff;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius);
    z-index: 9999;
}

.skip-link:focus {
    top: var(--spacing-4);
}

/* ===========================================
   HEADER
   =========================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background: #fff;
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

/* Header Top Bar */
.header-top {
    background: var(--color-gray-900);
    height: var(--header-top-height);
}

/* Give .container a concrete height so .header-top-content's `height: 100%`
   resolves to 44px. Without this, the percentage falls back to `auto` per
   CSS spec (containing block has no explicit height), the content row
   collapses to ~38px, and everything — contact links, chat button, language
   switcher — gets pushed to the top of the bar. Mirrors the existing
   .header-main > .container pattern below. */
.header-top > .container {
    height: 100%;
}

.header-top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.header-contact {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.header-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
    transition: color var(--transition);
}

.header-link:hover {
    color: #fff;
}

.header-link i {
    font-size: 0.875em;
    opacity: 0.8;
}

/* Language Switcher */
.language-switcher {
    position: relative;
}

.language-current {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.language-current:hover {
    background: rgba(255, 255, 255, 0.1);
}

.language-current i {
    font-size: 0.7em;
    transition: transform var(--transition);
}

.language-switcher.open .language-current i {
    transform: rotate(180deg);
}

.lang-country {
    font-weight: 600;
    opacity: 0.7;
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-2);
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
    overflow: hidden;
    z-index: var(--z-dropdown);
}

.language-switcher.open .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-dropdown a {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    transition: background var(--transition);
}

.language-dropdown a:hover {
    background: var(--color-gray-50);
}

.language-dropdown a.active {
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-weight: 600;
}

/* Right-side top-bar cluster — holds the Product Expert Chat button and the
   language switcher side-by-side. Single rule; relies on the existing
   .btn-ai-finder (ai-chatbot.css) for the button itself. */
.header-top-right {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: var(--spacing-3);
}

/* Header Main */
.header-main {
    height: var(--header-height);
    border-bottom: 1px solid var(--color-gray-200);
    background: #fff;
}

.header-main > .container {
    height: 100%;
}

.header-main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    height: 40px;
    width: auto;
}

/* ===========================================
   MAIN NAVIGATION
   =========================================== */
.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.nav-item > a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.nav-item > a:hover {
    color: var(--color-accent);
    background: var(--color-accent-light);
}

.nav-item.active > a {
    color: #fff;
    background: var(--color-accent);
}

.nav-item > a i {
    font-size: 0.7em;
    transition: transform var(--transition);
}

.nav-item.open > a i {
    transform: rotate(180deg);
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-gray-700);
}

/* ===========================================
   MEGA MENU
   =========================================== */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-slow);
}

.nav-item-mega:hover .mega-menu,
.nav-item-mega.open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-inner {
    display: flex;
    max-width: var(--container-wide);
    margin: 0 auto;
    min-height: 420px;
}

.mega-menu-segments {
    flex-shrink: 0;
    width: 260px;
    background: var(--color-gray-50);
    border-right: 1px solid var(--color-gray-200);
    padding: var(--spacing-4) 0;
}

.segment-tabs {
    display: flex;
    flex-direction: column;
}

.segment-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    width: 100%;
    padding: var(--spacing-3) var(--spacing-6);
    text-align: left;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    border-left: 3px solid transparent;
    transition: all var(--transition);
}

.segment-tab:hover {
    background: #fff;
    color: var(--color-accent);
}

.segment-tab.active {
    background: #fff;
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
}

.segment-tab i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    color: var(--color-gray-500);
}

.segment-tab.active i,
.segment-tab:hover i {
    color: var(--color-accent);
}

.mega-menu-content {
    flex-grow: 1;
    padding: var(--spacing-6);
}

.segment-panel {
    display: none;
}

.segment-panel.active {
    display: block;
    animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-8);
}

.category-title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--color-accent);
}

.applications-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.applications-list a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    transition: all var(--transition);
}

.applications-list a:hover {
    color: var(--color-accent);
    padding-left: var(--spacing-2);
}

.applications-list a i {
    font-size: 0.9em;
    width: 18px;
    text-align: center;
    color: var(--color-gray-400);
}

.applications-list a:hover i {
    color: var(--color-accent);
}

.segment-footer {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-gray-200);
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
}

.view-all-link i {
    transition: transform var(--transition);
}

.view-all-link:hover i {
    transform: translateX(4px);
}

/* ===========================================
   MOBILE MENU
   =========================================== */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 380px;
    background: #fff;
    z-index: var(--z-modal);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-modal-backdrop);
    transition: all var(--transition-slow);
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6);
    border-bottom: 1px solid var(--color-gray-200);
}

.mobile-menu-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-gray-500);
}

.mobile-menu-content {
    flex-grow: 1;
    overflow-y: auto;
    /* Prevent touch-scroll from bleeding through to the body on iOS */
    -webkit-overflow-scrolling: touch;
    /* Legacy Edge fallback for overscroll containment */
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
}

.mobile-menu-footer {
    padding: var(--spacing-4) var(--spacing-6);
    /* iPhone X+ home indicator — constant() for iOS 11.0, env() for iOS 11.2+ */
    padding-bottom: calc(var(--spacing-4) + constant(safe-area-inset-bottom, 0px));
    padding-bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

.mobile-contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.mobile-contact a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.mobile-contact a i {
    width: 16px;
    color: var(--color-gray-500);
}

.mobile-languages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.mobile-languages a {
    padding: var(--spacing-2) var(--spacing-3);
    background: #fff;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-200);
}

.mobile-languages a.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Mobile Nav List */
.mobile-nav-list {
    padding: var(--spacing-2) 0;
}

.mobile-nav-item > a,
.mobile-nav-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-4) var(--spacing-6);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-gray-800);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.mobile-nav-toggle {
    justify-content: space-between;
}

.mobile-nav-icon {
    width: 24px;
    margin-right: var(--spacing-3);
    color: var(--color-gray-500);
}

.mobile-nav-chevron {
    transition: transform var(--transition);
}

.mobile-nav-segment.open .mobile-nav-chevron {
    transform: rotate(180deg);
}

.mobile-nav-submenu {
    display: none;
    background: var(--color-gray-50);
    padding: var(--spacing-4) var(--spacing-6);
}

.mobile-nav-segment.open .mobile-nav-submenu {
    display: block;
}

.mobile-nav-category {
    margin-bottom: var(--spacing-4);
}

.mobile-nav-category:last-child {
    margin-bottom: 0;
}

.mobile-nav-category-title {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    padding-bottom: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--color-accent);
}

.mobile-nav-applications a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) 0;
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.mobile-nav-app-icon {
    width: 18px;
    text-align: center;
    color: var(--color-gray-400);
}

/* ===========================================
   HERO SECTION
   =========================================== */
.hero {
    position: relative;
    min-height: 85vh;
    min-height: 85svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: calc(-1 * (var(--header-height) + var(--header-top-height)));
    padding-top: calc(var(--header-height) + var(--header-top-height));
}

.hero-video-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    z-index: -1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    z-index: 2;           /* above both primary video and secondary crossfade layer    */
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: var(--spacing-16) var(--spacing-6);
    color: #fff;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-6);
}

.hero-badge i {
    color: var(--color-accent);
}

.hero-title {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-6xl));
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-6);
    color: #fff;
}

.hero-subtitle {
    font-size: clamp(var(--font-size-lg), 2vw, var(--font-size-xl));
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: var(--spacing-8);
    max-width: 600px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* ===========================================
   HERO — SECONDARY VIDEO (crossfade layer)
   =========================================== */
.hero-video-secondary {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;           /* above primary (.hero-video) within .hero-video-container  */
    opacity: 0;
    pointer-events: none;
    transition: opacity 650ms ease-in-out;
}

.hero-video-secondary.fading-in {
    opacity: 1;
}

/* ===========================================
   HERO — VIDEO LOAD PROGRESS BAR
   Desktop and mobile (always in DOM; hidden
   until a video switch is in progress)
   =========================================== */
.hero-video-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 20;          /* above thumbnails and hero content                         */
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.hero-video-progress.active {
    opacity: 1;
}

.hero-video-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        to right,
        #a12122 0%,
        #a12122 70%,
        rgba(161, 33, 34, 0.5) 88%,
        transparent 100%
    );
    will-change: width;
}

/* ===========================================
   HERO — VIDEO THUMBNAIL PANEL
   Visible on desktop (>1024px) only.
   Positioned on the right side of the hero,
   vertically centred, stacked column.
   =========================================== */
/* == Thumbnail panel wrapper.
   Fixed anchor below the header — removes transform-based vertical centering.
   transform:translateY(-50%) caused two bugs:
   1. Pulled the panel above hero overflow:hidden boundary → clipping.
   2. Recomputed on every video switch → visible panel jump.
   top = top-bar + main-nav + breathing room; auto-adapts to responsive vars. == */
.hero-thumb-panel {
    position: absolute;
    top: calc(var(--header-top-height) + var(--header-height) + var(--spacing-8));
    right: var(--spacing-8);
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--spacing-3);
}

/* Scrollable list - max-height clips to 3 visible items */
.hero-thumbnails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-3);
    max-height: 510px; /* safe ceiling: 3 items (118px img + ~35px caption) + 2 gaps */
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.hero-thumbnails::-webkit-scrollbar {
    display: none;
}

/* Scroll-down arrow button */
.hero-thumb-scroll-btn {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    -webkit-transition: background 0.25s ease, border-color 0.25s ease, -webkit-transform 0.25s ease;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.hero-thumb-scroll-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}

.hero-thumb-scroll-btn img {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
    opacity: 0.90;
    filter: brightness(0) invert(1);
}

/* Individual thumbnail button */
.hero-thumb-item {
    display: block;
    width: 210px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; /* never shrink — hold full height regardless of container */
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    padding: 0;
    text-align: left;
    font-family: inherit;
    position: relative;
    box-shadow: none;

    /* Entrance animation — staggered via JS animationDelay */
    opacity: 0;
    animation: heroThumbEnter 380ms ease forwards;

    transition:
        border-color  250ms ease,
        transform     250ms ease,
        box-shadow    250ms ease,
        opacity       250ms ease;
}

/* ── Light sweep shimmer — travels left→right across the thumbnail ── */
.hero-thumb-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent              0%,
        rgba(180, 235, 255, 0.10) 40%,
        rgba(180, 235, 255, 0.22) 50%,
        rgba(180, 235, 255, 0.10) 60%,
        transparent              100%
    );
    transform: skewX(-15deg);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

.hero-thumb-item:hover {
    border-color: rgba(120, 220, 255, 0.90);
    transform: translateX(-6px);
    animation: heroThumbEnter 380ms ease forwards,
               thumbElectricGlow   2.4s ease-in-out infinite,
               thumbElectricBorder 2.4s ease-in-out infinite;
}

.hero-thumb-item:hover::after {
    animation: thumbShimmer 2.2s ease-in-out infinite;
}

/* Irregular electric outer glow — mimics fluctuating current */
@keyframes thumbElectricGlow {
    0%   {
        box-shadow:
            0 0  8px 2px rgba(100, 210, 255, 0.28),
            0 0 20px 4px rgba(80,  180, 255, 0.14);
    }
    20%  {
        box-shadow:
            0 0 16px 4px rgba(120, 225, 255, 0.55),
            0 0 36px 9px rgba(80,  180, 255, 0.24);
    }
    38%  {
        box-shadow:
            0 0 10px 2px rgba(100, 210, 255, 0.32),
            0 0 22px 5px rgba(80,  180, 255, 0.16);
    }
    62%  {
        box-shadow:
            0 0 22px 6px rgba(140, 230, 255, 0.65),
            0 0 45px 12px rgba(80, 180, 255, 0.28);
    }
    78%  {
        box-shadow:
            0 0 12px 3px rgba(100, 210, 255, 0.38),
            0 0 26px 6px rgba(80,  180, 255, 0.18);
    }
    100% {
        box-shadow:
            0 0  8px 2px rgba(100, 210, 255, 0.28),
            0 0 20px 4px rgba(80,  180, 255, 0.14);
    }
}

/* Border-color pulse — brightens like a charge building */
@keyframes thumbElectricBorder {
    0%   { border-color: rgba(100, 215, 255, 0.70); }
    22%  { border-color: rgba(160, 238, 255, 0.95); }
    50%  { border-color: rgba(100, 215, 255, 0.75); }
    72%  { border-color: rgba(190, 245, 255, 1.00); }
    100% { border-color: rgba(100, 215, 255, 0.70); }
}

/* Single shimmer sweep, then pause before repeating */
@keyframes thumbShimmer {
    0%   { left: -75%; opacity: 1; }
    42%  { left: 125%;  opacity: 1; }
    43%  { left: 125%;  opacity: 0; }
    100% { left: 125%;  opacity: 0; }
}

.hero-thumb-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.hero-thumb-item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    animation: heroThumbEnter 380ms ease forwards !important;
    box-shadow: none !important;
}

/* Thumbnail image — brightens on hover to feel energised */
.hero-thumb-img {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
    transition: filter 250ms ease;
}

.hero-thumb-item:hover .hero-thumb-img {
    filter: brightness(1.12) saturate(1.12);
}

/* Caption strip below image */
.hero-thumb-caption {
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.60);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    text-align: center;
    transition: color 250ms ease;
}

.hero-thumb-item:hover .hero-thumb-caption {
    color: rgba(200, 242, 255, 1.00);
}

/* Thumbnail entrance keyframes */
@keyframes heroThumbEnter {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hide thumbnail panel on mobile only — tablets and above see it */
@media (max-width: 767px) {
    .hero-thumb-panel {
        display: none;
    }
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius);
    transition: all var(--transition);
    min-height: 48px;
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
    min-height: 56px;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(161, 33, 34, 0.35);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(161, 33, 34, 0.4);
}

.btn-accent {
    background: var(--color-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(161, 33, 34, 0.35);
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(161, 33, 34, 0.4);
}

.btn-accent:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.btn-outline:hover {
    background: #fff;
    color: var(--color-gray-900);
    border-color: #fff;
}

.btn-outline-accent {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn-outline-accent:hover {
    background: var(--color-accent);
    color: #fff;
}

.btn-dark {
    background: var(--color-gray-900);
    color: #fff;
}

.btn-dark:hover {
    background: var(--color-gray-800);
}

.btn i {
    font-size: 0.9em;
}

/* ===========================================
   SECTIONS
   =========================================== */
.section {
    padding: var(--spacing-12) 0;
}

.section-lg {
    padding: var(--spacing-16) 0;
}

.section-header {
    max-width: 700px;
    margin-bottom: var(--spacing-12);
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-4);
}

.section-label i {
    font-size: 0.9em;
}

.section-title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 800;
    margin-bottom: var(--spacing-4);
}

.section-description {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ===========================================
   MARKET SEGMENTS — Carousel
   =========================================== */

/* Section */
.segments-section {
    background: var(--color-gray-100);
    padding-bottom: var(--spacing-16);
}

.segments-section .section-title {
    color: var(--color-gray-900);
}

.segments-section .section-description {
    color: var(--color-gray-600);
}

/* ── Carousel wrapper — full bleed, relative for arrow positioning ── */
.segments-carousel-wrapper {
    position: relative;
    width: 100%;
}

/* ── Scrollable track ── */
.segments-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: var(--spacing-4);
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    -ms-scroll-snap-type: mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--spacing-2);
    /* Padding and justify-content set dynamically by JS
       based on whether cards overflow or not */
}

/* When all cards fit — center them */
.segments-carousel-wrapper.is-centered .segments-track {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.segments-track::-webkit-scrollbar {
    display: none; /* Chrome / Safari / Opera */
}

/* ── Arrow buttons ── */
.segments-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-gray-900);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    -webkit-transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
    /* Ensure arrows are above cards */
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    line-height: 1;
}

.segments-arrow:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.segments-arrow:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.segments-arrow i {
    font-size: 0.95rem;
}

.segments-arrow-prev {
    left: var(--spacing-4);
}

.segments-arrow-next {
    right: var(--spacing-4);
}

/* Hide arrows on touch-primary devices — swipe is the native interaction */
@media (hover: none) and (pointer: coarse) {
    .segments-arrow {
        display: none;
    }
}

/* ── Card base ── */
.segment-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 300px;
    flex: 0 0 300px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 520px;
    overflow: hidden;
    cursor: pointer;
    background-color: #1a2234;
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
    -webkit-scroll-snap-align: start;
    /* Entry animation */
    -webkit-animation: segmentFadeUp 0.60s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation: segmentFadeUp 0.60s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Staggered entry delays */
.segment-card:nth-child(1) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
.segment-card:nth-child(2) { -webkit-animation-delay: 0.13s; animation-delay: 0.13s; }
.segment-card:nth-child(3) { -webkit-animation-delay: 0.21s; animation-delay: 0.21s; }
.segment-card:nth-child(4) { -webkit-animation-delay: 0.29s; animation-delay: 0.29s; }
.segment-card:nth-child(5) { -webkit-animation-delay: 0.37s; animation-delay: 0.37s; }

/* Accent underline — reveals on hover */
.segment-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-accent);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    z-index: 3;
}

/* ── Background image ── */
.segment-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    display: block;
    -webkit-transition: -webkit-transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Gradient overlay ── */
.segment-card-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background: -webkit-linear-gradient(
        bottom,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.15) 72%,
        rgba(0, 0, 0, 0.05) 100%
    );
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.15) 72%,
        rgba(0, 0, 0, 0.05) 100%
    );
    -webkit-transition: background 0.45s ease;
    transition: background 0.45s ease;
}

/* ── Icon badge — top left ── */
.segment-card-badge {
    position: absolute;
    top: var(--spacing-5);
    left: var(--spacing-5);
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.48);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    z-index: 2;
    -webkit-transition: background 0.35s ease, border-color 0.35s ease;
    transition: background 0.35s ease, border-color 0.35s ease;
}

.segment-card-badge i {
    font-size: 1.05rem;
    color: #ffffff;
}

/* ── Card content — pinned to bottom ── */
/* position:relative removed — without it, .segment-card-link::before (position:absolute; inset:0)
   resolves its containing block to .segment-card, stretching over the full card hit area.
   z-index still works on flex children without position:relative. */
.segment-card-content {
    z-index: 2;
    margin-top: auto;
    padding: var(--spacing-6);
    -webkit-transition: -webkit-transform 0.40s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.40s cubic-bezier(0.22, 1, 0.36, 1);
}

.segment-card-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--spacing-2);
    line-height: 1.3;
}

.segment-card-description {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    margin-bottom: var(--spacing-4);
    flex-grow: 1;
}

.segment-card-link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    -webkit-transition: gap 0.28s ease;
    transition: gap 0.28s ease;
}

/* Full card click area — sits above badge (z:2) and accent bar (z:3) */
.segment-card-link::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    z-index: 4;
}

.segment-card-link i {
    font-size: 0.80em;
    -webkit-transition: -webkit-transform 0.28s ease;
    transition: transform 0.28s ease;
}

.segment-card-link:focus {
    outline: none;
}

.segment-card-link:focus-visible::before {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

/* ══════════════════════════════════════════════
   HOVER STATES — pointer/mouse devices only
   Touch devices get content always visible
   ══════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

    .segment-card-description {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-bottom: 0;
        -webkit-transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                            opacity 0.32s ease 0.06s,
                            margin-bottom 0.32s ease;
        transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.32s ease 0.06s,
                    margin-bottom 0.32s ease;
    }

    .segment-card:hover .segment-card-description {
        max-height: 7rem;
        opacity: 1;
        margin-bottom: var(--spacing-4);
    }

    .segment-card:hover .segment-card-bg {
        -webkit-transform: scale(1.06);
        transform: scale(1.06);
    }

    .segment-card:hover .segment-card-overlay {
        background: -webkit-linear-gradient(
            bottom,
            rgba(0, 0, 0, 0.97) 0%,
            rgba(0, 0, 0, 0.68) 38%,
            rgba(0, 0, 0, 0.26) 72%,
            rgba(0, 0, 0, 0.10) 100%
        );
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.97) 0%,
            rgba(0, 0, 0, 0.68) 38%,
            rgba(0, 0, 0, 0.26) 72%,
            rgba(0, 0, 0, 0.10) 100%
        );
    }

    .segment-card:hover .segment-card-content {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    .segment-card:hover .segment-card-badge {
        background: rgba(161, 33, 34, 0.80);
        border-color: var(--color-accent);
    }

    .segment-card:hover .segment-card-link {
        gap: var(--spacing-3);
    }

    .segment-card:hover .segment-card-link i {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    .segment-card::after {
        -webkit-transition: -webkit-transform 0.40s cubic-bezier(0.22, 1, 0.36, 1);
        transition: transform 0.40s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .segment-card:hover::after {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

/* ── Entry keyframes ── */
@-webkit-keyframes segmentFadeUp {
    from { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
    to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0);    }
}
@keyframes segmentFadeUp {
    from { opacity: 0; -webkit-transform: translateY(24px); transform: translateY(24px); }
    to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0);    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .segment-card {
        -webkit-animation: none;
        animation: none;
    }
    .segment-card-bg,
    .segment-card-content,
    .segment-card-overlay,
    .segment-card-badge,
    .segment-card-link,
    .segment-card-link i,
    .segment-card-description,
    .segment-card::after {
        -webkit-transition: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════
   CAROUSEL RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════ */

/* Tablet — 260px cards, 3 visible + generous peek of 4th */
@media (max-width: 1024px) {
    .segment-card {
        -ms-flex: 0 0 260px;
        flex: 0 0 260px;
        min-height: 460px;
    }
}

/* Mobile landscape / large mobile — 220px cards, 2 visible + peek */
@media (max-width: 768px) {
    .segments-track {
        gap: var(--spacing-3);
        padding-left: var(--spacing-5);
        padding-right: var(--spacing-5);
    }

    .segment-card {
        -ms-flex: 0 0 220px;
        flex: 0 0 220px;
        min-height: 380px;
        border-radius: var(--radius);
    }

    .segment-card-content {
        padding: var(--spacing-4) var(--spacing-5);
    }

    .segment-card-description {
        font-size: 0.8rem;
    }
}

/* Small mobile — nearly full width cards, clear peek of next */
@media (max-width: 480px) {
    .segments-track {
        gap: var(--spacing-3);
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .segment-card {
        /* 85vw: shows 1 full card + ~15vw peek of the next */
        -ms-flex: 0 0 85vw;
        flex: 0 0 85vw;
        min-height: 320px;
    }
}



/* ===========================================
   VALUES — What Sets Us Apart (Bento Grid)
   =========================================== */

.values-section {
    background: var(--color-gray-50);
}

.values-section .section-header {
    max-width: 640px;
    margin-bottom: var(--spacing-12);
}

/* ── Bento grid ─────────────────────────────────────────────── */
.values-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--spacing-4);
}

/* ── Base panel ─────────────────────────────────────────────── */
.value-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-8);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.value-panel:hover {
    transform: translateY(-4px);
}

/* ── Decorative panel number ────────────────────────────────── */
.value-panel-num {
    position: absolute;
    top: -0.1em;
    right: var(--spacing-6);
    font-size: 7.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    color: rgba(0, 0, 0, 0.06);
    transition: color var(--transition-slow);
}

.value-panel:hover .value-panel-num {
    color: rgba(0, 0, 0, 0.09);
}

/* ── Panel body ─────────────────────────────────────────────── */
.value-panel-body {
    position: relative;
    z-index: 1;
}

.value-panel-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-900);
}

.value-panel-desc {
    font-size: var(--font-size-sm);
    line-height: 1.75;
    color: var(--color-gray-500);
    margin: 0;
}

/* ── Panel: light (white) ───────────────────────────────────── */
.value-panel--light {
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.value-panel--light:hover {
    box-shadow: var(--shadow-lg);
}

/* ── Panel: anchor (red, spans 2 rows) ──────────────────────── */
.value-panel--anchor {
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--color-accent);
    min-height: 0;
    padding: var(--spacing-10);
    box-shadow: 0 8px 32px rgba(161, 33, 34, 0.35);
}

.value-panel--anchor::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background: linear-gradient(160deg, transparent 40%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

/* Opening quote mark — top-left decorative element */
.value-panel--anchor::before {
    content: '\201C';
    position: absolute;
    top: var(--spacing-6);
    left: var(--spacing-10);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 6rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

.value-panel--anchor:hover {
    box-shadow: 0 12px 40px rgba(161, 33, 34, 0.45);
}

.value-panel--anchor .value-panel-num {
    color: rgba(255, 255, 255, 0.1);
    font-size: 10rem;
}

.value-panel--anchor:hover .value-panel-num {
    color: rgba(255, 255, 255, 0.14);
}

.value-panel--anchor .value-panel-title {
    font-size: var(--font-size-2xl);
    color: #fff;
    margin-bottom: var(--spacing-4);
}

.value-panel--anchor .value-panel-desc {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

/* ── Panel: dark ────────────────────────────────────────────── */
.value-panel--dark {
    background: var(--color-gray-900);
    box-shadow: var(--shadow-sm);
}

.value-panel--dark:hover {
    box-shadow: var(--shadow-lg);
}

.value-panel--dark .value-panel-num {
    color: rgba(255, 255, 255, 0.06);
}

.value-panel--dark:hover .value-panel-num {
    color: rgba(255, 255, 255, 0.1);
}

.value-panel--dark .value-panel-title {
    color: #fff;
}

.value-panel--dark .value-panel-desc {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Responsive: tablet ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .values-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .value-panel--anchor {
        grid-column: 1 / 3;
        grid-row: 1;
        min-height: 260px;
        flex-direction: row;
        align-items: flex-end;
        gap: var(--spacing-8);
    }
}

/* ── Responsive: mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
    .values-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .value-panel--anchor {
        grid-column: 1;
        min-height: 240px;
        flex-direction: column;
        align-items: flex-start;
    }

    .value-panel-num {
        font-size: 5.5rem;
    }

    .value-panel--anchor .value-panel-num {
        font-size: 7rem;
    }

    .value-panel {
        min-height: 190px;
    }
}




/* ===========================================
   PROCESS SECTION — How It Works
   =========================================== */

.process-section {
    background: var(--color-gray-50);
}

.process-section .section-label {
    color: var(--color-accent);
}

.process-section .section-title {
    color: var(--color-gray-900);
}

.process-section .section-description {
    color: var(--color-gray-600);
}

/* ── Steps wrapper ──────────────────────────────────────────── */
.process-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* ── Individual step — 50/50 split grid ────────────────────── */
.process-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Reverse: image right, content left */
.process-step--reverse .process-step-image {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

.process-step--reverse .process-step-content {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/* ── Image container ────────────────────────────────────────── */
.process-step-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.process-step-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 600ms ease;
    transition: -webkit-transform 600ms ease;
    transition: transform 600ms ease;
    transition: transform 600ms ease, -webkit-transform 600ms ease;
}

.process-step-image:hover .process-step-img {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
}

/* ── Text content ───────────────────────────────────────────── */
.process-step-content {
    padding: var(--spacing-4) 0;
}

.process-step-num {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--spacing-3);
}

.process-step-title {
    font-size: clamp(var(--font-size-xl), 2.5vw, var(--font-size-3xl));
    font-weight: 800;
    color: var(--color-gray-900);
    line-height: 1.25;
    margin-bottom: var(--spacing-4);
}

.process-step-body {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ── Responsive: tablet (≤ 1024px) — stack, image on top ───── */
@media (max-width: 1024px) {
    .process-step {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .process-step-image {
        aspect-ratio: 16 / 9;
    }

    /* Both normal and reverse: image always on top */
    .process-step .process-step-image,
    .process-step--reverse .process-step-image {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .process-step .process-step-content,
    .process-step--reverse .process-step-content {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .process-steps {
        gap: var(--spacing-12);
    }
}

/* ── Responsive: mobile (≤ 768px) — centre-align text ──────── */
@media (max-width: 768px) {
    .process-step-content {
        text-align: center;
    }

    .process-step-num {
        text-align: center;
    }

    .process-steps {
        gap: var(--spacing-10);
    }
}

/* (Story slider CSS removed — replaced by process section above) */



/* ===========================================
   SERVICES SECTION
   =========================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

.service-card {
    display: flex;
    gap: var(--spacing-6);
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition);
}

.service-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-md);
}

.service-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    border-radius: var(--radius);
}

.service-icon i {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.service-content {
    flex-grow: 1;
}

.service-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-3);
    color: var(--color-gray-900);
}

.service-description {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* ===========================================
   USPs / STATS SECTION
   =========================================== */
.usps-section {
    /* Warm brand tint: #a12122 at ~4% opacity on white = #fbf6f6 */
    background: #fbf6f6;
}

.usps-section .section-title {
    color: var(--color-gray-900);
}

.usps-section .section-description {
    color: var(--color-gray-600);
}

.usps-section .section-label {
    color: var(--color-accent);
}

.usps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8);
}

.usp-card {
    padding: var(--spacing-6);
    border-left: 1px solid rgba(161, 33, 34, 0.12);
}

.usp-card:first-child {
    border-left: none;
}

.usp-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(161, 33, 34, 0.08);
    border-radius: var(--radius);
    margin-bottom: var(--spacing-5);
}

.usp-icon i {
    font-size: 1.25rem;
    color: var(--color-accent);
}

.usp-value {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--color-gray-900);
    line-height: 1;
    margin-bottom: var(--spacing-2);
}

.usp-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.usp-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.5;
}

/* ===========================================
   CTA SECTION
   =========================================== */
.cta-section {
    /* Intentional dark closing anchor — mirrors the dark top bar for visual bookending */
    background: var(--color-gray-900);
    color: #fff;
    padding: var(--spacing-16) 0;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
}

.cta-text {
    max-width: 600px;
}

.cta-title {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--spacing-4);
    color: #fff;
}

.cta-description {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.7);
}

.cta-actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-4);
}

/* On dark CTA background: btn-dark becomes accent red for contrast */
.cta-section .btn-dark {
    background: var(--color-accent);
    color: #fff;
}

.cta-section .btn-dark:hover {
    background: var(--color-accent-hover);
}

.cta-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.4);
}

/* ===========================================
   LOGO BANNER MARQUEE
   =========================================== */
.logo-banner-section {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: var(--spacing-8) 0;
}

.logo-banner-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    position: relative;
}

.logo-banner-wrapper {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-banner-track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.logo-banner-img {
    height: 80px;
    width: auto;
    flex-shrink: 0;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.logo-banner-section:hover .logo-banner-track {
    animation-play-state: paused;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo-banner-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .logo-banner-img {
        height: 60px;
    }
}

/* ===========================================
   INSPIRATIONAL SECTIONS
   =========================================== */

/* Dark Inspiration Section (Use Cases) — background lightened, cards retain dark cinematic style */
.inspiration-dark {
    background: #fff;
}

.inspiration-dark .section-title {
    color: var(--color-gray-900);
}

.inspiration-dark .section-description {
    color: var(--color-gray-600);
}

.inspiration-dark .section-label {
    color: var(--color-accent);
}

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

.use-case-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-gray-800);
    transition: transform var(--transition);
}

.use-case-card:hover {
    transform: translateY(-4px);
}

.use-case-image {
    position: relative;
    overflow: hidden;
    /* Fallback for browsers without aspect-ratio support */
    padding-bottom: 75%; /* 4:3 ratio = 3/4 = 75% */
}

@supports (aspect-ratio: 4 / 3) {
    .use-case-image {
        padding-bottom: 0;
        aspect-ratio: 4 / 3;
    }
}

.use-case-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.use-case-card:hover .use-case-image img {
    transform: scale(1.05);
}

.use-case-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

.use-case-content {
    padding: var(--spacing-5);
}

.use-case-category {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-2);
}

.use-case-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--spacing-2);
}

.use-case-caption {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Light Inspiration Section (Partnership) */
.inspiration-light {
    background: var(--color-gray-50);
}

.partnership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.partnership-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.expert-photo {
    position: relative;
    z-index: 2;
    max-height: 500px;
    width: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.partnership-image-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 70%;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, rgba(161, 33, 34, 0.15) 100%);
    border-radius: var(--radius-xl);
    z-index: 1;
}

.partnership-content {
    padding: var(--spacing-4) 0;
}

.partnership-content .section-title {
    margin-bottom: var(--spacing-4);
}

.partnership-lead {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.partnership-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.partnership-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}

.partnership-features li i {
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.partnership-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.btn-outline-dark {
    background: transparent;
    color: var(--color-gray-800);
    border: 2px solid var(--color-gray-300);
}

.btn-outline-dark:hover {
    background: var(--color-gray-800);
    color: #fff;
    border-color: var(--color-gray-800);
}

/* Responsive Inspirational Sections */
@media (max-width: 1024px) {
    .use-cases-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }
    
    .use-case-card {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
    
    .use-case-image {
        aspect-ratio: 1;
    }
    
    .use-case-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .partnership-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .partnership-image {
        order: -1;
    }
    
    .expert-photo {
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .use-case-card {
        grid-template-columns: 1fr;
    }
    
    .use-case-image {
        aspect-ratio: 16 / 9;
    }
    
    .partnership-content {
        text-align: center;
    }
    
    .partnership-content .section-label,
    .partnership-content .section-title,
    .partnership-lead {
        text-align: center;
    }
    
    .partnership-features {
        text-align: left;
    }
    
    .partnership-features li {
        text-align: left;
    }
    
    .partnership-cta {
        justify-content: center;
        flex-direction: column;
    }
    
    .partnership-cta .btn {
        width: 100%;
    }
    
    .expert-photo {
        max-height: 350px;
    }
    
    .partnership-image-bg {
        width: 90%;
        height: 60%;
    }
}

/* ===========================================
   ABOUT PAGE
   =========================================== */

/* About Hero */
.hero-about {
    min-height: 70vh;
    min-height: 70svh;
}

.hero-image-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    z-index: 0;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Story Section */
.about-story {
    background: #fff;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.story-content .section-title {
    margin-bottom: var(--spacing-6);
}

.story-lead {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-gray-800);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.story-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: var(--spacing-4);
}

.story-image {
    position: relative;
}

.story-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.story-image-caption {
    position: absolute;
    bottom: var(--spacing-4);
    left: var(--spacing-4);
    background: rgba(255, 255, 255, 0.95);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.story-image-caption i {
    color: var(--color-accent);
}

/* Mission & Vision Section */
.about-mission {
    background: var(--color-gray-900);
    color: #fff;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
}

.mission-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--spacing-8);
}

.mission-icon {
    width: 64px;
    height: 64px;
    background: var(--color-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.mission-icon i {
    font-size: 1.75rem;
    color: #fff;
}

.mission-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-4);
    color: #fff;
}

.mission-text {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
}

.mission-text {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

/* Expertise Section */
.about-expertise {
    background: #fff;
}

/* ── 4-column photo mosaic grid ─────────────────────────────── */
.expertise-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-8);
}

/* ── Individual mosaic card ─────────────────────────────────── */
.expertise-mosaic-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* Fixed height — portrait feel */
    height: 480px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    cursor: default;
}

/* ── Photo ──────────────────────────────────────────────────── */
.expertise-mosaic-photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    -webkit-transition: -webkit-transform 600ms ease;
    transition: transform 600ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .expertise-mosaic-card:hover .expertise-mosaic-photo {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

/* ── Gradient overlay — strong at bottom, fades up ─────────── */
.expertise-mosaic-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-linear-gradient(
        top,
        transparent 30%,
        rgba(0, 0, 0, 0.30) 55%,
        rgba(0, 0, 0, 0.85) 100%
    );
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(0, 0, 0, 0.30) 55%,
        rgba(0, 0, 0, 0.85) 100%
    );
    pointer-events: none;
    -webkit-transition: opacity 400ms ease;
    transition: opacity 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .expertise-mosaic-card:hover .expertise-mosaic-overlay {
        opacity: 0.9;
    }
}

/* ── Accent top bar — hidden by default, slides in on hover ─── */
.expertise-mosaic-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-accent);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .expertise-mosaic-card:hover .expertise-mosaic-bar {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

/* ── Text content — sits above overlay ─────────────────────── */
.expertise-mosaic-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-6);
}

.expertise-mosaic-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 var(--spacing-2) 0;
}

.expertise-mosaic-text {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    margin: 0;
    /* Hide by default, reveal on hover on desktop */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: max-height 400ms ease,
                        opacity 400ms ease;
    transition: max-height 400ms ease,
                opacity 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .expertise-mosaic-card:hover .expertise-mosaic-text {
        max-height: 120px;
        opacity: 1;
    }
}

/* ── Responsive: tablet — 2×2 ──────────────────────────────── */
@media (max-width: 1024px) {
    .expertise-mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    .expertise-mosaic-card {
        height: 380px;
    }

    /* Always show description text at tablet — no hover available */
    .expertise-mosaic-text {
        max-height: 120px;
        opacity: 1;
    }
}

/* ── Responsive: mobile — 1 column ─────────────────────────── */
@media (max-width: 640px) {
    .expertise-mosaic {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }

    .expertise-mosaic-card {
        height: 300px;
    }

    .expertise-mosaic-text {
        max-height: 120px;
        opacity: 1;
    }
}

.expertise-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition), box-shadow var(--transition);
}

.expertise-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.expertise-icon {
    width: 56px;
    height: 56px;
    background: var(--color-accent-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.expertise-icon i {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.expertise-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.expertise-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Applications Section */
.about-applications {
    background: var(--color-gray-100);
}

.applications-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-4);
}

.application-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-5);
    /* White card lifts off the gray-100 section background */
    background: #fff;
    border: 1px solid var(--color-gray-200);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    -webkit-transition: border-color var(--transition), -webkit-box-shadow var(--transition), -webkit-transform var(--transition);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    /* Prevent 300ms tap delay on in-app browsers */
    touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
    .application-item:hover {
        border-color: var(--color-accent);
        -webkit-box-shadow: 0 8px 24px rgba(161, 33, 34, 0.14);
        box-shadow: 0 8px 24px rgba(161, 33, 34, 0.14);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }
}

.application-item i {
    /* Icon container: fixed size, accent tint background */
    width: 56px;
    height: 56px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-accent);
    background: var(--color-accent-light);
    border-radius: var(--radius-md);
    -webkit-transition: background var(--transition), color var(--transition);
    transition: background var(--transition), color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .application-item:hover i {
        background: var(--color-accent);
        color: #fff;
    }
}

.application-item span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    text-align: center;
}

/* Sustainability Section */
.about-sustainability {
    background: #fff;
}

.sustainability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.sustainability-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.sustainability-content .section-title {
    margin-bottom: var(--spacing-4);
}

.sustainability-lead {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.sustainability-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.sustainability-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}

.sustainability-list li i {
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Stats Section */
.about-stats {
    background: var(--color-gray-900);
    color: #fff;
    padding: var(--spacing-12) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-8);
    text-align: center;
}

.stat-item {
    padding: var(--spacing-4);
}

.stat-value {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: var(--spacing-2);
}

.stat-label {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Team Section */
.about-team {
    background: var(--color-gray-100);
}

.team-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.team-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.team-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.team-feature {
    display: flex;
    gap: var(--spacing-4);
}

.team-feature i {
    width: 48px;
    height: 48px;
    background: var(--color-accent-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.team-feature h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
}

.team-feature p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* About Page Responsive */
@media (max-width: 1024px) {
    .story-grid,
    .sustainability-grid,
    .team-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .story-image {
        order: -1;
    }
    
    .mission-grid {
        grid-template-columns: 1fr;
    }
    
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .applications-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-6);
    }
}

@media (max-width: 768px) {
    .hero-about {
        min-height: 60vh;
        min-height: 60svh;
    }
    
    .expertise-grid {
        grid-template-columns: 1fr;
    }
    
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-value {
        font-size: 2.5rem;
    }
    
    .mission-card {
        padding: var(--spacing-6);
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .applications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    
    .application-item {
        padding: var(--spacing-4);
    }
    
    .application-item i {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
}

/* ===========================================
   ABOUT PAGE v2.0 — ADDITIONS
   =========================================== */

/* ─── 1. Hero scroll indicator ──────────────────────────────────────────────
   Bouncing chevron, bottom-centre of .hero-about.
   z-index 3 clears the hero-image-container (z 0) and hero-content (z 1)
   without conflicting with the header (fixed, z 300+).               ─── */

/* ─── 2. Stats strip ─────────────────────────────────────────────────────────
   White trust band immediately below hero.
   Uses existing data-counter JS in main.js — no JS changes needed.   ─── */

.about-stats-strip {
    background: #fff;
    padding: var(--spacing-12) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.about-stats-strip-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: var(--spacing-6);
}

.about-stat-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: var(--spacing-4) var(--spacing-2);
}

.about-stat-icon {
    width: 52px;
    height: 52px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-accent-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    font-size: 1.375rem;
    color: var(--color-accent);
    -webkit-transition: background var(--transition), -webkit-transform var(--transition);
    transition: background var(--transition), transform var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .about-stat-item:hover .about-stat-icon {
        background: var(--color-accent);
        color: #fff;
        -webkit-transform: scale(1.06);
        transform: scale(1.06);
    }
}

.about-stat-value {
    font-size: clamp(1.75rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--color-gray-900);
    line-height: 1;
    margin-bottom: var(--spacing-2);
    /* Stable width while counter increments */
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.about-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 500;
    line-height: 1.4;
}

/* Vertical dividers between stat items (desktop only) */
.about-stat-item + .about-stat-item {
    border-left: 1px solid var(--color-gray-100);
}

@media (max-width: 1024px) {
    .about-stats-strip-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-4);
    }
    .about-stat-item + .about-stat-item {
        border-left: none;
    }
}

@media (max-width: 480px) {
    .about-stats-strip-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }
    .about-stat-value {
        font-size: 1.75rem;
    }
    .about-stats-strip {
        padding: var(--spacing-8) 0;
    }
}

/* ─── 3. Milestone timeline ──────────────────────────────────────────────────
   Horizontal 4-column strip appended inside .about-story (below story-grid).
   A progress line runs across the top; each item hangs below its dot.
   Tablet < 900px → 2×2 grid with left-border treatment.
   Mobile < 640px → single column.                                     ─── */

.about-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
    position: relative;
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-8);
}

/* Base track line */
.about-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-gray-200);
    border-radius: 2px;
}

/* Filled progress line — first three milestones complete (75%) */
.about-timeline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, rgba(161, 33, 34, 0.35) 100%);
    border-radius: 2px;
}

.about-timeline-item {
    position: relative;
    padding-top: var(--spacing-6);
}

/* Milestone dot sits on the track */
.about-timeline-dot {
    position: absolute;
    top: -8px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-gray-300);
    border: 3px solid #fff;
    -webkit-box-shadow: 0 0 0 2px var(--color-gray-300);
    box-shadow: 0 0 0 2px var(--color-gray-300);
    -webkit-transition: background var(--transition), -webkit-box-shadow var(--transition);
    transition: background var(--transition), box-shadow var(--transition);
}

/* Current milestone — accent dot with glow */
.about-timeline-item--current .about-timeline-dot {
    background: var(--color-accent);
    -webkit-box-shadow: 0 0 0 3px rgba(161, 33, 34, 0.2);
    box-shadow: 0 0 0 3px rgba(161, 33, 34, 0.2);
}

.about-timeline-year {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--spacing-3);
    letter-spacing: -0.02em;
}

.about-timeline-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
    line-height: 1.3;
}

.about-timeline-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 900px) {
    .about-timeline {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 0;
        margin-top: var(--spacing-12);
    }
    .about-timeline::before,
    .about-timeline::after {
        display: none;
    }
    .about-timeline-item {
        padding-top: 0;
        padding-left: var(--spacing-5);
        border-left: 3px solid var(--color-gray-200);
    }
    .about-timeline-item--current {
        border-left-color: var(--color-accent);
    }
    .about-timeline-dot {
        display: none;
    }
}

@media (max-width: 640px) {
    .about-timeline {
        grid-template-columns: 1fr;
        gap: var(--spacing-5);
    }
}

/* ─── 4. Mission / Vision / Values section wrapper ───────────────────────────
   --color-gray-50 (#f9fafb) is sub-threshold vs white (#fff) — visually
   imperceptible on most screens. Use --color-gray-100 (#f3f4f6) which
   provides a clearly visible alternate background.                     ─── */

.about-values-section {
    background: var(--color-gray-100);
}

/* ─── 5. Expertise bridge CTA ────────────────────────────────────────────────
   Explicit #fff on the expertise section ensures it contrasts visibly
   against the gray-100 values section above and the gray-100 applications
   section below — completing the white → gray → white → gray alternation.  ─── */

.about-expertise-cta {
    margin-top: var(--spacing-8);
    background: var(--color-gray-900);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-10);
}

.about-expertise-cta-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.about-expertise-cta-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.about-expertise-cta-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--spacing-2) 0;
    line-height: 1.3;
}

.about-expertise-cta-sub {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

@media (max-width: 768px) {
    .about-expertise-cta {
        padding: var(--spacing-6);
    }
    .about-expertise-cta-inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: var(--spacing-5);
    }
    .about-expertise-cta-inner .btn {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/* ─── 6. Applications — linked tiles + footer CTA ────────────────────────────
   gray-100 background alternates with the white expertise section above
   and the white sustainability section below.                          ─── */

a.application-item {
    color: inherit;
    text-decoration: none;
}

.about-applications-footer {
    text-align: center;
    margin-top: var(--spacing-10);
}

@media (max-width: 640px) {
    .about-applications-footer .btn {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/* ─── 7. Sustainability — product CTA ────────────────────────────────────────
   Single action link below the four sustainability checklist items.    ─── */

.sustainability-cta {
    margin-top: var(--spacing-6);
}

/* ─── 8. Team — direct contact actions ──────────────────────────────────────
   Contact + phone buttons below team features.
   Separated by a border-top, stacks to column on narrow mobile.        ─── */

.team-cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 480px) {
    .team-cta {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .team-cta .btn {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-stat-icon {
        -webkit-transition: none;
        transition: none;
    }
}

/* ===========================================
   TEAM MEMBERS — Grouped Contact Cards
   Authoring order: mobile-first. Base rules target the smallest
   viewport; successive min-width blocks layer on desktop behaviour.
   Cross-browser notes:
     · -webkit- prefixes kept for flex, transform, transition, box-shadow,
       object-fit — in line with the rest of this stylesheet.
     · aspect-ratio is supported in all evergreen browsers from 2021+
       (Safari 15, Chrome 88, Firefox 89). The padding-top fallback in
       .team-member-photo below covers older Safari/iOS builds.
   =========================================== */

.about-team-members {
    background: #fff;
    padding-top: var(--spacing-10);
}

/* ── Department group wrapper ───────────────────────────────── */
.team-group {
    margin-bottom: var(--spacing-10);
}

.team-group:last-child {
    margin-bottom: 0;
}

/* ── Department title (Management, External Sales, …) ──────── */
.team-group-title {
    position: relative;
    margin: 0 0 var(--spacing-5) 0;
    padding-bottom: var(--spacing-3);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--color-gray-200);
}

/* Brand accent bar under the heading — sits flush with the border */
.team-group-title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 2px;
    background: var(--color-accent);
}

/* ── Card grid — mobile first: 1 column on narrow viewports ── */
.team-members-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-5);
}

/* ── Card shell ─────────────────────────────────────────────── */
.team-member-card {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    /* overflow: visible so the speech bubble can float above the card */
    overflow: visible;
    position: relative;
    -webkit-transition: -webkit-box-shadow 240ms ease,
                        -webkit-transform 240ms ease;
    transition: box-shadow 240ms ease,
                transform 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .team-member-card:hover {
        -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

/* ── Photo frame ────────────────────────────────────────────── */
.team-member-photo {
    width: 100%;
    /* Fallback for browsers without aspect-ratio (≤Safari 14): 1:1 box */
    padding-top: 100%;
    height: 0;
    overflow: hidden;
    background: var(--color-gray-100);
    position: relative;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

/* Modern browsers: use aspect-ratio and drop the padding hack */
@supports (aspect-ratio: 1 / 1) {
    .team-member-photo {
        aspect-ratio: 1 / 1;
        padding-top: 0;
        height: auto;
    }
}

.team-member-photo img {
    /* Fill the padded 1:1 box regardless of which sizing path is active */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center top;
    display: block;
    -webkit-transition: -webkit-transform 400ms ease;
    transition: transform 400ms ease;
}

@supports (aspect-ratio: 1 / 1) {
    .team-member-photo img {
        position: static;
    }
}

@media (hover: hover) and (pointer: fine) {
    .team-member-card:hover .team-member-photo img {
        -webkit-transform: scale(1.03);
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .team-member-card,
    .team-member-photo img {
        -webkit-transition: none;
        transition: none;
    }

    .team-member-card:hover {
        -webkit-transform: none;
        transform: none;
    }

    .team-member-card:hover .team-member-photo img {
        -webkit-transform: none;
        transform: none;
    }
}

/* ── Speech bubble — pointer devices only ─────────────────────
   Floats ABOVE the card with the SVG tail pointing down into the
   photo. Triggered on .team-member-card:hover. Hidden entirely on
   touch/mobile so it never traps tap focus or obscures tap targets.
   SVG natural ratio: 337.5 × 171 (tail bottom-left).
   ──────────────────────────────────────────────────────────── */
.team-member-bubble {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .team-member-bubble {
        display: block;
        position: absolute;
        /* Sit above the card — tail (bottom of SVG) grazes the top of the photo */
        bottom: calc(100% - 22px);
        left: -8px;
        /* Large enough to be legible — wider than the card itself */
        width: 380px;
        /* Height from SVG ratio: 380 × (171/337.5) ≈ 193px */
        aspect-ratio: 337.5 / 171;
        background-image: url('../img/speech_bubble.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: 20;
        pointer-events: none;
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
        -webkit-transition: opacity 280ms ease,
                            -webkit-transform 280ms ease;
        transition: opacity 280ms ease,
                    transform 280ms ease;
    }

    /* Padding-top fallback height for browsers without aspect-ratio */
    @supports not (aspect-ratio: 337.5 / 171) {
        .team-member-bubble {
            height: 193px;
            aspect-ratio: auto;
        }
    }

    .team-member-card:hover .team-member-bubble {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .team-member-bubble,
    .team-member-card:hover .team-member-bubble {
        -webkit-transition: opacity 0ms ease;
        transition: opacity 0ms ease;
        -webkit-transform: none;
        transform: none;
    }
}

.team-member-bubble-text {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #fff;
    line-height: 1.55;
    /*
     * Padding fits the bubble shape:
     * top/sides ~18px, bottom ~50px to clear the SVG tail
     */
    padding: 18px 22px 50px 22px;
    margin: 0;
}

/* ── Card body ──────────────────────────────────────────────── */
.team-member-body {
    padding: var(--spacing-5);
    border-top: 1px solid var(--color-gray-100);
}

/* ── Name ───────────────────────────────────────────────────── */
.team-member-name {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1.2;
}

/* ── Title / role ───────────────────────────────────────────── */
.team-member-role {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--spacing-4) 0;
    line-height: 1.3;
}

/* ── Contact links ──────────────────────────────────────────── */
.team-member-contacts {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-2);
}

.team-member-contact {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    text-decoration: none;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    /* Long email addresses must not overflow narrow cards */
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-transition: background 200ms ease, color 200ms ease;
    transition: background 200ms ease, color 200ms ease;
}

.team-member-contact i {
    width: 28px;
    height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-transition: background 200ms ease, color 200ms ease;
    transition: background 200ms ease, color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .team-member-contact:hover {
        background: var(--color-accent-light);
        color: var(--color-gray-900);
    }

    .team-member-contact:hover i {
        background: var(--color-accent);
        color: #fff;
    }
}

/* ── Small phones in landscape / phablets: 2 columns ───────── */
@media (min-width: 480px) {
    .team-members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Tablets: 3 columns ─────────────────────────────────────── */
@media (min-width: 769px) {
    .team-group {
        margin-bottom: var(--spacing-12);
    }

    .team-group-title {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-6);
    }

    .team-group-title::before {
        width: 64px;
    }

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

    .team-member-body {
        padding: var(--spacing-6);
    }

    .team-member-name {
        font-size: var(--font-size-xl);
    }

    .team-member-role {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-5);
    }
}

/* ── Desktops: 4 columns ────────────────────────────────────── */
@media (min-width: 1025px) {
    .team-members-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===========================================
   CONTACT PAGE
   =========================================== */

/* Contact Hero - uses same .hero-image-container and .hero-image from About section */
.hero-contact {
    min-height: 70vh;
    min-height: 70svh;
}

/* Contact Info Cards */
.contact-info-section {
    background: #fff;
    position: relative;
    z-index: 10;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
}

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

.contact-info-card {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: var(--color-accent);
}

.contact-info-icon {
    width: 56px;
    height: 56px;
    background: var(--color-accent-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-4);
}

.contact-info-icon i {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.contact-info-card h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.contact-info-value {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.6;
    margin-bottom: var(--spacing-2);
}

.contact-info-note {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

/* Offset anchor scroll so the form heading clears the fixed header */
#form {
    scroll-margin-top: calc(var(--header-height) + var(--header-top-height) + var(--spacing-4));
}

/* Contact Form Section */
.contact-form-section {
    background: var(--color-gray-50);
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--spacing-12);
    align-items: start;
}

.contact-form-wrapper {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-10);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.form-header {
    margin-bottom: var(--spacing-8);
}

.form-header .section-title {
    margin-bottom: var(--spacing-2);
}

.form-header .section-description {
    color: var(--color-gray-600);
}

/* Form Honeypot (hidden) */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Form Elements */
.form-row {
    display: grid;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

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

.form-group {
    margin-bottom: var(--spacing-4);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-2);
}

.form-label .required {
    color: var(--color-accent);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-gray-900);
    background: #fff;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
    -webkit-appearance: none;
    appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(161, 33, 34, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-gray-400);
}

.form-input.has-error,
.form-select.has-error,
.form-textarea.has-error {
    border-color: #dc2626;
}

.form-input.has-success,
.form-select.has-success,
.form-textarea.has-success {
    border-color: #16a34a;
}

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

/* Select wrapper */
.form-select-wrapper {
    position: relative;
}

.form-select-wrapper i {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-gray-400);
    font-size: 0.875rem;
}

.form-select {
    padding-right: var(--spacing-10);
    cursor: pointer;
}

/* Checkbox */
.form-checkbox-group {
    margin-bottom: var(--spacing-4);
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    line-height: 1.5;
}

.form-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-mark {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    margin-top: 1px;
}

.checkbox-mark::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--transition);
}

.form-checkbox input:checked + .checkbox-mark {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.form-checkbox input:checked + .checkbox-mark::after {
    transform: rotate(45deg) scale(1);
}

.form-checkbox input:focus + .checkbox-mark {
    box-shadow: 0 0 0 3px rgba(161, 33, 34, 0.1);
}

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

.checkbox-label a:hover {
    text-decoration: none;
}

/* Form Error */
.form-error {
    display: block;
    font-size: var(--font-size-xs);
    color: #dc2626;
    margin-top: var(--spacing-1);
    min-height: 1.25rem;
}

/* Form Actions */
.form-actions {
    margin-top: var(--spacing-6);
}

.form-actions .btn {
    min-width: 200px;
}

.btn .btn-loading {
    display: none;
}

.btn.is-loading .btn-text {
    display: none;
}

.btn.is-loading .btn-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Form Messages */
.form-message {
    display: none;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

.form-message.is-visible {
    display: flex;
}

.form-message i {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.form-message strong {
    display: block;
    margin-bottom: var(--spacing-1);
}

.form-message p {
    font-size: var(--font-size-sm);
    margin: 0;
}

.form-message-success {
    background: #dcfce7;
    border: 1px solid #16a34a;
    color: #166534;
}

.form-message-success i {
    color: #16a34a;
}

.form-message-error {
    background: #fef2f2;
    border: 1px solid #dc2626;
    color: #991b1b;
}

.form-message-error i {
    color: #dc2626;
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    position: -webkit-sticky; /* iOS Safari ≤12 */
    position: sticky;
    top: calc(var(--header-height) + var(--header-top-height) + var(--spacing-6));
}

.contact-sidebar-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.contact-sidebar-card h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.contact-sidebar-card h3 i {
    color: var(--color-accent);
}

.contact-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.contact-benefits li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
}

.contact-benefits li i {
    color: var(--color-accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.contact-sidebar-highlight {
    background: var(--color-gray-900);
    color: #fff;
    text-align: center;
}

.contact-sidebar-highlight h3 {
    color: #fff;
    justify-content: center;
}

.response-time-icon {
    width: 48px;
    height: 48px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-4);
}

.response-time-icon i {
    font-size: 1.25rem;
    color: #fff;
}

.response-time-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: #fff;
    margin-bottom: var(--spacing-1);
}

.response-time-note {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-4);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Map Section */
.contact-map-section {
    background: #fff;
    padding-bottom: 0;
}

.map-container {
    position: relative;
    margin-top: var(--spacing-8);
}

.map-wrapper {
    width: 100%;
    height: 450px;
    background: var(--color-gray-200);
    overflow: hidden;
    position: relative;
}

.map-wrapper iframe {
    width: calc(100% + 400px);
    height: 100%;
    display: block;
    margin-left: -400px;
}

.map-overlay-card {
    position: absolute;
    bottom: var(--spacing-6);
    left: var(--spacing-6);
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    z-index: 10;
}

.map-card-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
}

.map-card-content address {
    font-style: normal;
    margin-bottom: var(--spacing-4);
}

.map-card-content address p {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

.map-card-content address i {
    color: var(--color-accent);
    margin-top: 3px;
}

/* FAQ Section */
.contact-faq-section {
    background: var(--color-gray-50);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

.faq-item {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.faq-item h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
}

.faq-item p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Contact Page Responsive */
@media (max-width: 1024px) {
    .contact-info-grid,
    .contact-info-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .contact-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .contact-sidebar-card {
        flex: 1;
        min-width: 250px;
    }
    
    .map-overlay-card {
        position: relative;
        bottom: auto;
        left: auto;
        max-width: none;
        margin: calc(-1 * var(--spacing-16)) var(--spacing-6) 0;
        transform: translateY(-50%);
    }
}

@media (max-width: 768px) {
    .hero-contact {
        min-height: 60vh;
        min-height: 60svh;
    }
    
    .contact-info-grid,
    .contact-info-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .contact-info-card {
        text-align: left;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .contact-info-icon {
        margin: 0;
        flex-shrink: 0;
    }
    
    .contact-info-content {
        flex: 1;
    }
    
    .contact-info-card h3 {
        margin-bottom: var(--spacing-1);
    }
    
    .contact-info-value {
        margin-bottom: var(--spacing-1);
    }
    
    .contact-info-note {
        display: none;
    }
    
    .form-row-2 {
        grid-template-columns: 1fr;
    }
    
    .contact-form-wrapper {
        padding: var(--spacing-6);
    }
    
    .contact-sidebar {
        flex-direction: column;
    }
    
    .contact-sidebar-card {
        min-width: 100%;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .map-wrapper {
        height: 300px;
    }
    
    .map-overlay-card {
        margin: var(--spacing-4);
        transform: none;
        position: static;
    }
}

@media (max-width: 640px) {
    .form-actions .btn {
        width: 100%;
    }
}

/* ===========================================
   SERVICES PAGE
   =========================================== */

/* Services Hero */
.hero-services {
    min-height: 70vh;
    min-height: 70svh;
}

/* Services Introduction Section */
.services-intro {
    background: #fff;
}

.services-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.services-intro-content .section-title {
    margin-bottom: var(--spacing-4);
}

.services-intro-lead {
    font-size: var(--font-size-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
    font-weight: 500;
}

.services-intro-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: var(--spacing-4);
}

.services-intro-text:last-of-type {
    margin-bottom: 0;
}

.services-intro-image {
    position: relative;
}

.services-intro-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.services-intro-image-caption {
    position: absolute;
    bottom: var(--spacing-4);
    left: var(--spacing-4);
    background: rgba(255, 255, 255, 0.95);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-700);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    box-shadow: var(--shadow-md);
}

.services-intro-image-caption i {
    color: var(--color-accent);
}

/* Services Benefits Section */
.services-benefits {
    background: var(--color-gray-50);
}

.services-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
}

.services-benefit-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition), box-shadow var(--transition);
}

.services-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.services-benefit-icon {
    width: 64px;
    height: 64px;
    background: var(--color-accent-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-4);
}

.services-benefit-icon i {
    font-size: 1.75rem;
    color: var(--color-accent);
}

.services-benefit-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-900);
}

.services-benefit-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Services Products Section */
.services-products {
    background: #fff;
}

.services-products-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.services-products-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.services-products-content .section-title {
    margin-bottom: var(--spacing-4);
}

.services-products-lead {
    font-size: var(--font-size-lg);
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.services-products-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.services-products-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
}

.services-products-list li i {
    color: var(--color-accent);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Services Digital Section (PIM API) */
.services-digital {
    background: var(--color-gray-900);
    color: #fff;
    padding: var(--spacing-20) 0;
}

.services-digital .section-label {
    color: rgba(255, 255, 255, 0.6);
}

.services-digital .section-label i {
    color: var(--color-accent);
}

.services-digital .section-title {
    color: #fff;
}

.services-digital .section-description {
    color: rgba(255, 255, 255, 0.7);
}

.services-digital-content {
    margin-top: var(--spacing-12);
}

.services-digital-visual {
    margin-bottom: var(--spacing-12);
}

.services-api-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    padding: var(--spacing-8);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.services-api-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-6) var(--spacing-8);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    min-width: 160px;
}

.services-api-box i {
    font-size: 2.5rem;
    color: var(--color-accent);
}

.services-api-box span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.services-api-box-source {
    background: rgba(161, 33, 34, 0.2);
    border: 1px solid rgba(161, 33, 34, 0.3);
}

.services-api-box-target {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.services-api-connection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    color: rgba(255, 255, 255, 0.5);
}

.services-api-connection i {
    font-size: 1.5rem;
    animation: services-api-pulse 2s infinite;
}

.services-api-connection span {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@keyframes services-api-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.services-digital-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

.services-digital-benefit {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-5);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background var(--transition), border-color var(--transition);
}

.services-digital-benefit:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.services-digital-benefit-icon {
    width: 48px;
    height: 48px;
    background: rgba(161, 33, 34, 0.2);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.services-digital-benefit-icon i {
    font-size: 1.25rem;
    color: var(--color-accent);
}

.services-digital-benefit-content h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--spacing-1);
}

.services-digital-benefit-content p {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* Services On-Site Support Section */
.services-onsite {
    background: var(--color-gray-50);
}

.services-onsite-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.services-onsite-content .section-title {
    margin-bottom: var(--spacing-4);
}

.services-onsite-lead {
    font-size: var(--font-size-lg);
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
    font-weight: 500;
}

.services-onsite-text {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: var(--spacing-8);
}

.services-onsite-services {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.services-onsite-service {
    display: flex;
    gap: var(--spacing-4);
}

.services-onsite-service > i {
    width: 48px;
    height: 48px;
    background: var(--color-accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.services-onsite-service h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
    color: var(--color-gray-900);
}

.services-onsite-service p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

.services-onsite-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Services Core Section */
.services-core {
    background: #fff;
}

.services-core-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-6);
}

.services-core-card {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    transition: transform var(--transition), box-shadow var(--transition);
}

.services-core-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.services-core-icon {
    width: 56px;
    height: 56px;
    background: var(--color-accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.services-core-icon i {
    font-size: 1.5rem;
    color: var(--color-accent);
}

.services-core-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-900);
}

.services-core-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* Services Stats Section */
.services-stats {
    background: var(--color-gray-900);
    color: #fff;
    padding: var(--spacing-12) 0;
}

/* Services Page Responsive */
@media (max-width: 1024px) {
    .services-intro-grid,
    .services-products-grid,
    .services-onsite-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .services-intro-image,
    .services-products-image {
        order: -1;
    }
    
    .services-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-digital-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-core-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-services {
        min-height: 60vh;
        min-height: 60svh;
    }
    
    .services-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .services-api-illustration {
        flex-direction: column;
        gap: var(--spacing-4);
        padding: var(--spacing-6);
    }
    
    .services-api-connection {
        transform: rotate(90deg);
    }
    
    .services-api-box {
        min-width: 140px;
        padding: var(--spacing-5) var(--spacing-6);
    }
    
    .services-digital-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .services-core-grid {
        grid-template-columns: 1fr;
    }
    
    .services-benefit-card,
    .services-core-card {
        text-align: left;
    }
    
    .services-benefit-icon {
        margin: 0 0 var(--spacing-4) 0;
    }
}

@media (max-width: 640px) {
    .services-intro-image-caption {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: var(--spacing-4);
        justify-content: center;
    }
}

/* ===========================================
   LEGAL PAGES (Privacy, Terms, etc.)
   =========================================== */

/* Legal Hero */
.hero-legal {
    min-height: 50vh;
    min-height: 50svh;
    background: var(--color-gray-900);
}

.hero-overlay-solid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0; /* shorthand: iOS Safari ≤14.4 needs longhand above */
    background: linear-gradient(135deg, var(--color-gray-900) 0%, #1a1a2e 100%);
    z-index: 0;
}

/* Legal Content Section */
.legal-content {
    background: var(--color-gray-50);
}

.legal-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-12);
    align-items: start;
}

/* Legal Sidebar / TOC */
.legal-sidebar {
    position: -webkit-sticky; /* iOS Safari ≤12 */
    position: sticky;
    top: calc(var(--header-height) + var(--header-top-height) + var(--spacing-4));
}

.legal-toc {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--spacing-4);
}

.legal-toc-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.legal-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.legal-toc-list li a {
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    border-radius: var(--radius);
    transition: all var(--transition);
}

.legal-toc-list li a:hover {
    background: var(--color-gray-100);
    color: var(--color-accent);
}

.legal-last-updated {
    background: #fff;
    border-radius: var(--radius);
    padding: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.legal-last-updated i {
    color: var(--color-accent);
}

/* Legal Main Content */
.legal-main {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--spacing-10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.legal-section {
    padding-bottom: var(--spacing-10);
    margin-bottom: var(--spacing-10);
    border-bottom: 1px solid var(--color-gray-200);
}

.legal-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.legal-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-6);
}

.legal-section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 700;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.legal-section p {
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    line-height: 1.8;
    margin-bottom: var(--spacing-4);
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-subsection-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

/* Legal Lists */
.legal-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin: var(--spacing-4) 0;
}

.legal-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    line-height: 1.7;
}

.legal-list li i {
    color: var(--color-accent);
    font-size: 0.875rem;
    margin-top: 5px;
    flex-shrink: 0;
}

/* Prohibited List (red X marks) */
.legal-list-prohibited li i {
    color: #dc2626;
}

/* Definitions List */
.legal-definitions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin: var(--spacing-6) 0;
}

.legal-definition {
    background: var(--color-gray-50);
    border-radius: var(--radius);
    padding: var(--spacing-4) var(--spacing-5);
    border-left: 3px solid var(--color-accent);
}

.legal-definition dt {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
}

.legal-definition dd {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* Legal Info Card */
.legal-info-card {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin: var(--spacing-6) 0;
}

.legal-info-card p {
    margin-bottom: var(--spacing-1);
    color: var(--color-gray-700);
}

.legal-info-card p:first-child {
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.legal-info-contact {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.legal-info-contact i {
    color: var(--color-accent);
    width: 20px;
}

.legal-info-contact a {
    color: var(--color-accent);
}

.legal-info-contact a:hover {
    text-decoration: underline;
}

/* Legal Highlight Boxes */
.legal-highlight {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    margin: var(--spacing-6) 0;
}

.legal-highlight > i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.legal-highlight strong {
    display: block;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-2);
}

.legal-highlight p {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.legal-highlight-positive {
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.legal-highlight-positive > i {
    color: #16a34a;
}

.legal-highlight-positive strong {
    color: #15803d;
}

.legal-highlight-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.legal-highlight-info > i {
    color: #3b82f6;
}

.legal-highlight-info strong {
    color: #1d4ed8;
}

.legal-highlight-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.legal-highlight-warning > i {
    color: #f59e0b;
}

.legal-highlight-warning strong {
    color: #b45309;
}

/* Legal Basis Grid */
.legal-basis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin: var(--spacing-6) 0;
}

.legal-basis-card {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
}

.legal-basis-icon {
    width: 48px;
    height: 48px;
    background: var(--color-accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.legal-basis-icon i {
    font-size: 1.25rem;
    color: var(--color-accent);
}

.legal-basis-card h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.legal-basis-card p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Legal Cookie Table */
.legal-cookie-table {
    margin: var(--spacing-6) 0;
    overflow-x: auto;
}

.legal-cookie-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.legal-cookie-table th,
.legal-cookie-table td {
    padding: var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.legal-cookie-table th {
    background: var(--color-gray-50);
    font-weight: 700;
    color: var(--color-gray-900);
}

.legal-cookie-table td {
    color: var(--color-gray-700);
}

.legal-cookie-table code {
    background: var(--color-gray-100);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

/* Legal Rights Grid */
.legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin: var(--spacing-6) 0;
}

.legal-right-item {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
}

.legal-right-item i {
    width: 40px;
    height: 40px;
    background: var(--color-accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-3);
}

.legal-right-item h4 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
}

.legal-right-item p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Legal Contact Card */
.legal-contact-card {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-top: var(--spacing-6);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.legal-contact-method {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.legal-contact-method > i {
    width: 44px;
    height: 44px;
    background: var(--color-accent-light);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--color-accent);
    flex-shrink: 0;
}

.legal-contact-method strong {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    font-weight: 600;
    margin-bottom: 2px;
}

.legal-contact-method a,
.legal-contact-method span {
    font-size: var(--font-size-base);
    color: var(--color-gray-900);
}

.legal-contact-method a:hover {
    color: var(--color-accent);
}

/* Legal Page Responsive */
@media (max-width: 1024px) {
    .legal-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .legal-sidebar {
        position: static;
        display: flex;
        gap: var(--spacing-4);
    }
    
    .legal-toc {
        flex: 1;
        margin-bottom: 0;
    }
    
    .legal-last-updated {
        flex-direction: column;
        text-align: center;
        justify-content: center;
        min-width: 160px;
    }
    
    .legal-basis-grid,
    .legal-rights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-legal {
        min-height: 40vh;
        min-height: 40svh;
    }
    
    .legal-sidebar {
        flex-direction: column;
    }
    
    .legal-last-updated {
        flex-direction: row;
        min-width: auto;
    }
    
    .legal-main {
        padding: var(--spacing-6);
    }
    
    .legal-section {
        padding-bottom: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }
    
    .legal-basis-grid,
    .legal-rights-grid {
        grid-template-columns: 1fr;
    }
    
    .legal-contact-card {
        gap: var(--spacing-3);
    }
}

@media (max-width: 640px) {
    .legal-section-title {
        font-size: var(--font-size-lg);
    }
    
    .legal-highlight {
        flex-direction: column;
        text-align: center;
    }
    
    .legal-highlight > i {
        margin: 0 auto;
    }
    
    .legal-cookie-table {
        font-size: var(--font-size-xs);
    }
    
    .legal-cookie-table th,
    .legal-cookie-table td {
        padding: var(--spacing-2) var(--spacing-3);
    }
}

/* ===========================================
   FOOTER
   =========================================== */
.site-footer {
    background: var(--color-gray-900);
    color: #fff;
}

.footer-main {
    padding: var(--spacing-16) 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: var(--spacing-12);
}

.footer-logo {
    display: inline-block;
    margin-bottom: var(--spacing-5);
}

.footer-logo img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-tagline {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: var(--spacing-6);
    max-width: 300px;
}

.footer-social {
    display: flex;
    gap: var(--spacing-3);
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    color: #fff;
    transition: all var(--transition);
}

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

.footer-heading {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-5);
    color: #fff;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.footer-links a {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition);
}

.footer-links a:hover {
    color: #fff;
}

.footer-links a i {
    width: 16px;
    font-size: 0.9em;
    color: var(--color-gray-500);
}

.footer-address {
    font-style: normal;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: var(--spacing-5);
}

.footer-contact-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.contact-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
}

.contact-link i {
    width: 16px;
    color: var(--color-gray-500);
}

.contact-link:hover {
    color: var(--color-accent);
}

.footer-hours h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-3);
}

.footer-hours p {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--spacing-1);
}

.hours-value {
    color: rgba(255, 255, 255, 0.9);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-6) 0;
    /* iPhone X+ safe area for home indicator — constant() for iOS 11.0, env() for iOS 11.2+ */
    padding-bottom: calc(var(--spacing-6) + constant(safe-area-inset-bottom));
    padding-bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom));
}

.footer-bottom-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-6);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.5);
}

.footer-legal a:hover {
    color: #fff;
}

/* ===========================================
   BACK TO TOP
   =========================================== */
.back-to-top {
    position: fixed;
    /* iPhone X+ home indicator — constant() for iOS 11.0, env() for iOS 11.2+ */
    bottom: calc(var(--spacing-6) + constant(safe-area-inset-bottom, 0px));
    bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--spacing-6) + constant(safe-area-inset-right, 0px));
    right: calc(var(--spacing-6) + env(safe-area-inset-right, 0px));
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition);
    z-index: var(--z-sticky);
}

.back-to-top:not([hidden]) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-accent-hover);
    transform: translateY(-4px);
}

/* ===========================================
   NEWS PAGES
   Mobile-first. Base styles = 320px+.
   Enhancements at min-width: 640px (tablet)
   and min-width: 1024px (desktop).
   =========================================== */
 
/* ── News hero — uses site's .hero base class ── */
/* .hero already provides: position:relative, min-height:85vh, display:flex,
   align-items:center, header offset (margin-top negative), overflow:hidden.
   .hero-news reduces the height and sets a dark background fallback.         */
.hero-news {
    min-height: 70vh;
    min-height: 70svh;
    background: var(--color-gray-900);
}

/* The .hero-overlay provides the gradient over the background */
.hero-news .hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.60) 60%,
        rgba(0, 0, 0, 0.70) 100%
    );
}

/* ── News grid section ── */
.news-section {
    background: var(--color-gray-100);
    padding: var(--spacing-16) 0;
}
 
/* ── News card grid — 1 col mobile → 2 tablet → 3 desktop ── */
.news-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    list-style: none;
    margin: 0;
    padding: 0;
}
 
/* Use flex instead of grid for broadest cross-browser support */
.news-card {
    width: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
    -webkit-tap-highlight-color: transparent;
}
 
@media (min-width: 640px) {
    .news-card {
        /* 2 columns with gap taken into account */
        width: calc(50% - (var(--spacing-6) / 2));
    }
}
 
@media (min-width: 1024px) {
    .news-card {
        /* 3 columns: subtract 2/3 of the total gap */
        width: calc(33.333% - (var(--spacing-6) * 2 / 3));
    }
}
 
@media (hover: hover) and (pointer: fine) {
    .news-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }
 
    .news-card:hover .news-card-img img {
        transform: scale(1.04);
    }
}
 
.news-card-img {
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio — widest browser support over aspect-ratio */
    position: relative;
    overflow: hidden;
    background: var(--color-gray-200);
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
 
.news-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
 
.news-card-img-placeholder {
    position: absolute;
    inset: 0;
    top: 0; right: 0; bottom: 0; left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: var(--color-gray-400);
    font-size: 2.5rem;
}
 
.news-card-body {
    padding: var(--spacing-5);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1;
    flex: 1;
}
 
.news-card-date {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-3);
}
 
.news-card-date i {
    font-size: 0.9em;
}
 
.news-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.3;
    margin-bottom: var(--spacing-3);
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
.news-card-excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    line-height: 1.6;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--spacing-5);
    -webkit-flex: 1;
    flex: 1;
}
 
.news-card-link {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    -webkit-align-self: flex-start;
    align-self: flex-start;
    min-height: 44px;   /* touch target */
    transition: gap var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
 
@media (hover: hover) and (pointer: fine) {
    .news-card-link:hover {
        gap: var(--spacing-3);
    }
 
    .news-card-link:hover i {
        transform: translateX(3px);
    }
}
 
.news-card-link i {
    font-size: 0.85em;
    transition: transform var(--transition);
}
 
/* ── Empty state ── */
.news-empty {
    text-align: center;
    padding: var(--spacing-20) var(--spacing-6);
    color: var(--color-gray-500);
}
 
.news-empty i {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--spacing-4);
    opacity: 0.35;
}
 
.news-empty p {
    font-size: var(--font-size-lg);
}
 
/* ── Pagination ── */
.pagination {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-12);
}
 
.pagination-btn,
.pagination-num {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
 
.pagination-btn {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
    gap: var(--spacing-2);
}
 
@media (hover: hover) and (pointer: fine) {
    .pagination-btn:not([aria-disabled="true"]):hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }
}
 
.pagination-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
 
.pagination-num {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-700);
}
 
@media (hover: hover) and (pointer: fine) {
    .pagination-num:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }
}
 
.pagination-num[aria-current="page"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
 
.pagination-ellipsis {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--spacing-2);
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
}
 
/* ===========================================
   ARTICLE DETAIL PAGE
   =========================================== */
 
/* ── Article hero — featured image with title overlay ── */
/* ── Article detail hero — extends site's .hero base class ── */
/* .hero provides: position:relative, min-height, display:flex,
   align-items:center, overflow:hidden, header offset.
   .hero-article overrides height and aligns content to flex-end
   so the title sits above the gradient at the bottom of the image. */
.hero-article {
    min-height: 60vh;
    min-height: 60svh;
    background: var(--color-gray-900);
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

@media (min-width: 640px) {
    .hero-article {
        min-height: 65vh;
        min-height: 65svh;
    }
}

/* Bottom-heavy gradient keeps title readable regardless of image */
.hero-article .hero-overlay {
    background: -webkit-linear-gradient(
        top,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.85) 100%
    );
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.45) 50%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.hero-article .hero-content {
    max-width: 900px;
    padding-bottom: var(--spacing-12);
}

.hero-article .hero-title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
}

.article-hero-meta {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-sm);
}

.article-hero-meta i {
    margin-right: var(--spacing-1);
    opacity: 0.8;
}

/* ── Article body section ── */
.article-section {
    background: #fff;
    padding: var(--spacing-12) 0 var(--spacing-20);
}
 
/* Single-column centered layout — readable line length */
.article-back {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--spacing-8);
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: gap var(--transition);
}
 
@media (hover: hover) and (pointer: fine) {
    .article-back:hover {
        gap: var(--spacing-3);
    }
}
 
.article-back i {
    font-size: 0.9em;
    transition: transform var(--transition);
}
 
@media (hover: hover) and (pointer: fine) {
    .article-back:hover i {
        transform: translateX(-3px);
    }
}
 
/* ── Article rich-text body ── */
.article-body {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-gray-700);
}

/* First paragraph — slightly larger as a lead-in */
.article-body p:first-of-type {
    font-size: var(--font-size-lg);
    line-height: 1.75;
    color: var(--color-gray-800);
    font-weight: 500;
}

.article-body p {
    margin-bottom: var(--spacing-6);
}
 
.article-body p:last-child {
    margin-bottom: 0;
}
 
.article-body h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.3;
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-4);
}
 
.article-body h4 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.3;
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-3);
}
 
.article-body strong {
    font-weight: 700;
    color: var(--color-gray-800);
}
 
.article-body em {
    font-style: italic;
}
 
.article-body ul,
.article-body ol {
    margin-bottom: var(--spacing-6);
    padding-left: var(--spacing-6);
}
 
.article-body ul {
    list-style: disc;
}
 
.article-body ol {
    list-style: decimal;
}
 
.article-body li {
    margin-bottom: var(--spacing-2);
    color: var(--color-gray-700);
    line-height: 1.7;
}
 
.article-body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
 
@media (hover: hover) and (pointer: fine) {
    .article-body a:hover {
        color: var(--color-accent-hover);
    }
}
 
.article-body blockquote {
    border-left: 4px solid var(--color-accent);
    padding: var(--spacing-4) var(--spacing-6);
    margin: var(--spacing-8) 0;
    background: var(--color-accent-light);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--color-gray-700);
    font-size: var(--font-size-lg);
    line-height: 1.7;
}
 
/* ── Inline article images ── */
.article-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--spacing-8) 0;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: var(--shadow-md);
}

/* Float left — text wraps to the right */
.article-img-left {
    display: block;
    float: left;
    width: 45%;
    height: auto;
    margin: var(--spacing-2) var(--spacing-8) var(--spacing-6) 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    -o-object-fit: cover;
    object-fit: cover;
}

/* Float right — text wraps to the left */
.article-img-right {
    display: block;
    float: right;
    width: 45%;
    height: auto;
    margin: var(--spacing-2) 0 var(--spacing-6) var(--spacing-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    -o-object-fit: cover;
    object-fit: cover;
}

/* Mobile: remove floats — all images stack full width */
@media (max-width: 639px) {
    .article-img-left,
    .article-img-right {
        float: none;
        width: 100%;
        margin: var(--spacing-6) 0;
    }
}

/* Clearfix — contains floated images within the article body */
.article-body::after {
    content: '';
    display: table;
    clear: both;
}
 
/* ── Prev / next navigation ── */
.article-nav {
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-4);
}
 
@media (min-width: 640px) {
    .article-nav {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
 
    .article-nav-item {
        -webkit-flex: 1;
        flex: 1;
    }
}
 
.article-nav-item {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    text-decoration: none;
    min-height: 80px;
    transition: border-color var(--transition), background var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
 
@media (hover: hover) and (pointer: fine) {
    .article-nav-item:hover {
        border-color: var(--color-accent);
        background: var(--color-accent-light);
    }
}
 
.article-nav-item.next {
    text-align: right;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
 
.article-nav-direction {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}
 
.article-nav-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-800);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 
/* ── nav.news active state ── */
.nav-item.page-news .nav-item,
body.page-news .nav-item[data-page="news"],
body.page-news-article .nav-item[data-page="news"] {
    color: var(--color-accent);
}

/* ===========================================
   RESPONSIVE - Tablet
   =========================================== */
@media (max-width: 1024px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .usps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .usp-card {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: var(--spacing-6);
    }
    
    .usp-card:nth-child(-n+2) {
        border-top: none;
    }
    
    .cta-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================================
   RESPONSIVE - Mobile
   =========================================== */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --header-top-height: 40px;
    }
    
    .header-contact {
        gap: var(--spacing-4);
    }
    
    .header-link span {
        display: none;
    }
    
    .header-link i {
        font-size: 1rem;
    }
    
    .section {
        padding: var(--spacing-12) 0;
    }
    
    .section-lg {
        padding: var(--spacing-16) 0;
    }
    
    /* Center text on mobile */
    .section-header {
        text-align: center;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .service-card {
        flex-direction: column;
        text-align: center;
    }
    
    .service-icon {
        margin: 0 auto var(--spacing-4);
    }
    
    .usps-grid {
        grid-template-columns: 1fr;
    }
    
    .usp-card {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .usp-card:first-child {
        border-top: none;
    }
    
    .usp-icon {
        margin-left: auto;
        margin-right: auto;
    }
    
    .cta-section {
        padding: var(--spacing-12) 0;
    }
    
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-actions .btn {
        width: 100%;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .footer-section {
        text-align: left;
    }
    
    .footer-social {
        justify-content: flex-start;
    }
    
    .footer-address,
    .footer-tagline {
        max-width: none;
    }
    
    .footer-hours p {
        justify-content: flex-start;
        gap: var(--spacing-4);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .header-top {
        display: none;
    }
    
    body {
        padding-top: var(--header-height);
    }
    
    /* Top strip is hidden here, so anchor offset only needs main header height */
    html {
        scroll-padding-top: calc(var(--header-height) + var(--spacing-4));
    }
    
    #form {
        scroll-margin-top: calc(var(--header-height) + var(--spacing-4));
    }
    
    .hero {
        margin-top: calc(-1 * var(--header-height));
        padding-top: var(--header-height);
        /* 100vh includes browser UI chrome in in-app browsers (Instagram/FB/LinkedIn),
           causing overflow. 100svh (small viewport height) excludes it.
           Browsers that don't support svh units fall back to 100vh. */
        min-height: 100vh;
        min-height: 100svh;
    }

    /* News and article heroes must not fill the full viewport on mobile.
       The site-wide .hero rule above sets min-height: 100svh at ≤640px,
       which would make these section headers dominate the entire screen.
       Constrain them to a sensible compact height. */
    .hero-news {
        min-height: 40vh;
        min-height: 40svh;
    }

    .hero-article {
        min-height: 45vh;
        min-height: 45svh;
    }
    
    .mobile-menu {
        max-width: 100%;
    }
}

/* ===========================================
   WHO WE SERVE — Customer Registry Section
   =========================================== */

.customers-section {
    background: #fff;
}

.customers-section .section-label {
    color: var(--color-accent);
}

.customers-section .section-title {
    color: var(--color-gray-900);
}

.customers-section .section-description {
    color: var(--color-gray-600);
}

/* Registry grid — 2-column, no gap, entries separated by rules */
/* REPLACED — see sector grid below */

/* ===========================================
   WHO WE SERVE — Sector Banner + Card Grid
   =========================================== */

/* ── Banner image ───────────────────────────────────────────── */
.sector-banner {
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-12);
    line-height: 0;
    -webkit-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

.sector-banner-img {
    width: 100%;
    height: 420px;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

/* ── 4-column card grid ─────────────────────────────────────── */
.sector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-12);
}

/* ── Individual card ────────────────────────────────────────── */
.sector-card {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    -webkit-transition: -webkit-box-shadow 220ms ease,
                        border-color 220ms ease,
                        -webkit-transform 220ms ease,
                        opacity 700ms ease,
                        -webkit-transform 700ms ease;
    transition: box-shadow 220ms ease,
                border-color 220ms ease,
                transform 220ms ease,
                opacity 700ms ease;
}

/* ── Icon ───────────────────────────────────────────────────── */
.sector-card-icon {
    font-size: 1.75rem;
    color: var(--color-accent);
    margin-bottom: var(--spacing-4);
    line-height: 1;
    display: block;
}

/* ── Name ───────────────────────────────────────────────────── */
.sector-card-name {
    font-size: var(--font-size-base);
    font-weight: 800;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-2);
    line-height: 1.3;
    -webkit-transition: color 220ms ease;
    transition: color 220ms ease;
}

/* ── Description ────────────────────────────────────────────── */
.sector-card-prop {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.65;
    margin: 0;
}

/* ── Hover — pointer devices only ──────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .sector-card:hover {
        border-color: var(--color-accent);
        -webkit-box-shadow: 0 4px 20px rgba(161, 33, 34, 0.10);
        box-shadow: 0 4px 20px rgba(161, 33, 34, 0.10);
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    .sector-card:hover .sector-card-name {
        color: var(--color-accent);
    }
}

/* ── Responsive: tablet — 3 columns ────────────────────────── */
@media (max-width: 1024px) {
    .sector-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-3);
    }

    .sector-banner-img {
        height: 320px;
    }
}

/* ── Responsive: mobile — 2 columns ────────────────────────── */
@media (max-width: 640px) {
    .sector-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3);
    }

    .sector-banner-img {
        height: 200px;
    }

    .sector-card {
        padding: var(--spacing-4);
    }

    .sector-card-icon {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-3);
    }
}

/* ── Responsive: very small — 1 column ─────────────────────── */
@media (max-width: 380px) {
    .sector-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Closing statement ──────────────────────────────────────── */
.registry-close {
    padding: var(--spacing-16) var(--spacing-8) 0;
    text-align: center;
    border-top: 1px solid var(--color-gray-200);
    -webkit-transition: opacity 700ms ease, -webkit-transform 700ms ease;
    transition: opacity 700ms ease, transform 700ms ease;
}

.registry-close-eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-5);
}

.registry-close-title {
    font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-5xl));
    font-weight: 900;
    color: var(--color-gray-900);
    line-height: 1.1;
    margin-bottom: var(--spacing-5);
    letter-spacing: -0.02em;
}

.registry-close-sub {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    max-width: 540px;
    margin: 0 auto var(--spacing-10);
    line-height: 1.65;
}

@media (max-width: 1023px) {
    .registry-close {
        padding: var(--spacing-16) var(--spacing-6);
    }
}

@media (max-width: 767px) {
    .registry-close {
        padding: var(--spacing-12) var(--spacing-4);
    }

    .registry-close-title {
        font-size: clamp(var(--font-size-xl), 7vw, var(--font-size-3xl));
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
    .site-header,
    .site-footer,
    .hero-video-container,
    .mobile-menu,
    .back-to-top {
        display: none !important;
    }
    
    body {
        padding-top: 0;
    }
}

/* ===========================================
   REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================
   SERVICES PAGE — REDESIGN ADDENDUM v2.3
   Appended to style.css — zero existing rules
   modified. All prefix patterns match original.
   =========================================== */


/* ═══════════════════════════════════════════════════════════
   HERO — STAT BADGES
   display: flex, never inline-flex (inline-flex ignores
   container width and causes viewport overflow).
   fit-content shrinks row to content; max-width: 100%
   hard-caps it to hero-content column width.
   ═══════════════════════════════════════════════════════════ */

.hero-services-stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: var(--spacing-5);
    margin-top: var(--spacing-2);
    background: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-6);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
}

.hero-services-stat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-1);
}

.hero-services-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-services-stat-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.hero-services-stat-divider {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    align-self: center;
}

@media (max-width: 640px) {
    /* ROOT CAUSE FIX:
       .hero-content is a flex child with no explicit width — it grows
       to max-content by default. This means max-width: 100% on the
       stats bar refers back to the same content width = circular,
       zero constraint, stats overflow the viewport.

       Fix step 1: .hero-services .hero-content { width: 100% }
       Now the flex child fills the full hero width (= viewport width).
       max-width: 800px is still respected on desktop via the base rule.

       Fix step 2: .hero-services-stats uses width: 100% and a grid
       with minmax(0,1fr) columns — these can shrink below content
       min-width unlike plain 1fr.

       Fix step 3: min-width: 0 on stat cells removes the auto floor
       that grid children carry by default, allowing true shrinking.

       Fix step 4: white-space: normal on labels so they can wrap to
       two lines rather than forcing the column to be label-wide. */

    .hero-services .hero-content {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .hero-services-stats {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 0;
        padding: var(--spacing-3) var(--spacing-4);
        width: 100%;
        max-width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .hero-services-stat {
        min-width: 0;
        overflow: hidden;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        padding: 0 var(--spacing-2);
    }

    .hero-services-stat-value {
        font-size: var(--font-size-lg);
    }

    .hero-services-stat-label {
        font-size: 0.5rem;
        letter-spacing: 0.04em;
        white-space: normal;
        word-break: break-word;
        line-height: 1.3;
    }

    /* Dividers: now fixed 1px grid column, not a flex item.
       Height set via the element itself; no flex-shrink needed. */
    .hero-services-stat-divider {
        width: 1px;
        height: 32px;
        -ms-flex-item-align: center;
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-services-stats {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.45);
    }
}


/* ═══════════════════════════════════════════════════════════
   INTRO — feature items (icon + text rows below lead text)
   ═══════════════════════════════════════════════════════════ */

.services-intro-features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-5);
    margin-top: var(--spacing-6);
}

.services-intro-feature {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.services-intro-feature > i {
    font-size: 1.1rem;
    color: var(--color-accent);
    margin-top: 3px;
    flex-shrink: 0;
}

.services-intro-feature > p {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.75;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   BENEFITS — bento grid
   Reuses ALL .value-panel.* styles from the original.
   .value-panel--anchor already has grid-column: 1; grid-row:
   1/3 from the original .value-panel--anchor rule — no need
   to repeat. Only .value-panel--wide needs explicit placement.
   ═══════════════════════════════════════════════════════════ */

.services-benefits-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: var(--spacing-4);
}

.services-benefits-bento > .value-panel--wide {
    grid-column: 2 / 4;
}

.services-benefit-bento-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    background: rgba(255, 255, 255, 0.15);
}

.services-benefit-bento-icon i {
    font-size: 1.4rem;
    color: #fff;
}

.value-panel--dark .services-benefit-bento-icon {
    background: rgba(161, 33, 34, 0.22);
}

.value-panel--dark .services-benefit-bento-icon i {
    color: var(--color-accent);
}

.value-panel--light .services-benefit-bento-icon {
    background: var(--color-accent-light);
}

.value-panel--light .services-benefit-bento-icon i {
    color: var(--color-accent);
}

@media (max-width: 1024px) {
    .services-benefits-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .services-benefits-bento > .value-panel--anchor {
        grid-column: 1 / 3;
        grid-row: 1;
        min-height: 260px;
        -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
        -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
        gap: var(--spacing-8);
    }

    .services-benefits-bento > .value-panel--wide {
        grid-column: 1 / 3;
    }
}

@media (max-width: 768px) {
    .services-benefits-bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .services-benefits-bento > .value-panel--anchor {
        grid-column: 1;
        grid-row: auto;
        min-height: 240px;
        -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
        -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    }

    .services-benefits-bento > .value-panel--wide {
        grid-column: 1;
    }
}


/* ═══════════════════════════════════════════════════════════
   HOW WE WORK — 4-step process strip
   White background. Flex row: 4 cards (flex: 1) + 3
   connectors (fixed 36px). overflow: hidden prevents bleed.
   Tablet: 2x2 grid, connectors hidden.
   Mobile: single column.
   ═══════════════════════════════════════════════════════════ */

.services-process {
    background: #fff;
}

.services-process .section-header {
    max-width: 560px;
}

.services-process-steps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    overflow: hidden;
}

.services-process-step {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
    text-align: center;
    padding: var(--spacing-8) var(--spacing-5);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-100);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: -webkit-transform var(--transition-slow), box-shadow var(--transition-slow);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
    .services-process-step:hover {
        -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
}

.services-process-connector {
    flex-shrink: 0;
    width: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--color-accent);
    opacity: 0.35;
    font-size: 0.875rem;
}

.services-process-num {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--spacing-3);
}

.services-process-icon {
    width: 64px;
    height: 64px;
    background: var(--color-accent-light);
    border-radius: var(--radius-lg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
    -webkit-transition: background var(--transition), -webkit-transform var(--transition);
    transition: background var(--transition), transform var(--transition);
}

.services-process-icon i {
    font-size: 1.5rem;
    color: var(--color-accent);
    -webkit-transition: color var(--transition);
    transition: color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
    .services-process-step:hover .services-process-icon {
        background: var(--color-accent);
        -webkit-transform: scale(1.06);
    transform: scale(1.06);
    }

    .services-process-step:hover .services-process-icon i {
        color: #fff;
    }
}

.services-process-title {
    font-size: var(--font-size-base);
    font-weight: 800;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-3);
    line-height: 1.2;
}

.services-process-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 900px) {
    .services-process-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4);
        overflow: visible;
    }

    .services-process-connector {
        display: none;
    }
}

@media (max-width: 480px) {
    .services-process-steps {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-process-step,
    .services-process-icon,
    .services-process-icon i {
        -webkit-transition: none;
        transition: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   CORE SERVICES — editorial 2x2 grid
   Ghost editorial numbers, content anchored to bottom.
   Four variants: dark / accent / light / gray.
   ═══════════════════════════════════════════════════════════ */

.services-core-editorial {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

.services-core-editorial-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--spacing-10);
    min-height: 300px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-transition: -webkit-transform var(--transition-slow);
    transition: transform var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) {
    .services-core-editorial-card:hover {
        -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    }
}

.services-core-editorial-num {
    position: absolute;
    top: -0.05em;
    right: var(--spacing-6);
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color var(--transition-slow);
    transition: color var(--transition-slow);
}

.services-core-editorial-body {
    position: relative;
    z-index: 1;
}

.services-core-editorial-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: var(--spacing-5);
}

.services-core-editorial-icon i {
    font-size: 1.5rem;
}

.services-core-editorial-title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--spacing-3);
}

.services-core-editorial-text {
    font-size: var(--font-size-sm);
    line-height: 1.75;
    margin: 0;
}

/* dark */
.services-core-editorial-card--dark {
    background: var(--color-gray-900);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
    .services-core-editorial-card--dark:hover { box-shadow: var(--shadow-lg); }
    .services-core-editorial-card--dark:hover .services-core-editorial-num { color: rgba(255, 255, 255, 0.1); }
}

.services-core-editorial-card--dark .services-core-editorial-num { color: rgba(255, 255, 255, 0.06); }
.services-core-editorial-card--dark .services-core-editorial-icon { background: rgba(161, 33, 34, 0.22); }
.services-core-editorial-card--dark .services-core-editorial-icon i { color: var(--color-accent); }
.services-core-editorial-card--dark .services-core-editorial-title { color: #fff; }
.services-core-editorial-card--dark .services-core-editorial-text { color: rgba(255, 255, 255, 0.6); }

/* accent */
.services-core-editorial-card--accent {
    background: var(--color-accent);
    box-shadow: 0 8px 32px rgba(161, 33, 34, 0.35);
}

@media (hover: hover) and (pointer: fine) {
    .services-core-editorial-card--accent:hover { box-shadow: 0 12px 40px rgba(161, 33, 34, 0.45); }
    .services-core-editorial-card--accent:hover .services-core-editorial-num { color: rgba(255, 255, 255, 0.16); }
}

.services-core-editorial-card--accent .services-core-editorial-num { color: rgba(255, 255, 255, 0.1); }
.services-core-editorial-card--accent .services-core-editorial-icon { background: rgba(255, 255, 255, 0.18); }
.services-core-editorial-card--accent .services-core-editorial-icon i { color: #fff; }
.services-core-editorial-card--accent .services-core-editorial-title { color: #fff; }
.services-core-editorial-card--accent .services-core-editorial-text { color: rgba(255, 255, 255, 0.82); }

/* light */
.services-core-editorial-card--light {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
    .services-core-editorial-card--light:hover { box-shadow: var(--shadow-lg); }
    .services-core-editorial-card--light:hover .services-core-editorial-num { color: rgba(0, 0, 0, 0.08); }
}

.services-core-editorial-card--light .services-core-editorial-num { color: rgba(0, 0, 0, 0.05); }
.services-core-editorial-card--light .services-core-editorial-icon { background: var(--color-accent-light); }
.services-core-editorial-card--light .services-core-editorial-icon i { color: var(--color-accent); }
.services-core-editorial-card--light .services-core-editorial-title { color: var(--color-gray-900); }
.services-core-editorial-card--light .services-core-editorial-text { color: var(--color-gray-500); }

/* gray */
.services-core-editorial-card--gray {
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-100);
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) and (pointer: fine) {
    .services-core-editorial-card--gray:hover { box-shadow: var(--shadow-lg); }
    .services-core-editorial-card--gray:hover .services-core-editorial-num { color: rgba(0, 0, 0, 0.08); }
}

.services-core-editorial-card--gray .services-core-editorial-num { color: rgba(0, 0, 0, 0.05); }
.services-core-editorial-card--gray .services-core-editorial-icon { background: var(--color-accent-light); }
.services-core-editorial-card--gray .services-core-editorial-icon i { color: var(--color-accent); }
.services-core-editorial-card--gray .services-core-editorial-title { color: var(--color-gray-900); }
.services-core-editorial-card--gray .services-core-editorial-text { color: var(--color-gray-500); }

@media (max-width: 768px) {
    .services-core-editorial { grid-template-columns: 1fr; }
    .services-core-editorial-card { min-height: 220px; }
    .services-core-editorial-num { font-size: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .services-core-editorial-card,
    .services-core-editorial-num {
        -webkit-transition: none;
        transition: none;
    }
}

/* ===========================================================================
   GLOBAL HEADER SEARCH
   ---------------------------------------------------------------------------
   Icon trigger + expanding panel. Panel mirrors the .mega-menu positioning
   pattern (absolute inside the fixed .site-header, top: 100%) so it sits
   flush below the header at every breakpoint without media-query plumbing.

   Uses the same design tokens as the rest of the site:
     --color-accent, --color-gray-*, --spacing-*, --radius-*, --shadow-*,
     --transition*, --z-*.

   Scoped under .header-search-* so it CANNOT collide with the in-page
   search still used on /products overview (.products-search-*).
   =========================================================================== */

/* ── Nav + actions cluster (wraps menu.php + search-toggle + mobile-toggle) ── */
.header-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* ── Search trigger button (icon only) ────────────────────────────────────── */
.header-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--color-gray-700);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.header-search-toggle:hover,
.header-search-toggle:focus-visible {
    color: var(--color-accent);
    background: var(--color-accent-light);
    outline: 0;
}

.header-search-toggle[aria-expanded="true"] {
    color: #fff;
    background: var(--color-accent);
}

.header-search-toggle[aria-expanded="true"]:hover {
    background: var(--color-accent-hover);
}

.header-search-toggle i {
    pointer-events: none;
}

/* ── Panel (absolute inside .site-header, sits below it) ──────────────────── */
.header-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-slow),
                visibility var(--transition-slow),
                transform var(--transition-slow);
    /* IE11 z-index: inherits from .site-header's stacking context (--z-fixed) */
}

.header-search-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-search-panel > .container {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

.header-search-wrap {
    position: relative;
    max-width: 840px;
    margin: 0 auto;
}

/* ── Input bar ────────────────────────────────────────────────────────────── */
.header-search-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-4);
    background: var(--color-gray-50);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), background var(--transition);
}

.header-search-bar:focus-within {
    background: #fff;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-light);
}

.header-search-icon {
    flex-shrink: 0;
    color: var(--color-gray-500);
    font-size: var(--font-size-lg);
    pointer-events: none;
}

.header-search-bar:focus-within .header-search-icon {
    color: var(--color-accent);
}

.header-search-input {
    flex: 1 1 auto;
    min-width: 0;                 /* prevent flex overflow on tiny screens */
    padding: var(--spacing-3) 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-gray-900);
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: 500;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.header-search-input::placeholder {
    color: var(--color-gray-500);
    font-weight: 400;
    opacity: 1;                   /* Firefox lowers it by default */
}

.header-search-input::-ms-clear {
    display: none;                /* legacy IE/Edge native clear X */
}

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.header-search-spinner {
    display: none;                /* toggled inline by JS via style.display */
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    -webkit-animation: header-search-spin 0.7s linear infinite;
            animation: header-search-spin 0.7s linear infinite;
}

@-webkit-keyframes header-search-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes header-search-spin {
    to { transform: rotate(360deg); }
}

/* ── Clear + Close buttons (inside the bar) ───────────────────────────────── */
.header-search-clear,
.header-search-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.header-search-clear[hidden] {
    display: none;                /* HTML `hidden` attr is authoritative */
}

.header-search-clear:hover,
.header-search-clear:focus-visible,
.header-search-close:hover,
.header-search-close:focus-visible {
    color: var(--color-gray-900);
    background: var(--color-gray-200);
    outline: 0;
}

.header-search-close {
    margin-left: var(--spacing-1);
    border-left: 1px solid var(--color-gray-200);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ── Results dropdown ─────────────────────────────────────────────────────── */
.header-search-dropdown {
    margin-top: var(--spacing-3);
    max-height: calc(100vh - var(--header-height) - var(--header-top-height) - 140px);
    max-height: calc(100svh - var(--header-height) - var(--header-top-height) - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.header-search-dropdown[hidden] {
    display: none;
}

/* Results header bar */
.header-search-dropdown .search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.header-search-dropdown .search-results-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 var(--spacing-2);
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    letter-spacing: 0;
}

/* Individual result row */
.header-search-dropdown .search-results-list {
    padding: var(--spacing-2);
}

.header-search-dropdown .search-result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--radius);
    color: var(--color-gray-800);
    text-decoration: none;
    transition: background var(--transition);
}

.header-search-dropdown .search-result-item:hover,
.header-search-dropdown .search-result-item.is-active,
.header-search-dropdown .search-result-item:focus-visible {
    background: var(--color-gray-50);
    outline: 0;
}

.header-search-dropdown .search-result-thumb {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-gray-100);
    border-radius: var(--radius);
    color: var(--color-gray-400);
    font-size: var(--font-size-lg);
    overflow: hidden;
}

.header-search-dropdown .search-result-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.header-search-dropdown .search-result-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-search-dropdown .search-result-code {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-dropdown .search-result-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-dropdown .search-result-meta {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-dropdown .search-result-arrow {
    flex-shrink: 0;
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    transition: color var(--transition), transform var(--transition);
}

.header-search-dropdown .search-result-item:hover .search-result-arrow,
.header-search-dropdown .search-result-item.is-active .search-result-arrow {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* Match highlight (injected by JS as <mark class="search-hl">) */
.header-search-dropdown .search-hl {
    background: var(--color-accent-light);
    color: var(--color-accent);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}

/* Empty + error states */
.header-search-dropdown .search-empty {
    padding: var(--spacing-8) var(--spacing-6);
    text-align: center;
    color: var(--color-gray-500);
}

.header-search-dropdown .search-empty i {
    display: block;
    margin: 0 auto var(--spacing-3);
    font-size: var(--font-size-3xl);
    color: var(--color-gray-300);
}

.header-search-dropdown .search-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
}

.header-search-dropdown .search-empty strong {
    color: var(--color-gray-900);
}

.header-search-dropdown .search-empty--error i {
    color: var(--color-accent);
}

/* ── Backdrop (dims page content behind the panel) ────────────────────────── */
.header-search-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, 0.4);  /* --color-gray-900 @ 40% */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    /* Must sit below the fixed header (which contains the panel) */
    z-index: calc(var(--z-fixed) - 1);
}

.header-search-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* ===========================================================================
   MOBILE — ≤1024px
   Panel becomes edge-to-edge, input grows, close button stays accessible.
   =========================================================================== */
@media (max-width: 1024px) {
    .header-search-panel > .container {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }

    .header-search-wrap {
        max-width: none;
    }
}

/* ===========================================================================
   PHONE — ≤640px
   The .header-top bar is already hidden at this breakpoint (existing rule),
   so the panel sits directly below .header-main automatically — no extra
   positioning math needed because top:100% follows the header's real height.
   =========================================================================== */
@media (max-width: 640px) {
    .header-search-toggle {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-base);
    }

    .header-search-bar {
        padding: var(--spacing-1) var(--spacing-1) var(--spacing-1) var(--spacing-3);
    }

    .header-search-input {
        font-size: var(--font-size-base);
        padding: var(--spacing-3) 0;
    }

    .header-search-clear,
    .header-search-close {
        width: 32px;
        height: 32px;
    }

    .header-search-dropdown {
        /* Leave room for the mobile address bar / bottom browser chrome */
        max-height: calc(100vh - var(--header-height) - 100px);
        max-height: calc(100svh - var(--header-height) - 100px);
    }

    .header-search-dropdown .search-result-thumb {
        width: 40px;
        height: 40px;
    }

    /* Hide the arrow on phones — tap target is the whole row */
    .header-search-dropdown .search-result-arrow {
        display: none;
    }
}

/* ===========================================================================
   REDUCED MOTION — respect user preference
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .header-search-panel,
    .header-search-backdrop,
    .header-search-toggle,
    .header-search-bar,
    .header-search-dropdown .search-result-item,
    .header-search-dropdown .search-result-arrow {
        transition: none;
    }

    .header-search-spinner {
        -webkit-animation: none;
                animation: none;
    }
}

/* ===========================================
   COOKIE INFORMATION BANNER
   =========================================== */
/*
 * Mobile-first: stacks vertically on phones, becomes a horizontal card at
 * >=640px (matching the news-pages tablet breakpoint convention) and
 * gains extra breathing room at >=1024px.
 *
 * Uses existing design tokens only. Brand accent (#a12122) is sourced via
 * --color-accent. The accept button reuses the global .btn / .btn-accent
 * classes — only width tweaks live here.
 *
 * z-index: var(--z-modal-backdrop) so the banner sits above page content
 * but below modal dialogs (AI chat panel, search overlay).
 *
 * Bottom-anchored with iOS safe-area inset support, mirroring the
 * approach used by .back-to-top.
 *
 * The banner is server-rendered ONLY when no `cookie_consent` cookie is
 * present (see footer.php). JS animates it in, then on accept it animates
 * out and is removed from the DOM. Subsequent visits skip rendering
 * entirely — no flash-of-banner.
 */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Horizontal gutter so the card never touches the viewport edge on
       phones, plus iOS notch support for landscape orientation on
       devices with rounded corners / sensor housing. max() guarantees
       at least the design-token gutter even when the safe area is 0. */
    padding-left: var(--spacing-3);
    padding-left: max(var(--spacing-3), env(safe-area-inset-left, 0px));
    padding-right: var(--spacing-3);
    padding-right: max(var(--spacing-3), env(safe-area-inset-right, 0px));
    /* iOS safe-area: leave room for the home indicator on iPhone X+ */
    padding-bottom: constant(safe-area-inset-bottom, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: var(--z-modal-backdrop);

    /* Initial off-screen state. JS adds .cookie-banner--visible on the
       next frame to play the entrance animation. */
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform var(--transition-slow),
        opacity var(--transition-slow),
        visibility 0s linear var(--transition-slow);
    pointer-events: none;
}

.cookie-banner--visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition:
        transform var(--transition-slow),
        opacity var(--transition-slow),
        visibility 0s linear 0s;
    pointer-events: auto;
}

.cookie-banner--dismissing {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.cookie-banner-inner {
    position: relative;
    /* Vertical spacing only; horizontal gutter is provided by the
       fixed wrapper above. `auto` left/right margin centers the card
       on desktop once max-width kicks in (>= --container-max). */
    margin: var(--spacing-3) auto;
    padding: var(--spacing-5);
    background: #fff;
    color: var(--color-gray-800);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-gray-200);
    /* Clip the accent stripe (::before) to the card's rounded corners. */
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    /* Constrain to the standard container width on large screens, so the
       banner doesn't stretch full-width and look like a system bar. */
    max-width: var(--container-max);
}

/* Subtle accent stripe at the top of the card to tie the banner to the
   brand without overpowering the message. The card's `overflow: hidden`
   plus its `border-radius` clip this stripe to the rounded corners. */
.cookie-banner-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
}

.cookie-banner-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xl);
}

.cookie-banner-content {
    flex: 1 1 auto;
    min-width: 0; /* allow text to wrap inside flex */
}

.cookie-banner-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing-2) 0;
    line-height: 1.3;
}

.cookie-banner-message {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-gray-600);
    margin: 0;
}

.cookie-banner-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

.cookie-banner-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius);
}

.cookie-banner-link:hover,
.cookie-banner-link:focus-visible {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-banner-link i {
    font-size: 0.95em;
}

/* The accept button inherits .btn .btn-accent styling from the global
   button system. Only width tweaks live here. */
.cookie-banner-accept {
    width: 100%;
}

/* ── Tablet and up: horizontal layout, button auto-width ── */
@media (min-width: 640px) {
    .cookie-banner-inner {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-5);
        padding: var(--spacing-6);
    }

    .cookie-banner-actions {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-4);
    }

    .cookie-banner-accept {
        width: auto;
    }
}

/* ── Desktop polish: a touch more breathing room ── */
@media (min-width: 1024px) {
    .cookie-banner-inner {
        margin: var(--spacing-4) auto;
        padding: var(--spacing-6) var(--spacing-8);
    }

    .cookie-banner-title {
        font-size: var(--font-size-xl);
    }

    .cookie-banner-message {
        font-size: var(--font-size-base);
    }
}

/* ── Reduced motion: skip the slide animation ── */
@media (prefers-reduced-motion: reduce) {
    .cookie-banner,
    .cookie-banner--visible,
    .cookie-banner--dismissing {
        transition: none;
    }
}

/* ── Print: hide the banner along with chrome ── */
@media print {
    .cookie-banner {
        display: none !important;
    }
}