/* ==========================================================================
   VOLOS ENERGY — Core stylesheet
   Layout and visual system follow the Solor (home-2) reference theme.
   Palette sampled from the theme: lime #89EA5F, near-black green #163300,
   section tint #EFF1ED, then tuned toward the Volos logo greens.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Theme palette */
    --lime:        #8CE05C;   /* primary accent — buttons, icons, highlights  */
    --lime-dark:   #6FC63F;   /* hover state                                  */
    --lime-soft:   #E6F8DA;   /* tints                                        */
    --ink:         #163300;   /* headings, footer, dark surfaces              */
    --ink-soft:    #1E4508;   /* footer contact strip                         */
    --tint:        #EFF1ED;   /* alternating section background               */
    --white:       #FFFFFF;

    /* Volos brand greens, kept for the logo mark and deep surfaces */
    --volos-green: #0B7A3B;
    --volos-teal:  #0F9B8E;

    /* Text */
    --body:        #75807A;
    --muted:       #9AA69E;
    --line:        #E2E6DF;

    /* Typography */
    --font-head: "Poppins", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    --fs-xs:   0.8125rem;
    --fs-sm:   0.9375rem;
    --fs-base: 1rem;
    --fs-lg:   1.0625rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.375rem;
    --fs-4xl:  3rem;
    --fs-5xl:  3.5rem;

    --space-section: 100px;

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-pill: 100px;

    --shadow-sm: 0 2px 12px rgba(22, 51, 0, .06);
    --shadow-md: 0 14px 40px rgba(22, 51, 0, .10);
    --shadow-nav: 0 10px 40px rgba(22, 51, 0, .12);

    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--body);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: 2.5rem; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 18px; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--lime-dark); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 18px; padding-left: 20px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 3000;
    background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
/* Bootstrap's default container padding (12px) is narrower than the
   negative margin a g-lg-5 row pulls in (24px), which let those rows escape
   past the container edge and into the viewport at widths where the
   container is still 100% wide (roughly 992-1199px, before its own
   max-width takes over and leaves slack space to absorb the difference).
   24px matches the largest gutter used anywhere on the site, so this holds
   at every width regardless of which row gutter class is in play. */
.container { max-width: 1290px; padding-left: 24px; padding-right: 24px; }
.section { padding: var(--space-section) 0; }
.section-tint { background: var(--tint); }
.lead-text { font-size: var(--fs-lg); }

/* Eyebrow — lime, uppercase, letterspaced, with a small mark */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lime-dark);
    margin-bottom: 14px;
}
.eyebrow i { font-size: 1.05em; }

.section-head { margin-bottom: 54px; }
.section-head.text-center { margin-inline: auto; max-width: 720px; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin: 14px auto 0; }
.section-head:not(.text-center) { margin-bottom: 30px; }
.section-head:not(.text-center) p { margin-inline: 0; }

/* ==========================================================================
   4. BUTTONS — pill shaped, as the theme
   ========================================================================== */
.btn-lime, .btn-outline-lime, .btn-dark-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 15px 32px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    transition: background-color .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
/*
 * .btn-lime fill-slide hover:
 * The button keeps its lime background as painted (the element's own
 * background, which is the first thing drawn in its stacking context). A
 * ::before with a negative z-index sits above that background but below the
 * button's own text, because in-flow inline content always outranks a
 * negative-z-index child in paint order — so no extra markup or span wrapper
 * is needed to keep the label above the fill. Anchoring the fill to the right
 * edge and animating its width makes it grow leftward on hover.
 */
.btn-lime {
    position: relative;
    isolation: isolate; /* own stacking context, so the fill's z-index:-1 behaves */
    overflow: hidden;
    background: var(--lime);
    color: var(--ink);
}
.btn-lime::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 0;
    background: var(--ink);
    z-index: -1;
    transition: width .4s var(--ease);
}
.btn-lime:hover {
    color: var(--lime);
    transform: translateY(-2px);
}
.btn-lime:hover::before { width: 100%; }

.btn-outline-lime { background: transparent; color: var(--lime); border-color: var(--lime); }
.btn-outline-lime:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }

