/* ═══════════════════════════════════════════════════════════════════════════
   main.css — Simbased.com PHP Rewrite
   All BEM CSS converted from Astro/Tailwind source. No Tailwind.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    /* Colours */
    --color-primary: rgb(33, 154, 166);
    --color-primary-10: rgba(33, 154, 166, 0.1);
    --color-primary-20: rgba(33, 154, 166, 0.2);
    --color-primary-80: rgba(33, 154, 166, 0.8);
    --color-foreground: rgb(53, 52, 79);
    --color-muted-foreground: rgb(70, 82, 111);
    --color-background: rgb(16, 28, 46);
    --color-background-80: rgba(16, 28, 46, 0.8);
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-200: #e5e7eb;
    --color-gray-500: #6b7280;

    /* Gradients */
    --gradient-text: linear-gradient(90deg, #0b9d6c -6.7%, #319ea6 36.1%, #7da9ff 112.45%);
    --gradient-cta: linear-gradient(to right, #1FA48C, #1F9BA4, #1F6CA4);
    --gradient-hero: linear-gradient(90deg, #0b1729 17.47%, transparent 74.64%);
    --gradient-hero-alt: linear-gradient(81.65deg, #0b1729 17.47%, transparent 99.64%);
    --gradient-slider-card: linear-gradient(to right, #1F9BA4, #4744DE);

    /* Typography */
    --font-heading: 'Conigen', sans-serif;
    --font-body: 'Conigen', 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: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-8xl: 6rem;
    --line-height-tight: 1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Breakpoints (reference only — used in @media) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    --site-header-height: 60px;
    --home-logo-marquee-height: 128px;
}
@media (min-width: 1024px) {
    :root {
        --site-header-height: 96px;
        --home-logo-marquee-height: 168px;
    }
}

/* ── @font-face ────────────────────────────────────────────────────────────── */
@font-face {
    font-family: "Conigen";
    src: url("/assets/fonts/Conigen-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Conigen";
    src: url("/assets/fonts/Conigen-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Conigen";
    src: url("/assets/fonts/Conigen-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Conigen";
    src: url("/assets/fonts/Conigen-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--site-header-height);
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.body {
    max-width: 100%;
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
fieldset { border: none; padding: 0; margin: 0; }

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ── Headings ──────────────────────────────────────────────────────────────── */
h1 {
    max-width: 42rem;
    font-size: 2.15rem;
    font-weight: 500;
    line-height: 2.5rem;
    letter-spacing: -1px;
}
@media (min-width: 1024px) {
    h1 { font-size: 3.5rem; line-height: 3.5rem; letter-spacing: -2px; }
}

h2 {
    max-width: 42rem;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 2.2rem;
    letter-spacing: -1px;
}
@media (min-width: 1024px) {
    h2 { font-size: 3rem; line-height: 3rem; letter-spacing: -2px; }
}

h3 {
    max-width: 42rem;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 2.25rem;
    letter-spacing: -0.5px;
}
@media (min-width: 1024px) {
    h3 { font-size: 2.25rem; line-height: 2.5rem; }
}

h4 {
    max-width: 42rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.5px;
}
@media (min-width: 1024px) {
    h4 { font-size: 1.875rem; line-height: 2.25rem; }
}

/* ── Layout utilities ──────────────────────────────────────────────────────── */
.l-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(var(--space-5), 3.5vw, var(--space-10));
    padding-right: clamp(var(--space-5), 3.5vw, var(--space-10));
}
@media (min-width: 640px)  { .l-container { max-width: 640px; } }
@media (min-width: 768px)  { .l-container { max-width: 48rem; } }
@media (min-width: 1024px) { .l-container { max-width: 1100px; } }
@media (min-width: 1280px) { .l-container { max-width: 1400px; } }

.l-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
}
@media (min-width: 1024px) {
    .l-section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
}

.l-section--top {
    padding-top: var(--space-16);
    padding-bottom: 0;
}
@media (min-width: 1024px) {
    .l-section--top { padding-top: var(--space-24); }
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: var(--space-2) var(--space-4) !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background: var(--color-white) !important;
    z-index: 9999 !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
    white-space: normal !important;
}

/* ── Shared patterns ───────────────────────────────────────────────────────── */
.preheader {
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-primary);
}

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    transition: var(--transition-normal);
    border: none;
    text-decoration: none;
    cursor: pointer;
}
@media (min-width: 1024px) {
    .btn { padding: var(--space-3) var(--space-7) 0.875rem var(--space-7); }
}

.btn--primary {
    background: var(--gradient-cta);
    color: var(--color-white);
}
.btn--primary:hover {
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px rgba(33, 154, 166, 0.5);
}

.btn--secondary {
    background: var(--color-white);
    color: var(--color-foreground);
}
.btn--secondary:hover {
    box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px rgba(33, 154, 166, 0.5);
}

.btn__icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.nav {
    --nav-height: 60px;
    --nav-logo-width: clamp(124px, 38vw, 150px);
    --nav-toggle-size: 44px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 999;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
    transition: height var(--transition-normal), box-shadow var(--transition-normal);
    will-change: height;
}

.nav--scrolled {
    --nav-height: 48px;
    --nav-logo-width: clamp(112px, 34vw, 134px);
    --nav-toggle-size: 38px;
    box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
    .nav {
        --nav-height: 96px;
        --nav-logo-width: 200px;
    }
    .nav--scrolled {
        --nav-height: 77px;
        --nav-logo-width: 176px;
    }
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    min-width: 0;
    overflow: visible;
}
@media (min-width: 1024px) {
    .nav__inner { gap: var(--space-12); }
}

.nav__logo { display: block; min-width: 0; flex-shrink: 1; }

.nav__logo-img {
    width: var(--nav-logo-width);
    height: auto;
    transition: width var(--transition-normal);
}

.nav__links {
    display: none;
    align-items: center;
    gap: var(--space-12);
    margin-left: auto;
}
@media (min-width: 1024px) {
    .nav__links { display: flex; }
}

.nav__link {
    color: rgba(53, 52, 79, 0.7);
    font-weight: 400;
    font-size: 15px;
    transition: color var(--transition-normal);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
@media (min-width: 1024px) {
    .nav__link { font-size: var(--font-size-base); }
}
.nav__link:hover { color: var(--color-primary); }

/* Dropdown */
.nav__item--has-dropdown { position: relative; }

.nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}
.nav__item--has-dropdown > .nav__link[aria-expanded="true"] + .nav__dropdown,
.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__item--has-dropdown:hover > .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__dropdown-label {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    font-weight: 600;
}

.nav__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    width: 100%;
    text-align: left;
    text-wrap: nowrap;
    transition: background var(--transition-normal);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    text-decoration: none;
}
.nav__dropdown-item:hover { background: var(--color-primary-10); }
.nav__dropdown-item img { width: 16px; height: 16px; flex-shrink: 0; }

.nav__cta {
    display: none;
}
@media (min-width: 1024px) {
    .nav__cta {
        display: inline-flex;
        font-size: var(--font-size-base);
        padding: var(--space-3) var(--space-7) 0.875rem;
    }
}

/* Mobile menu */
.nav__toggle {
    display: grid;
    place-items: center;
    width: var(--nav-toggle-size);
    height: var(--nav-toggle-size);
    padding: 0;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-foreground);
    border-radius: var(--radius-sm);
    position: relative;
    z-index: 10001;
    transform: translateZ(0);
    touch-action: manipulation;
    transition: width var(--transition-normal), height var(--transition-normal), background-color var(--transition-normal);
}
@media (min-width: 1024px) {
    .nav__toggle { display: none; }
}
.nav__toggle:hover { background: var(--color-primary-10); }
.nav__toggle-icon {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.nav__toggle-icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--close { display: block; }

.nav__mobile {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--nav-height));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-gray-200);
    padding: var(--space-5) var(--space-3) var(--space-8);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}
.nav--scrolled .nav__mobile {
    top: var(--nav-height);
    max-height: calc(100dvh - var(--nav-height));
}
@media (min-width: 1024px) {
    .nav__mobile { display: none; }
}
.nav__mobile--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav__mobile-inner {
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
}

.nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nav__mobile-item { border-bottom: 1px solid var(--color-gray-200); }

.nav__mobile-link,
.nav__mobile-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3) 0;
    font-size: var(--font-size-base);
    color: var(--color-foreground);
    font-weight: 500;
}

