/**
 * OMS Saleri — site-specific overrides
 * Load after theme / demo CSS (see index.html).
 *
 * Page-specific styles: prefer `body.page-foo` (or similar) as a prefix when
 * a rule must not leak to other templates.
 */

/* =============================================================================
   TABLE OF CONTENTS
   -----------------------------------------------------------------------------
   1. Tokens & theme bridge     — :root, hero scrim, gradient
   2. COMMON (all pages)
      2.1 Utilities             — brand colors, text, buttons
      2.2 Header & navigation   — logo, grid, lang switcher, nav links
      2.3 Footer & sub-footer   — main footer bar, OMS sub-footer, DGTIA
   3. HOMEPAGE (index.html)
      3.1 Hero                  — slide titles, kicker/body contrast
      3.2 Trust strip           — credentials row (mobile / tablet)
      3.3 Capability grid       — IT-style grid, ISO/API, logo cell
      3.4 Engineering strip     — heading scale, mail CTA line
      3.5 Video CTA block       — static headline + body, icon alignment
   4. Future page slots         — About, Products, Services, Contact, Resources
   ============================================================================= */


/* =============================================================================
   1. TOKENS & THEME BRIDGE
   business.css sets :root first; we override here (custom loads last).

   Token pattern:
   - *-main  = approved primary hex
   - *-light / *-dark = UI tints
   Short aliases (--oms-olive, …) map to *-main for older rules.

   Crafto bridge: --base-color, --dark-gray
   ============================================================================= */

:root {
    /* Blue-grey */
    --oms-blue-grey-light: #8896ae;
    --oms-blue-grey-main: #5a6987;
    --oms-blue-grey-dark: #4a5c75;

    /* Navy */
    --oms-navy-light: #1a4580;
    --oms-navy-main: #0f2d5a;
    --oms-navy-dark: #0a2245;

    /* Olive */
    --oms-olive-light: #4a7d28;
    --oms-olive-main: #3c691e;
    --oms-olive-dark: #2e5216;

    /* Forest */
    --oms-forest-light: #2a6200;
    --oms-forest-main: #1e4b00;
    --oms-forest-dark: #163d00;

    /* Very dark navy — footer stack */
    --oms-navy-deep-light: #12142e;
    --oms-navy-deep-main: #00002d;
    --oms-navy-deep-dark: #000018;

    /* Legacy aliases */
    --oms-blue-grey: var(--oms-blue-grey-main);
    --oms-olive: var(--oms-olive-main);
    --oms-navy: var(--oms-navy-main);
    --oms-forest: var(--oms-forest-main);
    --oms-navy-deep: var(--oms-navy-deep-main);

    /* Crafto Business demo bridge */
    --base-color: var(--oms-blue-grey-main);
    --dark-gray: var(--oms-navy-main);

    --oms-opacity-light: 0.82;

    --oms-gradient-sherpa-stop-1: var(--oms-navy-main);
    --oms-gradient-sherpa-stop-2: var(--oms-navy-dark);
    --oms-gradient-sherpa-stop-3: var(--oms-navy-deep-light);
    --oms-gradient-sherpa-stop-4: var(--oms-navy-deep-main);
    --oms-gradient-sherpa-stop-5: var(--oms-navy-deep-dark);
}

/* .opacity-light — theme parity; strength via --oms-opacity-light */
.opacity-light {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: var(--oms-opacity-light);
}

.bg-gradient-sherpa-blue-black {
    background-image: linear-gradient(
        to right top,
        var(--oms-gradient-sherpa-stop-1),
        var(--oms-gradient-sherpa-stop-2),
        var(--oms-gradient-sherpa-stop-3),
        var(--oms-gradient-sherpa-stop-4),
        var(--oms-gradient-sherpa-stop-5)
    );
}


/* =============================================================================
   2. COMMON — all pages
   ============================================================================= */

/* -----------------------------------------------------------------------------
   2.1 Utilities — colors & buttons
   ----------------------------------------------------------------------------- */

.bg-oms-olive {
    background-color: var(--oms-olive-main);
}

.text-oms-olive {
    color: var(--oms-olive-light);
}

.text-oms-forest {
    color: var(--oms-forest-main);
}

.btn.btn-oms-olive {
    background-color: var(--oms-olive);
    border-color: var(--oms-olive);
    color: var(--white);
}

.btn.btn-oms-olive:hover,
.btn.btn-oms-olive:focus-visible {
    background-color: var(--oms-forest-main);
    border-color: var(--oms-forest-main);
    color: var(--white);
}