.btn-dark-pill { background: var(--ink); color: var(--lime); }
.btn-dark-pill:hover { background: var(--lime); color: var(--ink); transform: translateY(-2px); }

/* Rounded-square arrow button used on cards */
.btn-arrow {
    flex: 0 0 58px;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime);
    color: var(--ink);
    font-size: 1.2rem;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn-arrow:hover { background: var(--ink); color: var(--lime); }

/* ==========================================================================
   5. HEADER — transparent topbar + floating white pill navbar over the hero
   ========================================================================== */
.site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 1030;
}

.topbar {
    padding: 16px 0;
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .88);
}
.topbar a { color: rgba(255, 255, 255, .88); }
.topbar a:hover { color: var(--lime); }

.topbar-contact {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 28px; margin: 0; padding-left: 40px; list-style: none;
}
.topbar-contact li { display: flex; align-items: center; gap: 9px; }
.topbar-contact i { color: var(--lime); }

.topbar-social { display: flex; gap: 8px; margin: 0; padding-right: 40px; list-style: none; }
.topbar-social a {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--ink);
    font-size: var(--fs-sm);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.topbar-social a:hover { background: #fff; color: var(--ink); }

/* --- The floating pill --- */
.navbar-volos {
    background: #fff;
    border-radius: var(--radius-pill);
    padding: 10px 35px 10px 30px;
    box-shadow: var(--shadow-nav);
}
.site-header.is-stuck {
    position: fixed;
    top: 0;
    animation: dropIn .35s var(--ease);
}
.site-header.is-stuck .topbar { display: none; }
.site-header.is-stuck .navbar-volos {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 6px 14px 6px 30px;
}
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.navbar-volos .navbar-brand { padding: 0; margin: 0 34px 0 0; }
.navbar-volos .navbar-brand img { height: 75px; width: auto; }

.navbar-volos .nav-link {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    padding: 10px 18px;
}
/* Bootstrap's own selector, kept separate so it wins on specificity without
   touching the top/bottom padding set above. */
.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
}
.navbar-volos .nav-link:hover,
.navbar-volos .nav-link.active { color: var(--lime-dark); }

.navbar-volos .dropdown-menu {
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 10px;
    min-width: 264px;
    margin-top: 14px;
}
.navbar-volos .dropdown-item {
    font-size: var(--fs-sm);
    color: var(--body);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
}
.navbar-volos .dropdown-item:hover,
.navbar-volos .dropdown-item:focus { background: var(--lime-soft); color: var(--ink); }

.navbar-toggler {
    border: 0; padding: 8px 10px; font-size: 1.4rem;
    line-height: 1; color: var(--ink);
}
.navbar-toggler:focus { box-shadow: none; }

/* --- Mobile offcanvas --- */
.offcanvas-volos { width: 320px; }
.offcanvas-volos .offcanvas-header { border-bottom: 1px solid var(--line); }
.offcanvas-volos .offcanvas-header img { height: 44px; }
.offcanvas-volos .nav-link {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--ink);
}
.offcanvas-volos .dropdown-menu {
    border: 0; box-shadow: none; padding: 0 0 8px 14px; margin: 0;
}
.offcanvas-volos .dropdown-item { padding: 9px 10px; font-size: var(--fs-sm); }

/* ==========================================================================
   6. HERO — full-bleed image, centred content
   ========================================================================== */
.hero { position: relative; background: var(--ink); }
.hero .swiper { width: 100%; }

.hero-slide {
    position: relative;
    min-height: 100vh;   /* fallback for browsers without dvh support */
    min-height: 100dvh;  /* accounts for mobile browser chrome */
    display: flex;
    align-items: center;
    padding: 190px 0 120px;
    background-size: cover;
    background-position: center;
}
.hero-slide::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
                rgba(8, 24, 14, .52) 0%,
                rgba(8, 24, 14, .46) 38%,
                rgba(8, 24, 14, .30) 100%);
}

.hero-content {
    position: relative; z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
.hero-content .eyebrow { color: var(--lime); justify-content: center; }

.hero-title {
    font-size: var(--fs-5xl);
    font-weight: 700;
    color: #fff;
    line-height: 1.14;
    margin-bottom: 20px;
}
.hero-title .accent { color: var(--lime); display: block; }

.hero-text {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, .84);
    margin: 0 auto 34px;
    max-width: 62ch;
}