.nav__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__mobile-chevron {
    transition: transform var(--transition-normal);
}
.nav__mobile-toggle[aria-expanded="true"] .nav__mobile-chevron {
    transform: rotate(180deg);
}

.nav__mobile-sub {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--transition-normal), opacity var(--transition-normal);
}
.nav__mobile-sub--active,
.nav__mobile-sub[aria-hidden="false"] {
    max-height: 500px;
    opacity: 1;
}

.nav__mobile-sub-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    transition: color var(--transition-normal);
}
.nav__mobile-sub-link:hover { color: var(--color-primary); }

.nav__mobile-divider {
    margin-top: var(--space-4);
    border: none;
    border-top: 1px solid var(--color-gray-200);
}

body.nav-open {
    overflow: hidden;
    touch-action: none;
}

/* Spacer for fixed nav */
body { padding-top: var(--site-header-height); }
@media (min-width: 1024px) {
    body { padding-top: var(--site-header-height); }
}

/* ── Hero section (all pages) ──────────────────────────────────────────────── */
.hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 60px);
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 1024px) {
    .hero { min-height: calc(100vh - 96px); }
}

.hero__gradient {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--gradient-hero);
    pointer-events: none;
}

.hero__gradient--alt {
    background: var(--gradient-hero-alt);
}
@media (max-width: 1023px) {
    .hero__gradient--alt {
        background: linear-gradient(31.32deg, rgba(11, 25, 45, 0.9) 37.52%, rgba(36, 56, 84, 0) 90.66%);
    }
}

.hero__inner,
.hero__content {
    position: relative;
    z-index: 30;
}

.hero__inner {
    display: flex;
    align-items: flex-end;
    padding-bottom: 16%;
    min-height: calc(100vh - 60px);
}
@media (min-width: 768px) {
    .hero__inner { align-items: center; padding-bottom: 0; }
}
@media (min-width: 1024px) {
    .hero__inner { min-height: calc(100vh - 96px); padding-bottom: 8%; }
}

.hero__inner--alt {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 16%;
}
@media (min-width: 1024px) {
    .hero__inner--alt {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0;
        padding-bottom: 8%;
    }
}

.hero__text { max-width: 42rem; }

.hero__title {
    color: var(--color-foreground);
    margin-bottom: var(--space-2);
}
@media (min-width: 1024px) {
    .hero__title { color: var(--color-white); }
}

.hero__desc {
    color: rgba(53, 52, 79, 0.8);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    max-width: 36rem;
}
@media (min-width: 1024px) {
    .hero__desc { color: rgba(255, 255, 255, 0.8); }
}

.hero__actions { margin-top: var(--space-6); }

.hero__preheader {
    margin-bottom: var(--space-4);
}

.hero__form {
    width: 100%;
    max-width: 28rem;
    margin-top: var(--space-8);
}
@media (min-width: 1024px) {
    .hero__form { margin-top: 0; }
}

.hero--industries .hero__gradient {
    background: linear-gradient(31.32deg, rgba(11, 25, 45, 0.9) 37.52%, rgba(36, 56, 84, 0) 90.66%);
}
@media (min-width: 1024px) {
    .hero--industries .hero__gradient {
        background: linear-gradient(29.27deg, #050820 18.84%, rgba(0, 0, 0, 0) 75.39%);
    }
}

.hero__inner--industries {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 16%;
}
@media (min-width: 768px) {
    .hero__inner--industries {
        align-items: flex-start;
        padding-bottom: 16%;
    }
}
@media (min-width: 1024px) {
    .hero__inner--industries { padding-bottom: 8%; }
}

.hero--industries .hero__title {
    color: var(--color-white);
    max-width: 36rem;
}

.hero--industries .hero__desc {
    color: rgba(255, 255, 255, 0.9);
    max-width: 21.25rem;
    font-size: 1.02rem;
    line-height: 1.5rem;
}
@media (min-width: 768px) {
    .hero--industries .hero__desc {
        max-width: 42rem;
        font-size: var(--font-size-lg);
    }
}

.hero--industries .hero__bg-img,
.hero--industries .hero__bg-img img {
    object-position: 65% 50%;
}

.hero--about .hero__gradient {
    background: linear-gradient(31.32deg, rgba(11, 25, 45, 0.9) 37.52%, rgba(36, 56, 84, 0) 90.66%);
}
@media (min-width: 1024px) {
    .hero--about .hero__gradient {
        background: linear-gradient(29.27deg, #050820 18.84%, rgba(0, 0, 0, 0) 75.39%);
    }
}

.hero__inner--about {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 16%;
}
@media (max-width: 767px) {
    .hero__inner--about {
        padding-left: var(--space-8);
        padding-bottom: 22%;
    }
}
@media (min-width: 768px) {
    .hero__inner--about {
        align-items: flex-start;
        padding-bottom: 16%;
    }
}
@media (min-width: 1024px) {
    .hero__inner--about { padding-bottom: 8%; }
}

.hero--about .hero__title {
    color: var(--color-white);
    max-width: 36rem;
}

.hero--about .hero__desc {
    color: rgba(255, 255, 255, 0.9);
    max-width: 21.25rem;
    font-size: 1.02rem;
    line-height: 1.5rem;
}
@media (min-width: 768px) {
    .hero--about .hero__desc {
        max-width: 42rem;
        font-size: var(--font-size-lg);
    }
}

.hero--about .hero__bg-img,
.hero--about .hero__bg-img img {
    object-position: 65% 50%;
}

/* Desktop only: the copy sits on the photograph, so it turns white. Below
   1024px the hero stacks (see the --alt block further down) and the copy keeps
   the light-surface colours of the base .hero__title / .hero__desc rules. */
@media (min-width: 1024px) {
    .hero--alt .hero__title,
    .hero--alt .hero__desc,
    .hero--alt .hero__preheader {
        color: var(--color-white);
    }
}

.hero--alt .hero__desc {
    max-width: 36rem;
}
.hero__desc-link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
    z-index: 1;
}
.hero__bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: inherit;
}
@media (min-width: 1024px) {
    .hero__bg-img { object-position: 50% 50%; }
}

.hero__bg-img--flip {
    object-position: left bottom;
}

/* Contact hero */
.hero--contact {
    min-height: calc(100vh - 16rem);
    overflow-x: hidden;
}
@media (min-width: 1024px) {
    .hero--contact { min-height: calc(100vh - 70px); }
}

.hero--contact .hero__bg-img-wrap {
    display: none;
}
@media (min-width: 1024px) {
    .hero--contact .hero__bg-img-wrap { display: block; }
}

.hero__gradient--contact {
    background: none;
}
@media (min-width: 1024px) {
    .hero__gradient--contact { background: var(--gradient-hero-alt); }
}

.hero__inner--contact {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    min-height: calc(100vh - 16rem);
    display: flex;
    align-items: flex-start;
    padding-top: var(--space-10);
    padding-bottom: var(--space-5);
}
@media (min-width: 1024px) {
    .hero__inner--contact {
        top: 50%;
        transform: translate(-50%, -50%);
        min-height: auto;
        align-items: center;
        padding-top: var(--space-5);
    }
}