.btn.btn-oms-forest {
    background-color: var(--oms-forest-main);
    border-color: var(--oms-forest-main);
    color: var(--white);
}

.btn.btn-oms-forest:hover,
.btn.btn-oms-forest:focus-visible {
    background-color: var(--oms-forest-dark);
    border-color: var(--oms-forest-dark);
    color: var(--white);
}

/*
 * CTA arrow chip (theme: <span class="bg-white text-base-color"> + icon) — no white pill;
 * icon uses the same colour as the button label (all .btn variants, including btn-base-color).
 */
.btn > span.bg-white.text-base-color {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: currentColor !important;
    padding: 0 !important;
    margin-inline-start: 0.3em;
    display: inline-flex;
    align-items: center;
    align-self: center;
    line-height: 1;
    vertical-align: middle;
}

.btn.btn-outline-oms-olive {
    background-color: transparent;
    border-color: var(--oms-olive);
    color: var(--oms-olive);
}

.btn.btn-outline-oms-olive:hover,
.btn.btn-outline-oms-olive:focus-visible {
    background-color: var(--oms-olive-main);
    border-color: var(--oms-olive-main);
    color: var(--white);
}

/* -----------------------------------------------------------------------------
   2.2 Header & navigation
   ----------------------------------------------------------------------------- */

/*
 * Logo / brand bar
 * - < lg: collapsed navbar — keep height in line with toggler (~52px logo cap, theme-aligned).
 * - ≥ lg: tall bar over hero + larger logo; sticky compacts (Crafto main.js .sticky / .sticky-active).
 */
header .navbar-brand {
    box-sizing: border-box;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-flex;
    align-items: center;
}

header .navbar-brand img {
    max-height: 48px;
    width: auto;
}