.hero-points {
    list-style: none; padding: 0;
    margin: 0 auto 34px;
    display: inline-flex; flex-wrap: wrap; gap: 14px 30px;
    justify-content: center;
}
.hero-points li {
    display: flex; align-items: center; gap: 10px;
    font-size: var(--fs-lg); color: rgba(255, 255, 255, .92);
}
.hero-points i { color: var(--lime); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.hero-nav {
    position: absolute; z-index: 5; top: 50%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .12);
    color: #fff; cursor: pointer;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.hero-nav:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.hero-prev { left: 34px; }
.hero-next { right: 34px; }
/* The reference hero uses pagination only, so the side arrows stay hidden.
   Delete this rule to bring them back. */
.hero-nav { display: none; }

.hero-pagination { position: absolute; z-index: 5; bottom: 40px !important; text-align: center; }
.hero-pagination .swiper-pagination-bullet {
    width: 11px; height: 11px; background: rgba(255, 255, 255, .5); opacity: 1;
    transition: background-color .25s var(--ease), width .25s var(--ease);
}
.hero-pagination .swiper-pagination-bullet-active {
    background: var(--lime); width: 30px; border-radius: 6px;
}

/* ==========================================================================
   7. FEATURE BAR — one rounded bar split into three cells, middle filled
   ========================================================================== */
.feature-bar {
    position: relative;
    z-index: 3;
    margin-top: -78px;
    background: var(--tint);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/*
 * Bottom-to-top hover fill: a ::before anchored to the bottom edge grows in
 * height on hover, giving the impression of the panel filling from the
 * ground up. Heading and body text switch to white as the fill passes under
 * them. Applies uniformly to all three cells, including the permanently-lime
 * middle one, so hovering any of the three gives the same tactile feedback.
 */
.feature-cell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 50px 34px 45px;
    transition: color .35s var(--ease);
}
.feature-cell::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0;
    background: var(--ink);
    z-index: -1;
    transition: height .4s var(--ease);
}
.feature-cell:hover::before { height: 100%; }
.feature-cell:hover h3,
.feature-cell:hover p { color: #fff; }

.feature-cell.is-active { background: var(--lime); }
/* White text on the lime fill reads poorly (low contrast) at rest, so the
   active card uses dark ink text instead — matching the other two cards —
   and only switches to white once the dark hover fill is behind it. */
.feature-cell.is-active:hover h3,
.feature-cell.is-active:hover p { color: #fff; }

.feature-cell-head {
    display: flex; align-items: center; gap: 18px; margin-bottom: 16px;
}
.feature-icon {
    flex: 0 0 70px; width: 70px; height: 70px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff; font-size: 2rem;
}
.feature-cell.is-active .feature-icon { background: #fff; color: var(--lime-dark); }
.feature-cell h3 { font-size: 1.7rem; margin: 0; }
.feature-cell.is-active h3 { color: var(--ink); }
.feature-cell p { font-size: 1rem; margin: 0; padding: 0 8px; }
.feature-cell.is-active p { color: rgba(22, 51, 0, .78); }


/* ==========================================================================
   8. ABOUT — image with overlapping pill card, copy on the right
   ========================================================================== */
.about-media { position: relative; }
.about-media img {
    width: 100%;
    aspect-ratio: 4 / 5;   /* holds the layout's shape while the image loads */
    object-fit: cover;
    border-radius: var(--radius-lg);
    display: block;
}
.about-pills {
    position: absolute;
    left: 26px; right: 26px; bottom: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.about-pill {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
}
.about-pill + .about-pill { border-left: 1px solid var(--line); }
.about-pill span.ico {
    flex: 0 0 60px; width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: var(--lime); color: #fff; font-size: 1.5rem;
}
.about-pill strong {
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.about-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 30px 0 32px; }
.about-stat { display: flex; align-items: center; gap: 16px; }
.about-stat .ico {
    flex: 0 0 54px; width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff; font-size: 1.4rem;
}
.about-stat strong {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-xl);
    color: var(--ink);
    line-height: 1.2;
}
.about-stat span { font-size: var(--fs-sm); }

/* ==========================================================================
   9. PRODUCT CARDS — image on top, body beneath with a circular arrow
   ========================================================================== */
.product-card {
    height: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* "Who we supply" variant — used where the surrounding section itself is
   plain white, so a white card would have no visible edge against it. */
.product-carousel--supply .product-card { background: #eff1ed; }

.product-thumb {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 22px;
}
.product-thumb img {
    width: 100%;
    aspect-ratio: 10 / 9;   /* matches the reference card's photo proportions */
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
    /* The reference card's photo has a gentle diagonal cut along the bottom
       edge (shorter on the left, full height on the right) rather than a
       plain horizontal line — this reveals the card's white background as
       a small wedge, blending into the text area below it. */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}
.product-card:hover .product-thumb img { transform: scale(1.05); }

.product-body {
    display: flex; align-items: center; gap: 18px;
    padding: 0 14px 16px;
    flex-grow: 1;
}
/* When the arrow button is omitted (see $hideCardArrow in
   includes/product-cards.php), the text block is the only child left in
   this flex row — grow it to use the width the arrow used to occupy. */
.product-body > div:only-child { flex-grow: 1; }
.product-body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.product-body h3 a { color: inherit; }
.product-body h3 a:hover { color: var(--lime-dark); }
.product-body p { font-size: 1.05rem; margin: 0; }
.product-meta {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--lime-dark);
    margin-bottom: 6px;
}

/* ==========================================================================
   10. WHY CHOOSE — flush image left, checklist right
   ========================================================================== */
.why-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.why-media {
    position: relative;
    min-height: 620px;
    background-size: cover;
    background-position: center;
}
.why-body { padding: 90px 0 90px 70px; max-width: 660px; }

.why-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 26px; }
.why-list li { display: flex; gap: 20px; align-items: flex-start; }
.why-list .tick {
    flex: 0 0 50px; width: 50px; height: 50px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff; font-size: 1.35rem;
}
.why-list h3 { font-size: 1.3rem; margin-bottom: 8px; }
.why-list p { font-size: 1.05rem; margin: 0; }

/* ==========================================================================
   11. PROCESS — white circles with a numbered lime badge
   ========================================================================== */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 0;
}
.process-step { position: relative; text-align: center; padding: 0 10px; }
.process-circle {
    position: relative;
    width: 320px; min-height: 320px; height: auto;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 30px 45px;
    box-sizing: border-box;
}
.process-circle .ico { font-size: 3.5rem; color: var(--ink); margin-bottom: 12px; }
.process-circle h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.process-circle p { font-size: 1rem; margin: 0; }

.process-num {
    position: absolute;
    top: 2px; right: 30px;
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--lime);
    color: #fff;
    font-family: var(--font-head);
    font-size: var(--fs-xl);
    font-weight: 700;
}
.process-arrow {
    position: absolute;
    top: 50%; right: -30px;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;
    color: var(--lime);
    font-size: 1.9rem;
}
.process-arrow::before {
    content: "";
    width: 26px; height: 2px;
    background: repeating-linear-gradient(
        to right, var(--lime) 0 5px, transparent 5px 10px);
}
.process-step:last-child .process-arrow { display: none; }

/* ==========================================================================
   12. SOLUTION CARDS — image with a caption bar and arrow, as the theme's
       project cards
   ========================================================================== */
.solution-card {
    position: relative;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ink);
}
.solution-card > img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--ease);
}
.solution-card:hover > img { transform: scale(1.06); }