.hero--contact .hero__content {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
}

.hero--contact .hero__title {
    max-width: 32rem;
    color: var(--color-foreground);
}
@media (min-width: 1024px) {
    .hero--contact .hero__title { color: var(--color-white); }
}

.hero__form--contact {
    max-width: 28rem;
    margin-top: var(--space-1);
}
@media (min-width: 1024px) {
    .hero__form--contact { margin-top: var(--space-12); }
}

/* Hero slider (homepage) */
.hero--home {
    height: calc(100vh - var(--site-header-height) - var(--home-logo-marquee-height));
    min-height: calc(100vh - var(--site-header-height) - var(--home-logo-marquee-height));
}
@media (min-width: 1024px) {
    .hero--home {
        height: calc(100vh - var(--site-header-height) - var(--home-logo-marquee-height));
        min-height: calc(100vh - var(--site-header-height) - var(--home-logo-marquee-height));
    }
}

.hero--home .hero__gradient {
    display: none;
    background: linear-gradient(81.65deg, #0b1729 17.47%, rgba(0, 0, 0, 0) 99.64%);
}
@media (min-width: 1024px) {
    .hero--home .hero__gradient { display: block; }
}

.hero .hero-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero .hero-slider .swiper-slide img,
.hero__slide-img,
.hero__slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
}
@media (min-width: 1024px) {
    .hero .hero-slider .swiper-slide img,
    .hero__slide-img,
    .hero__slide-img img {
        object-position: 50% 50%;
    }
}

.hero--home .hero__slide-img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 47vh;
}
@media (min-width: 1024px) {
    .hero--home .hero__slide-img {
        height: 100%;
    }
}

.hero .hero-slider .swiper-wrapper,
.hero .hero-slider .swiper-slide {
    height: 100%;
}

.hero .hero__content {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 30;
}
@media (min-width: 1024px) {
    .hero .hero__content { bottom: 8%; }
}

.hero--home .hero__content {
    top: 0;
    bottom: auto;
    padding-top: var(--space-8);
    padding-bottom: var(--space-3);
}
@media (min-width: 1024px) {
    .hero--home .hero__content {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        padding-top: var(--space-5);
        padding-bottom: var(--space-5);
    }
}

.hero--home .hero__text {
    overflow: hidden;
}

.hero--home .hero__title {
    color: var(--color-foreground);
    max-width: 36rem;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 500;
}
@media (min-width: 1024px) {
    .hero--home .hero__title {
        max-width: 42rem;
        font-size: var(--font-size-6xl);
        line-height: 1;
        color: var(--color-white);
    }
}

.hero--home .hero__desc {
    max-width: 22.5rem;
    color: var(--color-muted-foreground);
    font-size: 1.02rem;
    line-height: 1.5rem;
    margin-top: var(--space-3);
}
@media (min-width: 1024px) {
    .hero--home .hero__desc {
        max-width: 36rem;
        color: rgba(255, 255, 255, 0.8);
        font-size: var(--font-size-xl);
    }
}

.hero--home .hero__actions {
    margin-top: var(--space-4);
}

/* Keep contact-page hero outside the homepage slider positioning rules. */
.hero.hero--contact {
    background: #000;
    min-height: calc(100vh - 16rem);
}
@media (min-width: 1024px) {
    .hero.hero--contact {
        min-height: calc(100vh - 70px);
        background: var(--color-background);
    }
}

.hero.hero--contact .hero__content {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
}

.hero.hero--contact .hero__inner--contact {
    min-height: calc(100vh - 16rem);
}
@media (min-width: 1024px) {
    .hero.hero--contact .hero__inner--contact { min-height: auto; }
}

.hero.hero--contact .hero__preheader {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.25rem;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

/* ── Partner Logo Marquee ──────────────────────────────────────────────────── */
.logo-marquee {
    position: relative;
    background: var(--color-background);
    color: var(--color-white);
    overflow: hidden;
    min-height: var(--home-logo-marquee-height);
    padding: var(--space-7) 0;
    display: flex;
    align-items: center;
}
@media (min-width: 1024px) {
    .logo-marquee { padding: var(--space-9) 0; }
}

.logo-marquee__fade--left,
.logo-marquee__fade--right {
    position: absolute;
    z-index: 20;
    top: 0;
    height: 100%;
    width: 100px;
    pointer-events: none;
}
@media (min-width: 1024px) {
    .logo-marquee__fade--left,
    .logo-marquee__fade--right { width: 200px; }
}

.logo-marquee__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-background), rgba(16, 28, 46, 0.9), transparent);
}

.logo-marquee__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-background), rgba(16, 28, 46, 0.9), transparent);
}

.logo-marquee__track {
    display: flex;
    gap: clamp(3rem, 6vw, 6rem);
    animation: marquee 45s linear infinite;
}

.logo-marquee__content {
    display: flex;
    gap: clamp(3rem, 6vw, 6rem);
    flex: 0 0 max-content;
    width: max-content;
    align-items: center;
    justify-content: flex-start;
    padding-inline: clamp(2rem, 5vw, 5rem);
}

.logo-marquee__img {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    height: 54px;
    object-fit: contain;
    opacity: 1;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .logo-marquee__img {
        width: 130px;
        min-width: 130px;
        max-width: 130px;
        height: 90px;
    }
}

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

/* ── Why Us ────────────────────────────────────────────────────────────────── */
.why-us {
    padding: var(--space-16) 0;
    background: var(--color-white);
}
@media (min-width: 1024px) {
    .why-us { padding: var(--space-24) 0; }
}

.why-us .l-container {
    display: grid;
    grid-template-columns: 1fr;
}

.why-us__header {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-10);
    text-align: center;
}

.why-us__title {
    font-size: var(--font-size-4xl);
    font-weight: 600;
    text-align: center;
}
@media (min-width: 1024px) {
    .why-us__title { font-size: var(--font-size-5xl); }
}

.why-us__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 768px) {
    .why-us__grid { grid-template-columns: repeat(3, 1fr); }
}

.why-us__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.why-us__icon {
    width: 64px;
    height: 64px;
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}

.why-us__card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.why-us__card-text {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    line-height: var(--line-height-relaxed);
}
@media (min-width: 1024px) {
    .why-us__card-text { font-size: var(--font-size-base); }
}

/* ── Industry Cards (homepage) ─────────────────────────────────────────────── */
.industries-section__header {
    margin-bottom: var(--space-10);
}

.industries-section__desc {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    margin-top: var(--space-4);
}

.industries-section__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.industry-card {
    position: relative;
    display: block;
    width: 50%;
    height: 200px;
    overflow: hidden;
    text-decoration: none;
}
@media (min-width: 1024px) {
    .industry-card {
        width: calc(100% / 3);
        height: 280px;
        flex: 0 0 calc(100% / 3);
    }
}

.industry-card__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform var(--transition-slow);
}
.industry-card__bg img {
    width: 100%;
    height: calc(100% + 2px);
    object-fit: cover;
    object-position: center;
    display: block;
}

.industry-card__float {
    position: absolute;
    right: 0;
    top: 2%;
    width: 40%;
    height: 100%;
    object-fit: contain;
    z-index: 30;
    pointer-events: none;
}
.industry-card__float img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.industry-card:hover .industry-card__bg {
    transform: scale(1.05);
}

.industry-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    padding: var(--space-3);
    background: var(--color-background-80);
    transition: background var(--transition-normal);
}
@media (min-width: 1024px) {
    .industry-card__overlay { padding: var(--space-7); }
}
.industry-card:hover .industry-card__overlay {
    background: var(--color-primary-80);
}