header.sticky .navbar-brand {
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

header.sticky .navbar-brand img {
    max-height: 48px;
    width: auto;
}

/* Slightly more presence on tablet while still collapsed (< lg, sm–md) */
@media (min-width: 576px) and (max-width: 991.98px) {
    header .navbar-brand img,
    header.sticky .navbar-brand img {
        max-height: 52px;
    }
}

@media (min-width: 992px) {
    header .navbar-brand {
        height: 130px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    header .navbar-brand img {
        max-height: 120px;
    }

    header.sticky .navbar-brand {
        height: 90px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    header.sticky .navbar-brand img {
        max-height: 70px;
    }

    /*
     * Optical center: nav between logo and lang (home: .oms-navbar-lang; inner ar pages: .text-end).
     * Bootstrap `.navbar > .container-fluid` is `display:flex; flex-wrap:inherit; justify-content:space-between`.
     * With DOM order logo → lang → menu-order, flex can wrap the wide `.menu-order` under the tall logo
     * (nav links sit at y ≈ logo height). Force a single-row grid and drop flex distribution props.
     */
    header > nav.navbar.navbar-expand-lg > .container-fluid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
        justify-content: unset;
        justify-items: stretch;
        flex-wrap: nowrap !important;
        width: 100%;
    }

    header > nav.navbar.navbar-expand-lg > .container-fluid > :first-child {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin-inline-end: 0 !important;
        width: auto !important;
        max-width: 100%;
    }

    header > nav.navbar.navbar-expand-lg > .container-fluid > .menu-order {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: auto !important;
        max-width: 100%;
    }

    header > nav.navbar.navbar-expand-lg > .container-fluid > .menu-order .navbar-collapse {
        align-items: center;
    }

    header > nav.navbar.navbar-expand-lg > .container-fluid > .oms-navbar-lang {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        margin-inline-start: 0 !important;
        width: auto !important;
        max-width: 100%;
    }

    header > nav.navbar.navbar-expand-lg > .container-fluid > [class*="col-"].text-end {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }

    /* `col-*` flex shorthand is for `.row`; neutralise on this grid strip */
    header > nav.navbar.navbar-expand-lg > .container-fluid > [class*="col-"] {
        flex: unset;
    }
}

header .navbar > .container-fluid > [class*="col-"].text-end {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

header .navbar > .container-fluid > [class*="col-"].text-end .header-icon {
    flex-shrink: 0;
    min-width: min-content;
}

/* Language switcher */
header .oms-lang-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0;
    min-height: 37px;
    padding: 8px 14px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

header .oms-lang-switcher:hover {
    background-color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
}

header .oms-lang-switcher__sep {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
    pointer-events: none;
}

header .oms-lang-switcher:hover .oms-lang-switcher__sep {
    color: rgba(15, 45, 90, 0.35);
}

header .oms-lang-switcher__label {
    color: var(--white);
    cursor: default;
}

header .oms-lang-switcher__label[lang="en"] {
    text-transform: uppercase;
}

header .oms-lang-switcher__label.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 700;
}

header .oms-lang-switcher:hover .oms-lang-switcher__label {
    color: var(--dark-gray);
}

header .oms-lang-switcher__link {
    color: var(--white);
    text-decoration: none;
}

header .oms-lang-switcher__link:hover {
    color: var(--white);
    opacity: 0.9;
}

header .oms-lang-switcher__link.is-active {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

header .oms-lang-switcher:hover .oms-lang-switcher__link {
    color: var(--dark-gray);
}

header .oms-lang-switcher:hover .oms-lang-switcher__link:hover {
    opacity: 1;
    color: var(--dark-gray);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher {
    border-color: rgba(35, 35, 35, 0.22);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher:hover {
    background-color: var(--very-light-gray);
    border-color: rgba(35, 35, 35, 0.28);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher__label,
header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher__link {
    color: var(--dark-gray);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher__sep {
    color: rgba(35, 35, 35, 0.4);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher__link:hover {
    color: var(--medium-gray);
    opacity: 1;
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher:hover .oms-lang-switcher__label,
header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher:hover .oms-lang-switcher__link {
    color: var(--dark-gray);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher:hover .oms-lang-switcher__sep {
    color: rgba(35, 35, 35, 0.4);
}

header.sticky.sticky-active [data-header-hover="light"] .oms-lang-switcher:hover .oms-lang-switcher__link:hover {
    color: var(--medium-gray);
}

/* < lg: home — logo | ··· | lang | burger (three columns); inner ar pages keep toolbar inside .menu-order */
@media (max-width: 991.98px) {
    /*
     * Transparent home nav collapses to a light bar on small viewports; default switcher
     * uses white type for over-hero — invisible on that bar. Match sticky “light hover” palette.
     */
    header .navbar.navbar-expand-lg.header-transparent[data-header-hover="light"] .oms-lang-switcher {
        border-color: rgba(35, 35, 35, 0.22);
    }

    header .navbar.navbar-expand-lg.header-transparent[data-header-hover="light"] .oms-lang-switcher:hover {
        background-color: var(--very-light-gray);
        border-color: rgba(35, 35, 35, 0.28);
    }

    header .navbar.navbar-expand-lg.header-transparent[data-header-hover="light"] .oms-lang-switcher__link {
        color: var(--dark-gray);
    }

    header .navbar.navbar-expand-lg.header-transparent[data-header-hover="light"] .oms-lang-switcher__link:hover {
        color: var(--medium-gray);
        opacity: 1;
    }

    header .navbar.navbar-expand-lg.header-transparent[data-header-hover="light"] .oms-lang-switcher:hover .oms-lang-switcher__link {
        color: var(--dark-gray);
    }

    header .navbar.navbar-expand-lg.header-transparent[data-header-hover="light"] .oms-lang-switcher:hover .oms-lang-switcher__link:hover {
        color: var(--medium-gray);
    }

    header .navbar.navbar-expand-lg > .container-fluid:has(.oms-navbar-lang) {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        column-gap: 0.5rem;
    }

    header .navbar > .container-fluid > .oms-navbar-lang {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    header .navbar > .container-fluid > .oms-navbar-lang .header-icon {
        flex-shrink: 0;
        min-width: min-content;
    }

    header .oms-lang-switcher--solo {
        gap: 0;
    }

    header .oms-lang-switcher--solo .oms-lang-switcher__link {
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    header .navbar.navbar-expand-lg > .container-fluid:has(.oms-navbar-lang) .oms-navbar-lang .oms-lang-switcher {
        min-height: 34px;
        padding: 6px 11px;
        font-size: 10px;
    }

    /* Burger + collapse: float breaks row align-items:center — toggler sat at y=0 while lang pill sat ~mid */
    header .navbar.navbar-expand-lg > .container-fluid:has(.oms-navbar-lang) > .menu-order {
        align-items: center;
        justify-content: center;
    }

    header .navbar.navbar-expand-lg > .container-fluid:has(.oms-navbar-lang) > .menu-order .navbar-toggler {
        float: none !important;
        align-self: center;
    }

    header .navbar.navbar-expand-lg > .container-fluid > .menu-order {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    header .oms-navbar-mobile-toolbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 0.35rem;
        width: 100%;
    }

    header .oms-navbar-mobile-toolbar .navbar-toggler {
        float: none;
        flex-shrink: 0;
        margin: 0;
    }

    header .oms-navbar-mobile-toolbar .header-button {
        margin-bottom: 0;
    }

    /* Slightly tighter pill next to toggler */
    header .oms-lang-switcher.oms-lang-switcher--toolbar {
        min-height: 34px;
        padding: 6px 11px;
        font-size: 10px;
    }

    header .oms-lang-switcher.oms-lang-switcher--toolbar .oms-lang-switcher__sep {
        margin-inline: 6px;
    }

    /* Burger menu open — airier stack (vertical gap + tap padding; ≥992px unchanged) */
    header .navbar-expand-lg .navbar-collapse {
        padding-top: 0.75rem;
        padding-bottom: 1.15rem;
    }

    header .navbar-expand-lg .navbar-collapse > .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.4rem;
        padding-top: 0.15rem;
    }

    header .navbar-expand-lg .navbar-collapse .navbar-nav > .nav-item > .nav-link {
        padding-top: 0.7rem !important;
        padding-bottom: 0.7rem !important;
        padding-inline: 0.85rem;
        line-height: 1.35;
    }

    /* Dropdown blocks: a little space before submenu list */
    header .navbar-expand-lg .navbar-collapse .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        margin-top: 0.35rem !important;
    }
}

/* Primary nav — active / hover / focus */
header .navbar-nav .nav-link.active,
header .navbar-nav .nav-item.active > .nav-link {
    color: var(--oms-olive-light) !important;
    opacity: 1 !important;
}

header .navbar-nav .nav-link:hover {
    color: var(--oms-olive-light) !important;
    opacity: 1 !important;
}

header .navbar-nav .nav-link.active:hover,
header .navbar-nav .nav-item.active > .nav-link:hover {
    color: var(--oms-olive-light) !important;
}

header .navbar-nav .nav-link:focus-visible {
    color: var(--oms-olive-light) !important;
    opacity: 1 !important;
}

/* -----------------------------------------------------------------------------
   2.3 Footer & sub-footer
   ----------------------------------------------------------------------------- */

footer.footer-dark.bg-extra-medium-slate-blue {
    background-color: var(--oms-navy-deep-light) !important;
    /*
     * Footer type scale (lighter than theme body). All sizes = rem + 1pt bump.
     * Adjust only these custom properties to retune the whole bar.
     */
    --oms-footer-fs-label: calc(0.9375rem + 1pt);
    --oms-footer-fs-body: calc(0.9375rem + 1pt);
    --oms-footer-fs-link: calc(0.875rem + 1pt);
}

footer.footer-dark.bg-extra-medium-slate-blue span.alt-font.d-block.text-white.mb-5px {
    font-size: var(--oms-footer-fs-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.65rem !important;
}

footer.footer-dark.bg-extra-medium-slate-blue p {
    font-size: var(--oms-footer-fs-body);
    line-height: 1.6;
}

footer.footer-dark.bg-extra-medium-slate-blue ul li a {
    font-size: var(--oms-footer-fs-link);
    line-height: 1.55;
}

footer.footer-dark.bg-extra-medium-slate-blue a.text-white {
    font-size: var(--oms-footer-fs-link);
}

/* Intro blurb column: slightly smaller on xs (matches link size token) */
@media (max-width: 575.98px) {
    footer.footer-dark.bg-extra-medium-slate-blue .order-1.order-lg-1 > p {
        font-size: var(--oms-footer-fs-link);
        line-height: 1.55;
    }
}

.oms-sub-footer {
    background: linear-gradient(
        180deg,
        var(--oms-navy-deep-light) 0%,
        var(--oms-navy-deep-main) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.oms-sub-footer__inner {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

@media (min-width: 768px) {
    .oms-sub-footer__inner {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        min-height: 3.25rem;
    }
}

.oms-sub-footer .oms-sub-footer__line {
    margin: 0;
    padding: 0;
    line-height: 1.55;
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .oms-sub-footer .oms-sub-footer__line {
        font-size: 0.875rem;
    }
}

.oms-sub-footer__copy {
    max-width: 42rem;
}

.oms-sub-footer .oms-sub-footer__credit {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35em;
}

@media (min-width: 768px) {
    .oms-sub-footer__credit {
        flex-shrink: 0;
        border-left: none;
        border-image: none;
        padding-left: 1.5rem;
        margin-left: 0.25rem;
    }
}

.oms-sub-footer__text {
    color: rgba(255, 255, 255, 0.52);
    letter-spacing: 0.02em;
}

.oms-sub-footer__link {
    font-size: inherit;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.oms-sub-footer__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.oms-sub-footer .oms-sub-footer__credit .oms-sub-footer__link--dgtia {
    line-height: 0;
}

.oms-sub-footer__link.oms-sub-footer__link--dgtia.hover-lift:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.88);
}

.oms-sub-footer__link.oms-sub-footer__link--dgtia img {
    display: block;
    transition: transform 0.2s ease;
}

.oms-sub-footer__link.oms-sub-footer__link--dgtia.hover-lift:hover img {
    transform: translateY(-2px);
}


/* =============================================================================
   3. HOMEPAGE — index.html (and any page reusing the same blocks)
   Scope with body class later if these blocks appear only on home.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   3.1 Hero
   ----------------------------------------------------------------------------- */

/* Hero headlines — h1 + h2 same visual size in slider (2.5rem); line-height eases on narrow viewports */
.section-dark.bg-dark-gray > .swiper .swiper-slide h1.hero-slide-title,
.section-dark.bg-dark-gray > .swiper .swiper-slide h2.hero-slide-title {
    font-size: 2.5rem;
    line-height: 1.11;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 991px) {
    .section-dark.bg-dark-gray > .swiper .swiper-slide h1.hero-slide-title,
    .section-dark.bg-dark-gray > .swiper .swiper-slide h2.hero-slide-title {
        line-height: 1.18;
    }
}

@media (max-width: 767px) {
    .section-dark.bg-dark-gray > .swiper .swiper-slide h1.hero-slide-title,
    .section-dark.bg-dark-gray > .swiper .swiper-slide h2.hero-slide-title {
        line-height: 1.2;
    }
}

@media (max-width: 575px) {
    .section-dark.bg-dark-gray > .swiper .swiper-slide h1.hero-slide-title,
    .section-dark.bg-dark-gray > .swiper .swiper-slide h2.hero-slide-title {
        line-height: 1.22;
    }
}

.section-dark.bg-dark-gray > .swiper .swiper-slide span.opacity-6,
.section-dark.bg-dark-gray > .swiper .swiper-slide p.opacity-6 {
    opacity: 0.9;
}

/*
 * Hero — mobile & tablet only (< lg): airier copy stack (padding, rhythm).
 * Desktop (≥992px) uses theme + defaults above unchanged.
 */
@media (max-width: 991.98px) {
    .section-dark.bg-dark-gray > .swiper .swiper-slide .cover-background .container.h-100 > .row.align-items-center {
        padding-top: 1.75rem;
        padding-bottom: 3.5rem;
    }

    .section-dark.bg-dark-gray > .swiper .swiper-slide .cover-background .container.h-100 > .row > [class*="col-"] {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    /* Eyebrow: undo sm-mb-15px crunch; readable multi-line */
    .section-dark.bg-dark-gray > .swiper .swiper-slide span.fs-20.opacity-6.d-inline-block {
        margin-bottom: 1.25rem !important;
        line-height: 1.45;
        max-width: 22rem;
    }

    .section-dark.bg-dark-gray > .swiper .swiper-slide p.opacity-6 {
        margin-top: 1.25rem !important;
        line-height: 1.55;
    }

    /* Theme uses mt-20px sm-mt-0 — restore spacing above CTA on sm–md */
    .section-dark.bg-dark-gray > .swiper .swiper-slide .btn.btn-extra-large {
        margin-top: 1.75rem !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .section-dark.bg-dark-gray > .swiper .swiper-slide span.fs-20.opacity-6.d-inline-block {
        max-width: 28rem;
        margin-bottom: 1.35rem !important;
    }

    .section-dark.bg-dark-gray > .swiper .swiper-slide .cover-background .container.h-100 > .row.align-items-center {
        padding-top: 2rem;
        padding-bottom: 3.75rem;
    }
}

@media (max-width: 575.98px) {
    .section-dark.bg-dark-gray > .swiper .swiper-slide .cover-background .container.h-100 > .row.align-items-center {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
}

/* -----------------------------------------------------------------------------
   3.15 About block — pie chart (mobile-only smaller visual)
   easyPieChart keeps data-size 120; scale wrapper so flex row doesn’t stay 120px wide.
   ----------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .oms-about-pie-chart {
        width: 96px !important;
        max-width: 96px;
        flex-shrink: 0;
        margin-inline-end: 1rem !important;
    }

    .oms-about-pie-chart .chart-percent {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        transform: scale(0.8);
        transform-origin: center center;
        /* Collapse layout footprint from 120 → 96px (transform doesn’t shrink flow) */
        margin: -12px;
    }
}

/* -----------------------------------------------------------------------------
   3.16 Home — solitude tab rail (EN + AR: vertical list, item spacing, tap targets)
   ----------------------------------------------------------------------------- */
section.bg-solitude-blue .tab-style-05 .nav-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    gap: 0.5rem;
    list-style: none;
    margin-bottom: 0;
    padding-inline-start: 0;
}

section.bg-solitude-blue .tab-style-05 .nav-tabs > .nav-item {
    width: 100%;
    flex: 0 0 auto;
    margin: 0;
}

section.bg-solitude-blue .tab-style-05 .nav-tabs .nav-link {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.95rem;
    min-height: 2.75rem;
    border-radius: 10px;
    box-sizing: border-box;
    line-height: 1.4;
}

section.bg-solitude-blue .tab-style-05 .nav-tabs .nav-link .icon-extra-medium,
section.bg-solitude-blue .tab-style-05 .nav-tabs .nav-link i[class*="icon-feather"] {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    section.bg-solitude-blue .tab-style-05 .nav-tabs {
        gap: 0.7rem;
        justify-content: flex-start !important;
    }

    section.bg-solitude-blue .tab-style-05 .nav-tabs .nav-link {
        min-height: 3rem;
        padding-top: 0.72rem;
        padding-bottom: 0.72rem;
        padding-inline: 1.05rem;
        gap: 0.7rem;
    }
}

/* -----------------------------------------------------------------------------
   3.2 Trust strip — icon + credentials row (.oms-trust-strip on section)
   ----------------------------------------------------------------------------- */

/* Theme .row uses margin-left/right: -15px (style.min.css); use 1rem inset here */
.oms-trust-strip .container > .row {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.oms-trust-strip .feature-box-content.oms-trust-strip__text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.oms-trust-strip .oms-trust-strip__title {
    font-weight: 600;
    line-height: 1.3;
}

.oms-trust-strip .oms-trust-strip__subtitle {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--medium-gray);
}

/* Mobile + tablet: airy card blocks (desktop ≥992px unchanged) */
@media (max-width: 991.98px) {
    .oms-trust-strip {
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Columns: explicit col-12 col-sm-6 col-lg-3 in HTML; gutters via .g-3 (< lg) */
    .oms-trust-strip .row > [class*="col-"].icon-with-text-style-08 {
        background-color: #f8f8f8;
        border: 1px solid #efefef;
        border-radius: 10px;
        padding: 1.2rem 1.35rem;
        box-sizing: border-box;
    }

    .oms-trust-strip .feature-box.feature-box-left-icon-middle {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .oms-trust-strip .feature-box-icon {
        margin-inline-end: 0 !important;
        margin-top: 0.15rem;
    }

    .oms-trust-strip .oms-trust-strip__title {
        line-height: 1.35;
    }

    .oms-trust-strip .oms-trust-strip__subtitle {
        line-height: 1.45;
    }
}

@media (max-width: 575.98px) {
    .oms-trust-strip {
        padding-top: 1.875rem !important;
        padding-bottom: 2.25rem !important;
    }

    .oms-trust-strip .row > [class*="col-"].icon-with-text-style-08 {
        padding: 1.35rem 1.4rem;
    }

    .oms-trust-strip .oms-trust-strip__title {
        font-size: 0.9375rem;
    }

    .oms-trust-strip .oms-trust-strip__subtitle {
        font-size: 0.75rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .oms-trust-strip .oms-trust-strip__title {
        line-height: 1.32;
        font-size: 0.96875rem;
    }

    .oms-trust-strip .oms-trust-strip__subtitle {
        line-height: 1.42;
        font-size: 0.75rem;
    }
}

@media (min-width: 992px) {
    .oms-trust-strip .oms-trust-strip__subtitle {
        font-size: 0.6875rem;
    }
}

/* -----------------------------------------------------------------------------
   3.3 Capability grid (home)
   ----------------------------------------------------------------------------- */

.oms-capability-grid__inner--logo {
    padding-top: 18px;
    padding-bottom: 18px;
    min-height: 170px;
}

.oms-capability-grid-logo {
    display: block;
    width: auto;
    max-width: 96%;
    max-height: 76px;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    object-position: center;
}

@media (min-width: 576px) {
    .oms-capability-grid-logo {
        max-height: 88px;
        max-width: 96%;
    }
}

@media (min-width: 992px) {
    .oms-capability-grid-logo {
        max-height: 102px;
    }
}

.oms-capability-grid__inner--iso,
.oms-capability-grid__inner--api {
    padding-top: 22px;
    padding-bottom: 22px;
}

.oms-grid-iso-title,
.oms-grid-api-title {
    font-size: 2rem;
    letter-spacing: -0.04em;
}

@media (min-width: 576px) {
    .oms-grid-iso-title,
    .oms-grid-api-title {
        font-size: 2.25rem;
    }
}

.oms-capability-grid__cell {
    min-height: 150px;
}

.oms-capability-grid__inner {
    padding: 35px 16px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 576px) {
    .oms-capability-grid__cell,
    .oms-capability-grid__inner {
        min-height: 170px;
    }

    .oms-capability-grid__inner {
        padding: 40px 22px;
    }
}

/* -----------------------------------------------------------------------------
   3.5 Video CTA block (homepage — static copy, no fancy-text animation)
   ----------------------------------------------------------------------------- */

.oms-video-cta__panel {
    position: relative;
}

/* Background photo + theme scrim (opacity-medium + bg-gradient-dark-transparent) */
.oms-video-cta__panel > .opacity-medium.bg-gradient-dark-transparent {
    opacity: 1;
    background: linear-gradient(
        to top,
        rgba(15, 18, 28, 0.82) 0%,
        rgba(15, 18, 28, 0.68) 45%,
        rgba(15, 18, 28, 0.52) 100%
    );
}

.oms-video-cta__inner {
    padding: 2rem 1.25rem;
}

.oms-video-cta__title {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.oms-video-cta__body {
    font-family: var(--primary-font);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.65;
    max-width: 36rem;
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

@media (min-width: 576px) {
    .oms-video-cta__inner {
        padding: 2.5rem 1.75rem;
    }
}

@media (min-width: 992px) {
    .oms-video-cta__inner {
        padding: 2.75rem 3rem;
    }

    .oms-video-cta__body {
        max-width: 40rem;
    }
}

@media (max-width: 991.98px) {
    .oms-video-cta__body {
        margin-inline: auto;
    }
}

@media (max-width: 767.98px) {
    .oms-video-cta .video-icon-large .video-icon {
        width: 68px;
        height: 68px;
        font-size: 17px;
    }

    .oms-video-cta .video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-bfr {
        width: 108px;
        height: 108px;
    }

    .oms-video-cta .video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-afr {
        width: 84px;
        height: 84px;
    }
}

@media (max-width: 575.98px) {
    .oms-video-cta__inner {
        padding: 1.75rem 1rem;
    }

    .oms-video-cta__title {
        margin-bottom: 12px !important;
    }

    .oms-video-cta .video-icon-large .video-icon {
        width: 52px;
        height: 52px;
        font-size: 14px;
    }

    .oms-video-cta .video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-bfr {
        width: 82px;
        height: 82px;
    }

    .oms-video-cta .video-icon-large .video-icon .video-icon-sonar .video-icon-sonar-afr {
        width: 64px;
        height: 64px;
    }

    .oms-video-cta .video-icon-large.video-icon-box .video-icon i {
        margin-left: 3px;
    }
}

/* -----------------------------------------------------------------------------
   3.4 Engineering strip
   ----------------------------------------------------------------------------- */

/* --- Strip heading --- */

.oms-engineering-strip-heading {
    font-size: calc(2.813rem - 1pt);
    line-height: 1.48;
}

@media (min-width: 992px) {
    .oms-engineering-strip-heading {
        line-height: 1.52;
    }
}

/* --- Mail CTA (border-top under engineering strip) --- */

.oms-cta-mail-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 0.75rem;
}

.oms-cta-mail-line__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
    margin-inline-end: 0;
}

.oms-cta-mail-line__body {
    flex: 1;
    min-width: 0;
    text-align: inherit;
}

.oms-cta-mail-line__text {
    display: inline;
}

.oms-cta-mail-line__link {
    display: inline;
    margin-inline-start: 0.25rem;
}

@media (max-width: 991.98px) {
    .oms-cta-mail-line {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
        max-width: 90%;
        margin-inline: auto;
        gap: 0.65rem;
    }

    .oms-cta-mail-line__icon {
        margin-inline-end: 0 !important;
        margin-bottom: 0;
        margin-top: 0.15em;
    }

    .oms-cta-mail-line__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        text-align: center;
        flex: 1;
        min-width: 0;
    }

    .oms-cta-mail-line__text {
        display: block;
        line-height: 1.4;
    }

    .oms-cta-mail-line__link {
        margin-inline-start: 0 !important;
    }
}

/* =============================================================================
   4. FUTURE PAGES — add rules under the right section as templates grow.
   Prefix with body.page-… when a rule must not affect other routes.
   ============================================================================= */

/* --- Products — two families only (Ball | Plug); anchor targets from navbar */
.page-products #down-section,
.page-products #ball-valves,
.page-products #plug-valves {
    scroll-margin-top: 6.5rem;
}

@media (min-width: 992px) {
    .page-products #down-section,
    .page-products #ball-valves,
    .page-products #plug-valves {
        scroll-margin-top: 5rem;
    }
}

/* --- Contact (contact.html, ar/contact.html) — Crafto business contact style --- */
.oms-contact-info-panel {
    background-color: var(--oms-forest-main);
}

#location .oms-contact-map {
    height: 450px;
    min-height: 320px;
    display: block;
}

@media (max-width: 767px) {
    #location .oms-contact-map {
        height: 360px;
    }
}

/* --- Services & Maintenance (services.html, ar/services.html) --- */
.page-services #down-section,
.page-services #catalogue-supply,
.page-services #project-specials,
.page-services #after-sales,
.page-services #local-support {
    scroll-margin-top: 6.5rem;
}

@media (min-width: 992px) {
    .page-services #down-section,
    .page-services #catalogue-supply,
    .page-services #project-specials,
    .page-services #after-sales,
    .page-services #local-support {
        scroll-margin-top: 5rem;
    }
}

.page-services #local-support .oms-services-split-img {
    width: 88% !important;
    max-width: 480px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Product family hero images — slightly below full column (overrides w-100) */
.page-products #ball-valves img,
.page-products #plug-valves img {
    width: 88% !important;
    max-width: 480px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* --- About Us (about.html, ar/about.html) --- */

.page-about .oms-about-intro__img {
    display: block;
}

/* Avoid oversized “wall of text” typographic lockup on small viewports */
.page-about .oms-about-intro__headline {
    font-size: clamp(1.75rem, 0.5rem + 2.5vw, 2.5rem);
    line-height: 1.2;
    max-width: 100%;
}

/* Quality policy & sectors sections — split layout images (same assets as homepage tabs) */
.page-about .oms-about-split__figure {
    margin: 0;
}

.page-about .oms-about-split__img {
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    max-height: min(420px, 55vw);
}

@media (max-width: 991.98px) {
    .page-about .oms-about-split__img {
        max-height: min(320px, 70vw);
    }
}

/* Quality policy: slightly taller crop vs default 4/3 (same column width → more vertical balance with copy) */
.page-about .oms-about-split--quality .oms-about-split__img {
    aspect-ratio: 5 / 6;
    max-height: min(500px, 68vw);
}

@media (max-width: 991.98px) {
    .page-about .oms-about-split--quality .oms-about-split__img {
        max-height: min(400px, 82vw);
    }
}

/* Use grid column width for line length; avoid max-width + auto margins on tablet (creates side gutters) */
.page-about .oms-about-intro__copy {
    max-width: none;
    margin-inline: 0;
}

.page-about .oms-about-card-label {
    letter-spacing: 0.06em;
}

/* Trust strip: three equal visual stacks — heading / sub / short desc (same scale on all) */
.page-about .oms-about-trust-item {
    margin-block-start: 0;
    padding-block-start: 0;
}

.page-about .oms-about-trust-item__heading {
    font-size: clamp(1.625rem, 1.1vw + 1.15rem, 2.375rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-top: 0;
}

.page-about .oms-about-trust-item__sub {
    font-size: clamp(1rem, 0.45vw + 0.82rem, 1.125rem);
    line-height: 1.4;
    font-weight: 500;
}

.page-about .oms-about-trust-item__desc {
    font-size: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
    line-height: 1.45;
    opacity: 0.68;
    max-width: 22rem;
    margin-inline: auto;
}

.page-about .oms-about-trust-col--sep {
    border-top: 1px solid rgba(35, 35, 35, 0.12);
    padding-top: 1.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .page-about .oms-about-trust-col--sep {
        min-height: 100%;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        border-inline-start: 1px solid rgba(35, 35, 35, 0.12);
        padding-inline-start: clamp(1rem, 2.5vw, 1.75rem);
    }
}


/* --- Products --- */


/* --- Services & Maintenance --- */


/* --- Contact --- */


/* --- Resources --- */