.solution-caption {
    position: absolute;
    left: 16px; right: 16px; bottom: 16px;
    min-height: 106px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 18px 18px 18px 22px;
}
.solution-caption h3 { font-size: var(--fs-lg); margin: 0 0 2px; }
.solution-caption h3 a { color: inherit; }
.solution-caption h3 a:hover { color: var(--lime-dark); }
.solution-caption span { font-size: var(--fs-xs); color: var(--muted); }

/* ==========================================================================
   13. BRANDS
   ========================================================================== */
.brand-block {
    height: 100%;
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 26px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}
.brand-plate {
    flex: 0 0 176px;
    display: grid; place-items: center;
    min-height: 104px;
    padding: 10px 20px 10px 0;
    border-right: 1px solid var(--line);
}
.brand-plate img { max-height: 58px; max-width: 140px; width: auto; object-fit: contain; }
.brand-body { flex: 1 1 240px; padding-top: 2px; }
.brand-body h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
.brand-body p { font-size: var(--fs-sm); margin-bottom: 14px; }

.text-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--lime-dark);
}
.text-link i { transition: transform .25s var(--ease); }
.text-link:hover { color: var(--ink); }
.text-link:hover i { transform: translateX(4px); }

/* ==========================================================================
   14. MARQUEE — outlined lime lettering, as the theme's strip
   ========================================================================== */