.industry-card__title {
    color: var(--color-white);
    font-size: var(--font-size-lg);
    line-height: 1.25rem;
}
@media (min-width: 1024px) {
    .industry-card__title { font-size: var(--font-size-2xl); }
}

.industry-card--cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: 500;
    width: 50%;
}
@media (min-width: 1024px) {
    .industry-card--cta { width: calc(100% / 3); flex: 0 0 calc(100% / 3); }
}

.industry-card--cta__text {
    margin-bottom: var(--space-2);
    font-size: 1.3em;
    line-height: 1.25;
}

.industry-card--cta__btn { width: fit-content; }

/* ── Software Logos ────────────────────────────────────────────────────────── */
.software-section__title {
    font-size: 2.2rem;
    line-height: 2.2rem;
    font-weight: 500;
    margin-bottom: var(--space-6);
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (min-width: 1024px) {
    .software-section__title {
        font-size: 3rem;
        line-height: 3rem;
    }
}

.software-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    justify-content: flex-start;
}

.software-logos__item {
    flex: 1;
    min-width: 120px;
    display: flex;
    justify-content: center;
}

.software-logos__img {
    height: 63px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-normal);
}
.software-logos__img--wide { height: 70px; }
.software-logos__item:hover .software-logos__img { transform: translateY(-2px); }

/* ── Service Cards (homepage solutions) ─────────────────────────────────────── */
.solutions-section__desc {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    margin-top: var(--space-4);
    margin-bottom: var(--space-10);
}

.solutions-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .solutions-section__grid { grid-template-columns: repeat(3, 1fr); }
}

.service-card {
    display: block;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}
.service-card:hover .service-card__img { transform: scale(1.05); }

.service-card__image {
    width: 100%;
    aspect-ratio: 1.74;
    overflow: hidden;
}

.service-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.service-card__body {
    background-color: var(--color-foreground);
    background-image: url("/assets/images/bgs/darkbg-4.png");
    background-size: cover;
    background-position: center;
    padding: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (min-width: 1024px) {
    .service-card__body { padding: var(--space-10); }
}

.service-card__title {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
    white-space: nowrap;
}
@media (min-width: 768px) {
    .service-card__title { font-size: 0.95rem; }
}
@media (min-width: 1024px) {
    .service-card__title { font-size: 1.35rem; }
}

.service-card__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}
@media (min-width: 1024px) {
    .service-card__icon { width: 40px; height: 40px; }
}

/* ── Featured Slider ───────────────────────────────────────────────────────── */
.featured-slider-section {
    max-width: 100%;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .featured-slider-section { overflow: visible; }
}

.featured-slider__header { margin-bottom: var(--space-8); }

.featured-slider__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.featured-slider__title {
    font-size: 2.2rem;
    line-height: 2.2rem;
    max-width: 44rem;
    flex: 1 1 auto;
}
@media (min-width: 1024px) {
    .featured-slider__title {
        font-size: 3rem;
        line-height: 3rem;
        max-width: 54rem;
    }
}

.featured-slider__nav { display: flex; gap: var(--space-2); }

.featured-slider__nav--desktop { display: none; }
@media (min-width: 1024px) {
    .featured-slider__nav--desktop { display: flex; }
}

.featured-slider__nav--mobile {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
}
@media (min-width: 1024px) {
    .featured-slider__nav--mobile { display: none; }
}

.featured-slider__btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-gray-200);
    border-radius: 50%;
    color: var(--color-muted-foreground);
    background: var(--color-white);
    transition: var(--transition-normal);
    cursor: pointer;
}
.featured-slider__btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* Swiper overrides for featured slider */
.featured-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    cursor: ew-resize;
}
@media (min-width: 1024px) {
    .featured-slider { overflow: visible !important; }
}

.featured-slider .swiper-wrapper {
    margin-left: 0;
    max-width: 100%;
}
@media (min-width: 1024px) {
    .featured-slider .swiper-wrapper {
        max-width: none;
        margin-left: 46%;
    }
}

.featured-slider__slide {
    width: min(75vw, 20rem);
    max-width: min(75vw, 20rem);
    min-width: 0;
}
@media (min-width: 640px) {
    .featured-slider__slide {
        width: 21rem;
        max-width: 21rem;
    }
}
@media (min-width: 1024px) {
    .featured-slider__slide {
        width: 440px;
        max-width: 440px;
        height: fit-content;
    }
}

.featured-slider__card {
    display: block;
    text-decoration: none;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    transition: box-shadow var(--transition-normal);
}
.featured-slider__card:hover { box-shadow: var(--shadow-md); }

.featured-slider__image {
    width: 100%;
    aspect-ratio: 20 / 10;
    overflow: hidden;
}

.featured-slider__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-slider__name {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-foreground);
}

.featured-slider__link-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
}

.featured-slider__link {
    text-transform: uppercase;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: color var(--transition-normal);
}
.featured-slider__card:hover .featured-slider__link { text-decoration: underline; }

.featured-slider__link-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* ── FAQ Accordion ─────────────────────────────────────────────────────────── */
.faq { background: var(--color-white); }

.faq__header {
    margin-bottom: var(--space-10);
}
@media (min-width: 1024px) {
    .faq__header { margin-bottom: var(--space-14); }
}

.faq__heading {
    font-size: 2.2rem;
    line-height: 2.2rem;
}
@media (min-width: 1024px) {
    .faq__heading {
        font-size: 3rem;
        line-height: 3rem;
    }
}

.faq__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 1024px) {
    .faq__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-14);
        align-items: center;
    }
}

.faq__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq__item {
    width: 100%;
    min-height: 84px;
    text-align: left;
    padding: var(--space-5) var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-left: 8px solid var(--color-primary);
    cursor: pointer;
    transition: var(--transition-normal);
}
@media (min-width: 1024px) {
    .faq__item {
        min-height: 104px;
        padding: var(--space-6) var(--space-10);
    }
}

.faq__question-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.faq__question {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-muted-foreground);
    text-wrap: balance;
}
@media (min-width: 1024px) {
    .faq__question { font-size: var(--font-size-2xl); color: var(--color-foreground); }
}

.faq__item--active .faq__question { color: var(--color-foreground); }

.faq__icon {
    flex-shrink: 0;
    position: relative;
    width: 20px;
    height: 18px;
}

.faq__icon--minus {
    display: none;
    color: var(--color-primary);
}
.faq__item--active .faq__icon--minus { display: block; }

.faq__icon--plus {
    display: block;
    color: rgba(55, 54, 81, 0.5);
}
.faq__item--active .faq__icon--plus { display: none; }

.faq__answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--transition-normal), opacity var(--transition-normal), padding var(--transition-normal);
}
.faq__item--active .faq__answer {
    max-height: 500px;
    opacity: 1;
    padding-top: var(--space-2);
}

.faq__answer-text {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    line-height: var(--line-height-relaxed);
}
@media (min-width: 1024px) {
    .faq__answer-text { font-size: var(--font-size-base); }
}

.faq__image-img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-sm);
}

/* ── Tab Content (industries + service pages) ──────────────────────────────── */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
}
@media (min-width: 1024px) {
    .tabs { flex-direction: row; }
}

.tabs-section__heading {
    margin-bottom: var(--space-10);
}

.tabs__nav {
    display: none;
    flex-direction: column;
    min-width: 280px;
    max-width: 280px;
    border-right: 1px solid var(--color-gray-200);
    overflow-y: auto;
}
@media (min-width: 1024px) {
    .tabs__nav { display: flex; }

    /* Clip horizontal overflow without creating an ancestor scroll container
       that would prevent the content navigation from sticking to the viewport. */
    body:has(.tabs, .case-detail__toc) { overflow-x: clip; }

    .tabs__nav,
    .case-detail__toc {
        position: sticky;
        top: var(--site-header-height);
        align-self: flex-start;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
    }

    .case-detail__toc {
        height: calc(100vh - var(--site-header-height));
        height: calc(100dvh - var(--site-header-height));
    }

    /* The tab list is as tall as its own tabs: a viewport-height column would
       make the whole tab box at least one screen tall whatever the active
       panel holds (PRE-55). It still scrolls inside itself if the list is
       longer than the screen. */
    .tabs__nav {
        max-height: calc(100vh - var(--site-header-height));
        max-height: calc(100dvh - var(--site-header-height));
    }

    .tabs__nav > *,
    .case-detail__toc > * { flex-shrink: 0; }
}

.tabs__nav-spacer { flex-grow: 1; }

.tabs__contact-link {
    margin: var(--space-2);
    padding: var(--space-3);
    text-align: center;
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.tabs__btn {
    padding: var(--space-4) var(--space-6);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
    color: var(--color-muted-foreground);
    transition: var(--transition-normal);
    cursor: pointer;
    font-size: var(--font-size-base);
    border-left: 8px solid transparent;
}
.tabs__btn:hover { color: var(--color-primary); }
.tabs__btn--active {
    color: var(--color-primary);
    background: var(--color-primary-10);
    border-left-color: var(--color-primary);
}

/* Mobile tab scroll */
.tabs__scroll {
    display: flex;
    overflow-x: auto;
    gap: 0;
    border-bottom: 1px solid var(--color-gray-200);
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-gray-200);
    -ms-overflow-style: none;
}
@media (min-width: 1024px) {
    .tabs__scroll { display: none; }
}
.tabs__scroll::-webkit-scrollbar { height: 4px; }
.tabs__scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }

.tabs__btn-mobile {
    padding: var(--space-4);
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--color-muted-foreground);
    border-bottom: 1px solid var(--color-gray-200);
    transition: var(--transition-normal);
    cursor: pointer;
    font-size: var(--font-size-sm);
    border-left: 8px solid transparent;
}
.tabs__btn-mobile--active,
.tabs__btn-mobile.tabs__btn--active {
    color: var(--color-primary);
    background: var(--color-primary-10);
    border-left-color: var(--color-primary);
}

/* Tab content panels */
.tabs__content {
    display: none;
    padding: var(--space-8);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    width: 100%;
}
.tabs__content--active {
    display: block;
}
@media (min-width: 1024px) {
    .tabs__content { padding: var(--space-14); }
}

.tabs__content-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    place-content: start;
}
@media (min-width: 1024px) {
    .tabs__content-inner--service { grid-template-columns: 1fr 1fr; }
}

/* No fixed panel height: the box follows the active tab's content, and the
   flex row keeps it at least as tall as the tab list (PRE-55, owner's A22). */

.tabs__panel-title {
    font-size: var(--font-size-2xl);
    font-weight: 500;
    margin-bottom: var(--space-4);
    color: var(--color-foreground);
}

.tabs__block-copy {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
    .tabs__block-copy { font-size: var(--font-size-base); }
}

.tabs__block-list {
    margin-bottom: var(--space-5);
}

.tabs--industry .tabs__block-list {
    list-style: disc;
    padding-left: 1.625rem;
}

.tabs--service .tabs__block-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    padding-left: 0;
}

.tabs__bullet-item {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin: 0.5rem 0;
}
@media (min-width: 1024px) {
    .tabs__bullet-item { font-size: var(--font-size-base); }
}

.tabs__bullet-item::marker {
    color: var(--color-muted-foreground);
}

.check-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
}
@media (min-width: 1024px) {
    .check-list__item { font-size: var(--font-size-base); }
}

.check-list__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary);
    background: rgba(10, 154, 149, 0.15);
    border-radius: 999px;
    padding: 2px;
    margin-top: 1px;
}

.tabs__analyses-img {
    width: 100%;
    height: 100%;
    max-height: 480px;
    object-fit: contain;
}

.tabs__image-wrap {
    width: 100%;
    max-height: 480px;
}

.tabs__analyses { margin-top: var(--space-10); }

.tabs__analyses-title {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-xl);
    font-weight: 500;
}

.tabs__analyses-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

@media (min-width: 1024px) {
    .tabs__analyses-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Contact Form ──────────────────────────────────────────────────────────── */
.callback-form {
    width: 100%;
    max-width: 28rem;
}

.callback-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: opacity var(--transition-slow);
    color: var(--color-foreground);
}
@media (min-width: 1024px) {
    .hero .callback-form__form { color: var(--color-white); }
}

.callback-form__field { display: flex; flex-direction: column; }

.callback-form__label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.callback-form__input {
    margin-top: var(--space-1);
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    background: var(--color-white);
    color: var(--color-foreground);
    transition: border-color var(--transition-normal);
}
@media (min-width: 1024px) {
    .hero .callback-form__input { background: var(--color-muted-foreground); border-color: var(--color-muted-foreground); color: var(--color-white); }
}
.callback-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-20);
}

.callback-form__field--consent {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2);
}

.callback-form__checkbox {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.callback-form__submit {
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-normal);
}
.callback-form__submit:hover { background: var(--color-background); }
.callback-form__submit:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.callback-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.callback-form__success {
    margin-top: var(--space-12);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    background: var(--color-muted-foreground);
    color: var(--color-white);
    transition: opacity var(--transition-slow);
}

.callback-form__success-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
}

/* ── CTA Banner ────────────────────────────────────────────────────────────── */
.cta-banner {
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center;
    padding: var(--space-12) 0;
}
@media (min-width: 1024px) {
    .cta-banner { padding: var(--space-20) 0; }
}

.cta-banner__title {
    color: var(--color-white);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-6);
    max-width: 20rem;
}
@media (min-width: 1024px) {
    .cta-banner__title { font-size: var(--font-size-5xl); max-width: 42rem; margin-bottom: var(--space-7); }
}

/* ── Map Cards ─────────────────────────────────────────────────────────────── */
.map-cards-section {
    background-color: #f4f4f5;
    background-size: cover;
    background-position: center;
}

.map-cards__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-8);
}
@media (min-width: 1024px) {
    .map-cards__title { font-size: var(--font-size-3xl); }
}

.map-cards__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .map-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

.map-card {
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-sm);
    background: var(--color-gray-50);
    padding: var(--space-1);
    overflow: hidden;
}

.map-card__map {
    aspect-ratio: 14 / 10;
    overflow: hidden;
}

.map-card__iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-card__info {
    padding: var(--space-4);
}

.map-card__city {
    font-size: var(--font-size-xl);
    font-weight: 600;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (min-width: 1024px) {
    .map-card__city { font-size: var(--font-size-2xl); }
}

.map-card__address {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    margin-top: var(--space-1);
}
@media (min-width: 1024px) {
    .map-card__address { font-size: var(--font-size-base); }
}

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
    background: var(--color-white);
    border-top: 1px solid var(--color-gray-200);
    padding: var(--space-20) 0;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-12);
        align-items: start;
    }
}
@media (min-width: 1024px) {
    .footer__grid {
        grid-template-columns: 1.15fr 0.9fr 1.25fr 0.9fr;
        column-gap: var(--space-14);
    }
}
@media (min-width: 1280px) {
    .footer__grid { column-gap: var(--space-20); }
}

.footer__logo {
    height: 19px;
    width: auto;
    margin-bottom: var(--space-2);
}

.footer__copyright {
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}
@media (min-width: 768px) {
    .footer__copyright { font-size: var(--font-size-base); }
}