.marquee {
    background: #fff;
    padding: 30px 0;
    overflow: hidden;
    border-top: 1px solid var(--line);
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 32s linear infinite;
}
.marquee-track span {
    font-family: var(--font-head);
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.15;
    padding: 0 26px;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--lime);
    white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   15. CTA BAND
   ========================================================================== */
.cta-band { background: var(--ink); color: #fff; padding: 70px 0; }
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 60ch; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .70); font-size: var(--fs-sm); }

/* Contact strip across the top */
.footer-strip { border-bottom: 1px solid rgba(255, 255, 255, .10); padding: 34px 0; }
.footer-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer-strip-item { display: flex; align-items: center; gap: 18px; }
.footer-strip-item .ico {
    flex: 0 0 58px; width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff; font-size: 1.5rem;
}
.footer-strip-item strong {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-base);
    color: #fff;
    margin-bottom: 2px;
}
.footer-strip-item a, .footer-strip-item span { color: rgba(255, 255, 255, .72); }
.footer-strip-item a:hover { color: var(--lime); }

.footer-main { padding: 70px 0 40px; }

.footer-logo-plate {
    display: inline-block; background: transparent;
    border-radius: var(--radius-md); padding: 0; margin-bottom: 10px;
}
.footer-logo-plate img { height: 75px; width: auto; display: block; filter: brightness(100); }
.footer-about p { font-size: 1rem; color: rgba(255, 255, 255, .70); }

.footer-title {
    font-family: var(--font-head);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: #fff;
    margin-bottom: 24px;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.footer-links a {
    display: flex; align-items: baseline; gap: 11px;
    color: rgba(255, 255, 255, .70);
}
.footer-links a::before {
    content: ""; flex: 0 0 6px; height: 6px;
    border-radius: 50%; background: var(--lime);
    transform: translateY(-2px);
}
.footer-links a:hover { color: var(--lime); }

.footer-badge {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    display: block;
    max-width: 280px;
}
.footer-badge img { width: 100%; height: auto; display: block; }
.footer-badge-note { font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); margin-top: 14px; }

.footer-social { display: flex; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.footer-social a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .8);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.footer-social a:hover { background: var(--lime); color: var(--ink); }

/* Lime copyright pill, as the theme */
.footer-bottom { padding: 0 0 40px; }
.footer-bottom-inner {
    background: var(--lime);
    border-radius: var(--radius-pill);
    padding: 18px 34px;
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    font-size: var(--fs-sm);
}
.footer-bottom-inner a { color: var(--ink); font-weight: 500; }
.footer-bottom-inner a:hover { color: #fff; }

/* ==========================================================================
   17. INNER PAGE BANNER
   ========================================================================== */
.page-banner {
    position: relative;
    background: var(--ink);
    padding: 210px 0 90px;
    color: #fff;
}
.page-banner::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 78% 22%, rgba(140, 224, 92, .16), transparent 58%);
}
.page-banner > .container { position: relative; z-index: 2; text-align: center; }
.page-banner-title { color: #fff; font-size: var(--fs-4xl); margin-bottom: 12px; }
.page-banner-text {
    color: rgba(255, 255, 255, .84); font-size: var(--fs-lg);
    max-width: 62ch; margin: 0 auto 20px;
}

.page-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
    list-style: none; margin: 0; padding: 0;
    font-size: var(--fs-sm); color: rgba(255, 255, 255, .72);
}
.page-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, .38); }
.page-crumbs a { color: rgba(255, 255, 255, .84); }
.page-crumbs a:hover { color: var(--lime); }