.footer__social {
    margin-top: var(--space-3);
}

.footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    transition: color var(--transition-normal);
}
.footer__link:hover { color: var(--color-primary); }
@media (min-width: 768px) {
    .footer__link { font-size: var(--font-size-base); }
}

.footer__social-icon {
    width: 20px;
    height: 20px;
}

.footer__col-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
    color: var(--color-foreground);
}
@media (min-width: 768px) {
    .footer__col-title { font-size: var(--font-size-lg); }
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ── About page sections ───────────────────────────────────────────────────── */
.trust-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}
@media (min-width: 1024px) {
    .trust-section__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-20); }
}

.trust-section__preheader {
    --tw-text-opacity: 1;
    display: block;
    color: rgb(33 154 166 / var(--tw-text-opacity));
    margin-bottom: var(--space-4);
    text-transform: uppercase;
}

.trust-section__title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
    .trust-section__title { font-size: var(--font-size-4xl); }
}

.trust-section__desc {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
}

.trust-section__image {
    width: 100%;
    aspect-ratio: 1.3;
}

.trust-section__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Stats section */
.stats-section {
    color: var(--color-white);
    padding: var(--space-16) 0;
}
@media (min-width: 1024px) {
    .stats-section { padding: var(--space-32) 0; }
}

.stats-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}
@media (min-width: 1024px) {
    .stats-section__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.05fr); gap: var(--space-14); }
}

.stats-section__title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
}
@media (min-width: 1024px) {
    .stats-section__title { font-size: var(--font-size-5xl); }
}

.stats-section__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.stats-section__item {
    min-width: 0;
    text-align: left;
}
@media (min-width: 768px) {
    .stats-section__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .stats-section__items { gap: var(--space-14); }
}

.stats-section__number {
    display: block;
    font-size: var(--font-size-6xl);
    font-weight: 500;
    line-height: var(--line-height-tight);
}
@media (min-width: 1024px) {
    .stats-section__number { font-size: var(--font-size-8xl); }
}

.stats-section__label {
    display: block;
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}
@media (min-width: 1024px) {
    .stats-section__label { font-size: var(--font-size-base); }
}

/* About text section */
.about-text-section__preheader {
    --tw-text-opacity: 1;
    display: block;
    color: rgb(33 154 166 / var(--tw-text-opacity));
    margin-bottom: var(--space-4);
    text-transform: uppercase;
}

.about-text-section__title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--space-6);
}
@media (min-width: 1024px) {
    .about-text-section__title { font-size: var(--font-size-5xl); }
}

.about-text-section__paragraph {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-4);
}

/* ── Thank You page ────────────────────────────────────────────────────────── */
.thankyou-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thankyou-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.thankyou-hero__content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-8);
    padding: var(--space-8);
}

.thankyou-hero__title {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    max-width: 36rem;
}
@media (min-width: 1024px) {
    .thankyou-hero__title { font-size: var(--font-size-5xl); }
}

.thankyou-hero__btn { min-width: 200px; }

/* ── Page not found (src/templates/error-404.php) ──────────────────────────── */
.notfound {
    display: flex;
    align-items: center;
    min-height: 60vh;
    padding: var(--space-16) 0 var(--space-20);
    background:
        linear-gradient(90deg, rgba(16, 28, 46, 0.96), rgba(16, 28, 46, 0.74)),
        url("/assets/images/bgs/darkbg-2.png") center / cover;
    color: var(--color-white);
}

.notfound__inner {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

.notfound__code {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
}

.notfound__title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: var(--line-height-tight);
    font-weight: 700;
}

.notfound__text {
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.9);
}

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

/* ── Case Study Listing ────────────────────────────────────────────────────── */
.hero--case-listing .hero__title {
    color: var(--color-white);
    max-width: 36rem;
}

.hero--case-listing .hero__content {
    padding-left: var(--space-8);
}

.hero--case-listing .hero__desc {
    color: rgba(255, 255, 255, 0.9);
    max-width: 21.25rem;
    font-size: 1.02rem;
    line-height: 1.5rem;
}
@media (min-width: 1024px) {
    .hero--case-listing .hero__desc {
        max-width: 42rem;
        font-size: var(--font-size-lg);
    }
}

.hero__bg-img--case-listing {
    object-position: 65% 50%;
}

.case-listing__featured {
    background: #f4f4f5;
}

.case-listing__featured-card {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--color-gray-200);
    background: var(--color-white);
    transition: border-color var(--transition-normal);
}
.case-listing__featured-card:hover {
    border-color: var(--color-primary);
}
@media (min-width: 1024px) {
    .case-listing__featured-card { grid-template-columns: 1fr 1fr; }
}

.case-listing__featured-image {
    aspect-ratio: 16 / 10;
    width: 100%;
    height: 100%;
    position: relative;
    order: 2;
}
@media (min-width: 1024px) {
    .case-listing__featured-image { order: 0; }
}

.case-listing__featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-listing__featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-listing__featured-content {
    position: relative;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 100%;
    border: 1px solid var(--color-gray-200);
    padding: var(--space-14) var(--space-6) var(--space-10);
}
@media (min-width: 1024px) {
    .case-listing__featured-content {
        order: 0;
        padding: var(--space-14) var(--space-10) var(--space-10);
    }
}

.case-listing__badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-20);
    padding: 0.375rem var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    display: inline-block;
}
@media (min-width: 1024px) {
    .case-listing__badge {
        font-size: var(--font-size-base);
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

.case-listing__featured-title {
    max-width: none;
    font-size: var(--font-size-3xl);
    font-weight: 500;
    margin-bottom: var(--space-3);
}
@media (min-width: 1024px) {
    .case-listing__featured-title { font-size: var(--font-size-4xl); }
}

.case-listing__featured-desc {
    color: var(--color-muted-foreground);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    max-width: 28rem;
    margin-bottom: 0;
}

.case-listing__grid-section {
    border-top: 1px solid var(--color-gray-200);
}

.case-listing__grid-title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    margin-bottom: var(--space-7);
}
@media (min-width: 1024px) {
    .case-listing__grid-title {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--space-12);
    }
}

.case-listing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-top: var(--space-7);
}
@media (min-width: 768px) {
    .case-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .case-listing__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: var(--space-12);
    }
}

.case-listing__card {
    display: block;
    position: relative;
    text-decoration: none;
    transition: transform var(--transition-normal);
}
.case-listing__card::after {
    content: "";
    position: absolute;
    inset: -0.375rem;
    border: 2px solid rgba(33, 154, 166, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
}
.case-listing__card:hover::after {
    opacity: 1;
}

.case-listing__card-image {
    aspect-ratio: 20 / 10;
    overflow: hidden;
    border: 1px solid var(--color-gray-200);
}

.case-listing__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-listing__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-listing__card-title {
    font-size: var(--font-size-3xl);
    font-weight: 500;
    max-width: 28rem;
    margin-top: var(--space-5);
    margin-bottom: 0;
}

.case-listing__read-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    font-size: var(--font-size-base);
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
}

/* ── Case Study Detail ─────────────────────────────────────────────────────── */
.case-detail__hero {
    position: relative;
    height: 90vh;
    border-bottom: 1px solid var(--color-gray-200);
    background-size: cover;
    background-position: center;
}

.case-detail__hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: center;
    align-content: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

/* This study's longer title needs natural height, especially on phones. */
.case-detail__hero--wine-fermentation-tank {
    height: auto;
    min-height: 90vh;
}
.case-detail__hero--wine-fermentation-tank .case-detail__hero-inner {
    height: auto;
    min-height: 90vh;
    padding-top: 3rem;
    padding-bottom: 8rem;
}
.case-detail__hero--wine-fermentation-tank .case-detail__hero-image,
.case-detail__hero--wine-fermentation-tank .case-detail__hero-img {
    height: auto;
    max-height: none;
}
@media (min-width: 1024px) {
    .case-detail__hero-inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-content: stretch;
    }
}