/* ==========================================================================
   18. FORMS
   ========================================================================== */
.volos-form .form-label {
    font-family: var(--font-head); font-size: var(--fs-sm);
    font-weight: 500; color: var(--ink); margin-bottom: 7px;
}
.volos-form .form-label .req { color: #C0392B; }
.volos-form .form-control, .volos-form .form-select {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: var(--fs-sm);
    color: var(--ink);
}
.volos-form .form-control::placeholder { color: var(--muted); }
.volos-form .form-control:focus, .volos-form .form-select:focus {
    border-color: var(--lime); box-shadow: 0 0 0 4px rgba(140, 224, 92, .22); outline: none;
}
.volos-form textarea.form-control { min-height: 130px; resize: vertical; }
.form-note { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

.form-alert { border-radius: var(--radius-md); padding: 14px 18px; font-size: var(--fs-sm); margin-bottom: 22px; }
.form-alert-success { background: var(--lime-soft); border: 1px solid #BFE3BA; color: #1E6B22; }
.form-alert-error   { background: #FCEDEC; border: 1px solid #F0C2BE; color: #A03028; }

.form-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 34px;
}

/* ==========================================================================
   19. BACK TO TOP
   ========================================================================== */
.back-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 1050;
    isolation: isolate; /* own stacking context, so the fill's z-index:-1 behaves */
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--lime); color: var(--ink);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    overflow: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s,
                color .3s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 0;
    background: var(--ink);
    z-index: -1;
    transition: width .4s var(--ease);
}
.back-to-top:hover { color: var(--lime); }
.back-to-top:hover::before { width: 100%; }

/* ==========================================================================
   20. INNER PAGES
   ========================================================================== */

/* --- Mission / vision panels --- */
.mv-panel {
    height: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 38px 34px;
    box-shadow: var(--shadow-sm);
}
.mv-panel.is-dark { background: var(--ink); }
.mv-panel.is-dark h3, .mv-panel.is-dark p { color: #fff; }
.mv-panel.is-dark p { color: rgba(255, 255, 255, .82); }

.mv-icon {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff;
    font-size: 1.6rem;
    margin-bottom: 22px;
}
.mv-panel.is-dark .mv-icon { background: var(--lime); color: var(--ink); }
.mv-panel h3 { font-size: var(--fs-xl); margin-bottom: 12px; }
.mv-panel p { font-size: var(--fs-sm); margin: 0; }

/* --- Value / reason cards --- */
.value-card {
    height: 100%;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-icon {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime-soft); color: var(--lime-dark);
    font-size: 1.5rem;
    margin-bottom: 20px;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}
.value-card:hover .value-icon { background: var(--lime); color: #fff; }
.value-card h3 { font-size: var(--fs-lg); margin-bottom: 10px; }
.value-card p { font-size: var(--fs-sm); margin: 0; }

/* --- Lime variant, used for Our Values on about.php --------------------
   Lime card with ink text, flipping to an ink card on hover. The icon tile
   is white with its glyph painted in whatever the card's current background
   is, so it reads as a knockout of the card colour and stays consistent
   through the hover change. */
.value-card--lime {
    background: var(--lime);
    transition: background-color .3s var(--ease), transform .3s var(--ease),
                box-shadow .3s var(--ease);
}
.value-card--lime h3,
.value-card--lime p { color: var(--ink); transition: color .3s var(--ease); }
.value-card--lime .value-icon { background: #fff; color: var(--lime); }

.value-card--lime:hover { background: var(--ink); }
.value-card--lime:hover h3 { color: var(--volos-teal); }
.value-card--lime:hover p { color: rgba(255, 255, 255, .82); }
.value-card--lime:hover .value-icon { background: #fff; color: var(--ink); }

/* Numbered variant, used on Why Choose Volos */
.value-card.is-numbered { position: relative; padding-top: 40px; }
.value-num {
    position: absolute;
    top: 26px; right: 30px;
    font-family: var(--font-head);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1;
    color: var(--lime-soft);
}

/* --- Brand detail rows --- */
.brand-detail { scroll-margin-top: 130px; }
.brand-detail-media img {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
}
.brand-detail-logo {
    display: inline-grid; place-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px 26px;
    margin-bottom: 24px;
}
.brand-detail-logo img { max-height: 54px; max-width: 170px; width: auto; }

.brand-subhead {
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 26px 0 12px;
}
.brand-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.brand-points li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs-sm); }
.brand-points i { color: var(--lime-dark); font-size: 1.15rem; line-height: 1.5; }

.brand-products { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.brand-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--lime-soft);
    color: var(--ink);
    font-family: var(--font-head);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.brand-chip:hover { background: var(--lime); color: var(--ink); }

/* --- Distributor callout --- */
.distributor-callout {
    display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
    background: var(--ink);
    border-radius: var(--radius-lg);
    padding: 44px;
    color: #fff;
}
.distributor-callout .plate {
    flex: 0 0 300px;
    background: #fff;
    border-radius: var(--radius-md);
    padding: 20px 26px;
}
.distributor-callout .plate img { width: 100%; height: auto; display: block; }
.distributor-callout h2 { color: #fff; }
.distributor-callout p { color: rgba(255, 255, 255, .82); margin: 0; }
.distributor-callout .body { flex: 1 1 320px; }

@media (max-width: 767.98px) {
    .distributor-callout { padding: 28px; gap: 26px; }
    .distributor-callout .plate { flex: 1 1 100%; }
    .mv-panel { padding: 28px 24px; }
    .value-card { padding: 28px 24px; }
}

/* ==========================================================================
   21. DETAIL PAGES — product and solution
   ========================================================================== */

/* Anchored segment blocks on the products hub */
.segment-block { scroll-margin-top: 130px; }
.segment-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
    margin-bottom: 36px;
}
.segment-head .ico {
    flex: 0 0 62px; width: 62px; height: 62px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff; font-size: 1.6rem;
}
.segment-head h2 { margin: 0 0 4px; font-size: var(--fs-2xl); }
.segment-head p { margin: 0; font-size: var(--fs-sm); max-width: 58ch; }

/* Hero image on a detail page */
.detail-hero img {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
    margin-bottom: 34px;
}

.detail-body h2 { font-size: var(--fs-2xl); margin-bottom: 16px; }
.detail-body h3 { font-size: var(--fs-xl); margin: 34px 0 14px; }
.detail-body .lead-text { margin-bottom: 26px; }

/* Benefit list */
.benefit-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.benefit-list li {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--tint);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-size: var(--fs-sm);
}
.benefit-list i { color: var(--lime-dark); font-size: 1.2rem; line-height: 1.45; }

/* Pull-quote style conclusion */
.detail-conclusion {
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 30px 34px;
    display: flex; gap: 20px; align-items: flex-start;
}
.detail-conclusion i { color: var(--lime); font-size: 1.6rem; line-height: 1.4; }
.detail-conclusion p {
    margin: 0;
    color: rgba(255, 255, 255, .92);
    font-size: var(--fs-lg);
}

/* --- Sidebar --- */
.sidebar { display: grid; gap: 26px; position: sticky; top: 110px; }

.side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.side-card h3 {
    font-size: var(--fs-lg);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.side-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    background: var(--tint);
}
.side-list a i { color: var(--lime-dark); transition: transform .25s var(--ease); }
.side-list a:hover { background: var(--lime); color: var(--ink); }
.side-list a:hover i { transform: translateX(3px); color: var(--ink); }
.side-list a.is-current { background: var(--ink); color: #fff; }
.side-list a.is-current i { color: var(--lime); }

.side-card.is-cta { background: var(--ink); border-color: var(--ink); color: #fff; }
.side-card.is-cta h3 { color: #fff; border-bottom-color: rgba(255, 255, 255, .16); }
.side-card.is-cta p { color: rgba(255, 255, 255, .82); font-size: var(--fs-sm); }

.side-contact { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.side-contact li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); }
.side-contact i { color: var(--lime); font-size: 1.05rem; line-height: 1.6; }
.side-contact a { color: rgba(255, 255, 255, .82); }
.side-contact a:hover { color: var(--lime); }

.side-brand { display: grid; place-items: center; padding: 6px 0 2px; }
.side-brand img { max-height: 50px; max-width: 150px; width: auto; }

/* --- Related strip --- */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 991.98px) {
    .sidebar { position: static; margin-top: 44px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .related-grid { grid-template-columns: 1fr; }
    .segment-head { gap: 14px; }
    .detail-conclusion { padding: 24px; }
    .side-card { padding: 22px; }
}

/* ==========================================================================
   22. FORM VALIDATION STATES
   ========================================================================== */
.volos-form .form-control.is-invalid,
.volos-form .form-select.is-invalid {
    border-color: #D9534F;
    background-image: none;   /* Bootstrap's icon crowds our padding */
}
.volos-form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(217, 83, 79, .16);
}
.field-error {
    font-size: var(--fs-xs);
    color: #C0392B;
    margin: 7px 0 0;
}

/* ==========================================================================
   23. CONTACT PAGE
   ========================================================================== */
.contact-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    text-align: center;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.contact-card .ico {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--lime); color: #fff;
    font-size: 1.6rem;
}
.contact-card h3 { font-size: var(--fs-lg); margin-bottom: 10px; }
.contact-card p, .contact-card a {
    font-size: var(--fs-sm);
    color: var(--body);
    margin: 0;
    display: block;
    word-break: break-word;
}
.contact-card a:hover { color: var(--lime-dark); }

.map-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    line-height: 0;
    box-shadow: var(--shadow-sm);
}
.map-frame iframe { width: 100%; height: 460px; border: 0; display: block; }
.map-placeholder {
    display: grid; place-items: center;
    height: 300px;
    background: var(--tint);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
    padding: 24px;
}

/* ==========================================================================
   24. THANK YOU
   ========================================================================== */
.thanks { text-align: center; max-width: 620px; margin: 0 auto; }
.thanks-icon {
    width: 96px; height: 96px;
    margin: 0 auto 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--lime); color: #fff;
    font-size: 2.6rem;
}
.thanks-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