.case-detail__badge {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    display: inline-block;
    margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
    .case-detail__badge { font-size: var(--font-size-sm); }
}

.case-detail__title {
    color: var(--color-white);
    font-size: var(--font-size-5xl);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}
@media (min-width: 1024px) {
    .case-detail__title { font-size: var(--font-size-6xl); }
}

.case-detail__desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    max-width: 36rem;
}

.case-detail__hero-image {
    width: 100%;
    height: auto;
    max-height: clamp(9rem, 24vh, 15rem);
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .case-detail__hero-image {
        align-items: center;
        height: 100%;
        max-height: none;
        overflow: visible;
    }
}

.case-detail__hero-img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: clamp(9rem, 24vh, 15rem);
    object-fit: contain;
}
@media (min-width: 1024px) {
    .case-detail__hero-img {
        width: auto;
        height: auto;
        max-height: none;
    }
}

/* Meta bar */
.case-detail__meta-wrap {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 1rem);
    z-index: 20;
    margin-top: 0;
    width: 100%;
}
@media (min-width: 1024px) {
    .case-detail__meta-wrap { transform: translate(-50%, 50%); }
}

.case-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-7);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-md);
    width: fit-content;
    align-items: center;
}
@media (min-width: 1024px) {
    .case-detail__meta { flex-direction: row; }
}

.case-detail__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-muted-foreground);
}
@media (min-width: 1024px) {
    .case-detail__meta-item { font-size: var(--font-size-base); }
}

.case-detail__meta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Article body */
.case-detail__body {
    padding: var(--space-16) 0;
}

.case-detail__body-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
@media (min-width: 1024px) {
    .case-detail__body-inner { flex-direction: row; gap: var(--space-14); }
}

/* TOC sidebar. Below 1024px it is a plain list above the article, as it is on
   simbased.com; from 1024px it becomes the sticky sidebar column. */
.case-detail__toc {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 200px;
}
@media (min-width: 1024px) {
    .case-detail__toc {
        display: flex;
        flex-direction: column;
        min-width: 200px;
        max-width: 200px;
        overflow: visible;
        scrollbar-gutter: auto;
    }
}

.case-detail__back {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
    margin-bottom: var(--space-3);
    transition: color var(--transition-normal);
}
.case-detail__back:hover { color: var(--color-primary); }

.case-detail__toc-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: var(--space-3);
}

.case-detail__toc-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vh, 18px);
}

.case-detail__progress-track {
    position: absolute;
    left: 3px;
    top: 9px;
    bottom: 9px;
    width: 2px;
    background: #8F929D;
}

.case-detail__progress-bar {
    width: 100%;
    height: 0;
    background: var(--color-primary);
    transition: height 200ms linear;
}

.case-detail__toc-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-muted-foreground);
    font-size: clamp(0.8125rem, 1.95vh, 0.9375rem);
    line-height: 1.35;
    text-decoration: none;
    transition: color var(--transition-normal);
    padding-left: 16px;
    position: relative;
}
.case-detail__toc-item:hover { color: var(--color-primary); }
.case-detail__toc-item--active { color: var(--color-primary); font-weight: 600; }

.case-detail__toc-dot {
    position: absolute;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8F929D;
    flex-shrink: 0;
    transition: background var(--transition-normal);
}
.case-detail__toc-item--active .case-detail__toc-dot { background: var(--color-primary); }

/* ── Prose (case study article content) ─────────────────────────────────────── */
.prose {
    max-width: 56rem;
    color: #334155;
    font-size: var(--font-size-lg);
    line-height: 1.777;
}

.prose__section {
    margin-bottom: var(--space-8);
}
.prose__section:last-child { margin-bottom: 0; }

.prose__heading {
    font-size: var(--font-size-3xl);
    font-weight: 500;
    color: var(--color-foreground);
    margin-bottom: var(--space-4);
    scroll-margin-top: 120px;
}
@media (min-width: 1024px) {
    .prose__heading { font-size: var(--font-size-4xl); }
}

.prose p {
    margin-top: 1.3333em;
    margin-bottom: 1.3333em;
    line-height: 1.777;
}

.prose__video {
    margin: 2em 0;
}
.prose__video video {
    width: 100%;
    border-radius: var(--radius-sm);
}