@media (max-width: 767.98px) {
    .map-frame iframe { height: 320px; }
    .contact-card { padding: 26px 22px; }
}

/* ==========================================================================
   25. PRODUCT CAROUSEL (Owl Carousel)
   Always initialised as a carousel; main.js decides per breakpoint whether
   nav/dots are shown, based on whether the card count actually exceeds what
   fits at that width. When everything fits, .owl-is-static hides them and it
   reads as an ordinary row.
   ========================================================================== */
.product-carousel .product-card { height: 100%; }

.product-carousel .owl-stage-outer {
    /* Let card hover (lift + shadow) bleed vertically without being clipped
       by Owl's own overflow:hidden. Vertical only — horizontal padding here
       throws off Owl's own width measurement of this element and was the
       actual cause of a several-pixel horizontal overflow at some widths. */
    padding: 6px 0 34px;
    margin: -6px 0 -34px;
}

.product-carousel .owl-nav button.owl-prev,
.product-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.product-carousel .owl-nav button.owl-prev { left: -26px; }
.product-carousel .owl-nav button.owl-next { right: -26px; }
.product-carousel .owl-nav button:hover { background: var(--lime); color: var(--ink); }
.product-carousel .owl-nav button.disabled {
    opacity: .35;
    pointer-events: none;
}

.product-carousel .owl-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 36px;
}
.product-carousel .owl-dot span {
    display: block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--line);
    transition: background-color .25s var(--ease), width .25s var(--ease);
}
.product-carousel .owl-dot.active span {
    background: var(--lime);
    width: 28px;
    border-radius: 6px;
}

/* Nothing to slide at this breakpoint — read as a plain row */
.product-carousel.owl-is-static .owl-nav,
.product-carousel.owl-is-static .owl-dots { display: none; }

@media (max-width: 767.98px) {
    /* Arrows crowd a single-column mobile slide; dots plus swipe are enough */
    .product-carousel .owl-nav { display: none; }
}