.prose__images {
    margin: 2em 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.prose__images--grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.prose__images--two {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
.prose__images--three {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
.prose__images--four {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
.prose__images--bridge-frequency {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
.prose__images--half {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
}
.prose__images--stoplog-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
.prose__images--column {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

@media (min-width: 768px) {
    .prose__images--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .prose__images--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .prose__images--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .prose__images--bridge-frequency {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .prose__images--half {
        width: 50%;
    }
    .prose__images--stoplog-results {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.prose__img {
    width: 100%;
    height: auto;
}

.prose__img--natural {
    display: block;
    width: auto;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* Single (full-column) case-study figures are capped in height, so a tall
   figure no longer fills the whole screen with nothing beside it (PRE-56,
   click-through L7). The figure keeps the article column's width; object-fit
   keeps the aspect ratio and centres the picture in that column, and a figure
   already under the cap is drawn exactly as before. Figures shown side by side
   (--two, --three, --bridge-frequency) are deliberately left alone. */
.case-detail__article .prose__images--column .prose__img {
    max-height: 70vh;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 768px) {
    .case-detail__article .prose__images--column .prose__img {
        max-height: 600px;
    }
}

.prose__caption {
    font-size: var(--font-size-base);
    color: var(--color-muted-foreground);
    margin-top: var(--space-2);
    line-height: 1.4;
    text-align: center;
}

.prose__subheading {
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--color-foreground);
    margin: 1.6em 0 0.8em;
}

.prose__figure .prose__img + .prose__img {
    margin-top: var(--space-4);
}

.prose__figure--stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.prose__figure--stack .prose__img + .prose__img,
.prose__figure--stack .prose__caption {
    margin-top: 0;
}

.case-detail__article .prose__img,
.tabs--service .tabs__image-wrap img {
    cursor: zoom-in;
}

.case-lightbox-open {
    overflow: hidden;
}

.case-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: rgba(9, 9, 9, 0.86);
}

.case-lightbox[aria-hidden="false"] {
    display: flex;
}

.case-lightbox__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: min(94vw, 1280px);
    max-height: 92vh;
}

.case-lightbox__img {
    display: block;
    max-width: min(100%, 94vw);
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: var(--color-white);
}

.case-lightbox__caption {
    max-width: 900px;
    margin-top: var(--space-3);
    color: var(--color-white);
    font-size: var(--font-size-base);
    line-height: 1.5;
    text-align: center;
}

.case-lightbox__close {
    position: absolute;
    top: calc(var(--space-8) * -1);
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: var(--color-white);
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}


.case-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.16);
}

.prose ul {
    list-style-type: disc;
    margin: 1.25em 0;
    padding-left: 1.625em;
}
.prose ol {
    list-style-type: decimal;
    margin: 1.25em 0;
    padding-left: 1.625em;
}
.prose li { margin: 0.5em 0; }
.prose li::marker { color: #d1d5db; }

/* ── FEA/CFD/Contact page hero variant ─────────────────────────────────────── */
.hero--alt {
    min-height: calc(100vh - 60px);
    padding: 0;
}
.hero.hero--alt .hero__inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
.hero.hero--alt .hero__content {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 42rem;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    text-align: left;
}
.hero.hero--alt .hero__preheader {
    --tw-text-opacity: 1;
    display: block;
    color: rgb(33 154 166 / var(--tw-text-opacity));
    margin-bottom: var(--space-1);
}
.hero.hero--alt .hero__desc {
    max-width: 42rem;
}
.hero.hero--alt .hero__bg-img,
.hero.hero--alt .hero__bg-img img {
    object-position: center center;
}
@media (min-width: 1024px) {
    .hero--alt {
        min-height: calc(100vh - 96px);
        display: flex;
        align-items: stretch;
    }
    .hero.hero--alt .hero__bg-img,
    .hero.hero--alt .hero__bg-img img {
        object-position: 50% 50%;
    }
}
/* Below 1024px the service hero stacks the way simbased.com does: the copy on
   a white block, the photograph beneath it at 42vh (the live site's height),
   instead of the desktop overlay. Desktop is untouched. */
@media (max-width: 1023px) {
    .hero--alt {
        display: flex;
        flex-direction: column;
        min-height: 0;
        background-color: var(--color-white);
    }
    .hero.hero--alt .hero__gradient--alt {
        display: none;
    }
    .hero.hero--alt .hero__inner--alt {
        order: 1;
        min-height: 0;
        justify-content: flex-start;
        padding-top: var(--space-10);
        padding-bottom: var(--space-5);
    }
    .hero.hero--alt .hero__bg-img-wrap {
        order: 2;
        position: relative;
        width: 100%;
        height: 42vh;
    }
}

/* ── Legal pages ───────────────────────────────────────────────────────────── */
.legal-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 44vh;
    padding: calc(var(--site-header-height) + var(--space-20)) 0 var(--space-16);
    background:
        linear-gradient(90deg, rgba(16, 28, 46, 0.96), rgba(16, 28, 46, 0.74)),
        url("/assets/images/bgs/darkbg-2.png") center / cover;
    color: var(--color-white);
}

.legal-hero__inner {
    width: 100%;
}

.legal-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.legal-hero__title {
    max-width: 12ch;
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: var(--line-height-tight);
    font-weight: 700;
}

.legal-page {
    background: var(--color-white);
    padding: var(--space-16) 0 var(--space-24);
}

.legal-page__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.legal-content {
    max-width: 920px;
    color: var(--color-foreground);
}

.legal-content h2 {
    margin: var(--space-12) 0 var(--space-4);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-snug);
    font-weight: 600;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    margin: var(--space-8) 0 var(--space-3);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
    font-weight: 600;
}

.legal-content p {
    margin: 0 0 var(--space-5);
    color: var(--color-muted-foreground);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.legal-content a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-table-wrap {
    width: 100%;
    margin: var(--space-5) 0 var(--space-7);
    overflow-x: auto;
    border: 1px solid var(--color-gray-200);
}

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

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

.legal-table th {
    background: var(--color-background);
    color: var(--color-white);
    font-weight: 600;
}

.legal-table td {
    color: var(--color-muted-foreground);
}

.legal-table tr:last-child td {
    border-bottom: 0;
}

@media (min-width: 1024px) {
    .legal-content h2 { font-size: var(--font-size-4xl); }
    .legal-page { padding-top: var(--space-20); }
}

/* ── Cookie consent custom theme ───────────────────────────────────────────── */
:root {
    --cc-font-family: var(--font-body);
    --cc-modal-border-radius: var(--radius-md);
    --cc-btn-border-radius: var(--radius-sm);
    --cc-bg: var(--color-white);
    --cc-primary-color: var(--color-foreground);
    --cc-secondary-color: var(--color-muted-foreground);
    --cc-btn-primary-bg: #1F9BA4;
    --cc-btn-primary-color: var(--color-white);
    --cc-btn-primary-border-color: transparent;
    --cc-btn-primary-hover-bg: var(--color-background);
    --cc-btn-primary-hover-color: var(--color-white);
    --cc-btn-primary-hover-border-color: transparent;
    --cc-btn-secondary-bg: rgba(33, 154, 166, 0.1);
    --cc-btn-secondary-color: var(--color-foreground);
    --cc-btn-secondary-border-color: rgba(33, 154, 166, 0.2);
    --cc-btn-secondary-hover-bg: rgba(33, 154, 166, 0.18);
    --cc-btn-secondary-hover-color: var(--color-background);
    --cc-btn-secondary-hover-border-color: rgba(33, 154, 166, 0.38);
    --cc-separator-border-color: var(--color-gray-200);
    --cc-toggle-on-bg: var(--color-primary);
    --cc-toggle-off-bg: #8f929d;
    --cc-toggle-readonly-bg: var(--color-gray-200);
    --cc-cookie-category-block-bg: var(--color-gray-50);
    --cc-cookie-category-block-border: var(--color-gray-200);
    --cc-cookie-category-block-hover-bg: rgba(33, 154, 166, 0.08);
    --cc-cookie-category-block-hover-border: rgba(33, 154, 166, 0.2);
    --cc-cookie-category-expanded-block-hover-bg: rgba(33, 154, 166, 0.12);
    --cc-footer-bg: var(--color-background);
    --cc-footer-color: var(--color-white);
    --cc-footer-border-color: rgba(255, 255, 255, 0.12);
    --cc-link-color: var(--color-primary);
}

#cc-main {
    font-family: var(--font-body);
}

#cc-main .cm,
#cc-main .pm {
    border: 1px solid rgba(33, 154, 166, 0.18);
    box-shadow: 0 20px 55px rgba(16, 28, 46, 0.28);
}

#cc-main .cm {
    max-width: 27rem;
}

#cc-main .cm::before,
#cc-main .pm::before {
    content: "";
    display: block;
    height: 4px;
    background: var(--gradient-cta);
}

#cc-main .cm__title,
#cc-main .pm__title {
    font-size: 1.125rem;
    line-height: var(--line-height-snug);
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
    line-height: var(--line-height-normal);
}

#cc-main .cm__btn,
#cc-main .pm__btn {
    min-height: 44px;
    font-weight: 600;
}

#cc-main .cm__btn:not(.cm__btn--secondary),
#cc-main .pm__btn:not(.pm__btn--secondary) {
    background: var(--gradient-cta);
    color: var(--color-white);
    border-color: transparent;
}

#cc-main .cm__btn:not(.cm__btn--secondary):hover,
#cc-main .pm__btn:not(.pm__btn--secondary):hover {
    background: linear-gradient(to right, #188877, #187f88, #185f91);
    color: var(--color-white);
    border-color: transparent;
}

#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary,
#cc-main .pm__close-btn {
    color: var(--color-foreground);
}

#cc-main .cm__footer a {
    color: var(--color-white);
}

#cc-main .pm__section-table {
    font-size: 0.82em;
}

#cc-main .pm__table-caption,
#cc-main .pm__table-head > tr {
    color: var(--color-primary);
}

/* ── Error pages ───────────────────────────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: var(--space-16);
}

.error-page__code {
    font-size: var(--font-size-8xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: var(--line-height-tight);
}

.error-page__message {
    font-size: var(--font-size-xl);
    color: var(--color-muted-foreground);
    margin: var(--space-4) 0 var(--space-8);
}

/* ── Swiper overrides ──────────────────────────────────────────────────────── */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-muted-foreground);
}
.swiper-button-next::after,
.swiper-button-prev::after {
    content: "" !important;
    display: none !important;
}

/* ── Print ─────────────────────────────────────────────────────────────────── */
@media print {
    .nav, .nav__toggle, .nav__mobile,
    .logo-marquee,
    .hero-slider,
    .featured-slider,
    .cta-banner { display: none; }

    body { padding-top: 0; }

    .hero { min-height: auto; page-break-after: always; }

    a { color: var(--color-foreground); text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; }
}